ステップ1
HTML と CSS：ページ専用ページ
このステップを始める開始要素、リンク、フォーム、セマンティックなマークアップ、続いて 2 つの CSS セクションにわたるセレクタ、ボックスモデル、flexbox、grid、レスポンシブレイアウト、トランジション。ここで書くフォームは、このパスの後半であなたのサーバーが読み取るものと同じです。開始専用ページ3つのセクションを順番に
学習パス
フルスタックエンジニア ロードマップ
フルスタックの Web エンジニアが必要とする順番で並べた無料コース。ページのための HTML、CSS、JavaScript、画面のための TypeScript と React、サーバーのための Next.js、データのための SQL、そして公開のための Linux、Git、Docker。JavaScript はブラウザとサーバーの両方で動くので、1 つの言語を覚えれば最初から最後まで使えます。すべてのレッスンはブラウザ上で動き、各コースのセクションの最後には無料の修了証がもらえます。
889,130+ 人のcoddersがこれらのコースに登録中
880 レッスン969 チャレンジ4,345 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
パス全体で16枚の無料修了証
フルスタックエンジニアへの道、ステップごとに
各ステップは既存の Coddy のコースです。順番に進んでも、足りないところから始めても構いません。進捗はどちらの場合もコースごとに保存されます。
- 1
- 2ステップ2
JavaScript と TypeScript専用ページ
このステップを始める開始基礎、ロジックと制御フロー、オブジェクトとクラスを 3 セクションで学び、続いて TypeScript：型、インターフェース、ジェネリクス、そしてコンパイラのエラーの読み方。ブラウザでもサーバーでも書く言語なので、ほかのどのステップよりも時間をかけます。開始専用ページ4つのセクションを順番に - 3ステップ3
ブラウザの中の JavaScript専用ページ
このステップを始める開始DOM、イベント、フォームと入力チェック、そしてタブ、モーダル、テーマ、レスポンシブなナビゲーションといった実務的なフロントエンドのパターン。HTML、CSS、JavaScript が、使う人に反応する 1 つのページになります。開始専用ページ - 4ステップ4
React専用ページ
このステップを始める開始コンポーネント、JSX、props、状態、イベント、リスト、制御されたフォーム。最後に小さなソーシャルカードを一歩ずつ作ります。React は、次のステップでサーバー上で動かす画面の層です。開始専用ページ - 5ステップ5
Next.js：サーバー側の半分専用ページ
このステップを始める開始ルーティングとレイアウト、サーバーコンポーネントとクライアントコンポーネント、サーバーでのデータ取得、自分の API エンドポイントのためのルートハンドラ、フォームのためのサーバーアクション、ローディングとエラーの状態。続いて、カート、フィルター、レビュー、ライブ検索を備えた 9 ステップのレストランアプリを作ります。バックエンドを書くのはここです。開始専用ページ - 6ステップ6
SQL：データベース専用ページ
このステップを始める開始本物のテーブルに対するクエリ：絞り込み、並べ替え、結合、グループ化と集計、続いてサブクエリ、ウィンドウ関数、CASE、共通テーブル式。どのフルスタックアプリケーションもデータをデータベースに保存していて、SQL はそのデータベースに質問するための言葉です。開始専用ページ - 7ステップ7
Linux と Git専用ページ
このステップを始める開始本物の Linux ターミナルでファイル、パーミッション、パイプ、シェルスクリプト、続いてコミット、ブランチ、マージ、コンフリクト、リモート。サーバーは Linux で動いていて、どのチームもコードを Git リポジトリで管理しています。開始専用ページ - 8ステップ8
Docker専用ページ
このステップを始める開始イメージ、コンテナ、Dockerfile、ボリューム、ネットワーク。コンテナはアプリケーションを動かすのに必要なものすべてと一緒にまとめたもので、今日ほとんどの Web アプリケーションはこの形でサーバーに届けられています。開始専用ページ
使える機能
コーディングを学ぶために使うすべて
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、AIプロンプトをマスターしましょう。インタラクティブなレッスンで現代の開発者に必要なすべてのスキルを網羅しています。
playground.js
コードエディタ
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
テスト #1
テスト #2
テスト #3
入力
"Alex"
出力
"Hello, Coddy! Alex"
連続記録を築こう
継続して進捗を見守りましょう！毎日のコーディング習慣を追跡し、フリーズ日で連続記録を守り、毎日参加することで報酬を獲得しましょう。
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星評価で利用可能。
7
250
5
変数
続ける
4.9
評価
あなたは一人じゃない
グローバルリーダーボードで競い、友達を招待して報酬を獲得し、お互いの成功を祝いましょう。プログラミングは友達と一緒の方が楽しい！
チャレンジャーリーグ上位7名が昇格
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
昇格ゾーンあらゆる学び方に対応
読む・聴く・自分を試す・AIに聞く・学んだことを調べる。どんな学び方にも対応したレッスンです。
変数の入門
音声
変数は、後でプログラム内で参照できる値を格納する、名前のついた入れ物です。
Pythonでは、名前、イコール記号、格納したい値の順で書くことで作成します。
値は後から変えられます。再代入すると、名前は新しい値を指すようになります。
1xSarah
修了証を取得
完了したすべてのコースで証明書を獲得しましょう。LinkedInプロフィールや履歴書に追加して、雇用主にプログラミングスキルをアピールしましょう。
修了証明書これは以下を証明します山田 太郎が正常に完了しましたPythonの基礎
Pythonの基礎
日付2026年1月
LinkedInに追加フルスタック開発を Coddy で学ぶ理由
- 両側で同じ言語。このパスではまずブラウザのために JavaScript と TypeScript を学び、その同じ言語を Next.js のルートハンドラとサーバーアクションでサーバー側にも使います。バックエンドは新しい考え方を学ぶ場であって、2 つ目の言語をゼロから覚える場ではありません。
- インストール不要。HTML と CSS はコードのすぐ横でライブに描画され、SQL は本物のテーブルに対して実行され、Linux、Git、Docker のステップではブラウザの中で本物のターミナルが使えます。開発ツールを一度も入れたことのないノート PC でも、スタック全体を学べます。
- あなたのコードを読む AI ヒント。コンポーネントが描画されない、クエリが違う行を返す、コマンドが失敗する。そんなとき Bugsy はあなたが書いた内容を見て、答えを渡さずに解決へと導きます。
- 大事なのは順番です。多くのフルスタック講座は 2 週目にはもうフレームワークへ進みますが、このパスは React の前に JavaScript へ 3 セクション、ブラウザへさらに 1 セクションを充てます。フレームワークは、その下にある言語が読めて初めて読めるようになるからです。
フルスタックエンジニアを目指す人のよくある質問
フルスタックエンジニアとは？
Web アプリケーションの両方の半分を作れるエンジニアのことです。ブラウザで動くフロントエンド（HTML、CSS、JavaScript、そして React などのフレームワーク）と、サーバーで動くバックエンド（リクエストの処理、ビジネスロジック、データベース）です。実際には多くのフルスタックエンジニアはどちらか一方がより得意ですが、データベースのテーブルからそれを使うボタンまで、1 つの機能を他の人に渡さずに自分で完成させられます。
Web エンジニアになるには何を学べばいい？
空のファイルから 1 ページを作れる程度まで HTML、CSS、JavaScript を身につけ、フレームワークを 1 つ（React）足し、サーバーがリクエストにどう応えるか、データがどう保存されるか（このパスでは Next.js と SQL）を学び、Git を覚え、そしてネットに公開して説明できる制作物を作ります。企業が採用で見るのは見せられるものなので、どの修了証よりも制作物のほうが重要です。このパスはまさにその内容を、その順番で、無料で学べるようにしたものです。
フロントエンドとバックエンド、どちらを先に学ぶべき？
フロントエンドが先です。書いた 1 行 1 行の結果が画面に表示されるので、間違いがすぐにわかり、やる気も続きます。そしてバックエンドは、それを呼び出すページを自分で作ったあとのほうがずっと理解しやすくなります。だからこのパスは最初の 4 ステップをブラウザで過ごし、そのあとでサーバーとデータベースに進みます。
このパスはなぜサーバー側で Python ではなく JavaScript を使うのですか？
JavaScript はブラウザで動く唯一の言語なので、サーバーでも使えばスタック全体が 1 つの言語で済むからです。React の上に作られた Next.js なら、同じコードベースでサーバー側のページ描画、API リクエストへの応答、フォーム送信の処理ができます。バックエンドを Python で書きたい場合は、Coddy のバックエンド開発者パスが Python のルートを教えています。
フルスタックエンジニアになるにはブートキャンプが必要？
いいえ。ブートキャンプが提供するのはスケジュール、一緒に学ぶ仲間、キャリア支援で、それに料金がかかります。スキルそのものはこのパスで学ぶものと同じで、無料の教材で十分に身につきます。ブートキャンプでも近道できないのは練習です。何百もの小さな演習と、いくつかの本物の制作物。先生に確認されなくても毎日 1 時間を続けられるなら、無料のパスでも同じところまでたどり着けます。
フルスタックエンジニアになるまでの期間はどれくらい？
1 日 1 時間でジュニアレベルに届くまで、およそ 9 か月から 12 か月です。このパスでは、HTML と CSS が合わせて 6 から 8 週間、JavaScript とブラウザが 2 から 3 か月、TypeScript と React が約 6 週間、Next.js が 1 か月、SQL が 3 から 4 週間、そして Linux、Git、Docker でさらに 1 か月です。後半のステップと並行して自分の制作物を作ることで、その時間がポートフォリオになります。
このパスで Node.js、Express、認証、デプロイは学べますか？
独立したコースとしてはまだありません。ページを水増しするより、そうはっきり書いておきます。このパスのサーバーのコードは Next.js のルートハンドラとサーバーアクションで書き、それは Node.js の上で動きますが、Express のコースも、ORM でアプリを本番のデータベースにつなぐコースも、認証やホスティングへのデプロイのコースもありません。これらはカリキュラムのロードマップに入っていて、公開され次第、新しいステップとしてこのパスに加わります。
このフルスタック講座は無料ですか？修了証はもらえますか？
はい。パスのすべてのコースは無料です。レッスン、ブラウザ上のエディタとターミナル、AI ヒント、修了証も含みます。各コースのセクションの最後には無料の修了証がもらえ、それぞれ固有の URL で検証でき、LinkedIn や履歴書に載せられます。
