プログラミング

【初心者向け】完全未経験者が3ヶ月でエンジニアになる方法 後編

【初心者向け】 完全未経験者が3ヶ月でエンジニアになる方法 後編

今回は前回記事「【初心者向け】完全未経験者が3ヶ月でエンジニアになる方法 前編」のつづきのお話です。

今回の記事で話すこと

後編の概要
  • 簡単なもので良いから自分の作りたいものを考えて実際に作ってみる
  • 「うまく動かない」→「調べて解決」→「うまく動かない」→「調べて解決」… を繰り返して、調べる力(問題解決能力)を身につける
  • 3ヶ月のなかの各学習フェーズ(Webの場合)

作りたいものを実際に作ってみる

30~40%理解したら作りたいものを考えて作り始める

前回の「基礎を学習する」で勉強した知識を使って実際に作りたいものを作り始めます。

このとき30~40%くらいなんとなく理解してるかなと思ってるくらいで見切り発車して大丈夫です。

むしろ学習サイトのチュートリアルや、本を最後までやってから作り始めようとすると最初の頃に学んだことを忘れてしまい、忘れたところを勉強するの繰り返しになり中々作り始めることが出来ません。

英会話を例にしましょう。

英語の基礎学習とは英単語基本5文系(文法)の勉強になります。

ほとんどの人は中学・高校と6年間英語を学んできました。しかし周りで英語をペラペラ話せる人はそこまで多くはないのかなと思います。
(「How are you?」「I’m fine thank you. And you?」は完璧かと思いますw)

リーディングとライティングはなんとなく出来るけどスピーキングは苦手というのは、

基礎学習はやってきたけど英語で話すという実践をあまりやってこなかったからです。

プログラミングも英語と同じように「言語」であるので、実際に使わないとスラスラと使えるようになりません。

日本語でも辞書や広辞苑に載っている言葉を全て頭の中に入っていなくても、問題なく日常会話は出来ますよね?

また、知らない単語が出てきたとしても辞書やGoogleを使って言葉の意味を都度調べれば良いだけです。

  • コードを書く = コンピューターと日常会話をする
  • 英会話は実際に普段から話さないと出来ないのと同じように、プログラムも普段から書く必要がある

トライ&エラーを繰り返して1つずつ出来ることを増やす

学習

特に目的も持たずに勉強してもゴールがないため達成感がなく挫折しがちです。

そのために作りたいのを決めることで目標が定まり、その目標を実現するためにどんなことをやる必要があるのか小さなステップに落とし込むことが出来ます。

一例を上げると下記の通りになります。

おみくじが出来るWebサービスを作る
  1. Webページのイメージをラフな絵でノートに書き出す
  2. HTMLでおみくじ筒とボタンをWebページ上に配置する
  3. CSSを使ってWebページをノートに書き出したラフ絵に近づける
  4. ボタンを押したらでおみくじ筒が振るアニメーションを行う(JavaScript、CSS)
  5. おみくじ筒を振り終わったら結果を出す(JavaScript)

このように小さなステップに分けたらあとはそれを実行するだけです。

現在どこまで進んでいるのかも把握出来るのと、1つずつステップを達成することで小さな成功体験から喜びを感じ挫折する確率をぐっと下げることが出来ます。

小さなステップに分けた中でも基礎学習ではやってこなかったことも当然出てきます。

上記の例の中だと④の「ボタンを押したらでおみくじ筒が振るアニメーションを行う」は基礎学習で出てこないと思います。

実際の開発ではこういうことはよくあり、ここで重要なのは検索能力になります。

この検索能力もプログラミングと同様に場数を増やすことで向上していきます。

今回の場合アニメーション方法を検索したので以下のように検索することになりそうです。

アニメーションを実現したい時に検索例
  • 「アニメーション Web 方法」
  • 「JavaScript アニメーション やり方」
  • 「CSS アニメーション 実装」

実際に上記内容で検索すると色々アニメーションの実装方法に関する記事が見つかるかと思います。

検索で見つかったページを参考にして、

「これで実現できるかも」→「思ったのと違った」→「これはどうだろうか」→「今回はこれで行こう」

のプロセスを何度も繰り返して1つずつ知識が蓄えられていき出来ることが増えていきます。

「学習サイトのチュートリアルをこなす」、「本を最初から最後までこなす」だけではこのスキルは身につきません。

そしてこの検索能力こそが実際にプログラミングをする上でとても重要になってきます。

  • 目標(作りたいもの)を決めて、目標を実現するために作業を小さなステップに分ける
  • わからないことが出てきたら、うまく言葉を組み合わせて目的の記事を見つけ出す(検索能力)
  • 検索能力もプログラミングをする上で重要なスキルとなる
  • トライ&エラーを繰り返すことで知識が積み重なり出来ることが増えていく

3ヶ月のなかの各学習フェーズ(Webの場合)

ステップアップ

1ヶ月目の内容

1ヶ月目
  • 1週目: HTML、CSSの概要を理解する
  • 2~3週目: JavaScriptの基礎を学習する
  • 4週目: JavaScriptでHTMLの内容を変更できるようになる

