React / Next.js入門 学習ロードマップ

Reactで始める、
モダンな
Webアプリ開発

React の基礎をJSX、コンポーネント、state、フックから学び、Todoアプリ作りで実践します。続けて TypeScript と Tailwind CSS、最後に Next.js へと進みます。1本3分前後の動画で区切られているので、つまずきやすいモダンなWebアプリ開発も、流れを追いながら無理なく進められます。

  • 学習ステップ 4
  • 動画レッスン 91本
  • 難易度 中級
3分動画で React の Web アプリ開発を学ぶ

OVERVIEW

React / Next.jsとは

React は、UI を「コンポーネント」という部品の組み合わせで作る JavaScript ライブラリです。画面の状態(state)に応じて表示を自動で更新する仕組みを持っており、ボタンの操作や入力に応じて動く Web アプリの画面を、見通しのよいコードで作れます。

React はプログラミング言語ではなく、JavaScript のライブラリです。そのため、まずは JavaScript の基礎が土台になります。そのうえで、JSX・コンポーネント・props・state・フック(useState / useEffect)といった React 独自の考え方を順番に身につけていくのが入門の近道です。

Next.js は React をベースにしたフレームワークです。React 単体では別途用意する必要があった、ルーティング・ページ作成・本番ビルドなど、Web アプリを動かすための土台が最初から揃っています。create-next-app コマンド一つで、すぐに開発を始められます。

現在、新しく Web サイトや Web アプリを React で作る場合、Next.js とセットで使われるのが一般的です。React 公式ドキュメントでも、新規プロジェクトには Next.js のようなフレームワークを使うことが推奨されています。このロードマップでも、React の基礎を身につけたあと、Next.js まで進むことを到達点としています。

Reactのコンポーネント
1

UIを部品で組み立てる

画面をコンポーネントという部品に分けて作るので、再利用しやすく、見通しのよいコードになります。

2

開発現場で使われている

多くの企業の Web 開発で採用されており、学んだ内容を仕事の現場でも活かせます。

3

周辺の技術が揃っている

TypeScript、Tailwind CSS、Next.js など、組み合わせて使う技術が揃っているため、学習の次の段階に進みやすくなっています。

BEFORE YOU START

学ぶ前に知っておきたいこと

React は JavaScript のライブラリです。
まずは Web の基礎と JavaScript に触れておくと、ロードマップをスムーズに進められます。

ROADMAP

React / Next.jsの
学習ロードマップ

STEP 1 基礎を学ぶ
まずは React の考え方をつかむ

JSX、コンポーネント、props、state、フックといった、React の基礎をここで身につけます。

PREMIUM

React入門

JSX の書き方からコンポーネントの作り方、props や state によるデータの受け渡し、map() でのリスト表示、onClick のイベント処理、state のリフトアップまで、React の基礎を一通り学びます。

  • JSX
  • コンポーネント
  • props
  • useState
  • イベント処理
動画 23本
STEP 2 手を動かす
アプリを作って実践する

STEP 1 で学んだ基礎を使って、実際に動くアプリを作ります。React をどんな場面でどう使うのかが見えてきます。

PREMIUM

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

追加、一覧表示、削除、完了チェック、完了分の一括削除、localStorage への保存まで、実際に動く Todoアプリを作りながら、複数コンポーネントの連携と、useState、useEffect、useRef を使った状態管理の流れを学びます。

  • useState / useEffect
  • フォーム入力
  • 削除と完了管理
  • localStorage
動画 20本
STEP 3 Next.js の前提を整える
TypeScript と Tailwind CSS に慣れる

STEP 4 の Next.js 入門では、TypeScript と Tailwind CSS を使ってアプリを作っていきます。Next.js に進む前に、それぞれの基礎をここで身につけておきます。

PREMIUM

TypeScript入門

JavaScript に型を加えた TypeScript の基礎を学びます。型注釈、ユニオン型、オブジェクト型、interface、ジェネリクスまで扱い、型を付けることでデータの間違いに早く気づけるようになります。Next.js でも標準的に使われます。

  • 型注釈
  • ユニオン型
  • オブジェクト型
  • interface
  • ジェネリクス
動画 16本
PREMIUM

Tailwind CSS入門

