【2025年最新版】0からReactを勉強するならこのロードマップに従え！

Last updated at 2025-10-17Posted at 2025-10-13

はじめに

こんにちは@Sicut_study (Watanabe Jin)です。

2023年から始まった 「0からReactを勉強するならこのロードマップに従え」 ですが、早いもので3年目を迎えました。この期間で私も多くのプログラミング未経験の人にJISOUを通してReactを指導してきました。

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

　　
また、実際に記事通りにロードマップを進めたことでReactやNext.jsの案件に参画できたというお礼のメールがくるようにもなりました。信じてやっていただけて大変感謝しています。



実際に頂いたメールの一部

Reactを多くの人に指導してきてわかりました。
　　

完全未経験だったとしても正しい手順を踏めば
誰でも3ヶ月でReactで個人開発できるレベルにはなれる
　　

私から教わることでも達成できますが、自分でやれる行動力があるなら教わらなくてもできます。むしろ自分でできる人は自分でやって成長してくれればと思っています。

Reactは正しいロードマップで学ぶだけでできるようになります
私が考えるロードマップをたどれば完全未経験だとしても3ヶ月程度で個人開発アプリをリリースして、ユーザーに価値提供するところまで再現性をもって成長ができます。
今回はそんな方法を2024年の記事を元に大幅にリニューアルして紹介していきます。
　
AI時代になってReactができることの価値はどんどん高まっています。
しかし、自走して開発できるレベルの人は思ったよりも少ない印象です。いましっかりスキルをつけることは今後のAI発展を考えても費用対効果の高い投資だと考えています。

このロードマップで1人でも多くのエンジニアの人生が変わることを願っています。

動画教材も用意しています

こちらの教材にはより詳しく解説した動画もセットでご用意しています。
テキスト教材でわからない細かい箇所があれば動画も活用ください。

この記事の対象者

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

なぜ独学でやることが難しいのか

ここからロードマップを紹介するのですが、実際に取り組む上で勉強を頑張っているのに報われない・スキルが身につかないエンジニアが陥っている間違った勉強方法について解説をします。ロードマップを行う前にこの内容を理解しておくことは重要なので解説します。

初学者を苦しめるアウトプットっぽいインプット

私のもとには勉強しているのに成長しませんという人が集まってきます。
その99%以上の人が「動画教材で勉強しています」「技術書を読んでます」と口を揃えて言います。

私も実は過去にチュートリアル地獄に落ちいっていました。
毎日動画教材をやったり、Reactの技術書で売っているものを片っ端からやっていました。

しかしチュートリアル動画を勉強することは 知識を増やすだけで知恵(スキル)は身につきません。

　
動画教材は例えるなら「レゴブロック」を作るようなものです。

おそらく誰でもレゴブロックの「宇宙船」などを買えば説明書を読みながら組み立てることはできるはずです。立派なレゴブロックを時間をかければ完成させることができます。

しかし、宇宙船が作れたとしてもレゴブロックの大会にでたら入賞どころか、簡単な動物すらも作れません。つまり動画教材をやることは説明書をみてつくれているだけなのです。

　
動画教材は怖いです。

　
最後にはそれっぽいアプリができるし、達成感もあります。次の動画をやりたいと思えてしまいます。しかしただ説明書を読んでアプリが作れているだけなのでスキルにはなっていません。大量の時間を使って何も身につかないのです。私はの事実を気づくまでに多くの時間を使って後悔しました。

　
この事実に気づいたのはとある凄腕エンジニアの一言でした。
「動画教材てタイピング練習じゃん」

スキルを最速でつけるならアウトプットを中心とした勉強方法をするのが大事ということを理解しました。ロードマップもアウトプット中心に設計されています。

アウトプットは挫折しやすい

エンジニアの中にはアウトプットが大事ということを理解しており、アウトプット中心に勉強を進める人も中にはいます。

とても良いことなのですが、挫折率が高い特徴があります。

