はじめに

こんにちは@Sicut_study (Watanabe Jin)です。
去年の10月頃にReactのロードマップを投稿しておかげさまで1000いいねもすぐそこになりました

そこから私自身も状況がかなり変わり、大好きなReactを使ってプログラミングを教えるスクールを運営しております。

エンジニアになりたい完全未経験の方や、すでにエンジニアだけどもっと自由にプログラミングができるようになりたい人をたくさん教えてきました。

👇メンバーの記事はこちらにあります

その中である程度この流れで学習をすすめていけば1-2ヶ月程度でReactで自由にサービスを作れるレベルに再現性をもってレベルアップすることができると確信がもてたので、

実際にやっているカリキュラム(React部分)をすべて紹介します
ロードマップは完全未経験でもできるようなものになっていますのでわかる箇所は飛ばしてもOKです。
その場合より早く終わらせることも可能です。

このカリキュラム通りに勧めていくことで確実に成長することが可能ですので、Reactを学びたい方はぜひ参考にして進めてください。

この記事の対象者

最速でReactを学びたい
プログラミング0からReactをやりたい
アウトプット中心で学びたい
しっかりと実力をつけたい
モダンな開発を学びたい

React学習ロードマップ

ここでは実際にJISOUがやっているカリキュラムの流れをざっくりと紹介していきます。
それぞれのカリキュラムの中でどのようなことを身に着けてほしいのかなど期待していることを書いていきます。

1. Web開発の基本

HTML, CSS, JavaScript, GitHub, Reactを一気に学んでいきます。
このロードマップの特徴は最速でReactを使ったモダンな開発ができるようになることなので、HTMLを1から学習したり、文法を学んでfizzbuzzを解いて練習するということはありません。

実際に使っていきながら必要なことを必要なタイミングで学んでいきます。

2. CI/CDの導入

アプリを作ってもデプロイをしなければユーザー価値をだすことはできません。
また価値をすぐに提供できるようにCI/CDを導入することはものすごく大切です。

ここではSupabaseというBaaS(Backend As A Service)を使ってデータベースやAPIのやり取りを学びます。
その後Firebaseを使ったデプロイやGitHub ActionsとJest(testing-library)を使ったCI/CDを行い、よりモダンな開発を行えるようになります。

ここはメンバーが一番カリキュラムの中で苦戦する箇所ですが、壁を乗り越えて成長していきます。
乗り越えた先にはReactを利用して自分で簡単なサービスを作り、提供するところまでできるようになります。

3. TypeScriptの導入

Reactを使う上でTypeScriptの導入はモダンな開発をする上では必須ではないでしょうか？
初めてTypeScriptを使う上で多くの人がなぜTypeScriptを使うべきなのか？という理由を理解して使うことができないイメージがあります。

ここではReact(JavaScript)をたくさん使ったことで、TypeScriptの良さをたくさん享受することが可能です。また型だけでなくクラスを活用することでオブジェクト指向についても学べるためアーキテクチャなども意識して実装することが可能です。

開発はチームですることも多いので、開発コードとテストから開発者の思いを伝えることが可能になります。

4. 名刺アプリの開発

ここまでにReact(TypeScript)やCI/CDなどを学びました。
この課題では名刺アプリの開発を通して開発環境構築からCI/CD、開発まで0->1を改めて行うことでReactやシステム開発の自信をつけることが可能です。

復習を行うことにもなるため曖昧な理解だった箇所を洗い出すこともできます。

5. 個人開発サービスをリリース

Reactを使った個人サービスのリリースを行います。
開発に関してはここまでで経験をしてきたので実力は十分ついています。

ここで意識してほしいのはあなたのサービスがどのような価値をユーザーへ届けるのかというところです。

多くは個人開発を学習の一環として行いますが、しっかりとユーザー価値を意識して開発や運用を行います。
この経験は個人開発を一気に超えた経験をもたらすことになります。