クラスを付けるだけでスタイリングできる Tailwind CSS の基礎を、HTML を使いながら学びます。文字や色、余白、ボーダー、ホバー、Flexbox、レスポンシブまでを扱い、素早く見た目を整える方法が身につきます。

  • ユーティリティクラス
  • 余白とボックスモデル
  • Flexbox
  • ホバーと状態
  • レスポンシブ
動画 14本
STEP 4 到達点
Next.js で Web アプリ開発の現場に追いつく

現在の Web 開発で React を使う場合、Next.js とセットで使われるのが一般的です。ここまで進むことで、求人や実務で求められる React の使い方に追いつけます。

PREMIUM

Next.js入門

create-next-app で始める React ベースのフレームワーク Next.js の基礎を学びます。STEP 3 で身につけた TypeScript と Tailwind CSS を使いながら、App Router によるファイルベースのルーティング、Link でのページ遷移、動的ルーティング、notFound でのエラー処理までを扱います。

  • App Router
  • ルーティング
  • Link
  • 動的ルーティング
  • not-found
動画 18本

ENVIRONMENT

動画の手順に沿って
開発環境を整える

React 入門では、配布する素材ファイルをエディタ(VS Code)で開いて学びます。複雑な環境構築は不要なので、まずは React の考え方そのものに取り組めます。発展編の Next.js では、Node.js のインストールや create-next-app などの開発環境を、動画の手順に沿って準備していきます。macOS と Windows の両方の手順を用意しています。

React / Next.js入門は、プレミアムプランに登録すれば視聴できます。

ローカル環境で React や Next.js を開発する様子

FAQ

よくある質問

プログラミングが初めてでも React を学べますか?

React は JavaScript のライブラリなので、まずは HTML/CSS と JavaScript の基礎に触れておくのがおすすめです。ページ上部の「学ぶ前に知っておきたいこと」から前提のレッスンに進めます。

React と Next.js はどちらを先に学ぶべきですか?

React の基礎から学ぶのがおすすめです。Next.js は React をベースにしたフレームワークなので、React の考え方を身につけてから STEP 4 で Next.js に進むとスムーズです。現在は、新しく Web サイトや Web アプリを React で作る場合、Next.js とセットで使われるのが一般的なので、Next.js までセットで学ぶことを想定したロードマップになっています。

TypeScript や Tailwind CSS は必ず学ぶ必要がありますか?

Next.js まで進む場合は、どちらも前提として必要になります。STEP 4 の Next.js 入門では、TypeScript と Tailwind CSS を使ってアプリを作っていくため、STEP 3 でそれぞれの基礎を押さえておく必要があります。React 単体で学習を区切る場合は STEP 2 までで一区切りつきますが、現在の Web 開発の現場に合わせるなら STEP 3 と STEP 4 まで進むことをおすすめします。

どの順番でレッスンを見るべきですか?

ロードマップの STEP 順をそのまま学習順として進めるのがおすすめです。React入門 から Todoアプリ作成までで React の基礎をひと通り押さえ、続けて TypeScript と Tailwind CSS、最後に Next.js という順番になります。

環境構築は必要ですか?

React入門では配布素材をエディタで開くだけで始められるので、難しい環境構築は不要です。発展編の Next.js では Node.js のインストールなどが必要になりますが、その手順も動画で解説しています。

学習にはどれくらいの時間がかかりますか?

1本3分前後の動画で構成されています。React入門(23本)と Todoアプリ(20本)を中心に進めれば、1日30分のペースで2〜3週間ほどで一通り体験できます。

React を学ぶと何が作れるようになりますか?

動きのある Web アプリの UI を作れるようになります。Todoアプリの実践レッスンでは、追加、削除、完了管理、localStorage への保存までを作るため、状態管理やコンポーネント連携の感覚が身につきます。

React を学ぶと仕事に活かせますか?

React は多くの開発現場で採用されており、求人数も多い技術です。とくに、Next.js と TypeScript まで一通り学んだ状態は、現在の Web 開発の求人で求められる組み合わせと重なるため、転職や案件参加の入り口として活かしやすくなります。

LEARN NOW

Reactの学習を
今日から始めよう

3分動画で Web アプリ開発を学ぶ

プレミアムレッスンで、Reactの基礎からTodoアプリ作成、そしてTypeScript・Tailwind CSS・Next.jsへと段階的に学べます。
短い動画で区切られているので、すきま時間にも少しずつ学習を進められます。