このタイプの勉強方法をする人はいきなり個人開発から始めようとします。
そして個人開発の中でたくさん調べて技術を学ぶスタイルでやっていきます。
このやり方はとても効率的なのですが、基本がきていない状態でいきなり難しいアプリ(例えばログイン機能付きのSNS)などを開発し始めちゃいます。

すると基本がないので解決するのにものすごい時間をかけてしまいます。
ここでAIを使ってしまうと余計にスキルは身につかず最後まで完成しないで挫折経験だけが残ります。

重要なのはすこしだけ高いハードルのエラーを解決する経験を積み続けることです。

　
そもそもエンジニアの仕事とは何でしょうか？

私はプログラミングできることだとは思っていません。
プログラミングはただのツールです。

　
「エンジニアの仕事は問題解決である」

会社とはお金儲けをするのが一番の目的です。
そのためにはユーザーの問題を解決する必要があります。その問題を解決する手段がシステム開発なのです。

そしてシステム開発をするツールがプログラミングやライブラリです。
最近は「AIを利用してサービスを作ればプログラミングはいらない」という言葉を聞くこともありますが、これは間違っていると考えています。

たしかにAIがあれば不要かもしれませんが、AIを使ってしまうと簡単なエラーを解決する経験を失ってしまします。するといきなり大きな問題を解決することになります。ゲームで言うならレベル1でいきなりラスボスみたいな感じです。

アウトプットで挫折する人の99%は自分よりはるかにレベルの高いエラーを解決しようとしています。つまり基本的な学習の中で遭遇するはずのエラーをすべて飛ばしているのです。

ロードマップではこの自分よりすこしハードルの高いエラーが出るように設計してあります。エラーはサイト検索やドキュメントを見ることによって必ず解決できるようになっています。ロードマップを通して「問題解決能力」を身につけて求められるエンジニアを目指してください。

自己流が一番成長しない

自己流の自己は事故を起こすの自己である
これは私がよく生徒に言っている言葉です。

ロードマップはこれまでの経験や多くの人が試していく中で改善されてきたものになります。たくさんの検証と改善、長年の経験を費やしたロードマップです。

このロードマップより初心者が考える方法のほうがうまく行くと思いますか？
私は絶対無理だと考えています。だからこそ信じてやってもらいたいのです。
　
小学校の頃に円の面積を求める公式を私たちは教わりました。

半径 × 半径 × 3.14

しかし、自己流で3.14を3.15にしたとしたらどうでしょう？
それは惜しいどころか不正解になってしまいます。

自己流を入れるということはこの考えに近いです。
ロードマップの途中で自己流を入れ始めるとそれは全く違う結果を生み出すことになります。これまで費やした時間がすべて無駄になることすらあります。

自己流を捨ててこのロードマップ通りにまずは進めてみてください。
そして走りきったあとにここを改善すると良いと思ったことがあればぜひFBをいただけたらと思います。

目標を立てることが一番大切

すこしゲームをしてみましょう。

明日の朝8時に東京に集合してください。時間通りに集まれたら賞金をお渡しします。

あなたはこの賞金を受け取れる自信はありますか？
あなたは9時にどこに集合していますか？
　
東京駅ですか？
東京スカイツリーですか？
渋谷ですか？

集合場所の正解は実は「東京ディズニーランド」でした。
　

勉強してもなかなか成長できないエンジニアに起きていることはまさにこの現象なのです。
JISOUではプログラミングコーチングというコーチングサービスとして運営しています。もちろん技術を教えることもありますが、コーチングをかなり大事にしております。

ほとんんどの人はゴールというものを明確に定義していません。
なんとなく「年収が増えたら嬉しい」「開発できる現場に行きたい」「技術力をつけたい」その程度でしか考えていません。そうするとゴールというのが「東京ディズニーランド」を「東京」というくらいの抽象度になります。

目標が抽象的になるとゴールに最短で向かうことはできなくなります。
むしろ東京ディズニーランドにたどり着くなんて不可能なレベルなのです。それをやっています。