素早く世の中に価値を届けられる経験をすることができればそれは大きな自信につながることになります。

カリキュラムの中でのルール

JISOUには鉄の掟と呼ばれるルールが存在します。

エラーや問題に遭遇して10分以上解決に時間がかかったものは必ず記事にすること

アウトプットの習慣をつくるために取り組んでいます。
ぜひともこのロードマップを実行する方は遭遇したエラーを記事にしてみてください。

👇メンバーも投稿していますので、わからないことが出た場合には、参考にしてみると良いかもしれません

アウトプットに関する考え方は以前にたくさん記事を書いていますのでご一読いただければと思います。

1. Web開発の基本

ここではReactを学習しながらHTML/CSSやGitHubなどWebエンジニアの基本をまとめて学習していきます。
実際にJISOUでは経験0でも実施できていますので、ぜひとも挑戦してほしいです。

1-1. 最低限のインプット

ReactやWeb開発に関する基本を抑えるために最低限のインプットを行います。
以下の教材をすべてインプットとして学習していきます。

※ 注意
何往復も教材を学習したくなる人がいますが、1周学習したら課題に進んでください。
この1周の中でわからないことはすべて明らかにするようにしてください。

まずはReact(JavaScript)とHTML/CSSの学習として以下の教材を進めてください

1-2. GitHubの学習

GitHubの使い方についても以下の動画で学習を進めてください

GitHubはおそらく多くのエンジニアが最初につまづく箇所になります。
これはイメージがつきづらく、コマンドもたくさん書籍では紹介されているからです。

必要最低限の利用するコマンドを動画で紹介しています。
それ以外のコマンドに関しては何か問題に躓いた時に調べて覚えていくようにしましょう

書籍などを学習すると必要でないコマンドを学ぶことで学習ペースを落とすことにつながってり、実際に手をうごかさないことから技術として身につかないことが多いので、この段階ではやる必要はありません。

1-3. 課題1

Udemyで学んだReactを利用して以下の仕様のアプリを作成してください。

作成するもの

エンジニアとしての学習時間は1000時間が必要と言われています
そこで日々の学習の内容と学習時間を記録するアプリを作ることにしました

以下の実装をすべて行ってください
ただしCSSなどのスタイリングは不要です

Viteを利用してReact環境を用意する
- Node.jsをインストールする
- Hello Worldが表示される

タイトル「学習記録一覧」を見ることができる
テストデータを一覧で表示する

const records = [
    { title: "勉強の記録1", time: 1},
    { title: "勉強の記録2", time: 3},
    { title: "勉強の記録3", time: 5}
]

