タイトル通りの話で, 今まで2年ちょいVue.js（含むNuxt.js）使いだった自分がReact + TypeScriptの組み合わせを覚えて仕事にしよう！...という目標に向けて何をしたかについてまとめました.
- React + TypeScriptの組み合わせでちゃんと開発したい&覚えたい人
- Vue.js等, 他のJavaScriptライブラリ・フレームワークと二刀流を目指している人
- SPA(Single Page Application)開発をちゃんとやりたい人
の参考になれば幸いです.
なおコードスニペット的なのは一切ないです.
が, これから学習する方の役に立つと嬉しいです.
わたし（shinyorke）のJavaScript/SPA歴
- 昔から仕事や趣味⚾️開発でJavaScript, JQuery, Bootstrapは触っていました.
- JavaScriptは自力で調べながらどうにかやれます.
- 前職でVue.jsを2年近くやったのでSPAについてはそれなりに開発経験あります.
- Nuxt.jsでゼロベースからSPAを二回ほど実装・ローンチしました.
- npmとかyarnの意味はわかってます&環境もnvmで切り替えながらやれるレベルなのでそのへんのエコシステム周りは初心者ではないです（強くもないけど）.
なお, Vue.jsのときにやったネタはブログにまとめています.
React + TypeScriptになれるまで
やったことを時系列で.
なお, まだ途中です！
Reactの公式チュートリアル
会社のつよつよフロントできるマンたちのオススメだったので素直に乗って写経しました.
ゲーム完成まで楽勝でいきました.
構成とかどういった意味なのか?的なのをチュートリアルと書いたコードを読みながら理解.
ただ, 肝心なComponentのライフサイクルだの状態遷移だのといった所はわかったようなわかんないような🤔でした.
書籍を写経してSlack（っぽい）アプリを自前で実装する.
ゲームよりも実践的なアプリを作ると慣れるかな?と思い, 昔読んだ書籍をもう一度掘り返しました.
React, Angular, Vue.js, React Nativeを使って学ぶ はじめてのフロントエンド開発
2年ちょっと前の本なのでそのままのコードで動かんやろ...という不安はあったものの, まあ自己解決できるだろっていう謎理論でそのままスタート.
サーバーアプリを作る（写経）
本編のSlack（風）チャット・クライアントアプリを作る前に, 書籍の説明通りチャットのサーバー部分をFirebase + Expressで作りました.
これについては, ほぼ書籍通りの写経で完了. これは意外だった.
唯一, デプロイができなかったぐらいですかね. 無料プランじゃできないぞ的な（おそらく書籍リリース時はできてた）.
ただ, デプロイできなくてもローカルサーバーとして立ち上げて開発できたので別に困らなかったです.
ちなみにFirebaseをゼロから使うのは今回がはじめてでした. 思わぬ所で新しい道具を覚えた.
本丸のReact + TypeScript製チャット・クライアント開発
書籍を見ながらゼロから写経しました, 途中動かないとか色々ありました.
特にライブラリのバージョンがきつかった...書籍通りで動かん！と思い,
こちらのpackage.jsonを見ながら調整.
あとnodeのLTS（12系）じゃダメだったので8系に落として動かしました, この騒動で半日ほどドハマリ.
これはまあしょうがないか...
その後は順調に行きました, 型安全のJavaScriptは精神衛生上すごく良いというのがよくわかった.
これからやりたいこと
Vue.jsで作ったやつをReact + TypeScriptで写経して本格的に慣れるとか, 今いくつか作りたいネタがあるのでそれをReact + TypeScriptでやるとか.
あと, 会社のプロダクトでいくつかReact + TypeScriptあるのでそこにコントリビュートとか考えています！