だからこそ目標を明確にしてロードマップをやることが重要なのです。
このロードマップで行けるレベル感としてはCI/CDを含めて個人開発ができる、新しい技術を自走して学べるようになる、自社開発に転職できるスキルを手に入れられるレベル感です。

このロードマップをやるのは大変です。
大変でないとそのレベルに短期間でたどり着くことはできないのです。
だからこそ本当に自分が勉強を頑張らないと行けないのかを目標を考えることで確かめてほしいです。

もしそこまでの目標がないのならおそらくこのロードマップは適切ではありません。
ご自身で楽しい勉強を続けてもらうほうが幸せになれるでしょう。



実際の目標設定の様子

最短最速ロードマップの紹介

ロードマップをやる際の鉄の掟

ロードマップでは以下のルールを守ってください。
このルールを守らない場合、成果は保証できなくなります。

1. エラーの解決に10分かけたら必ず記事を投稿すること

エラーに10分以上かけたということはそのエラーは検索してもすぐにヒットしなかったということです。そのようなエラーは記事にすることで多くの人の助けになります。またエラーを記事にすることで理解にも繋がります。詳しくは私が以前Qiitaのイベントで登壇した動画がありますのでご覧ください。

2. AIは極力利用せずに検索をすること

エンジニアは「問題解決」をするのが仕事です。
プログラミングやフレームワークはツールなのでそれ自体の使い方を覚えることは重要ではありません。

大切なのはどのように問題を解決するかの能力でそれは小さなエラー解決から身につけることができます。この
ロードマップでは簡単なエラーから徐々に解決できるよう設計されています。

せっかくの問題解決能力を育てるチャンスをAIに任せてしまってはエンジニアとしての本当に大事な能力を育てられなくなります。AIが使えるのも大事ですが、AIは誰にでも使えるようになっているので "あなた" に仕事を頼む理由なくなっていきます。

3. ドキュメントを読むこと

スキルがまだないエンジニアに共通することとしてドキュメントを読むことに抵抗感があることです。英語だから読めない、何が書いているかわからないという人が多いです。

しかしドキュメントはドキュメントを読んで解決した経験がないと読めるようにはなりませんし、ドキュメントにだいたいのことは書いてあります。

エンジニアの仕事は「問題解決」なのでドキュメントを読めるようになることは重要になってきます。

Chapter1 : Web開発の基礎

ここではWeb開発に関する超基本を学んでいきます。
そもそもの大前提の知識がかけている場合に進める事が困難になるのでざっくり時間をかけずに行います。

このチャプターはJISOUでは割愛しているため3ヶ月の期間には入っておりません。
※ HTML/CSS/JavaScriptの基本を理解している場合は飛ばしてください

1. HTML/CSS

Web開発の基本になるHTML/CSSについて学びます。
特にCSSは覚えきれないほどのスタイルが存在しているので、すべて学ぶには何十年あっても時間が足りません。ここでは最速に学ぶことを目的にするため、最低限必要な知識のみをインプットします。

CSSは普段利用するものがある程度限られており、なんとなく理解しておくだけであとは開発の中で振り返ることで使えるようになります。CSSを覚えよとする人も時々いますが、プログラミングにおいて覚えるということは一切行ないません。

覚える必要のあるものは頻出なので自然と何度も調べるうちに覚えてしまいます。めったにでないものはそもそも覚える必要ないです。

ドットインストールというサービスを利用してHTML/CSSの基本を理解します

以下のレッスンをすべて受講してください

はじめてのWeb制作

学習環境を整えよう
HTML入門基本タグ編

HTML入門フォームタグ編

CSS入門基本スタイリング編

CSS入門応用スタイリング編

CSS入門セレクター編

CSS入門フレックスボックス編

CSS入門メディアクエリー編

実践！ポートフォリオを模写しよう

自己紹介ページの作成

HTML/CSSを使って自己紹介ページを作成してください

