Railsでポートフォリオを作成後、React/Express/TypeScriptでポートフォリオをつくるまで

まえがき

ちょっと前のお話ですが、Railsチュートリアル→RailsでPF作成後、React・Express・TypeScriptでポートフォリオを作成しました。
(機能的にはペラペラです。)
せっかくなので、その時の学習順序をまとめておきます。
現在、web系のベンチャー企業でアルバイトをしています。説得力はあまりありませんね。
ちなみに、私は本で学習するのが個人的に合っていたので、PF作成までは本(Kindle)で学習しました。
webで勉強するなら、ReactはReactチュートリアルが有名だと思います。
TypeScriptはこんな感じ...?
TypeScript学習ロードマップ
https://qiita.com/irico/items/33744e15a4e0ca52d6bc
私の例は、あくまで一例としてご参考にしてください。

フロントエンド
https://github.com/momonoki1990/house_work_memo_front
バックエンド
https://github.com/momonoki1990/house_work_memo_back

サービス
https://house-work-memo-front.herokuapp.com/
→停止しました！

さきに総括

JavaScript(『JavaScript本格入門』)(20時間)
バックエンドJS(『Node.js 超入門』など)(40時間)
React(『React.js & Next.js超入門』など)(30時間)
ReactとExpress連携など(20時間)
TypeScript(『速習TypeScript』など)(50時間)
→ここまで1ヶ月(160時間)

企画・調査1週間(40時間)
作成2週間(90時間)
→PF調査・作成計3週間(130時間)

合計290時間

※時間は、過去の自分のツイートやTogglで計測した値を四捨五入しています。
※事前に、Rails・AWS・Docker・CircleCIを使ってポートフォリオを作成しています。
こちらは、学習に1ヶ月(180時間)、PF作成に2ヶ月(470時間)かかっています。
それぞれの期間、在職だったり無職・一部就業だったりしますので、期間より時間の方が参考になるかとおもいます。
フルコミットのときは、8時間/日くらいだったとおもいます。

ちなみに、技術選定の理由は、志望先企業が使っていた技術であり、個人的にSPAやJavaScriptに興味があったからです。
個人的に「書籍で勉強するのが合っているな」とおもったのは、『プロを目指す人のためのRuby入門』(俗に「チェリー本」)がめちゃくちゃおもしろかったからです。

JavaScript本格入門

「JavaScript本格入門」読了。前半は文法の説明で、サーバーサイドJavaScript触ってないと、実践的でないから流石につまらなかったけど、後半DOMの操作とかクライアント側の章に入ると、触ったことあるから格段に面白い。やっぱり、実践ありきだなぁ(これからnode.js)https://t.co/60D36oxvbc

— 熊瀬川直也 (@momonoki1990) June 18, 2020

Railsでポートフォリオを作っていたときは、JavaScript自体、なんとなく書いている感じがあったので、勉強しました。
『JavaScript本格入門』はJavaScriptを網羅的に勉強する定番本のようで、本屋に行っても大体置いてある気がします。
実際、網羅的でわかりやすかったです。
文法の説明の部分に関しては、ハンズオンという感じではないので、さくっと読み流す感じでいいと思います。

Node.js 超入門

『Node.js 超入門』読了(25時間)。webサーバーを素のnode.jsで書くところから始めて、FW(Express)使ってアプリケーション作るまで積み上げていくので非常にわかりやすかったです。事前に「JavaScript本格入門」読んでいたのがめちゃくちゃ活きました。次はReactか更にnode.jshttps://t.co/vQdRHcDwbq

— 熊瀬川直也 (@momonoki1990) June 23, 2020

Node.jsはJavaScriptの実行環境です。フロントエンドでも使われるんですが、「バックエンドをJavaScriptで構築」といった意味で、使用言語に「Node.js」と書かれていることもある気がします。
『Node.js 超入門』は、ハンズオン形式で一から積み上げてアプリケーションを作っていくので、非常にわかりやすく楽しかったです。
ただ、こちらでは「Bookshelf」というORマッパー(DBとのデータのやりとりのためのライブラリ、RailsだとActive Record)を使っていますが、私はPFでは「Sequelize」というものを使いました。

node.js超入門の続きとして。sequelize(ORマッパー)やpassport(ユーザー認証)の理解に時間がかかってしまった(15時間)。
Reactに進みます。

— 熊瀬川直也 (@momonoki1990) June 27, 2020

ちなみに、Passsportというのはユーザー認証のためのライブラリで、PFでは結局実装しませんでした。
(Reactでユーザー認証関係って、どのライブラリが一般的なんでしょうか？調べてもあまり出てきませんでした)

React.js & Next.js超入門

「React.js & Next.js超入門」をRedux活用の章まで読了(18時間)。
駆け足で読みきった(もちろん動かしてはいる)けど、どうしようかな。Express(node.js)+ReactでPF進む方にいけるかな。。。

— 熊瀬川直也 (@momonoki1990) June 30, 2020

「React.js超入門」駆け足で読了後、いきなりExpress+Reactで掲示板作ろうとして失敗(6時間)。その後「超入門」を復習(15時間)してReact+Reduxでメモをそらで作れるように。「やっぱり駆け足はダメだなぁ」と思いつつ、Express+Reactに取り掛かりたい。 pic.twitter.com/Tm223saz80