フロントエンド技術を身につけるための勉強をします。

実際に作りたいものを作れるようになるために最低限の知識をこの1ヶ月で身につけます。

HTML、CSSは以下のポイント下記のとおりです。

  • HTMLタグにはどんなものがあるのかざっくり把握する(div, a, imgなど)
  • HTMLタグの中に書くid、 classでどんなことが出来るか理解する(CSSとの連携)
  • CSSでどんなことが出来るか理解する(ヘッダーやメニューなどの配置や色・サイズの変更など)
  • Webページでよく見るレイアウト(ヘッダー、メニュー、メインコンテンツ、サイドバー)をHTMLとCSSを使って実際に作ってみる(以下の画像)
Webページ構造

JavaScriptの場合は以下のようになります。

  • 以下の「最初に覚える基礎文法」を学習する
  • JavaScriptを使ってHTML、CSSと連携する方法を学習する
  • 実際にHTMLとJavaScriptを連携してみる(ボタンをクリックしたら背景色を変えるなど)
最初に覚える基礎文法
  • 変数
  • 型(数値、文字列など)
  • 関数
  • 条件分岐
  • ループ処理

2ヶ月目の内容

2ヶ月目(フロントエンド)
  • 1~2週目: 作りたいものを考えて、実際に作る(1つ目)
  • 3~4週目:作りたいものを考えて、実際に作る(2つ目)

1ヶ月目で学習した知識を使って実際にWebアプリケーションを作ります。

先程の例でもあげた「おみくじアプリ」などは比較的かんたんに作りやすいので、まずはここから作り始めると良いでしょう。

その際はさきほどのまとめた小さなステップが役に立つかと思います。

おみくじが出来るWebサービスを作る
  1. Webページのイメージをラフな絵でノートに書き出す
  2. HTMLでおみくじ筒とボタンをWebページ上に配置する
  3. CSSを使ってWebページをノートに書き出したラフ絵に近づける
  4. ボタンを押したらでおみくじ筒が振るアニメーションを行う(JavaScript、CSS)
  5. おみくじ筒を振り終わったら結果を出す(JavaScript)

わからないところは検索しながら対応していき、検索能力の向上もしていく段階です。

上記の例では1~2週目に1つ、3~4週目に1つとありますが、

1週間で1つ作れてしまったら3個、4個と作ってしまって全く構わないです。

数をこなした分だけWebサービスを作る力が身につきますし、検索能力も断然付きます。

3ヶ月目の内容

3ヶ月目(バックエンド)
  • 1~2週目: Webフレームワークを学ぶ
  • 3週目: データベースを学ぶ
  • 4週目: 掲示板サイトを作ってみる

3ヶ月目は1~2ヶ月目と比べると一気に難易度が上がりますが、JavaScriptにもだいぶ慣れてきているので十分乗り越えるだけの力は既に持っています。

1~2週目の「Webフレームワークを学ぶ」とありますが、これはもちろんサーバーサイド側のプログラミング言語を知っている前提になります。

Webフレームワークという言葉を初めて聞いた方のために説明しますと、

Webサービスというのはどのサービスも以下のような機能を兼ね備えています。

  • ユーザーの新規作成
  • データ投稿(ブログ記事、Twitter、Facebookの投稿など)
  • ユーザーのリクエストに応じて対応するデータを返す

これらの機能をまとめたものをWebフレームワークといいます。

みんなが使いたい機能をそれぞれが作るのは非効率ですし、みんな共通のものを利用したほうが、

なにか問題に直面したときも、それは既に別の誰かが解決していることが多いのでインターネットで探せば解決しやすいのです。

サーバーサイドの言語で有名なところはPHPやRubyがありますが、今ではJavaScriptもサーバーサイド言語として一般的になってきました。

余談ですが、ぼく自身フリーランスの受託案件としてサーバーサイドをJavaScriptを使っています。

ここで言いたいのはJavaScriptを覚えればフロントエンドもバックエンドも開発が出来るようになる。

つまりフルスタックエンジニアになれるということです。

JavaScriptで有名なフレームワークだと「Express」というものがあります。

おそらくこのWebフレームワークを学ぶ段階で壁にぶち当たることが一気に増えることでしょう。

今まで身につけたJavaScriptの知識だけでなく、メンターに質問するなども駆使することで乗り越えられます。

もちろんぼくに質問してもらうでも全然OKです!

お問い合わせ」より質問してもらえたらと思います^^

 

3週目には「データベース」を学び、データベースでどんなことが出来るのか理解します。

データベースは主に「MySQL」というものを学べば良いと思います。

ここまで培ってきた検索能力とメンターを活用して最低限の機能は1週間で十分覚えられます。

最低限覚えておくべきデータベース知識
  • MySQLの使い方
  • データの保存方法
  • データの検索方法
  • データの更新方法
  • データの削除方法

 

そして最後の週にWebフレームワーク・データベース・1~2ヶ月目で学んだフロントエンドの知識をフル動員して、