1枚のページに以下の要素をいれてください
CSSはChatGPTは利用せずにスタイルをあててください。

名前をみることができる
年齢をみることができる
仕事をみることができる
趣味をみることができる
エンジニアになった理由をみることができる
写真をみることができる
CSSでスタイルが整えられている

ここまでのレベルではリッチなページは難しいため、最低限人に見せられるレベルのページが作成できれば問題ありません。

CSSにこだわって時間をかけすぎないように注意してください

2. GitHub

GitHubはおそらく始めての挫折を味わうことになるテーマです。しかし、エンジニアにとって絶対に必要なスキルです。なぜプログラミングを始めた多くの人がつまづいてしまうのでしょうか？

大きく3つの理由があると考えています。

コマンドが多い
イメージがつかない
学んだことを使う機会がない

GitHubを勉強しようと思う人で技術書を買う人も多いですが、実際に実務で使うコマンドはかなり限られているため書籍で紹介している内容をすべて学ぶのは時間がもったいないと考えました。

その他にも色々教材はありますが、ハンズオンで学べて必要なことをピンポイントで説明しているものが世の中には存在しないと思ったのでJISOUではオリジナル教材を作成しています。

1本の動画をみるだけでGitHubの学習は終了して大丈夫です。

3. JavaScript

JavaScriptはHTML/CSSの次に必須のスキルであり、どこの現場でも求められるスキルです。
しかし、実際に現場で歴1-2年程度のジュニアエンジニアをみていると面白いことに気づきます。

JavaScriptを自信を持ってコーディングできる人が少ないのです。
このあとのReactはまさにJavaScriptのライブラリとなるのでしっかりと学んでください。
※JavaScriptの基本を理解している方はスキップしてください

基礎理解

ドットインストールで以下のレッスンをすべて受講してください
※ 自信がないという理由で3-3の前に2週目を行うことはしないでください

はじめてのJavaScript

JavaScript入門基礎文法編

JavaScript入門関数編

JavaScript入門データ構造編

JavaScript入門 DOM編

JavaScript入門データ型編

JavaScript入門クラス編

JavaScript入門 fetch API編

JavaScriptでビンゴシートを作ろう

JavaScriptでスロットマシンを作ろう

JavaScriptで数字タッチゲームを作ろう

JavaScriptでTodo管理アプリを作ろう

JavaScriptで個人開発

以下の仕様のアプリを作成してください

CSSなどのスタイリングは時間をかけない程度で人に見せられるレベルにしてください

問題

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

ユーザーは「学習記録アプリ」というタイトルをみることができる
ユーザーは学習内容を入力できる
ユーザーは学習記録を一覧でみれる
- テストデータを用意
ユーザーは学習時間を整数で入力できる
ユーザーは登録ボタンを見ることができる
ユーザーは入力が不正の時にエラーを知ることができる
- エラー分を表示する
- 登録することができない
ユーザーは一覧に表示されている学習記録の合計時間をみることができる

Chapter2 : React基礎 (〜7日目)

ここからはReactのよく利用する基本的な書き方を学んでいきます。
そもそもReactとは何か？どのように書いていけばいいのかを考えながら実装することで深く理解します。

2-1. インプット

以下の教材を1周してください (2周以上はやらないでください)
理解していることも多いかと思いますが、必ずすべての動画をみて実際にコードを書いてください。

2-2. 課題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です👇

Chapter3 : CI/CD (〜10日)

ここでは「SupabaseによるDB操作」「Jestによる自動テスト」「Firebaseを使ったデプロイ」「GitHub Actionsを用いたCI/CD」をやることで一気にモダンアプリ開発に近づいていきます。

JISOUの中では課題2が一番難しいと言われていますが、その分最後までやりきると成長を実感できます。

2-1. インプット

以下の教材を「JSONPlaceholderからaxiosでデータを取得してみる」まで行います。
JavaScriptとTypeScriptの切り替えのタイミングまでやってから次の課題に進みます。

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を追加する

