【2019年版】未経験からWebエンジニアになるための学習方法をSTEPごとに解説
Table Of Contents
こんにちは、たわです！
僕は 2 年前にエンジニアに転職しました。そのときの経験や２年間エンジニアとして働いた経験を踏まえて考えた、「エンジニア転職やっておくべきこと」を解説します。
2 年前に実際にやったことはこちらに書いています！
IT のエンジニアといっても色々あります。Web 系もありますし AI を活用したりデータサイエンスの文脈でエンジニアリングする人もいます。さらにはブロックチェーンを使った開発をすることもあり、分野も多岐にわたります。
ですが、今回は一般的な Web 開発を行うエンジニアになるという前提で書いていきます。
わかりやすく STEP に分けて説明していければと思います！
このとおりに順番に勉強していけばエンジニア転職に近づけると思いますので参考にしてみてください。
STEP1：最低限の基礎知識をつける
まずは最低限の予備知識をつけましょう。
何も知らなくてもとりあえず動くものが作れてしまうほどに便利になってしまいましたが、やはり背景を知っていることによるメリットも大きいです。
- 効率的に勉強できる
- 深く理解することに繋がる
こうしたメリットがあるので、少し遠回りに見えるかもしれないですが最初にやっておくことをお勧めします。
IT パスポートの知識をインプットする
IT パスポート（略して、i パス）という資格試験があります。
ｉパスは、IT を利活用するすべての社会人・これから社会人となる学生が備えておくべき、IT に関する基礎的な知識が証明できる国家試験です。
IT に関する知識が網羅的にまとまっているので、知識を広く浅く身に付けるのに最適な教材です！
実際に資格を取る必要はありませんが、読んで置くだけでもだいぶ違います。覚えなくて全然よいですが、一度理解しておくとよいでしょう。
PDF が付いてくるこの書籍がお勧めです。スマホとかタブレットでスキマ時間に見ていくとさくっと読めると思います！
STEP2：HTML/CSS を使ってホームページを作ってみる
HTML と CSS は、ブラウザで見るページを作るとても大事な技術です。
これ自体はとてもシンプルなものですが、侮れません。
Web エンジニアが作るものすべてはこの HTML と CSS をいろんな技術を組み合わせて使いこなしています。
これなくしては Web エンジニアは語れないくらい基礎的で重要なものなので、まずはこれからやるとよいでしょう。
Progate を使って手を動かしてみる
Progate というプログラミングをオンラインで学習できるサービスがあります。
これで、HTML と CSS を学習しましょう。PC のセットアップをせずにそのまま始められるのでとても便利ですし、わかりやすく説明してくれるのでとてもお勧めです。
書籍や動画教材を使ってさらに深める
Progate では基礎的なところで終わってしまうので、さらに深く理解したい方は、書籍や動画教材を購入してやってみるのもよいでしょう。
ここでは、実際に公開されているようなかっこいいホームページを作れるようになる必要はありません。なぜならよいデザインをするのはまた別のスキルだからです。仕事としてはデザイナーという別の職種の人がやることが多いです。
デザインはセンスと思われる方もいるかもしれませんが、いろいろなノウハウのもと論理的に計算されて作られているものです。プログラミングともまた別の奥深いデザイナーの世界なので、現段階でいい感じのページができなくても当たり前です。
あくまでどんな操作ができるのかを知っておくに今の段階ではとどめておきましょう。
書籍の場合
書籍の場合はこのあたりがお勧めです。
これ以外でも全然よいですが、目安としては「flexbox」というものが解説されているものにするとよいと思います。
このあたりはもう使われない古くから伝わる古の記法（とはいえ昔からあるところでは使われていて辛い）が解説されてしまっている本も中にはあるので、なるべく新しいものを選びましょう。
動画の場合
動画のほうが個人的には躓きにくいのでお勧めです。
動画教材では、Udemy というオンライン動画教材のサービスがリーズナブルなお値段で使いやすいです。
定価が 24,000 円と書いてある教材もだいたいセールで 1,400 円くらいで買えるので、書籍を買うより安くなると思います（2 年で合計 20 本以上買っていますが、全部セール中に買いました）
STEP3：Ruby on Rails で動くページを作ってみる
こだわりが無ければ今も Ruby on Rails をやるのがエンジニアの近道です。
ホームページ作成とかであれば HTML/CSS を極めたり、いいデザインができるスキルを身につける方に力を使うのもありだとは思いますが、あまり待遇が良くないですしこれから伸びる分野ではないと個人的に思っています。
PHP もなくは無いですが、2019 年に新しくものを作るときに PHP を選定する会社はほぼないと思います。Ruby on Rails が使えるようになっていれば、必要なときに PHP を使うことも全然できるはずなので Rails をお勧めします。
真似して動くものを作ってみる
最初は HTML/CSS のときと同じで、書籍や動画教材を使うとよいと思います。僕は動画教材をお勧めします。
ここでは、教材で説明されているとおりに自分でもコードを書いて動かしてみて下さい。読んだり見たりしただけでは案外理解しきれないところがあるので、手間ではありますが自分で手を動かしてみましょう。
そのときに、ただ写経するだけではなく、「じゃあ、ここを変えてみたらどうなるんだろう？」といった感じで想像を膨らませて色々試しながらやるとより理解が深まります。
予想とおりの動きをしたら、正しく理解できていますし、もし違ったらおそらく誤解しているところがあるのでもう 1 回考え直してみるとよいかもしれません。
丸暗記する必要はありません。ですが、ひととおりやり通してみてください。
書籍や動画教材を丁寧にやると 1 ヶ月前後くらいかかるかと思います。根気強く少しずつやっていきましょう。
書籍の場合
個人的にはこの方の本が初心者にはわかりやすいのでお勧めです。
iPad 等を持っている方は Kindle 版を買ったほうが持ち運びやすいですし、使いやすいのでお勧めしています（分厚い本は開いたまま留めて置くのが結構大変なので）。
動画教材の場合
動画教材の場合は、Rails でも Udemy がよいと思います。Udemy だと英語でのコンテンツのほうが多いので英語が苦手でない方は英語で探してみるのもいいと思います。
ですが、Rails はとても有名なので日本語でもよい教材が揃っています。
フリーの教材
Rails の場合は、ウェブ上で読む文に関しては無料でで使えるチュートリアルがあります。
こちらを使うのもよいかもしれません。動画やその他のオプションを使おうと思うとお値段するので、よく躓いて難しいなという方は Udemy で動画でやるとお安めに学べるかと思います。
自分でコードを書いてみる
さて、写経をして仕組みがなんとなく Rails のことがわかってくると思います。次は写経するのではなく、自分でコードを書いてみます。
**ここでお勧めなのは、自分のお気に入りのサービスを自分で作ってみることです！ **僕は勉強をしているときにPinterestというサービスを真似して自分でコードを書いてみました。
こうすることですでに公開されている考えられた機能やデザインを学ぶこともできますし、仕組みも自分で考えながらコードを書くいい経験になります。
作るものもオリジナルでやっても悪くはないですが、
- どういったものを作るのか
- デザインをどうするか
などプログラミングとは直接関係ないことに悩む時間が多くなってしまうのであまりお勧めはしません。
満足が行くところまでやりきりましょう！ ここも 1 ヶ月くらいかかるかと思います。
STEP4：ポートフォリオを作る
ポートフォリオとは自分がプログラミングをして作った成果物のことです。
転職の際に、自分が実際に作ったものを見せていくと、自分の努力やスキルがすぐに伝わるのでとてもスムーズに選考が進められます。
なので、HTML/CSS や Ruby on Rails で自分が書いたコードを他の人にも見てもらえる状態にしていきましょう。
採用側としても、ポートフォリオがあると未経験であってもどれくらいの技術や熱量があるのかが分かるので安心材料にもなります。最初は恥ずかしいと思うかもしれませんが、どんどん積極的に準備していきましょう！
GitHub にソースコードをアップロード
エンジニアが必ずと言ってもいいほど使っている、GitHub というソースコードを管理できるサイトがあります。
ここにソースコードをアップロードして公開して、リンクを応募するときに送っておくと見てもらえます。
なので、その手順をかんたんに見ていきましょう。
Git を理解する
GitHub というサイトにアップロードするためには、Git というソースコードの管理ツールを理解しなければなりません。
Rails の書籍や動画によっては Git の説明があったかもしれません。もう理解しているという方は飛ばして大丈夫です。
まだ見たことないという方は、Progate で学習するとよいと思います。
またこの本でもイメージが湧きやすいと思います。
GitHub にアップロードする
Progate に「リモートにアップロードする」というものがあると思います。
それと同じ方法を使って GitHub にソースコードをアップロードできます。
このあたりがわかりやすく説明されているので参考にしてみてください。
サイトをデプロイする
自分の作ったサイトをネットワーク上に公開して誰でも見れる状態にすることをデプロイといいます。
ソースコードが見れるだけでも色んなことがわかりますが、やっぱり実際に動くページが見れたほうが伝わりやすいです。
たとえば、僕が簡単に作ったページのような感じです。
これは自分でコードを書いてデプロイしたサイトです。こんな感じで、自分の作ったものを誰でも見れるようにしておくとアピールポイントになります。
デプロイ方法を学ぶ
デプロイするには Heroku というサービスを使うと無料で簡単にできると思います。
このあたりを参考にしてみてください。
また、買った書籍や動画によっては後半に応用編としてデプロイ方法が解説されているものもあるはずです。
実際にデプロイまでできると、開発からサービスを公開するところまで一連の流れをすべてやったことになります！
まとめ
こんな感じの手順で学習していければ、確実にエンジニア転職に近づくと思います。
STEP4 まで終われば転職活動を始めて十分通用すると思います。あとは転職活動と並行しながらさらに学習を進めていくとよいでしょう。
僕は、React というフロントエンドフレームワークの学習を Udemy でしながらオリジナルのサイトを作っていました。
今回、具体的な細かな方法は書ききれていませんが、少しでも参考になっていれば幸いです。良ければTwitterのフォロー等もよろしくおねがいします！
