blog.tawa.me

東京から福岡移住したWebエンジニアと時たま福岡出身の建築士が発信していくブログです

【2019年版】未経験からWebエンジニアになるための学習方法をSTEPごとに解説

f:id:tawachan39:20191009222619j:plain

こんにちは、たわです!

僕は2年前にエンジニアに転職しました。その時の経験や2年間エンジニアとして働いた経験を踏まえて考えた、「エンジニア転職やっておくべきこと」を解説します。

ITのエンジニアといっても色々あります。Web系もありますしAIを活用したりデータサイエンスの文脈でエンジニアリングする人もいます。さらにはブロックチェーンを使った開発をすることもあり、分野も多岐にわたります。

ですが、今回は一般的なWeb開発を行うエンジニアになるという前提で書いていきます。

わかりやすくSTEPに分けて説明していければと思います!

この通りに順番に勉強していけばエンジニア転職に近づけると思いますので参考にしてみてください。

STEP1:最低限の基礎知識をつける

まずは最低限の予備知識をつけましょう。

何も知らなくてもとりあえず動くものが作れてしまうほどに便利になってしまいましたが、やはり背景を知っていることによるメリットも大きいです。

  • 効率的に勉強できる
  • 深く理解することに繋がる

こうしたメリットがあるので、少し遠回りに見えるかもしれないですが最初にやっておくことをおすすめします。

ITパスポートの知識をインプットする

ITパスポート(略して、iパス)という資格試験があります。

iパスは、ITを利活用するすべての社会人・これから社会人となる学生が備えておくべき、ITに関する基礎的な知識が証明できる国家試験です。

ITに関する知識が網羅的にまとまっているので、知識を広く浅く身に付けるのに最適な教材です!

実際に資格を取る必要はありませんが、読んで置くだけでもだいぶ違います。覚えなくて全然良いですが、一度理解しておくと良いでしょう。

PDFが付いてくるこの書籍がおすすめです。スマホとかタブレットでスキマ時間に見ていくとさくっと読めると思います!

(全文PDF・単語帳アプリ付)かんたん合格 ITパスポート教科書 2019年度 (Tettei Kouryaku JOHO SHORI)

(全文PDF・単語帳アプリ付)かんたん合格 ITパスポート教科書 2019年度 (Tettei Kouryaku JOHO SHORI)

STEP2:HTML/CSSを使ってホームページを作ってみる

HTMLとCSSは、ブラウザで見るページを作るとても大事な技術です。

これ自体はとてもシンプルなものですが、侮れません。

Webエンジニアが作るもの全てはこのHTMLとCSSをいろんな技術を組み合わせて使いこなしています。

これなくしてはWebエンジニアは語れないくらい基礎的で重要なものなので、まずはこれからやると良いでしょう。

Progateを使って手を動かしてみる

f:id:tawachan39:20191008161923p:plain

Progateというプログラミングをオンラインで学習できるサービスがあります。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

これで、HTMLとCSSを学習しましょう。PCのセットアップをせずにそのまま始められるのでとても便利ですし、わかりやすく説明してくれるのでとてもおすすめです。

書籍や動画教材を使って更に深める

Progateでは基礎的なところで終わってしまうので、さらに深く理解したい方は、書籍や動画教材を購入してやってみるのもよいでしょう。

ここでは、実際に公開されているようなかっこいいホームページを作れるようになる必要はありません。なぜなら良いデザインをするのはまた別のスキルだからです。仕事としてはデザイナーという別の職種の人がやることが多いです。

デザインはセンスと思われる方もいるかもしれませんが、いろいろなノウハウのもと論理的に計算されて作られているものです。プログラミングともまた別の奥深いデザイナーの世界なので、現段階でいい感じのページができなくても当たり前です。

あくまでどんな操作ができるのかを知っておくに今の段階ではとどめておきましょう。

書籍の場合

書籍の場合はこのあたりがおすすめです。

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)

これ以外でも全然良いですが、目安としては「flexbox」というものが解説されているものにすると良いと思います。

このあたりはもう使われない古くから伝わる古の記法(とはいえ昔からあるところでは使われていて辛い)が解説されてしまっている本も中にはあるので、なるべく新しいものを選びましょう。

動画の場合

動画のほうが個人的には躓きにくいのでおすすめです。

動画教材では、Udemyというオンライン動画教材のサービスがリーズナブルなお値段で使いやすいです。

https://udemy.com

定価が24,000円と書いてある教材もだいたいセールで1,400円くらいで買えるので、書籍を買うより安くなると思います。(2年で合計20本以上買っていますが、全部セール中に買いました)

STEP3:Ruby on Railsで動くページを作ってみる

f:id:tawachan39:20191008170542p:plain

こだわりが無ければ今もRuby on Railsをやるのがエンジニアの近道です。

ホームページ作成とかであればHTML/CSSを極めたり、いいデザインができるスキルを身につける方に力を使うのもありだとは思いますが、あまり待遇が良くないですしこれから伸びる分野ではないと個人的に思っています。

PHPもなくは無いですが、2019年に新しくものを作るときにPHPを選定する会社はほぼないと思います。Ruby on Railsが使えるようになっていれば、必要なときにPHPを使うことも全然できるはずなのでRailsをおすすめします。

真似して動くものを作ってみる

最初はHTML/CSSのときと同じで、書籍や動画教材を使うと良いと思います。僕は動画教材をおすすめします。

ここでは、教材で説明されているとおりに自分でもコードを書いて動かしてみて下さい。読んだり見たりしただけでは案外理解しきれないところがあるので、手間ではありますが自分で手を動かしてみましょう。

