【完全独学】プログラミング未経験からWebエンジニアになるための勉強手順【簡単4ステップ】
Webエンジニアを目指すに当たって
『どのように学習をすればいいのか分からない…』
『参考書を読んでも頭に入らない…』
などといった悩みをお持ちの方は多いと思います。
私自身、プログラミング学習を始めた当初はこのような悩みを常に抱えていました。
今回はそのような方々に向けて、現役エンジニアの私が本当におすすめする『独学でWebエンジニアになるための簡単4ステップ』をご紹介したいと思います。
Webエンジニアになるために必要なもの
Webエンジニアになるためには『ポートフォリオ』は必須になります。
ポートフォリオとは、実績や能力を評価してもらうための『オリジナル作品』のことです。
ポートフォリオを制作する事で、面接の際に大きなアドバンテージを得ることができます。
では実際にどのようなポートフォリオを制作すればいいのでしょうか？
それは『基本的な機能が備わっているWebサービス』になります。
本記事では、ポートフォリオ制作までの学習手順を1から説明しており、実際に私が就職活動時に制作したポートフォリオもご紹介しているのでぜひ参考にしてみて下さい。
【学習手順1】 Progateでプログラミングの基礎を習得する
Progateとは、プログラミングをゲーム感覚で学習できるサイトです。
プログラミング初心者の方でも挫折せずに楽しく続けられるよう様々な工夫がされています
私がプログラミング学習の第１歩としてこのサイトをおすすめする理由は以下の2点です。
環境構築をする必要がない
プログラミング未経験だと、環境構築がうまくできずに、プログラミングを書く前に挫折してしまうといった方も多いです。
Progateでは、環境構築せずにすぐにプログラミングを実践できるため、初心者に優しいサービスとなっています。
Webサイトを制作しながら学ぶ
一般的な学習サイトの場合、言語の特性について詳しく説明される事が多く、結局どの場面で使われているのかよく分からない事が多々あります。
しかし、ProgateではWebサイトを制作しながらプログラミングを学習するため、実際に使えるスキルを実践的に身につける事ができます。
以上の理由から、始めにProgateで学習をすることをおすすめします。
では、実際にProgateでどのように学習を進めていくのか説明したいと思います。
Progate おすすめ学習手順
まずは Web制作の基本となるHTML/CSSを学習しましょう。
HTML/CSSとは、簡単に言うと『Webサイトの見た目を作る言語』です。
このコースを受講することで『どのような仕組みでWebサイトが作られているのか』大まかに理解できると思います。
HTML/CSSを学習することでWebページの見た目を作ることはできますが、これだけではWebページの動的な処理ができません。
例えばネットショッピングで購入した商品の種類や数によって確認画面で表示される内容が変わります。これらは動的な言語によって実現されているのです。
動的な言語は【PHP・Ruby・Java】など様々な言語がありますが、初学者の方はPHP一択でしょう。
PHPは構文が理解しやすいため、プログラミング未経験の方でも扱いやすい言語です。
また、PHPは扱っている人口が非常に多いため、独学で勉強して困ったことがあっても、インターネット上で検索をかければ比較的すぐに答えを見つけられます。
このコースを受講することで『Webページがどのように動いているのか』大まかに理解できると思います。
Progateでの学習手順は以上になります。
『コースを一周しただけでは、理解できていない部分が多い…』という方が多いと思います。
ですが大丈夫です！私自身もそうでした。
どんなに優秀なエンジニアでも、開発中に言語の特性を忘れ、インターネットで調べるというのは日常茶飯事です。
後で分からないことがあったらまたその部分を見直せばいいのです。
まずは、ここまでの学習で学んだ知識を生かし、簡単なサイトを自分で制作してみましょう。
その過程で『わからないことがあったら調べる』を繰り返すことが、プログラミング学習において一番の学びとなります。
【学習手順2】PHPフレームワークを学習する
次にPHPフレームワークのLaravelを学習します。
フレームワークとは、さまざまなシステム開発を効率化してくれる機能群のことです。フレームワークを利用することで、複雑なWebサイトをより短いコードで分かりやすく開発することができます。
簡単なWebサイトであればフレームワークを使う必要性はあまりないのですが、より充実したポートフォリオを制作するためにも、PHPのフレームワーク『Laravel』を学習する必要があるのです。
初心者におすすめの参考書は、PHPフレームワーク Laravel入門になります。
本書では、Laravelを使いこなせるよう段階的な方法で丁寧に教えてくれています。
私自身、初めて『フレームワーク』というものを学習しましたが、この1冊でLaravelの基本的な使い方を全て理解することができました。
これからLaravelを始めるという方には本書が最適です。
ここまで学びましたら、後はポートフォリオの制作です!!
【学習手順3】ポートフォリオを制作する
最後はポートフォリオの制作です。これまで身につけた知識を存分に活かして、オリジナルのWebサイトを制作しましょう。
ただ、どんなポートフォリオを制作すれば良いのかいまいちわからない方も多いと思います。
私は『僕のエンジニアとしてのポートフォリオを紹介します』を参考にし、ポートフォリオを制作しました。
ポートフォリオで実装すると良い機能は次のようになっております。
- 記事一覧表示機能
- 記事詳細表示機能
- 記事投稿機能
- 管理ユーザ登録機能
- 管理ユーザログイン機能
- 画像ファイルのアップロード機能
- DBテーブルのリレーション管理
- DBトランザクションの制御機能
- ページネーション機能
- 単体テスト機能
- 統合テスト機能
何がなんだかわからないですよね…。
これらは全てWebサービスの基本的な機能となっており、多くのWebサービスで実装されています。
実際に自分で、Webサービスの一つ一つの機能がどのような仕組みで動いているのか理解することができ、面接の際にもアピールすることができるのです。
私が当時制作したサイトは、イラスト投稿サイト【Selfmade】になります。
使用言語は【HTML/CSS・PHP(Laravel)・JavaScript(Vue)】です。
こちらのポートフォリオでは、基本機能に加えて『いいね機能』『フォロー機能』も実装したかったので、『JavaScript』を使用しました。
もし『ブラウザ上で動作するような機能も実装したい』という方は、JavaScript言語も学び組み込むことをおすすめします。
学習手順1でのProgateでコースとして用意されているので、興味のある方はぜひチャレンジしてみて下さい。
残るは就職活動・転職活動のみ
ポートフォリオが完成したら、残るは就職/転職活動のみです。独自のポートフォリオを存分に面接官にアピールしましょう！
私がおすすめする求人サイトはWantedly（ウォンテッドリー）です。
このサイトでは、モダンな技術を扱っているWeb系自社開発企業が多く掲載されており、【職種・扱っている技術・プログラミング言語】などから企業を検索することも可能です。
ひたすら気になる企業に応募し、面接に挑みましょう。
ただこちらの方法の場合、自分で書類の添削や面接対策を行わなければならないので注意が必要です。
もし『自分だけの対策だと不安』という方は、レバテックキャリア
で無料の転職支援を行っているので活用することをおすすめします。
まとめ
いかがでしたでしょうか？
Webエンジニアという職種は人気が上昇しているため、今後さらに狭き門になっていくと考えられます。
しかし、独自のポートフォリオを制作し、自信を持って面接官にアピールすることで内定を勝ち取ることは十分可能だと思います。
プログラミングはとにかく手を動かし、アウトプットすることが大切です。ぜひ今回紹介した学習方法をお試しください！
