この記事の主題
元々大学時代に個人開発で、VueやNuxt.jsを使っていたんですけど、
社会人になってサーバーサイドの言語である「Java」をやり始めて、
「本業でJava、個人開発でサーバレスのモダンなやつで開発できたら、なんかめっちゃかっこよくね？」ってなったので、
最近のサーバレスの開発記事でよく目にする+モバイルアプリ開発のReactNativeにも拡張できる、
Reactを学習しようという運びになりました。
ただ、最初はwebアプリも作ってみたいと思ったため、Next.jsを学習するために、
なる早でReactを終わらせたかったのです。
留意事項
この学習のゴールを、「フレームワークを使う際に困らないようにする」というところに置いており、
複雑な概念はそこまで熱心にやっておりません。
また、基本的に遅延評価勉強法をベースとした学習をしています。
そのため、ある程度のことは、何かを作って調べながら身につけることを前提としているので、
知識の抜けもれはおそらく（きっと確実に）あります。
かかった期間
おそらく2週間くらいで、稼働時間は一日あたり1h～4hくらい
やったこと
①JavaScriptの復習
mapやアロー関数、promiseや、async awaitなど、
モダンJSのや自分の苦手分野に絞って学習をしました。
基礎の構文は研修中にJavaで書いて概念を理解していたので、
理解の滞っている部分に絞った学習をしました。
非同期処理の完了を待つ方法！Promise＆async/await【分かりすぎて怖いJavaScript入門】
モダンフロントエンドエンジニアになるためのJavaScript入門 2022年版
②Reactについて学習する(導入編)
Udemyの講座から、学習しました。
とにかく「Reactはなんぞや、どうやって勉強すんの」って疑問を解消してくれます。
わかり易すぎて度肝抜かれっぱなしでした。
ここでstateやuseStateはともかく、
useEffectによる依存関係などが難しかったので、そのレクチャーは何度も見返したり、コードを書きました。
あと、関数型コンポーネントを初めて使ってなんだかすごい感動しました。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
以下記事も勉強になりました。未だに振り返っています。
React hooksを基礎から理解する (useState編)
③公式docs
各宗教には聖典があるように、開発者には公式ドキュメントがあります。
どんなに急いで学習しても、一般的な標準を知るために、絶対に避けてはならないと思っています。
「tutorial」「Main Concepts」「Hooks」あたりは押さえておくのが吉です。
読んでてわからないところがあったらGoogle先生に投げてましたね。
④書籍から学ぶ
最後に、知識の抜けや漏れがないかを確かめるために、市販の参考書を買いました。
この書籍は個人的にはぼちぼちって感じでしたが、
サンプルで作るものが多かったり、Next.jsでの開発の橋渡しをしてくれるのでありがたかったです。
Reactを書いてみて
Vue.jsを書いていた自分からすると、ぶっちゃけどっち使っても良いのかなとは思いました。
ただ、ルーティングやレンダリングに対してのコードが個人的に書きやすかったり、
踏み込んだ内容やエラー、更にはReactを用いたアプリの技術の検索をしても、かなりの量の記事が出てきて扱いやすいなとは思いました（これは主にNext.jsを書き始めて思ったことです）。
ただReactを普通に使う場合のCSSの選定には悩まされそうですね。スタンダードはJSX+tailwindcss(or Material-ui)とかなのでしょうか。
自分はNext.jsを使うことを前提にしていたので、CSS Modules+tailwindcssで学習していました。
CSS Modules(Next.jsのdocs内のページに記載)
謝辞
読んでいただきありがとうございました！
少しでもReact学習のご助力になれれば幸いです。