概要

気づいたらこの記事書いてから1年経ってたので続編。
最近Reactの習得について聞かれることも増えてきたので思考整理も兼ねて。

https://qiita.com/baan_nasebanaru/items/33be0f35c11a61dadf36

はじめに

自分の経験から「自分ならこう教えます」という手順なので、全員に当てはまるわけではありません。
参考にされる際は適宜修正しながら進めて下さい。

STEP0: 準備

1. 基礎的なJavaScriptを理解する
2. 基礎的なHTML/CSSを理解する

基礎的なってどの程度？って話ですが、

基礎的なJavaScript

formが実装できる
API叩いて、返ってきたjsonから必要な値を取り出せる

Reactの書籍で良いな〜と感じた書籍にはほぼ間違いなく最初にJavaScriptの基礎的な内容が載ってます。
それぐらい大事。これ理解してないと途中で詰みます。

基礎的なHTML/CSS

デザイン通りに実装できる(ピクセルパーフェクトとは言わんけど、それに近い形)
セマンティックなコーディング
保守を考えたDOM構造や、CSS設計

この辺も線引きは難しいんですが、React未経験で入る最初の作業は間違いなくHTML/CSSの修正です。
ここを疎かにして進むと「与えられた仕事もできない」ので、次に進めない。

あくまでも感覚値ですが、JavaScript / HTML / CSS で3ヶ月〜半年ぐらいの学習期間は必要かなと思っています。

STEP1: .jsxの書き方を理解する

一番良いのはこれまでに自分が作った模写のサイトや、ポートフォリオサイトなんかがあるといいのですが、それを .jsx に置き換えると良い練習になると思います。

CSS in JS を理解する(styled-components or emotion)
まずは、ベタっと file ごと移植してその後にコンポーネントに分ける

STEP2: TypeScript を導入する

とりあえず導入しましょう。anyまみれでもいいのでlinterとして使うからでもいいので

https://eh-career.com/engineerhub/entry/2021/08/26/110000

とりあえず導入して設定周りを整えて、順次移行できる状態を作るのがいいと思います(後から入れるとそれはそれでめんどい)。
ただ、ちゃんと書こうとすると最初はしんどい。なのでできる範囲を徐々に置き換えて行って進めるのが良いと思います。

しかし、残念なことにanyやts-ignoreで逃げ続けてもTSの理解は深まりません。

昨今の開発は Reactの開発 === TypeScript なのでしんどいながらも苦しんで覚えていくのが良いと思います。
どうせやるので最初からいっちゃいましょう。

STEP3: state や props を理解する

いきなり store / redux みたいな話じゃないです。
useState で boolean を管理して、それを配下のコンポーネントに渡す。
親コンポーネントの button の on/off で boolean が切り替わるみたいな実装でいいです。
イメージ的には jQuery の toggle button ぐらいの感覚です。

最小単位の実装で概念を理解していくのがおすすめです。
(僕は props 理解するのちょっと時間かかったので)

STEP4: 状態管理触ってみる

フレームワークはなんでもいいかなと思います。
Recoil / SWR はまだ把握できてないから分からんす。
Redux なら Redux Toolkit の方がいいです。

簡単な (todo)アプリを作ってみる

storeを使ってみる！で始めてもよく分からんと思うので、

https://zenn.dev/sprout2000/articles/60cc8f1aa08b4b

↑この記事の内容を状態管理のフレームワークを使いながら実装するのがオススメ。
(記事は useState で実装してる)

実際にフロントエンド初めての人とやってるのですが、良い粒感だと思います。

STEP5: その他

frame work UIを使ってみる

frame work UI ってなんぞやという話ですが、

Material UI
Vuetify

などのことを指します。

https://v4.mui.com/

そこそこの頻度で出会うものなので、どれか1つは使用しておいて使い方は理解しておくのがいいです。
自分が作ったサイトの button を置き換えるとかでいいかと。
できれば style のカスタマイズとかもできると尚良い。

webpack について少し知る

完全にカスタマイズできる必要はないのですが、中でどういったことが実行されているかは知っておいた方がいいです。

https://qiita.com/soarflat/items/28bf799f7e0335b68186

おすすめは↑の人のUdemyです。
さらっとUdemyを流してみて、簡単なものを動かしてみる程度でいいので。

※この Udemy は最新 version ではないですが、概念的なものの理解なのでそこまで問題ないです

API叩いて受け取ったjsonから必要なデータをフロントに表示する

フロントエンドの仕事として避けては通れない実装です。

無料公開されているAPIでいいので、まずはdataをとってくる(非同期処理)
大きいobjectの中から、必要なデータを抽出する(どの値が欲しいのかプロパティの確認)
フロントに表示する(Reactだとmap)

あとはそのdataをstoreに入れてみたり、propsで渡してみたり、
1,000件の情報が取れたのあれば無限スクロールを実装してみたり

とやっている間に理解が進んでいくと思います。

form機能

form も上記と同じく避けては通れない。
React の場合 react-hook-form がいい感じなので、ライブラリはこれがおすすめ。

よくあるのが、

マイページでもともと情報が入ってる
編集ボタンがあって編集可能
編集後に保存ボタンを押す
保存ボタンを押すと確認画面が出てくる
確認画面からキャンセルすると元のformに戻る & 編集中の値が記録されている

みたいな実装をよくみますし、実装してとても勉強になった思い出。

さいごに

STEP1~3は既存のものを置き換えたりすることで対応可能。
STEP4以降は「こういうアプリが作りたい」と思ったものをReactで表現できるかどうか？というところがポイントです。

STEP4まで終わっているとなんとか打席に立てるかもしれない。
それでも新規は難しくて、既に設計が決まっていて改修がメインの作業であればという感じです。

あと、React React って書いてますが別に
Vue / Svelte / Nuxt / Next / Gatsby どれでもいいと思います。
上記で得た経験は割と React でも応用効きます。
ただ、あえて React を避ける理由もないですが。

少しでもSPA開発の指標になれれば幸いですm_ _m
[cv:issue_marketplace_engineer]