Reactを学ぶ - 無料インタラクティブ講座
最初のレッスンから本物のコンポーネントを書いてReactをマスター。JSX、props、state、イベントを学んだら、そのままNext.jsへ - ファイルシステムルーティング、レイアウト、サーバーコンポーネント、データフェッチ、サーバーアクション。すべてブラウザ上で動き、つまずいたらAIヒントが助けてくれます。修了時には無料の修了証を獲得。
3,204+ 人のcoddersが登録中
89 レッスン78 チャレンジ164 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
無料の修了証明書
シラバス
セクション 1
基本概念
セクションを始める開始コンポーネント、JSX、props、state、イベントなど、React を使ったユーザーインターフェース構築の基礎を学び、最初のコンポーネント作成から動作するミニアプリの構築までを目指します。Reactの概要
5 レッスン513JSX式
5 レッスン58コンポーネント
5 レッスン48Props
6 レッスン510ステートとイベント
6 レッスン59フォームと入力
5 レッスン47条件分岐とリスト
6 レッスン510プロジェクト：プロフィールカード
4 レッスン4セクション 2
Next.js の基本専用ページ
セクションを始める開始React コンポーネントから実践的なアプリへのステップアップ：ファイルシステムルーティング、レイアウト、サーバー/クライアントコンポーネント、データ取得、Server Actions、そして完成された Next.js プロジェクトの構築までを学びます。なぜNext.jsなのか
4 レッスン39ルーティングとリンク
6 レッスン516レイアウトとメタデータ
6 レッスン515サーバーとクライアント
6 レッスン515サーバー上のデータ
6 レッスン516Server Actions
5 レッスン413クライアント側のナビゲーション
5 レッスン515プロジェクト：Coddy Eats
9 レッスン9
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。
連続記録を築こう
継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。
12 日連続
明日も戻ってきて連続記録を維持しましょう！
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
ダブル・オア・ナッシング
7日中5日目
連続記録フリーズ
2 left
どこでも学べる
コーディングの旅を持ち歩こう！セットアップ不要、ダウンロード不要：開いてすぐにコーディング開始。iOS、Android、Webで4.9星評価で利用可能。
あなたは一人じゃない
グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！
1
2
3
昇格ゾーンあらゆる学び方に対応
読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。
変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。
Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。
値は後から変えられます。再代入すると、名前は新しい値を指すようになります。
修了証を取得
完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。
修了証明書Pythonの基礎
LinkedInに追加CoddyでReactを学ぶ理由
- 最初のレッスンからブラウザでJSXを書ける。Nodeのインストールもcreate-react-appもビルド設定も不要 - 各レッスンで本物のコンポーネントコードを編集して実行できます。
- 本物のアプリで終わるカリキュラム。基礎セクションでコンポーネント、props、state、イベント、フックを学び、その後はルーティング、レイアウト、サーバー/クライアントコンポーネント、データフェッチ、サーバーアクションを扱う本格的なNext.jsセクションへ。
- あなたの実際のコードを読むAIヒント。コンポーネントが描画されない、stateが更新されないといったとき、答えを明かさずにバグの場所を示すヒントがもらえます。
- 修了時には無料のReact修了証。Reactが今も最も需要の高いUIライブラリであるフロントエンド職への強いアピールになります。
React学習に関するよくある質問
Reactとは何ですか？
Reactは、マークアップを返す小さく再利用可能な関数「コンポーネント」からユーザーインターフェースを組み立てるJavaScriptライブラリです。Metaで生まれ、FacebookやInstagramから無数のスタートアップのプロダクトまで、現代のウェブの大部分を支えています。求人でも常に最も需要の高いフロントエンドスキルです。
Reactを学ぶ前にJavaScriptを知っている必要がありますか？
変数、関数、配列、オブジェクトといったJavaScriptの基礎には慣れておくべきです。Reactが頼るJavaScriptのパターン（アロー関数、分割代入、map）は登場するたびに講座内で紹介するので、エキスパートである必要はありません。プログラミングが完全に初めてなら、まずJavaScriptコースから始めましょう。
Reactの習得は難しいですか？
コンポーネント、JSX、propsといった中核概念は、すでに知っている関数とHTMLに対応するのですぐ身につきます。state、エフェクト、データフローはより多くの練習が必要です。だからこそ、ここでは読むだけでなく、毎レッスンで本物のコンポーネントコードを書いて実行します。
ReactとNext.jsの違いは何ですか？
ReactはUIライブラリで、コンポーネント・state・レンダリングを担います。Next.jsはReactの上に構築されたフレームワークで、実際のアプリに必要なもの - ファイルシステムルーティング、レイアウト、サーバーサイドレンダリング、データフェッチ、サーバーアクション - を加えます。本講座ではまずReactの基礎を学び、その後専用のNext.jsセクションでコンポーネントから完全なアプリまで進みます。
Reactはオンラインで無料で学べますか？
はい。インタラクティブなReact講座は無料です。実践的なレッスン、即時フィードバック付きのコーディング課題、AIによるヒント、クイズが揃っています。すべてブラウザで動くのでインストールは不要、すぐに始められます。
React講座の修了後に修了証はもらえますか？
はい。講座を修了すると、LinkedInや履歴書に追加できる無料の修了証を獲得できます。学習の過程で作るコンポーネントやアプリと合わせて、実践的なReactとNext.jsのスキルを示す確かな証明になります。
