OVERVIEW
React は、UI を「コンポーネント」という部品の組み合わせで作る JavaScript ライブラリです。画面の状態（state）に応じて表示を更新する仕組みがあり、ボタン操作やフォーム入力に反応する画面を作れます。
React では、HTML に似た記法で画面の構造を JavaScript の中に書けます。この記法を JSX と呼びます。コンポーネントには props でデータを渡し、useState などのフックで、操作によって変化する値を管理します。
Next.js は React をベースにしたフレームワークです。ページ作成、ルーティング、本番用のビルドなどの機能を備えています。フォルダとファイルの配置で URL とページを対応付け、React のコンポーネントで各ページの画面を作れます。
ボタンやメニューなどをコンポーネントとして定義し、props で渡すデータを変えて、複数の場所で再利用できます。
多くの企業の Web 開発で採用されており、学んだ内容を仕事の現場でも活かせます。
TypeScript でデータに型を付け、Tailwind CSS で画面をスタイリングし、Next.js でページやルーティングを実装できます。
BEFORE YOU START
HTML/CSS と JavaScript の基礎を学んでから始めてください。
アロー関数、分割代入、スプレッド構文、配列の map() メソッドなども使います。
ROADMAP
JSX、コンポーネント、props、state、フックといった、React の基礎をここで身につけます。
JSX の書き方からコンポーネントの作り方、props や state によるデータの受け渡し、map() でのリスト表示、onClick のイベント処理、state のリフトアップまで、React の基礎を一通り学びます。
STEP 1 で学んだ基礎を使って、React で Todo 管理アプリを作ります。「JavaScriptでTodo管理アプリを作ろう」も履修済みであることが前提です。未受講の場合は、先にそちらを済ませてください。
追加、一覧表示、削除、完了チェック、完了分の一括削除、localStorage への保存まで、実際に動く Todoアプリを作りながら、複数コンポーネントの連携、useState による状態管理、useEffect による保存データの読み込み、useRef による入力欄へのフォーカスを学びます。
STEP 4 の Next.js 入門では、TypeScript と Tailwind CSS を使ってアプリを作っていきます。Next.js に進む前に、それぞれの基礎をここで身につけておきます。
JavaScript に型を加えた TypeScript の基礎を学びます。型注釈、ユニオン型、オブジェクト型、interface、ジェネリクスまで扱い、型を付けることでデータの間違いに早く気づけるようになります。このロードマップの Next.js 入門でも使います。
クラスを付けるだけでスタイリングできる Tailwind CSS の基礎を、HTML を使いながら学びます。文字や色、余白、ボーダー、ホバー、Flexbox、レスポンシブまでを扱い、素早く見た目を整える方法が身につきます。
ユーザーの一覧ページと詳細ページを作りながら、Next.js のルーティング、リンクによるページ遷移、存在しないユーザーへのエラー表示を学びます。
create-next-app で始める React ベースのフレームワーク Next.js の基礎を学びます。STEP 3 で身につけた TypeScript と Tailwind CSS を使いながら、App Router によるファイルベースのルーティング、Link でのページ遷移、動的ルーティング、notFound でのエラー処理までを扱います。
ENVIRONMENT
React 入門では、配布する素材ファイルをエディタ（VS Code）で開いて学びます。複雑な環境構築は不要なので、まずは React の考え方そのものに取り組めます。発展編の Next.js では、Node.js のインストールや create-next-app などの開発環境を、動画の手順に沿って準備していきます。macOS と Windows の両方の手順を用意しています。
React / Next.js入門は、プレミアムプランに登録すれば視聴できます。
FAQ
プログラミングが初めての場合は、まず HTML/CSS と JavaScript の基礎を学んでから React を始めてください。React ではアロー関数、分割代入、スプレッド構文、配列の map() メソッドなども使います。ページ上部の「学ぶ前に知っておきたいこと」から前提のレッスンを受講できます。
React を先に学んでください。Next.js 入門では、React の JSX、コンポーネント、props の知識を使ってページを作ります。STEP 1 と STEP 2 で React を学び、STEP 3 の TypeScript と Tailwind CSS を受講してから STEP 4 を始めてください。
このロードマップの Next.js 入門を受講する場合は、どちらも前提として必要です。TypeScript で型を付け、Tailwind CSS でスタイリングするため、STEP 3 でそれぞれの基礎を学んでください。React入門と React の Todoアプリを学ぶ STEP 1・STEP 2 では、どちらも使いません。
まず STEP 1 の React入門を受講してください。STEP 2 の「ReactでTodo管理アプリを作ろう」は、React入門に加えて、JavaScriptでTodo管理アプリを作ろうを履修した人向けです。JavaScript 版をまだ受講していない場合は、先にそちらを済ませてから STEP 2 を始めてください。その後は STEP 3 の TypeScript と Tailwind CSS、STEP 4 の Next.js の順に学びます。
React入門では配布素材をエディタで開くだけで始められるので、難しい環境構築は不要です。発展編の Next.js では Node.js のインストールなどが必要になりますが、その手順も動画で解説しています。
1本3分前後なので、React入門（23本）と React の Todoアプリ（20本）の視聴時間は合計約2時間です。TypeScript、Tailwind CSS、Next.js を含む全91本では約4時間半が目安です。コードを書く時間や復習の時間は別に必要で、理解度や作業のペースによって変わります。
動きのある Web アプリの UI を作れるようになります。Todoアプリの実践レッスンでは、追加、削除、完了管理、localStorage への保存までを作るため、状態管理やコンポーネント連携の感覚が身につきます。
コンポーネントへのデータの受け渡しや、フォーム入力に応じた状態の更新など、Web アプリの UI を実装する基本を学べます。Next.js 入門ではページ作成やルーティングも扱います。仕事で使うには、担当するアプリの要件に合わせた実装や、テストなどの知識をさらに学ぶ必要があります。
LEARN NOW
プレミアムレッスンで、Reactの基礎からTodoアプリ作成、そしてTypeScript・Tailwind CSS・Next.jsへと段階的に学べます。
短い動画で区切られているので、すきま時間にも少しずつ学習を進められます。
3分動画でマスターできるプログラミング学習サービスです。あなたもプログラミングを始めてみませんか？
Copyright © 2011-2026 dotinstall.com. All Rights Reserved.
