はじめに

こんにちは！ばーんです。

今回はReactをキャッチアップして学んだことを書いていきたいと思います。
自身の備忘録と、今後人にすすめる時の基準として。

生のJSを半年ほど書いて、10月まるっとReactと向き合いました。

Reactで覚えていく内容

ざっと書いていくと↓こんな項目かと

基礎的な内容

• JSX
• CSS-in-JS
• クラスコンポーネントと関数コンポーネント
• propsとstate
• API(GraphQLは除く)

応用的な内容

• 各種ライブラリの実装(Router / Form / Test)
• TS
• SSG
• 状態管理(Redux)
• SSR
• React Native
• Webpack
• Firebase

and more...

現在の状態

1ヶ月でどれぐらいできるようになったの？という話ですが

• 基本的な内容の理解〜実装ができる
• 全体像をみて理解できていない単語が殆どなくなった。ふわっと概念は把握できた

実際にやったこと

2020/11/1追記

この記事書いた翌日からGatsbyやり始めたのですが、
最初はGatsbyチュートリアルの方が分かりやすいかなと感じました！

ステートには触れずにJSXやCSS-in-JSから入るので

参考サイト: Gatsbyチュートリアル

• お仕事(ECサイトのリプレイス)

これは本当にありがたかった…やはり実務に勝るものはないので多くのことを学べました。
propsのバケツリレー / 情報構造 / コンポーネントの分け方など

• 公式チュートリアル1周
  • CSS-in-JSに変更
  • squares / boradをコンポーネントに分けてみる(別のディレクトリに分ける)

基本的なことはここで学べますし、環境構築も含めて簡単にできました。
ただ、おすすめは少し内容に＋αするとより学べるのかなと思います。

参考サイト: 公式サイト

• Udemy視聴

後半のReduxはかなり難しいのですが、クラスコンポーネントで簡単なアプリケーションの作成はできるようになります。
mapの使い方など基礎的な部分にもフォーカスされているのでとても良かったです。
個人的にはさらっと見て、その後自分で実装したいアプリをこれを参考にしながら作るとかはいいかなと感じました。

参考サイト: Udemy

• りあクト！読了

歴史的背景、JSの基礎、最新の技術についてまで網羅されており、とても理解が捗りました。
ただ、情報量は多い為完全に理解しながらというよりさっと読んで輪郭を掴むという進め方です。

参考サイト: りあクト！

• 過去に作った静的サイトをReactでリプレイスする

有識者の方に指導いただきながら進めました。
CSS-in-JSやJSXについて、ディレクトリの分け方についてなどを学べます。
また、元サイトがscssで入れ子だらけで作ってたのでその辺の苦労も身に染みましたw

※静的サイトが無い方でも公式チュートリアルを応用すれば同じこと学べるかと思います。

参考サイト: リプレイス途中のGitHub

学んだこと、所感

①技術が幅広く、入れ替わりが激しい。その為技術選定が難しい

大きいもので言うと「クラスと関数ってどっちで書いたほうがいいの？」、
Reduxより良い状態管理の方法ないの？など日進月歩で進んできた技術なので

○○は●●よりこういった点で優れている
と1つ1つ理解していないと判断が難しいなと感じました。

②書いてみないとわからないことが多い

もちろん殆どの技術がこうだと分かっているのですが、特にこの傾向が強いと感じました。
なので、ふんわり感覚を掴んで進んでいき小さいサイクルで実践していくが今まで以上に重要だと感じました。

今後やっていくもの

直近でやっていきたいのが

• クラスコンポーネントに慣れる
• 基本的にTSで書いていく。慣れる
• テストツール(Jest)に慣れる

です。どれも繰り返し実践で経験することで品質も上がっていくのかなと考えています。
TSやJestはReact特有では無いですが、今後必ず必要になるはずなので。

この辺りに慣れてくれば

• Redux
• Webpack
• SSR

などのアドバンスな内容を意識的に挑戦していこうと考えています。
クラスコンポーネントやReduxは変わりつつある技術だと思いますが、過去のプロジェクトの対応になると触る機会も多いと思うので。

参考サイト: Reactロードマップ

さいごに

さいごまでご覧いただきありがとうございました！

しばらくReactを中心に進めていきたいと思います＾＾
[cv:issue_marketplace_engineer]