学習内容の入力フォームをみることができる
学習時間の入力フォームをみることができる
学習時間の入力フォームは数字を入力できる
登録ボタンをみることができる
登録ボタンをクリックするとrecordsに記録を追加できる
登録をしたらフォームが初期化される(
全項目が入力されていないときにエラーが表示される
正しく入力されている場合登録ボタンを押すとエラーが消える
記録した勉強の時間を合計した値をみることができる

このようなアプリができればOKです👇

2. CI/CDの導入

ここではBaaSであるSupabaseを利用してバックエンドを使ったアプリケーションを作成します。
そのあとユーザー価値を届けるためにFirebaseにアプリケーションをデプロイします。

モダンなWeb開発企業に入るにはCI/CDが素早く構築できることも大切です。
まずはGitHub Actionsを使ってGitHubにPushしたらアプリケーションが勝手にデプロイされる仕組みであるCD(継続的デリバリー)を構築します。

PushしたものがすべてデプロイされたらバグがあるコードをGitHubにPushされてしまった場合、本番のアプリケーションに問題が起きる可能性もあるので、デプロイ前に自動テストを実行してすべてが通ったらデプロイされるようにCI(継続的インテグレーション)を構築します。

自動テストはJestとtesting-libraryを使って書いていきます。

2-1. インプット

バックエンドと接続をするのに必要な非同期の考え方やReactのルーティングについて学び、ReactやJavaScriptの基本を一通り学ぶためUdemyを行います。

※ ReactとJavaScriptで行うためJSONPlaceholderからaxiosでデータを取得してみるまで行います。

2-2. 課題2

課題1で作ったアプリケーションはリロードをするとデータが初期化されてしまうため、Supabaseを利用してデータの永続化をします。
そのあとCI/CDの構築を行っていきます。

以下の実装を順番に全て行ってください

Supabaseのプロジェクトを作成する
Table Editorで以下のテーブルを作成する

テーブル名 : study-record

column	type	option
id	uuid
title	varchar	non null
time	int4	non null

テストデータを3つ作成する
テストデータを一覧でみることができる
データ読み込みのタイミングはLoading...が表示される
登録ボタンを押したらsupabaseのテーブルにTODOが追加される
削除ボタンを押したらSupabaseのテーブルからTODOが削除される
Firebaseのアカウントを作成する
Firebaseのプロジェクトを作成する
Firebaseにデプロイする
GitHub ActionsでHello Worldすることができる
https://qiita.com/Teach/items/d2c4d7bec98228df1807
Push時にFirebaseに変更をデプロイすることができる
ひと工夫が必要になるのでコンソールのエラーを見ながら対処しましょう
Jestとreact-testing-libraryを導入する

以下の項目の自動テストを書くこと

タイトルが表示されていること
フォームに学習内容と時間を入力して登録ボタンを押すと新たに記録が追加されている
削除ボタンを押すと学習記録が削除される
入力をしないで登録を押すとエラーが表示される
パイプラインにCIを追加する

ここまで終わるとReact(JavaScript)の開発が一通り自由にできるようになり、CI/CDもできるようになるため個人開発をしてユーザーに価値を与えられるレベルになることができます。

JISOUのカリキュラムで一番難しいパートと言われています。

TypeScriptの導入

ここのパートではReactをTypeScriptを用いて実装できるようにします。
TypeScriptはモダンな現場ではほとんど導入されているのではと思うくらい人気な言語です。
その特徴とメリットを実感しながら開発をしていきましょう

3-1. インプット

途中になっていたこちらの講座をすべて学習します。
ここで注意が最後のReact×TypeScript(実践編)がAtomiデザインを採用していることもありかなり複雑になります。完全に理解するというよりはざっくりな理解で終わりにしてかみません。

ここで自信がわかずに2週目を進めようとすることが生徒さんにもありましたが、あまりおすすめはしていません

3-2. TypeScriptのクラスとJestのモックを学ぶ

こちらはJISOUのオリジナル教材になります。
TypeScriptを使う上でしっかりとオブジェクト指向やクラス、ドメインについて理解してもらいたいため必要な箇所は別途教材を用意しています。

またテストも今まではSupabaseを利用した外部環境に依存していたテストだったため、モックについても学習をします。モックについてもつまづく人が多いので動画を真似ながら実装をこの先進めてください。

3-3. 課題3

課題2までで作成した学習記録アプリをTypeScript化していきます。

React+TypeScriptの開発環境をViteで用意する
Fireabseにデプロイする
Jestとreact-testing-libraryを導入する
- コンポーネントテストをサンプルで作成して動くことを確認
Github Actions(Push)でCI/CDできる
ChakuraUIを導入する
ユーザーはタイトルをみることができる
Supabaseの初期設定をする
ユーザーは学習記録一覧をみることができる
学習記録はクラスを利用して実装すること
ユーザーはデータ取得のときにローディング画面をみることができる
ユーザーは学習記録を登録することができる
- react-hook-formを導入する
- 学習記録を入力していないと「内容の入力は必須です」とでる
- 学習時間が入力していないと「時間の入力は必須です」とでる
- 時間を0以上でない値を入力したら「時間は0以上である必要があります」
登録をして再度登録モーダルを開いても前の入力内容が残っていない
ユーザーは学習記録を削除することができる
自動テストを実装する
- ローディング画面をみることができる
- テーブルをみることができる
- 新規登録ボタンがある
- タイトルがあること
- 学習記録が登録できること
- モーダルが新規登録というタイトルになっている
- 学習内容がないときに登録するとエラーがでる
- 学習時間がないときに登録するとエラーがでる
- 未入力のエラー
- 0以上でないときのエラー
- 学習記録が削除できること
  ここでsupabaseと通信があるところは、モックをいれて実装すること
ユーザーは学習記録を編集できる
- 編集ボタンがそれぞれの記録ごとに表示されている
- 編集ボタンを押すとモーダルが表示される
- モーダルにはフォームがあり、ボタンを押した記録の学習内容と学習時間が表示されている
- 内容と時間を編集して保存することができる
- タイトルが記録編集である(新規登録ではない)
- 保存を押すとモーダルが閉じて、一覧の該当する記録が更新される
- キャンセルを押すとモーダルが閉じる
- 保存を押すとフォームがクリアされる
- 編集のテストを書く
- モーダルのタイトルが記録編集である
- 編集して登録すると更新される

ここまで実装すると以下のようなアプリを作れます

4. 名刺アプリの開発

Reactの開発やCI/CDの構築をある程度できるようになったはずです。
ここでは簡単なアプリを短期間で開発する経験をすることで技術の自信や自分でものが作れる楽しさを体験することができます。

ここでは新しい技術はあまり登場しないですが、ここまでを一通り復習することが可能です。
JISOUでは1週間程度で実装を終わらせる人が多いです。

React+TypeScriptの開発環境をViteで作成
Fireabseにデプロイする
Jestとreact-testing-libraryを導入する
Github Actions(Push)でCI/CDできる
ChakuraUIを導入する
usersテーブルを作成する

table: users

Name	Type	option
user_id	varchar	non-null
name	varchar	non-null
description	text	non-null
github_id	varchar	null
qiita_id	varchar	null
x_id	varchar	null

テストデータを1件用意する

Name	Value
user_id	sample_id
name	テスト太郎
description	<h1>テスト太郎の自己紹介</h1>
github_id	あなたのgithubのID
qiita_id	あなたのQiitaのID
x_id	あなたのXのID

user_skillテーブルを作成する
ユーザーIDとスキルIDを結ぶ中間テーブル
table: user_skill

Name	Type	Option
id	int8
user_id	varchar	non null
skill_id	int8	non null

テストデータを1件追加する

Name	Type	Option
user_id	sample-id
skill_id	1

skillsテーブルを作成する
table: skills
プログラミングの技術を保存しておくテーブル

Name	Type	Option
id	int8
name	varchar	non null

テストデータを追加する
NameをReact,TypeScript,Githubで3つ作る
Routerを設定する
localhost:5132/cards/:idでidに入力した文字列を画面に表示できる
Supabaseのセットアップ
登録した情報を表示する(/cards/sample-idでアクセスしたらそのIDに紐づくユーザーデータを表示する
- ユーザーデータ取得中はローディング画面を出す
- ユーザー情報を取得する
- ユーザーIDからuser_skillテーブルのuser_idと一致するレコードをみつけてそのレコードのskill_idでskillsテーブルを検索する
- ユーザーとスキルをあわせてUserとして表示
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/cfa45e42-3565-d96b-4a7c-420e788c989c.png
Github, Qiita, Xはクリックすると飛べるようにする
ChakuraUIでスタイルを整える
紹介文はHTMLで表示する

新規登録ページ
- routerに登録のパス/cards/registerを登録してページが表示できるようにする
- タイトルをつける
- レイアウトを当てながらID、名前、自己紹介、好きな技術、GithubId、QiitaId, TwitterIdの入力欄を作る
- 登録ボタンがある
- 必須項目にバリデーションエラーを設定する
- 項目を登録することができる
- 登録に成功したらlocalhost:5173/にページ遷移する

ユーザーは名刺をみることができる
- タイトルがある
- IDの入力フォームがある
- ボタンをクリックすると/cards/入力したIDページに遷移する
- IDがないときにバリデーションエラーが出る(項目が少ないのでhook-formを使わなくても良い)
- /cards/idのページに戻るボタンを追加する
- 戻るをクリックするとホームにページ遷移する

自動テストを実装する
名刺カードのテストを書く
- 名前が表示されている
- 自己紹介が表示されている
- 技術が表示されている
- Githubアイコンが表示されている
- Qiitaのアイコンが表示されている
- Twitterのアイコンが表示されている
- 戻るボタンをクリックすると/に遷移する
- react-routerのモックをすると検証できる
名刺登録ページのテストを書く
- タイトルが表示されている
- 全項目入力して登録ボタンを押すと/に遷移する
- IDがないときにエラーメッセージがでる
- 名前がないときにエラーメッセージがでる
- 紹介分がないときにエラーメッセージがでる
- オプションを入力しなくても登録ができる
トップページのテストを書く
- タイトルが表示されている
- IDを入力してボタンを押すと/cards/:idに遷移する
- IDを入力しないでボタンを押すとエラーメッセージが表示される
- 新規登録はこちらを押すと/cards/registerに遷移する

5. 個人開発サービスをリリース

ここまでの内容を踏まえて個人開発でサービスのリリースを行ってください

そのサービスがユーザーにどんな価値を与えるのか
競合サービスとの差別化ポイントはなにか
細かい単位でリリースができているか
ユーザーを増やすための取り組みができているか
マネタイズポイントはどこにあるか
サービスの将来的な目標があるか

個人開発を学習でするか、価値を考えて作るかでは学べることも変わってきます。
Webサービスを作るのは誰かに価値を与えるためだと思っています。

ここではユーザー価値というところを意識してアプリ作成をしてください。
技術に関しては一通りできるようになっているはずなので、何を作るべきかという視点を第一にして作るものを決めて、必要な技術を学ぶようにします。

SupabaseやFirebase、CI/CDなど苦戦してたくさん調べた経験のあるあなたであれば自走力はこの時点である程度ついているはずなので十分やり切ることが可能なはずです。

6. その先へ

JISOUではここまでを1-3ヶ月程度で仕事と両立しながらでも多くの人がやり抜いています。

ここまでもしやりきれる人がいたら次はNext.jsにチャレンジすると良いかと思います。
ユーザー体験というのがものすごく大切な時代になっています。
Next.jsを学ぶことでよりよいWebアプリの開発ができるようになります。

こちらについては今後投稿していく予定ですのでお楽しみに。

JISOUでは質問にもすぐ答えますし、本当に躓いたらペアプロをしたりしながら多くの人が壁を超えて自由にアプリを作れるようになっています。
またモダンなスキルを使えることで転職にも十分活かせるようになっています。

ここではJISOUのカリキュラムをそのまま紹介しました。
そんなお金取る内容を公開していいの？と思われるかもしれませんが、この記事をみてすべてこなせるひとであればJISOUは不要だと考えています。

ぜひとも挑戦してみて挫折やどうしても達成して見たいと思った方がいればカウンセリングから受けていただければと思います。誰でもこの内容をこなすことが可能なサポートを用意していますのでお待ちしております👇

おわりに

今回はJISOUで実際に行っているReactを最速で身につけるためのカリキュラムについてすべてを公開しました。
もしこのカリキュラムをすべてこなすことができたのなら、キャリアアップや成長を大いに感じることができるはずですので挑戦してみてください。

ここまで読んでいただけた方はいいねとストックよろしくお願いします。
@Sicut_study をフォローいただけるととてもうれしく思います。

また明日の記事でお会いしましょう！

JISOUのメンバー募集中

プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします👇