— 熊瀬川直也 (@momonoki1990) July 3, 2020

たったこれだけですが、ExpressとReactの連携に成功。
axiosを使って(あとredux-thunkとredux-logger)ReactからExpressサーバーに非同期通信、Expressはjsonを返すだけ。
情報収集含め、11時間。 pic.twitter.com/zkPCftHAI7

— 熊瀬川直也 (@momonoki1990) July 5, 2020

『Node.js 超入門』と同じ掌田津耶乃さん( https://www.amazon.co.jp/%E6%8E%8C%E7%94%B0%E6%B4%A5%E8%80%B6%E4%B9%83/e/B004L5AED8/ref=dp_byline_cont_pop_ebooks_1 )の本です。
同じようにハンズオン形式で手を動かし、段階的にReduxなどを導入しながらすすむので、非常におもしろく楽しかったです。

Express, Reactでそれぞれ簡単なアプリケーションを作ったあと、ExpressとReactを連携させて、また簡単なアプリケーションをつくりました。
上記ツイートの通りですが、「React.js超入門」の復習が不十分なままExpressとReactを連携させようとして、一度失敗しています。

TypeScript導入

やっとexpress+Reactで、DBに登録したデータをJSONで取得して表示するだけの練習用アプリをTypeScript化することができました。
DBとの連携+ReactRouterの導入(8時間)
「速習TypeScript」(8時間)
TypeScript導入(バックエンド)(20時間)
TypeScript導入(バックエンド)(23時間) pic.twitter.com/wHcq2m5eNF

— 熊瀬川直也 (@momonoki1990) July 14, 2020

『JavaScript本格入門』と同じ山田 祥寛さん( https://www.amazon.co.jp/%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/e/B004LR8730/ref=dp_byline_cont_pop_book_1 )の書籍です。
こちらは、『JavaScript本格入門』よりだいぶさっくりしていますね。。。文法のみなので、読み流す感じでいいとおもいます(私も読むのに8時間しかかけていません。)

とはいえ、このあとTypeScriptをバックエンド・フロントエンドにそれぞれ導入するのに40時間くらいかけていたみたいです。Google検索で調べながらだったとはおもうのですが、時間だけ見ると他のよりだいぶ時間がかかっているようなので、もうちょっと良い学習方法はなかったかなとおもっています。

企画・調査

1週間弱かけました。ツイートが残ってないのでわかりにくいですが、上記ツイートで学習を完了しているのが2020年7月14日、ポートフォリオの作成自体は7月中に終わらせると決めていたので、「結局何もつくれなかった」ということになるのがめちゃくちゃ怖かったですね。
なので、機能は最小限に限り、とにかく何かしら形にすることをめざしました。
Railsで作ったポートフォリオのデザインがダサすぎたのでなんとかしたかったのですが、かといってデザインを多少でも勉強する時間はありませんでした。
Reactのデザインライブラリには、最も有名なMaterial UIと、Reactの時も使ったBootstrapのReact版があり迷いましたが、好奇心がまさってMaterial UIを使用しました。
結果的には導入も簡単で、一定の仕上がりになったのでよかったです。

あと、DB周りが不安だったので、すっきりわかるSQL入門( www.amazon.co.jp/dp/4295005096 )を設計関連の部分だけ読みました(5時間)

PF作成

2週間弱、というかTogglを見てみると、10日間で作っていたようです(チャート(Chart.js)をあとで足しているので、大体2週間ということで)
失敗できなかったので、めちゃくちゃ焦っていましたが、なんとか大きな失敗もなく、7月中に完成させることができました。
ただし、理解が不十分なままだったところも多かったので、これはちょっともったいなかった気もします。

まとめ

以上です。転職活動自体は、またいずれまとめたいとおもいますが、主にReactの引きがよかったです。
私の場合、一度RailsでPFを作成したあと、転職活動に専念している時期がある(緊急事態宣言直後)のですが、応募先企業の方も「なんかよくわからないけど、みんな(応募者が)Railsばっかりなんだよね」と言っていたくらいで、差別化がむずかしいように感じていました。
(それでも、Ruby&Railsは未経験転職の王道だと思いますし、その時の私の失敗理由は主に面接対策でした)
Wantedlyで未経験者が応募しそうな案件を見ていると、一時期におおよそ50人くらい競合がいたようなが気がします。
(具体的には、未経験者が応募しそうな新規求人に1,2ヶ月で50~80人くらい応募していたような？)

個人的には、勝又健太さん(@poly_soft https://www.youtube.com/channel/UC_HLK-ksslL-Z_2wiIZDlMg )のロードマップに乗って一度目の転職活動に臨んだものの、私の面接対策での失敗などもあって、結果も出ず、まだ自分なりに試行錯誤した感じもなかったので、もう一度新たにポートフォリオを作り直して、転職活動を行いました。
結果的にはいろいろあって現在アルバイトですが、いまのところ望んでいた環境が得られたように感じています。

書籍で勉強しているのでちょっとおすすめする自信は無いですが、どなたかのご参考になればとおもいます。

※いままで計測してばかりで初めてデータを振り返ってみたのですが、Toggl、めっちゃつかいやすいですね。。。
(正しくはToggl Track、時間管理ツールです。最近サービスが増えて名前が変わったみたいですね。 https://toggl.com/ )