#はじめに
Reactを独学したら思いの外スムーズにエンジニア就職がうまくいったので、学習内容をまとめました。
Vueに比べたらReactの教材はあんまりない気がしたので、Reactの学習法に悩んでいる方は参考にしていただければと思います。
ちなみに、転職活動に使ったポートフォリオはフロント側しか実装していません。バックエンドは未実装です。AWSも使っていません。
#私のプロフィール
年齢：29歳(オファー当時)
学歴：国立大学理系院卒
前職：輸入商社の営業(4年間勤務。英語しゃべれる)
現職：自社+受託開発企業でモバイルアプリ開発(バックエンドもAWSも触る)
プログラミング学習開始：2019/11~
オファー月：2020/2(自社開発)、2020/3(自社+受託開発)
エンジニア歴：約半年(2020/7~)
使っている技術：TypeScript, React Native, PHP, Laravel, AWS
趣味：秘宝館、混浴巡り(オランダ、ベルギー、ルクセンブルク、ドイツ、台湾、ニュージーランド、アメリカ、群馬を巡った)
#オファーまでに使った教材
勉強した順。右に(☆)がついているものがおすすめ。
##書籍(WEB教材)
- テックなんとかアカデミーの教材
##動画
- The Complete React Developer Course(☆)
- Modern React with Redux(☆)
- JavaScript30
- What The Flexbox?!
- 超TypeScript入門完全パック(おすすめしないのでリンクなし)
- The Modern JavaScript Bootcamp(☆)
#オファーまでにやった勉強内容
学習開始から2社目のオファーまでを時系列順にまとめました。
##11月中旬-12月初旬 (3週間)
11月上旬にエンジニアになることを決心して、テックなんとかアカデミーのフロントエンドコースを受講しました(20万くらい?)。フロントエンドとバックエンドはどっちも興味があったのですが、バックエンドは他スクール出身者(テックなんとかキャンプなど)のライバルが多そうで間口狭そうだし、フロントエンド採用がダメそうだったらNode.js勉強してバックエンドに移ればいいやと思っていたので、そんな感じでフロントエンドを選択しました。
まずはスクール教材でHTML / CSS / BootStrap / JavaScript / jQuery / Vue.js / Firebaseの基礎を学習し、一通り課題を終えたところでポートフォリオ作成にとりかかろうとしました。
ポートフォリオを作成するにあたって、フレームワークの選択(jQuery or Vue)に非常に悩みました。そんなときにJavaScriptのフレームワークについていろいろ調べていたところ、VueよりもReactの方が世界的に人気であること、日本でもReactを採用している会社が増えているということを知りました。
Vueでもいいのかな...と少し迷ったのですが、将来的に海外の企業で働きたかったこともあり、Reactを学習することを決心しました。そして、スクール受講開始3週間で教材を捨てました(一切みなくなりました)。
##12月中旬 - 12月末 (2週間)
Reactの学習について調べていくと、最新の内容を学べる日本語教材がほとんどないということがわかりました。
そしてUdemyで英語教材を探し、そのなかでも評価の高かったAndrew Mead氏のThe Complete React Developer CourseとStephen Grider氏のModern React with Reduxを購入しました。
最初にAndrewの講座を受講し、Webpack、React基礎、React-Routerなどを学習しました。順調に学習が進んでいたのですが、Reduxの章に入ったところで内容を全く理解できずに挫折しました。
ここでStephenの講座に切り替えたところ、わかりにくい概念を図解してくれるようなスタイルがハマり、Reduxを理解することができました。
##1月初旬 - 1月中旬 (2週間)
Reactを一通り学習したところで、ポートフォリオ作成を開始しました。
Google map APIやその他いろんな機能を組み込みたいという気持ちがあり、美容室サイトをテーマに決めました(今思うと微妙なテーマ)。
サイト制作と並行してテスト(Jest)を勉強しましたが、このときはよく理解できず結局サイトには組み込みませんでした。
かなりカツカツのスケジュールだったんですが、途中勉強に疲れて出張の後に徳島へ旅行に行きました。ジビエ美味しかったよ。
ちなみに年明けにMac book pro 13が壊れたので16インチに買い換えました。PCが使えない間はサイトの画面設計を手書きしていました。
##1月中旬 - 1月末 (2週間)
サイト制作と並行してWes BosのJavaScript30とWhat The Flexbox?!を受講しました(なんとこれらの講座は無料)。これらの講座でDOM操作とFlexboxの使い方に慣れることができました。
1月末頃にサイトが完成しました。
##2月初旬 - 2月中旬 (2週間)
Wantedlyに登録してついに転職活動を開始しました。
Twitter APIを使ってポートフォリオ2つ目(自己紹介サイト)を作成しました。また、Andrewの講座でReact Hooks(useState, useReducer, useEffect)を学んで、ポートフォリオをリファクタリングしました。
##2月中旬-2月末 (2週間)
自社開発系の企業に20社ほど応募していたのですが、思いの外、書類選考と1次選考は通過できました(2次までいったのが5社くらい?)。
結構余裕じゃん！と調子ぶっこいていたところで、2次選考のコーディングテストで落ちまくりました。
また、この頃からコロナ襲来によってカジュアル面談にさえ呼ばれなくなりました。
現実は厳しいな...と感じて1回心が折れかけましたが、とあるブロックチェーン系の企業から最初の面談でオファーをいただくという奇跡が起きました。
以下がオファーをいただけた理由です。
- ポートフォリオのレベルはそんな高くないけど英語文献をあたれる力があるので成長が早そう
- 営業経験をいかして顧客対応から実装まで通してやってくれそう
ただ、試用期間中(3ヶ月)の雇用形態は業務委託という点で、コロナ禍にこのオファー内容はかなりリスクが高いと思い、オファー承諾を一旦踏みとどまり、3月末までは転職活動を継続することにしました。
とはいっても、他の会社からオファーをいただける気が全くしなかったので、オファー企業で使っているTypeScriptの学習を始めました。
Udemyでよしぴー氏の超TypeScript入門完全パックを受講したのですが、コードをみながら説明する形式で全く肌にあいませんでした。なんとか1周したものの、何にも身についた気がしませんでした...
一応、コーディングテスト対策のためにAndrew氏の新しい講座The Modern JavaScript Bootcampを受講しました。JavaScriptの基礎講義が150個ほどあり、講義のあとにchallenging timeというコーディングテストがついているのですが、これが学習理解度を高めるのに非常によかったです。
受講後に受けたコーディングテストをパスしたのはこの講座のおかげといっても過言じゃないというくらい素晴らしい講座でした。JS始めた人全員にやってもらいたいです！
そして、Reactを使えてもJS基礎がしっかりしてないと全く意味なかったんだったんだな...と反省しました。
##3月初旬 - 3月中旬 (2週間)
Bootcampを並行しながら転職活動も継続していたのですが、なかなか面談のお声がかからないなか、とある自社＋受託開発企業の1次面談を通過しました。面談はうまくいったものの、ポートフォリオがあまり響かなかったからなのか、本来なかったはずの技術選考が追加されてしまいました。
技術選考の内容は仕様通りにReactで1つの画面をつくるというもので、JSONサーバを立てたりHooks縛りだったりなど、当時の自分にはなかなかカロリーが高いものでした。
期限は2週間だったのですが根性で2日で提出しました。2回ほどラリーがあったものの、なんとか1週間で選考を通過し、社長面談後に晴れて正社員オファーをいただきました。
以下がオファーをいただけた理由です。
- ポートフォリオのレベルはそんな高くないけど英語文献をあたれる力があるので成長が早そう(1社目と同じ理由)
- 技術選考を通ったので多分実務にもついていける
1社目も2社目も、英語文献をちゃんと読めるという点がかなり評価されました。
日本語教材がないから英語教材を選んだだけだったのですが、それが今後の成長性という思わぬ加点要素になったというわけですね。
#Q&A
ありそうな質問への回答です。
##効率よく学習できたの？
できませんでした。
学習開始から転職が決まるまでそんなに時間はかかりませんでしたが、正直これはやらなくてよかったかな？というものがいくつかあります。
特にJestはポートフォリオ作成時には全く勉強する必要はありませんでした。実務で使うことになったときに勉強すれば十分だと思います。
また、TypeScriptについても勉強する順番を間違えました。JavaScriptが大体書けるかな？というレベル(The Modern JavaScript Bootcampの内容を理解できるレベル)に達した後に学習するべきでしたし、転職が決まる前に手をつけるべきじゃなかったかなと思います。
##勉強開始から転職決まるまでの勉強期間は？
オファー1社目：約3ヶ月
オファー2社目：約4ヶ月
##1日の勉強時間は？
平日：約3-4時間 (7:00-8:00, 21:00-23:00, および営業中の隙間時間)
休日：約8時間
##どこで勉強してたの？
ほとんど自宅です。
コロナ前は営業中の隙間時間でいろんなところで勉強していました(新幹線、SA/PA、社用車の中、客先の食堂、フードコート、カフェ、公園のベンチ)。
和光市駅のミスタードーナツと豊橋駅のタリーズには特にお世話になりました。
##英語教材に手を出した理由は？
Reactについては最新の情報が英語でしか手に入らなかったからです。一見敷居が高く感じますが、動画教材によっては日本語字幕がでますし、スライドをみれば説明もなんとなくわかります。
あとこれはあくまで自分の感覚ですが、外国人講師の方がスライドや図を使って説明してくれるので、概念のイメージがしやすいです。
##学習のモチベーションをどうやって保ったの？
絶対転職してやるという気持ちでやっていたのでサボることはありませんでした。とはいえ食事と睡眠以外全部勉強！みたいなことはなく、Amazon PrimeとかNetflixでドラマ10本くらい観たと思います。大事なのはメリハリ。
##ポートフォリオのレベルは高い方がいい？
高いに越したことはありませんが、エンジニア系のインフルエンサーが最近おっしゃっているような、「AWS, Docker, Circle CIの導入は必須！」みたいなのは言い過ぎなように感じます。コロナ禍で未経験者の採用が減っていたとはいえ、ハイレベルなポートフォリオが求められた感じはありませんでした。むしろ技術はコーディングテストでみられた印象があります。
##学習時の作業環境は？
Mac book Pro 16 (2019)とiPad Pro 12.9をSidecarで接続してデュアルディスプレイにしていました。
#おわりに
フロントエンドエンジニア職で入社したのですが、WEBフロントエンドだけはなく、モバイルアプリやバックエンドやAWSまわりにも関われているので、転職活動時点で専門を絞る必要はないと思います。
また、入社半年でシニアエンジニアになれたので、転職活動時の勉強内容は実務にも通用する内容だったんだと思います。