Chapter4 : TypeScript

現代では必須となりつつあるTypeScriptについて学んでいきます。

4-1. インプット

以下の教材を続きから最後まで行います。
TypeScriptを学びながら、Atomic DesignやChakuraUI、ルーティングも理解ができます。

4-2. モックとクラスを学ぶ

このタイミングで自動テストにモックを追加するためにJISOUのオリジナル教材を利用します。またその過程の中でTypeScriptを使ったドメインの考え方も理解します。

4-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と通信があるところは、モックをいれて実装すること
ユーザーは学習記録を編集できる
- 編集ボタンがそれぞれの記録ごとに表示されている
- 編集ボタンを押すとモーダルが表示される
- モーダルにはフォームがあり、ボタンを押した記録の学習内容と学習時間が表示されている
- 内容と時間を編集して保存することができる
- タイトルが記録編集である(新規登録ではない)
- 保存を押すとモーダルが閉じて、一覧の該当する記録が更新される
- キャンセルを押すとモーダルが閉じる
- 保存を押すとフォームがクリアされる
- 編集のテストを書く
- モーダルのタイトルが記録編集である
- 編集して登録すると更新される

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

Chapter5 : 個人開発(〜30日)

ここまでで一通りReact開発に必要なものを学んだので、個人開発をすることで定着させていきます。
それと同時に0からアプリ開発をすることでアイデアを形にできる自信をつけてもらいます。

5-1. 名刺アプリの開発

ここでは私が考えた便利なアプリの仕様書を実装して形にしてもらいます。
仕様書から自分でも0から爆速で開発できた経験は自信になるはずです。またアプリも実際に利用できるものなので自分の開発が価値になる経験も可能です。

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-2. 個人開発

ここまでで仕様書通りにReactを使って開発できるようになりました。
あとは自分で考えたアイデアを形にすることができれば1人でもプロジェクトを実施できる自信がつきます。
また開発に必要な技術を調べて取り入れる経験ができることで「自走力」を感じられるはずでしょう

課題6

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

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

多くの生徒をみてきて適当な思いつきのアプリを作ろうとしますが、エンジニアのキャリアアップにおいて重要なのは何を作るかの部分だと思っています。もしあなたが開発のキャリアがなかなか詰めていないのなら面接で聞かれるのは間違いなく「ポートフォリオ」になります。

経験があまりないのであればポートフォリオとはいわば絶対に出題される質問なのです。そのポートフォリオをなんとなくで作っている人が多いです。

テーマ選びでそのポートフォリオについて深く話せるのかは決まってきます。会社は「お金稼ぎ」が仕事です。つまりポートフォリオのサービス価値を考えないのはもったいないです。ここまでやっていればスキルは全く問題ないはずです。ある程度のものは簡単に作れます。だからこそ「何を作るか」に力をいれるようにしましょう。

JISOUではこれくらいのレベル感でアプリを作っています。

Chapter6 : Next.js基礎 (〜50日)

Reactを一通り理解したのでここからはNext.jsを学んでいきます。
Next.jsをやることでサーバーサイドの意識であったり、APIなどの考え方を理解してより実践的な開発ができるようになります。

6-1. インプット

以下の動画を行ってください。
サーバーサイド/クライアントサイド、CSR/SSG/ISRなどの違いを意識して実践してください

また追加で以下の教材もやっていただくとより理解が深まります。

6-2. 課題6

ここまで習ったことを生かしてオリジナルのテックブログを開発します。

あなたは社内でテックブログを始めることになりました。
社内のエンジニアの記事を集めて、社外に公開することを目指しています。
また、エンジニアの中にはQiitaで記事を書いている人もいるため、
Qiitaの記事を自動で取得して、社内のブログに反映することも考えています。

