【ISSUE】【ロードマップ】React1年やってみて
2024年12月23日 22:38
気づいたらこの記事書いてから1年経ってたので続編。
最近Reactの習得について聞かれることも増えてきたので思考整理も兼ねて。
https://qiita.com/baan_nasebanaru/items/33be0f35c11a61dadf36
自分の経験から「自分ならこう教えます」という手順なので、全員に当てはまるわけではありません。
参考にされる際は適宜修正しながら進めて下さい。
1. 基礎的なJavaScriptを理解する
2. 基礎的なHTML/CSSを理解する
基礎的なってどの程度?って話ですが、
Reactの書籍で良いな〜と感じた書籍にはほぼ間違いなく最初にJavaScriptの基礎的な内容が載ってます。
それぐらい大事。これ理解してないと途中で詰みます。
この辺も線引きは難しいんですが、React未経験で入る最初の作業は間違いなくHTML/CSSの修正です。
ここを疎かにして進むと「与えられた仕事もできない」ので、次に進めない。
あくまでも感覚値ですが、JavaScript / HTML / CSS で3ヶ月〜半年ぐらいの学習期間は必要かなと思っています。
一番良いのはこれまでに自分が作った模写のサイトや、ポートフォリオサイトなんかがあるといいのですが、それを .jsx
に置き換えると良い練習になると思います。
とりあえず導入しましょう。anyまみれでもいいのでlinterとして使うからでもいいので
https://eh-career.com/engineerhub/entry/2021/08/26/110000
とりあえず導入して設定周りを整えて、順次移行できる状態を作るのがいいと思います(後から入れるとそれはそれでめんどい)。
ただ、ちゃんと書こうとすると最初はしんどい。なのでできる範囲を徐々に置き換えて行って進めるのが良いと思います。
しかし、残念なことにanyやts-ignoreで逃げ続けてもTSの理解は深まりません。
昨今の開発は Reactの開発 === TypeScript なのでしんどいながらも苦しんで覚えていくのが良いと思います。
どうせやるので最初からいっちゃいましょう。
いきなり store / redux みたいな話じゃないです。
useState で boolean を管理して、それを配下のコンポーネントに渡す。
親コンポーネントの button の on/off で boolean が切り替わるみたいな実装でいいです。
イメージ的には jQuery の toggle button ぐらいの感覚です。
最小単位の実装で概念を理解していくのがおすすめです。
(僕は props 理解するのちょっと時間かかったので)
フレームワークはなんでもいいかなと思います。
Recoil / SWR はまだ把握できてないから分からんす。
Redux なら Redux Toolkit の方がいいです。
storeを使ってみる!で始めてもよく分からんと思うので、
https://zenn.dev/sprout2000/articles/60cc8f1aa08b4b
↑この記事の内容を状態管理のフレームワークを使いながら実装するのがオススメ。
(記事は useState で実装してる)
実際にフロントエンド初めての人とやってるのですが、良い粒感だと思います。
frame work UI ってなんぞやという話ですが、
などのことを指します。
そこそこの頻度で出会うものなので、どれか1つは使用しておいて使い方は理解しておくのがいいです。
自分が作ったサイトの button を置き換えるとかでいいかと。
できれば style のカスタマイズとかもできると尚良い。
完全にカスタマイズできる必要はないのですが、中でどういったことが実行されているかは知っておいた方がいいです。
https://qiita.com/soarflat/items/28bf799f7e0335b68186
おすすめは↑の人のUdemyです。
さらっとUdemyを流してみて、簡単なものを動かしてみる程度でいいので。
※この Udemy は最新 version ではないですが、概念的なものの理解なのでそこまで問題ないです
フロントエンドの仕事として避けては通れない実装です。
あとはそのdataをstoreに入れてみたり、propsで渡してみたり、
1,000件の情報が取れたのあれば無限スクロールを実装してみたり
とやっている間に理解が進んでいくと思います。
form も上記と同じく避けては通れない。
React の場合 react-hook-form がいい感じなので、ライブラリはこれがおすすめ。
よくあるのが、
みたいな実装をよくみますし、実装してとても勉強になった思い出。
STEP1~3は既存のものを置き換えたりすることで対応可能。
STEP4以降は「こういうアプリが作りたい」と思ったものをReactで表現できるかどうか?というところがポイントです。
STEP4まで終わっているとなんとか打席に立てるかもしれない。
それでも新規は難しくて、既に設計が決まっていて改修がメインの作業であればという感じです。
あと、React React って書いてますが別に
Vue / Svelte / Nuxt / Next / Gatsby
どれでもいいと思います。
上記で得た経験は割と React でも応用効きます。
ただ、あえて React を避ける理由もないですが。
少しでもSPA開発の指標になれれば幸いですm_ _m
[cv:issue_marketplace_engineer]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。