ステップ1
学習パス
フルスタックエンジニア ロードマップ
フルスタックの Web エンジニアが必要とする順番で並べた無料コース。ページのための HTML、CSS、JavaScript、画面のための TypeScript と React、サーバーのための Next.js、データのための SQL、そして公開のための Linux、Git、Docker。JavaScript はブラウザとサーバーの両方で動くので、1 つの言語を覚えれば最初から最後まで使えます。すべてのレッスンはブラウザ上で動き、各コースのセクションの最後には無料の修了証がもらえます。
830,387+ 人のcoddersがこれらのコースに登録中
880 レッスン883 チャレンジ4,346 クイズの問題
- 初心者向け
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 はそのデータベースに質問するための言葉です。開始専用ページ2つのセクションを順番に - 7ステップ7
Linux と Git専用ページ
このステップを始める開始本物の Linux ターミナルでファイル、パーミッション、パイプ、シェルスクリプト、続いてコミット、ブランチ、マージ、コンフリクト、リモート。サーバーは Linux で動いていて、どのチームもコードを Git リポジトリで管理しています。開始専用ページ - 8ステップ8
Docker専用ページ
このステップを始める開始イメージ、コンテナ、Dockerfile、ボリューム、ネットワーク。コンテナはアプリケーションを動かすのに必要なものすべてと一緒にまとめたもので、今日ほとんどの Web アプリケーションはこの形でサーバーに届けられています。開始専用ページ
使える機能
コーディングを学ぶために使うすべて
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Earn a Certificate
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to 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 や履歴書に載せられます。