そのときに、ただ写経するだけではなく、「じゃあ、ここを変えてみたらどうなるんだろう?」といった感じで想像を膨らませて色々試しながらやるとより理解が深まります。

予想通りの動きをしたら、正しく理解できていますし、もし違ったらおそらく誤解しているところがあるのでもう一回考え直してみると良いかもしれません。

丸暗記する必要はありません。ですが、一通りやり通してみてください。

書籍や動画教材を丁寧にやると1ヶ月前後くらいかかるかと思います。根気強く少しずつやっていきましょう。

書籍の場合

個人的にはこの方の本が初心者にはわかりやすいのでおすすめです。

Ruby on Rails 5アプリケーションプログラミング

Ruby on Rails 5アプリケーションプログラミング

iPad等を持っている方はKindle版を買ったほうが持ち運びやすいですし、使いやすいのでおすすめしています(分厚い本は開いたまま留めて置くのが結構大変なので)。

動画教材の場合

動画教材の場合は、RailsでもUdemyが良いと思います。Udemyだと英語でのコンテンツのほうが多いので英語が苦手でない方は英語で探してみるのもいいと思います。

ですが、Railsはとても有名なので日本語でも良い教材が揃っています。

https://udemy.com

フリーの教材

Railsの場合は、ウェブ上で読む文に関しては無料でで使えるチュートリアルがあります。

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

こちらを使うのも良いかもしれません。動画やその他のオプションを使おうと思うとお値段するので、よく躓いて難しいなという方はUdemyで動画でやるとお安めに学べるかと思います。

自分でコードを書いてみる

さて、写経をして仕組みがなんとなくRailsのことがわかってくると思います。次は写経するのではなく、自分でコードを書いてみます。

ここでおすすめなのは、自分のお気に入りのサービスを自分で作ってみることです!僕は勉強をしているときにPinterestというサービスを真似して自分でコードを書いてみました。

こうすることで既に公開されている考えられた機能やデザインを学ぶこともできますし、仕組みも自分で考えながらコードを書くいい経験になります。

作るものもオリジナルでやっても悪くはないですが、

  • どういったものを作るのか
  • デザインをどうするか

などプログラミングとは直接関係ないことに悩む時間が多くなってしまうのであまりおすすめはしません。

満足が行くところまでやりきりましょう!ここも1ヶ月くらいかかるかと思います。

STEP4:ポートフォリオを作る

ポートフォリオとは自分がプログラミングをして作った成果物のことです。

転職の際に、自分が実際に作ったものを見せていくと、自分の努力やスキルがすぐに伝わるのでとてもスムーズに選考が進められます。

なので、HTML/CSSやRuby on Railsで自分が書いたコードを他の人にも見てもらえる状態にしていきましょう。

採用側としても、ポートフォリオがあると未経験であってもどれくらいの技術や熱量があるのかがわかるので安心材料にもなります。最初は恥ずかしいと思うかもしれませんが、どんどん積極的に準備していきましょう!

GitHubにソースコードをアップロード

エンジニアが必ずと言ってもいいほど使っている、GitHubというソースコードを管理できるサイトがあります。

ここにソースコードをアップロードして公開して、リンクを応募するときに送っておくと見てもらえます。

なので、その手順をかんたんに見ていきましょう。

Gitを理解する

GitHubというサイトにアップロードするためには、Gitというソースコードの管理ツールを理解しなければなりません。

Railsの書籍や動画によってはGitの説明があったかもしれません。もう理解しているという方は飛ばして大丈夫です。

まだ見たことないという方は、Progateで学習すると良いと思います。

Git 学習コース Ⅰ | プログラミングの入門なら基礎から学べるProgate[プロゲート]

またこの本でもイメージが湧きやすいと思います。

わかばちゃんと学ぶ Git使い方入門

わかばちゃんと学ぶ Git使い方入門

GitHubにアップロードする

Progateに「リモートにアップロードする」というものがあると思います。

それと同じ方法を使ってGitHubにソースコードをアップロードすることができます。

このあたりがわかりやすく説明されているので参考にしてみてください。

GitHubにソースコードをアップロードするまでの手順 | omublog

サイトをデプロイする

自分の作ったサイトをネットワーク上に公開して誰でも見れる状態にすることをデプロイといいます。

ソースコードが見れるだけでも色んなことがわかりますが、やっぱり実際に動くページが見れたほうが伝わりやすいです。

例えば、僕が簡単に作ったページのような感じです。

たわのサイト | tawa.me

これは自分でコードを書いてデプロイしたサイトです。こんな感じで、自分の作ったものを誰でも見れるようにしておくとアピールポイントになります。

デプロイ方法を学ぶ

デプロイするにはHerokuというサービスを使うと無料で簡単にできると思います。

【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説 | TECH::NOTE

このあたりを参考にしてみてください。

また、買った書籍や動画によっては後半に応用編としてデプロイ方法が解説されているものもあるはずです。

実際にデプロイまでできると、開発からサービスを公開するところまで一連の流れをすべてやったことになります!

まとめ

こんな感じの手順で学習していければ、確実にエンジニア転職に近づくと思います。

STEP4まで終われば転職活動を始めて十分通用すると思います。あとは転職活動と並行しながらさらに学習を進めていくと良いでしょう。

僕は、Reactというフロントエンドフレームワークの学習をUdemyでしながらオリジナルのサイトを作っていました。

今回、具体的な細かな方法は書ききれていませんが、少しでも参考になっていれば幸いです。良ければTwitterのフォロー等もよろしくおねがいします!