ステップ1
学習パス
フロントエンドエンジニア ロードマップ
フロントエンドエンジニアが実際に必要とする順番で並べた無料コース。構造のための HTML、レイアウトのための CSS、動きのための JavaScript、安全性のための TypeScript、実アプリのための React と Next.js、公開のための Git、そしてそれを証明する 8 つの制作物。すべてのレッスンはブラウザ上で動き、制作ステップより前のすべてのコースの最後には無料の修了証がもらえます。
663,032+ 人のcoddersがこれらのコースに登録中
804 レッスン681 チャレンジ3,184 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
パス全体で13枚の無料修了証
フロントエンドエンジニアへの道、ステップごとに
各ステップは、すでに公開されている Coddy のコースです。順番に進めても、足りないところへ直接飛び込んでも構いません。進捗はどちらの場合もコースごとに保存されます。
- 1
- 2ステップ2
CSS: レイアウトとデザイン専用ページ
このステップを始める開始セレクタ、ボックスモデル、色とタイポグラフィ、続いて 2 セクションにわたる flexbox、grid、レスポンシブレイアウト、トランジションとアニメーション。ページが、普段使っているサイトのように見え始めるステップです。開始専用ページ - 3ステップ3
JavaScript、言語のすべて専用ページ
このステップを始める開始基礎、ロジックと制御フロー、そしてオブジェクトとクラスを 3 セクションで。フロントエンドの仕事は JavaScript の仕事です。このあとのフレームワークはどれもそれを整理する方法にすぎず、言語が読めて初めて読めるようになります。開始専用ページ - 4ステップ4
ブラウザの中の JavaScript専用ページ
このステップを始める開始DOM、イベント、データの取得、そしてフレームワークなしでインタラクティブなページを作ること。さらに実務的なフロントエンドのパターンへ。HTML、CSS、JavaScript が 1 つのもの - 使う人に応答するページ - になる場所です。開始専用ページ - 5ステップ5
TypeScript専用ページ
このステップを始める開始型、インターフェース、ジェネリクス、そしてコンパイラのエラーを道具として使うこと。実務の React のコードベースはほぼすべて TypeScript なので、後付けではなくフレームワークの直前に置いています。開始専用ページ - 6ステップ6
React と Next.js専用ページ
このステップを始める開始コンポーネント、props、状態、フック、レンダリング。続いてルーティング、データ取得、実アプリケーションのための Next.js。フロントエンド求人が最も多く挙げるフレームワークを、それが書かれている言語のあとに学びます。開始専用ページ - 7ステップ7
Git とバージョン管理専用ページ
このステップを始める開始コミット、ブランチ、マージ、コンフリクトの解消、リモート。すべてのフロントエンドの仕事とポートフォリオ作品は Git リポジトリの中にあります。ここで覚えておけば、次のステップの制作物を実務と同じやり方で公開できます。開始専用ページ - 8ステップ8
制作: 見慣れたページを自分で作る
このステップを始める開始flexbox とセレクタの演習、DOM と配列メソッドの練習、そして実制作へ。Coddy のプロフィールカード、Instagram のページ、Netflix のログインページ、画像スライダー。どれも採用担当者がその場で開けるポートフォリオ作品です。開始8件のコース（順番どおり）- CSS Flexbox - 完全マスターコースhtmlのみ15 レッスン
- CSSセレクターhtmlのみ15 レッスン
- JavaScript DOM メソッドhtmlのみ13 レッスン
- JavaScript の配列メソッドjavascriptのみ18 レッスン
- Coddy プロフィールカードのクローン | フロントエンドプロジェクトhtmlのみ26 レッスン
- Instagramページのクローン作成 | フロントエンド・プロジェクトhtmlのみ16 レッスン
- Netflixサインインページのクローン｜フロントエンドプロジェクトhtmlのみ19 レッスン1 チャレンジ
- スライダー｜フロントエンドプロジェクトhtmlのみ23 レッスン1 チャレンジ
使える機能
コーディングを学ぶために使うすべて
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 Coding 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, Anytime
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 in This
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
Prove Your Skills
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 で学ぶ理由
- 作っているページがその場で見えます。HTML、CSS、JavaScript のすべてのレッスンは、コードのすぐ横のブラウザでライブに描画されます。セレクタの書き間違いや崩れた flexbox は、最後にスクリーンショットで気づくのではなく、書いたその瞬間に目に入ります。
- 順番が正しく、JavaScript を飛ばしません。多くのフロントエンド講座は HTML から一気にフレームワークへ走りますが、このコースは React の前に JavaScript へまるまる 3 セクションを充てます。土台となる言語が読めて初めて、フレームワークも読めるようになるからです。
- あなたのマークアップとコードを読む AI ヒント。レイアウトが崩れたりコンポーネントが描画されなかったりしたとき、Bugsy はあなたが実際に書いた内容を見て、答えを渡さずに解決へと背中を押します。
- 採用担当者がその場で開ける制作物。最後のステップは 8 つの実制作 - すでに知っているページのクローン - で、どれも共有できるポートフォリオの一部になります。さらに最初の 7 ステップのすべてのコースに無料の修了証が付きます。
フロントエンドエンジニアになることに関するよくある質問
フロントエンドエンジニアになるには？
まず、空のファイルから 1 ページを組み立てられる程度まで HTML、CSS、JavaScript を身につけ、そこに TypeScript とフレームワークを 1 つ足します（React が無難な選択です）。次に Git を覚え、チュートリアルを見ずに実際の制作物を 3 つか 4 つ作ってウェブに公開します。このコースはまさにその順番です。修了証より制作物のほうが重要です。採用担当者が 30 秒で判断できるものは、フロントエンドではポートフォリオだけだからです。
HTML、CSS、JavaScript はどれから学ぶべき？
HTML から始め、次に CSS、そして JavaScript へ。時間を最も多く割くべきなのは JavaScript です。HTML は数週間、CSS は 1 か月ほどで手になじみますが、JavaScript は本格的なプログラミング言語であり、独学のフロントエンドエンジニアの多くが手を抜いてしまう場所でもあります。このコースでは、フレームワークが登場する前に JavaScript へ 3 セクション、さらに DOM のセクションを 1 つ充てています。
フロントエンドエンジニアに TypeScript は必要？
仕事にするならほぼ必須です。実務の React / Next.js のコードベースは大半が TypeScript で書かれており、求人票に「JavaScript」とあっても実際は TypeScript であることがよくあります。JavaScript が固まっていれば短いステップなので、このコースでは最後ではなく React の直前に置いています。
React、Vue、Angular のどれを学ぶべき？
狙っている特定の求人が別の指定をしていない限り React です。求人数は圧倒的に多く、エコシステムも最大で、その上に乗る Next.js は新規の本番サイトの多くが採用しています。コンポーネント、状態、props、レンダリングといった考え方は、あとから Vue や Angular へ 1〜2 週間で移せます。このコースは React と Next.js を扱います。
フロントエンド開発の習得にはどれくらいかかる？
1 日 1 時間で、ポートフォリオを持つジュニアレベルまでおよそ 6〜9 か月です。このコースでは HTML と CSS が合わせて 6〜8 週間、JavaScript が 2〜3 か月、TypeScript が 2 週間、React と Next.js が 6 週間、制作ステップは作り続ける限り続きます。意味を持つ数字は、終えたレッスン数ではなく、完成した制作物の数です。
テスト、アクセシビリティ、状態管理は扱っていますか？
独立したコースとしては扱っていません。ページを水増しするより、そう言うほうを選びます。アクセシブルなページの土台であるセマンティックなマークアップは HTML のステップに含まれ、React 自身の状態管理も扱います。テストのコース、より踏み込んだアクセシビリティ、状態管理ライブラリはカリキュラムのロードマップにあり、公開され次第、新しいステップとしてこのコースに加わります。
無料コースだけでフロントエンドの仕事に就けますか？
はい、そのコースがポートフォリオを生むのであれば。このコースが 8 つの制作物で終わるのはそのためです。企業が見るのは、あなたが作ってその場で開けるページ、それを作ったことを示す Git の履歴、そしてレイアウトとコンポーネントを自分の言葉で説明できる面接です。3 つともこのコースから得られ、どれも有料のブートキャンプを必要としません。
