Reactを学ぶ - 無料インタラクティブ講座
最初のレッスンから本物のコンポーネントを書いてReactをマスター。JSX、props、state、イベントを学んだら、そのままNext.jsへ - ファイルシステムルーティング、レイアウト、サーバーコンポーネント、データフェッチ、サーバーアクション。すべてブラウザ上で動き、つまずいたらAIヒントが助けてくれます。修了時には無料の修了証を獲得。
2,333+ 人の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を知っている必要がありますか？
Reactの習得は難しいですか？
ReactとNext.jsの違いは何ですか？
Reactはオンラインで無料で学べますか？
React講座の修了後に修了証はもらえますか？