「投稿」・「閲覧」・「編集」・「削除」ができるシンプルな簡易掲示板を作ってみましょう。

Webページの見た目はこだわらなくて良くて、あくまでもここではWebフレームワーク・データベースを使ったWebアプリケーションを作れるようになることが目的です。

簡易掲示板が作れるようになったら基本的なWebサービスを一人で作れるようになったことになります。

  • 1ヶ月目はフロントエンドの基礎を学習する
  • 2ヶ月目はフロントエンド知識だけで出来る簡単なWebアプリケーションを作る
  • 3ヶ月目はバックエンドの基本を学習して簡単な掲示板サービスを作ってみる

まとめ

前回記事「【初心者向け】完全未経験者が3ヶ月でエンジニアになる方法 前編」に引き続き、今回の後編ではWebサービスが作れるようになるまでの学習方法を話していきました。

目標を作り、それを小さなステップに分解して1つずつ解決していくことでエンジニアスキルが身につくことがわかったかなと思います。

もう少し具体的に知りたい場合は、コメント欄にコメントしていただくか「お問い合わせ」よりご連絡をいただけたらと思います。

【やる気満々な方向け】学習サポートとオンライン講義やってます!

Webエンジニアになりたい人向けに、MENTAにて『【やる気満々な方向け】未経験からのWebエンジニア育成コース』というプランを用意しております。

このプランでは、「【学習コンテンツ】Web開発」と「【初心者向け】The Web Developer Bootcamp」で紹介している教材を使って学習を進めていただきます。

【学習コンテンツ】Web開発」に用意している学習コンテンツのスライドも「【初心者向け】The Web Developer Bootcamp」で紹介している教材をベースに作っています。

あわせて読みたい
【初心者向け】The Web Developer Bootcampはじめに 「The Web Developer Bootcamp」はWeb白熱教室の「学習コンテンツ」のベースとなっている教材です。 ...
あわせて読みたい
Web開発Webエンジニアになるために必要な知識・スキルを学習できるコンテンツを用意しました。未経験者でも、①開発環境の準備、②Webの基本的な仕組み、③HTML、④CSS、⑤JavaScriptと順を追って学習することでスキルが身につくことを目的に教材を作成しています。...

誰向けのプラン?

こちらのプランは次のような方に向けて作られています。

プラン対象者
  1. Progateやドットインストールで一通り学習したけど、次に何をすればよいかわからない
  2. Webエンジニアになるまでの学習プランがあると助かる
  3. 学習していてわからないところが出てきたときに質問したい
  4. コードレビューして欲しい
  5. オンライン講義に参加したい
  6. 学習した内容をアウトプットした際に、フィードバックがもらえたら嬉しい
  7. おすすめの学習教材を知りたい
  8. Webフロントエンド・バックエンドを学習したい
  9. フルスタックエンジニアになりたい
  10. 文系出身で今までプログラミングをしてこなかったけど、将来Webエンジニアになりたい
  11. 将来フリーランスになることを目指している

プラン内容は?

【やる気満々な方向け】未経験からのWebエンジニア育成コース』では次のことを行っております。

プラン内容
  1. Udemyの教材や、Web白熱教室の学習コンテンツを使った学習プランの提示 (学習プランに沿って学習を進めていただきます。)
  2. 教材・学習コンテンツの課題をこなしたあとは、僕にコードレビュー依頼を投げていただくことで、コードを添削する(課題クリア後は、引き続き学習プランの内容を続けていただきます。)
  3. プラン契約者が参加するSlackグループにて質問し放題
  4. Slack内にある「アウトプットの場」チャンネルにて、学習したことをアウトプットをしていただくことで、それに対しフィードバックをする (学習内容のアウトプットは復習にもなるため、アウトプットすることを強く推奨します。)
  5. 画面共有を使ったオンライン講義 (オンライン講義は録画して、いつでもふり返れるようにしています。(オンライン講義動画(ウェビナー動画)))
  6. 学習プラン以外の内容に対しての質疑応答 (内容によっては回答できないものもありますが、まずは気軽に質問していただけたらと思います。)

その他注意点

1人で対応していることもあるため、対応が難しくなった場合は急遽募集を終了する可能性もあることをご了承ください。

もしくは、僕以外にメンターを増やすことで募集を継続するということも考えているため、その場合は現在のプラン料金の値段を上げることなると思います。

仮にプラン料金を上げる場合は、『現在のプラン料金 × メンター人数』の料金になるかと思います。

現在の値段が5000円なので、1日1本ペットボトルジュースを買うのを我慢することで(約160円)、効率よく学習できるので費用対効果はかなり高いかなと自負しています。

また、今後メンターが増えて、プラン料金が10000円15000円と上がったとしても、月々の料金は申し込んだときの料金となるので、5000円のときに契約した場合はずっと5000円で受講することができます。

詳しく話を聞いてみたい方は

以下のいずれかでメッセージをいただけたらと思います^^

 

プラン内容については以下のリンク先からも確認することが出来ます^^

【やる気満々な方向け】未経験からのWebエンジニア育成コース

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です