Turbopackを用いてNext.js(TypeScript)の環境を作る
TailWindoCSSを導入
DaisyUIを導入する
JestとReact Testing Libraryを導入する
Firebaseにデプロイする
CI/CDパイプラインを作成する
QiitaAPIをCurlコマンドで叩いて自分の記事の一覧を取得する
https://qiita.com/koki_develop/items/57f86a1abc332ed2185d
サンプルデータを作成する
サンプルデータを表示する
Qiitaの記事を取得するapiを作成する
API Routeを使って作成する
GETで/api/qiiitaを叩いたら実際にQiitaのAPIを叩いて自分の記事を4個返すようにする

注意 : QiitaのトークンはNEXT_PUBLIC_にしてしまうとユーザーにシークレット情報が見えてしまうので(クライアントではみえる)、サーバーサイドで設定すること、つまりAPI RoutesでAPIを作成してそこから情報をとるようにする

APIを叩いてデータを表示する
カードをクリックするとリンクに遷移する
もっとみるボタンを押すと全ての記事を表示する
MicroCMSにブログの記事を登録する(5つ以上登録する)
MicroCMSから記事を取得するAPIを作成する
APIを叩いてデータを表示する
カードをクリックするとリンク(/blogs/id)に遷移する
もっとみるボタンを押すと全ての記事を表示する(/blogsに遷移する)
個人記事一覧というタイトルがある
すべての記事を表示する
カードをクリックするとリンクに遷移する
ブログ記事一覧というタイトルがある
すべての記事を表示する
カードをクリックするとリンクに遷移する
サムネイルを見ることができる
タイトルを見ることができる
本文を見ることができる
作成日を見ることができる
コンポーネントのテストを書く

最後までやると以下のようなアプリが完成します。

Chapter7 : 個人開発 (〜90日)

ここまでやりきったあなたはロードマップをやる前には想像もつかないような実力を手に入れることができました。
最後にここまで学んだことを全て活用してポートフォリオを作成してください

ここでは実際に私が思う最強のポートフォリオについて解説していきます。

スキルをこれ以上伸ばすのはコストが高くなるのでポートフォリオの質にこだわる

多くの人はスキルを伸ばそうと努力しますが、これ以上のスキルを得るとなるとクリーンアーキテクチャやTDDなど実践するのに時間がかかり、経験者から教わらないと難しいスキルになってきます。なのでここからはスキルではなく、転職に必要な要素を伸ばしていくことに力を入れていきます。
ポートフォリオがユーザーの価値になるようにする

なぜそのアプリケーションを作ったのか、誰にどんな価値を届けることができるのか
ここを正しく設定することが大切です。ここがしっかり決まれば面接でも話すことができます。未経験であれば普段の学習やポートフォリオから質問せざるをえないので、そのポートフォリをを何故作ったのかをしっかり説明できるようなテーマを選んでください。
開発を1度始めるとテーマを変更することはできないので時間をかけてしっかり考えるようにしましょう
マネタイズの観点はあるか

会社の目的はお金を稼ぐことです。つまりボランティアでやっているわけではありません。その点から考えるとあなたの作ったサービスがどのようにマネタイズができるのかという点を見つけることができるならより魅力的になります。
ビジネス視点を持つというのはAI時代にアイデアがあれば早く価値を作れる時代において大切なスキルになってきます
UI/UXが最低限整えられている

ユーザーに使ってもらわないとどんなに価値のあるサービスでも利用されなくなってしまう時代になってしまいました。UI/UXは最低限整えるようにしましょう。ここは時間をかければいくらでもできてしまう箇所になりますので時間のかけすぎには注意しましょう

おすすめはすでにあるサービスを真似て作ることです。
「Pinterest」を使うと参考になるデザインがたくさんあるので参考になります。

Pinterest
ユーザーを増やす努力をしているか
利用してもらうために動いている姿をみせることはより説得力を与えます。
ユーザーを増やすためにメンテナンスをしたり、機能を細かくリリースして告知したり、SNSアカウントを作って広めていく、周りの人からフィードバックをもらうなどができると多くの人がやっていない分より差別化することが可能です。
技術スタック