ステップ1
学習パス
フロントエンドエンジニア ロードマップ
フロントエンドエンジニアが実際に必要とする順番で並べた無料コース。構造のための HTML、レイアウトのための CSS、動きのための JavaScript、安全性のための TypeScript、実アプリのための React と Next.js、公開のための Git、そしてそれを証明する 8 つの制作物。すべてのレッスンはブラウザ上で動き、制作ステップより前のすべてのコースの最後には無料の修了証がもらえます。
698,051+ 人のcoddersがこれらのコースに登録中
804 レッスン823 チャレンジ3,184 クイズの問題
- 初心者向け
AIによるコーディングサポート
実践的なインタラクティブレッスン
全レッスンに音声ナレーション付き
知識を確かめるクイズ
パス全体で13枚の無料修了証
フロントエンドエンジニアへの道、ステップごとに
各ステップは、すでに公開されている Coddy のコースです。順番に進めても、足りないところへ直接飛び込んでも構いません。進捗はどちらの場合もコースごとに保存されます。
- 1
- 2ステップ2
CSS: レイアウトとデザイン専用ページ
このステップを始める開始セレクタ、ボックスモデル、色とタイポグラフィ、続いて 2 セクションにわたる flexbox、grid、レスポンシブレイアウト、トランジションとアニメーション。ページが、普段使っているサイトのように見え始めるステップです。開始専用ページ - 3ステップ3
JavaScript、言語のすべて専用ページ
このステップを始める開始基礎、ロジックと制御フロー、そしてオブジェクトとクラスを 3 セクションで。フロントエンドの仕事は JavaScript の仕事です。このあとのフレームワークはどれもそれを整理する方法にすぎず、言語が読めて初めて読めるようになります。開始専用ページ3つのセクションを順番に - 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 レッスン24 チャレンジ1 プロジェクト
- Instagramページのクローン作成 | フロントエンド・プロジェクトhtmlのみ16 レッスン14 チャレンジ1 プロジェクト
- Netflixのサインインページのクローン | フロントエンドプロジェクトhtmlのみ19 レッスン18 チャレンジ1 プロジェクト
- スライダー｜フロントエンドプロジェクトhtmlのみ23 レッスン22 チャレンジ1 プロジェクト
使える機能
コーディングを学ぶために使うすべて
実践で学ぶ
実際のコードを書き、データベースをクエリし、ウェブサイトを構築し、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 で学ぶ理由
- 作っているページがその場で見えます。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 つともこのコースから得られ、どれも有料のブートキャンプを必要としません。
