ツール一覧

ツール一覧へ →

Web開発 学習ロードマップ

業界標準のロードマップに準拠し、IT/Web基礎から実践プロジェクトまで段階的に学習できます。完全初心者から実務レベルまで、完全無料でブラウザのみで完結します。

プログラミング未経験でも問題ありません。解説を読んでから演習問題に取り組む2ステップ形式で、HTML・CSS・JavaScriptの基礎からAPI連携まで、挫折せずに学べます。

おすすめの進め方

① 解説を読む → ② 演習問題に取り組む

解説を飛ばすと演習でつまずきやすくなるため、この順番で進めることを推奨します。

① 最初のステップ（IT/Web基礎）から始める
🌐

IT/Web基礎

1〜2時間 入門

Webが動く仕組みを理解する。プログラミングの前に必ず押さえたい教養。

概要

これは何？

IT/Web基礎とは、WebサイトやWebアプリがどのように動いているかを理解するための知識です。サーバ、クライアント、HTTP、ネットワークといった用語を知っておくと、その後のプログラミング学習がスムーズになります。

なぜ重要？

多くのプログラミングスクールでは、最初にこの基礎を学びます。知らなくても簡単なページは作れますが、複雑なものを作ろうとすると「なぜ動かないのか」が分からず挫折しがち。最初に押さえておくと後が楽です。

何を学ぶか
  • Webページが表示される仕組み（クライアントとサーバ）
  • HTTP/HTTPSとは何か
  • ブラウザの役割
  • HTML・CSS・JavaScriptの役割の違い

詳細解説

クライアントとサーバ

Webでは「クライアント」（あなたのパソコン・スマホ）が「サーバ」（データを置いている遠くのコンピュータ）に「このページをください」とリクエストを送り、サーバがHTMLなどのファイルを返します。ブラウザがそのHTMLを解釈して画面に表示します。

例:
  • あなたがURLを入力 → ブラウザがサーバにリクエスト → サーバがHTMLを返す → ブラウザが表示
Tips:
  • クライアント=依頼する側、サーバ=提供する側
  • 1つのサーバが多数のクライアントに応答する
よくある間違い:
  • サーバとクライアントを混同する
  • 「サーバ」を特別な機械だと思う → 普通のPCでもサーバになれる

HTTPとHTTPS

HTTPはサーバとクライアントがデータをやり取りするための「約束事」（プロトコル）です。HTTPSは暗号化された安全な版。URLの先頭がhttps://なら通信が暗号化されています。

例:
  • http://example.com → 暗号化なし
  • https://example.com → 暗号化あり（ padlock マーク）
Tips:
  • 今はHTTPSが標準。HTTPは非推奨になりつつある
  • フォーム送信などは必ずHTTPSで
よくある間違い:
  • HTTPとHTMLを混同する
  • HTTPSを「別の仕組み」だと思う → HTTPの暗号化版

HTML・CSS・JavaScriptの役割

HTMLは「構造」（見出し、段落、リンクなど何があるか）。CSSは「見た目」（色、サイズ、レイアウト）。JavaScriptは「動き」（クリックで反応、入力を受け取るなど）。3つが協力して1つのWebページになります。

例:
  • HTML: <h1>タイトル</h1> で見出しを定義
  • CSS: h1 { color: blue; } で青くする
  • JavaScript: ボタンクリックでアラート表示
Tips:
  • まずHTMLで骨組み、CSSで装飾、JSで動き
  • 役割を分けると保守しやすい
よくある間違い:
  • HTMLで見た目を頑張ろうとする → CSSに任せる
  • 全部JavaScriptで書こうとする → 構造はHTMLで

実践手順

  1. 1
    開発者ツール（DevTools）を開く 2分

    今見ているこのページの裏側（HTML）を覗いてみましょう。プロのエンジニアが毎日使うツールです。

    • 画面のどこかで右クリックし、「検証」または「要素を調査」を選択
    • 画面右側（または下部）に謎のコードが並んだパネルが出る
    • Elements（要素）タブが選ばれていることを確認

    F12キーや Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac) でも開けます。

    ✓ 開発者ツールが開いた / HTMLのコードらしきものが見える

    トラブルシューティング:

    右クリックしても検証が出ない → ブラウザがChromeやEdgeなどのPC用モダンブラウザか確認してください

よくある質問

HTTPとHTTP/3って何が違うの？
HTTP/1とかHTTP/2はTCPっていう「確実にお届けします！」って方式だったんだけど、HTTP/3はUDP（QUIC）っていう「とりあえず爆速で投げるわ！」って方式に変わってて、通信がブチブチ切れる環境でも復活が劇的に早くなってるらしいです。（知らんけど）
なんでWebサーバーとDBサーバーって分けるの？一緒にすればよくね？
セキュリティ的にもヤバいし、アクセス集中した時に「Webサーバーだけ3台に増やそうぜ！」みたいな小回りが効かなくなるからです。RPGでいうと前衛（Web）と後衛（DB）に分ける感じ。一緒にすると全体攻撃で一発全滅します。
なんかCORSエラーって出て画面真っ赤になったんだけど…
出たー！みんなのトラウマCORSエラー！これはブラウザ先輩が「ちげーオッサンのサイト（別ドメイン）から勝手にデータ取ってくんな！」って防衛してる現象です。最初はビビるけど、APIやるなら絶対通る道なので後でじっくり戦いましょう。
404とか500とか、あの数字なんなの？
ステータスコードですね。400番台（404とか）は「お前（ユーザー）が見に行く場所間違えてるぞ」っていうエラーで、500番台は「俺（サーバー）がバグって死んだわ、すまん」っていうエラーです。どっちのせいか切り分けるのに超大事！

Webの仕組みが分かりました。

次は環境構築。ブラウザとエディタを用意して、最初のHTMLを書いてみましょう。

① 解説を読む → ② 次のステップ（環境構築）へ
🔧

環境構築

30分 入門

ブラウザとエディタだけ。今すぐ始められる。ブラウザだけで完結。

概要

これは何？

環境構築とは、プログラミングを始めるための準備のことです。難しそうに聞こえますが、このサイトではブラウザだけで演習できます。ローカルでやる場合は「ブラウザ」と「テキストエディタ」の2つがあれば今すぐ始められます。

なぜ重要？

Web開発の良いところは、パソコンに最初から入っているツールだけで始められることです。演習はブラウザだけで完結するので、インストール不要。まずは気軽に始めましょう。

何を学ぶか
  • ブラウザの役割と使い方
  • テキストエディタでHTMLファイルを作る方法（ローカル開発の場合）
  • 演習画面の使い方（コード→実行→プレビュー）
  • VS Codeのインストール方法（オプション）

詳細解説

ブラウザって何？

ブラウザは、Webページを見るためのソフトウェアです。Chrome、Edge、Firefox、Safariなどがあります。あなたが今このページを見ているのもブラウザです。ブラウザはHTMLを解釈して、人間が見やすい形で表示します。

例:
  • Windows: Edge（最初から入っている）
  • Mac: Safari（最初から入っている）
  • どのOSでも: Chrome（無料でダウンロード可能）
Tips:
  • どのブラウザでも基本的な機能は同じ
  • 開発者はChromeを使うことが多い（DevToolsが便利）
よくある間違い:
  • ブラウザとGoogle検索を混同する
  • Internet Explorerを使う → 古くて非推奨

演習の流れ

画面上のエディタにコードを書いて「実行」を押すと、すぐ下のプレビューに結果が表示されます。環境構築不要。ブラウザだけで完結します。まずは演習問題の「体験」から始めて、実行ボタンを押す感覚を掴みましょう。

例:
  • 1. 解説を読む
  • 2. エディタにコードを書く（または穴埋め）
  • 3. 実行ボタンをクリック
  • 4. プレビューで確認
Tips:
  • 最初は解答をコピペして「動く」を体験してもOK
  • エラーが出たら行番号をクリックで該当箇所へ
よくある間違い:
  • いきなり難しい問題から始める → 体験→h1→p の順で

HTMLファイルって何？（ローカル開発用）

HTMLファイルは、Webページの設計図です。.htmlという拡張子のファイルで、ブラウザで開くとWebページとして表示されます。メモ帳で作れます。このサイトの演習ではファイルを作る必要はありません。

例:
  • index.html: トップページによく使われる名前
  • about.html: 会社概要ページなど
Tips:
  • ファイル名は半角英数字で
  • 拡張子を.htmlにしないとブラウザで開けない
よくある間違い:
  • index.html.txtになる → 拡張子が二重
  • 日本語のファイル名 → 英数字に

実践手順

  1. 1
    演習ページを開く 1分

    「演習問題」ページを開きます。

    • 上部メニューから「学習」→「演習問題」をクリック
    • または /learn/ に直接アクセス
    • 問題を選んで解く

    ✓ 演習ページが表示された / 問題一覧が見える

    トラブルシューティング:

    ページが見つからない → URLが正しいか確認。https:// から始まっているか。

  2. 2
    体験問題を解く 2分

    最初の「体験：実行してみよう」問題で、実行ボタンを押してプレビューを確認します。

    • カテゴリで「環境構築」を選ぶ
    • 「体験：実行してみよう」をクリック
    • コードはそのままで「実行」をクリック
    • プレビューに「Hello World」と表示されたら成功
    <h1>Hello World</h1>

    実行ボタンはコード欄の下にあります

    ✓ 実行ボタンを押した / プレビューに何か表示された

    トラブルシューティング:

    何も表示されない → プレビュー欄をスクロールして確認。コンソールにエラーが出ていないか確認。

  3. 3
    最初のHTMLを自分で書く 5分

    「最初のHTML」問題で、h1タグを使って「Hello World」と表示するコードを書きます。

    • エディタに <h1>Hello World</h1> と入力
    • 半角の < と > を使う
    • h1は小文字で
    • 実行してプレビューを確認
    <h1>Hello World</h1>

    < と > は半角。全角の＜＞だと動かない。

    ✓ コードを入力した / 実行して「Hello World」と表示された

    トラブルシューティング:

    < や > が全角になっている → 必ず半角で入力。キーボードのShift+, とShift+. で < と >

よくある質問

コード書き直したのに画面変わらん！なぜ！
それ、ブラウザのキャッシュ（記憶）がイタズラしてる可能性大です！開発者ツール（F12）開いた状態で、リロードボタンを長押しして「キャッシュの消去とハード再読み込み」をガツンとキメてみてください。
ローカルのファイル（file://）じゃダメなの？
最初はいいんだけど、後でFetch APIとかモジュール（import/export）使おうとすると、ブラウザが「ローカルファイルから勝手に通信すんな！」ってキレてくるんですよ。VS Codeの『Live Server』って拡張機能入れて、なんちゃってWebサーバー起動しちゃうのが一番ラクです。
.htmlで保存したのに、ただのテキスト丸出しになるんだけど…
Windowsあるあるですね…。OSの設定で「拡張子は隠すよ！」ってなってて、実際のファイル名が『index.html.txt』みたいな悲惨なことになってるはず。エクスプローラーの表示設定から「ファイル名拡張子」にチェック入れて成敗してください。
VS Codeに最初に入れとくべき神拡張機能ある？
とりあえず日本語化パックと、保存した瞬間にブラウザもリロードしてくれる神ツール『Live Server』。あとはタグを自動で閉じてくれる『Auto Rename Tag』あたり入れとけば、最初のストレスは激減するはず！

環境が整いました！演習でコードを書いて即確認できることを体験しました。

次はHTMLの基礎を詳しく学びましょう。見出し、段落、リスト、リンクなど、文章を構造化するタグを1つずつ押さえます。

① 解説を読む → ② 演習する（6問）
📝

HTML基礎

1〜2週間 入門

見出し、段落、リスト、リンク。1タグずつ丁寧に学ぶ。

概要

これは何？

HTMLはWebページの骨組みを作る言語です。見出し、段落、リスト、リンクなど、文章に意味を持たせて構造化します。タグ（<h1> など）で囲むことで「これは見出し」「これは段落」とブラウザに伝えます。

なぜ重要？

HTMLがなければWebページは作れません。すべてのWebサイトの土台です。まずは基本のタグを1つずつ押さえましょう。

何を学ぶか
  • 見出し（h1〜h6）の使い方と意味
  • 段落（p）の書き方
  • リスト（ul, ol, li）の構造
  • リンク（a）と画像（img）
  • strong, em, div, span の使い分け

詳細解説

HTMLタグの基本構造

HTMLは「タグ」で要素を囲みます。開始タグ <h1> と終了タグ </h1> の間にテキストを書きます。例: <h1>タイトル</h1>。タグ名は小文字が推奨。 < と > は必ず半角です。

例:
  • <h1>見出し</h1>
  • <p>段落のテキスト</p>
  • 間違い: ＜h1＞見出し＜/h1＞（全角）
Tips:
  • 開始タグと終了タグをセットで
  • 入れ子は閉じる順序を守る（先に開いたものを後に閉じる）
よくある間違い:
  • </h1> を忘れる
  • 全角の＜＞を使う
  • タグ名を大文字で書く（動くが非推奨）

見出し（h1〜h6）

見出しは文章の構造を表します。h1が最も大きく、h6が最も小さい。h1はページのメインタイトルで、1ページに1つが推奨。h2は大見出し、h3は小見出し…と階層を作ります。

例:
  • <h1>私のページ</h1>
  • <h2>自己紹介</h2>
  • <h3>趣味</h3>
Tips:
  • 階層を飛ばさない（h1の次にh3は避ける）
  • 見た目より意味を優先
よくある間違い:
  • h1を複数使う → SEOに不利
  • 見出しを装飾目的で使う

段落（p）

pタグは段落（paragraph）を表します。文章の1ブロックを意味づけます。開始タグ<p>と終了タグ</p>でテキストを囲みます。例: <p>これは1つの段落です。</p>。複数の段落はpタグを複数使います。

例:
  • <p>はじめてのWebページです。</p>
  • <p>段落1</p><p>段落2</p>
Tips:
  • 見出しの下に段落を置くと読みやすい
  • 改行したいだけならbrよりpを複数使う
よくある間違い:
  • pの中にpを入れる → 不正なHTML
  • pを忘れてテキストだけ書く

リスト（ul, ol, li）

ulは順序なしリスト（箇条書き）、olは順序付きリスト（番号付き）。liが各項目です。ulやolの直下にはliだけを置きます。liは必ずulかolの中に書きます。

例:
  • <ul><li>りんご</li><li>みかん</li></ul>
  • <ol><li>手順1</li><li>手順2</li></ol>
Tips:
  • ulの直下にli以外を置かない
  • olは手順・ランキングに
よくある間違い:
  • ulの直下にli以外を置く
  • liをul/olの外に書く

リンク（a）

aタグでリンクを作ります。href属性に飛び先のURL、タグの間のテキストが表示されます。例: <a href="https://example.com">例のサイト</a>。hrefは必須です。

例:
  • <a href="/about">会社概要</a>
  • <a href="https://google.com">Google</a>
Tips:
  • 外部リンクは target="_blank" rel="noopener" を付けると新しいタブで開く
よくある間違い:
  • hrefを忘れる
  • URLの引用符を忘れる

画像（img）

imgタグで画像を表示します。src属性に画像のURL、alt属性に説明（必須）を書きます。自己閉じタグなので</img>は不要。例: <img src="photo.jpg" alt="説明">

例:
  • <img src="https://example.com/img.png" alt="サンプル画像">
Tips:
  • altはスクリーンリーダー用。画像が表示されないときも表示される
よくある間違い:
  • altを省略
  • srcのURLを間違える

strong, em, div, span

strongは強い強調（太字）、emは軽い強調（斜体）。divはブロック要素（縦に積む）、spanはインライン（横に並ぶ）。divとspanは意味がなく、グループ化・装飾用です。

例:
  • <p>これは<strong>重要</strong>です。</p>
  • <div>ブロック1</div><div>ブロック2</div>
  • <p>これは<span>赤い文字</span>です。</p>
Tips:
  • strong/emは意味を持つ。b/iは見た目だけなので避ける
よくある間違い:
  • divとspanの使い分けを間違える

テーブル（table）

表形式のデータを作るためのタグです。tableで全体を囲み、tr（行）、th（見出しセル）、td（データセル）を組み合わせて作ります。

例:
  • <table>\n <tr>\n <th>見出し</th>\n </tr>\n <tr>\n <td>データ</td>\n </tr>\n</table>
Tips:
  • レイアウト目的にはTableを使わない
よくある間違い:
  • trの中に直接テキストを書く → 必ずthかtdに入れる

セマンティックタグ

header（ヘッダー）、main（主要コンテンツ）、footer（フッター）、nav（ナビゲーション）、article（独立した記事）、section（意味のある区切り）など、「要素の意味」を表すタグです。SEOやアクセシビリティに役立ちます。

例:
  • <article>\n <section>第1章</section>\n</article>
Tips:
  • divの代わりに適切なタグがないか考える
よくある間違い:
  • 全部divで作る（divスープ）

フォームの基本

ユーザーからの入力を受け取る仕組みです。formで全体を囲み、input（1行入力）、textarea（複数行）、select（選択肢）などを置きます。

例:
  • <form>\n <input type="text" name="username">\n <button type="submit">送信</button>\n</form>
Tips:
  • name属性がないとデータが送信されない
よくある間違い:
  • formタグを忘れてinputだけ書く

ラベルとチェックボックス

labelタグをinput要素と紐づけると、文字をクリックしてもチェックできるようになります。forとidの値を一致させます。

例:
  • <label for="agree">同意する</label>\n<input type="checkbox" id="agree" name="agree">
Tips:
  • labelでinputを囲む（<label><input> 同意</label>）方法でも紐づく
よくある間違い:
  • forとidを書き忘れる

カスタムデータ属性

data-で始まる独自の属性を付けて、要素にデータを持たせることができます。JavaScriptから簡単に取得・操作できます。

例:
  • <div data-id="123" data-status="active">ユーザー</div>
Tips:
  • 見た目に関係ないデータを持たせるのに便利
よくある間違い:
  • 標準の属性（idやclass）で無理やりデータを持たせようとする

実践手順

  1. 1
    h1タグを書く 2分

    見出しを1つ書いてみます。

    • <h1>こんにちは</h1> と入力
    • 実行してプレビューを確認
    <h1>こんにちは</h1>

    ✓ 大きく表示された

    トラブルシューティング:

    表示されない → < と > が半角か確認

  2. 2
    pタグで段落を追加 2分

    見出しの下に段落を追加します。

    • <h1>タイトル</h1> の下に <p>段落です。</p> を追加
    • 実行して確認
    <h1>タイトル</h1>
<p>段落です。</p>

    ✓ 段落が表示された

  3. 3
    ulとliでリストを作る 3分

    箇条書きリストを作ります。

    • <ul> と </ul> で囲む
    • その中に <li>項目1</li> などを書く
    <ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

    ✓ ・が付いてリスト表示された

    トラブルシューティング:

    liがulの外にある → liはulの直下に書く

よくある質問

いちいちarticleとかsectionとか書くのダルい。全部divじゃダメ？
見た目的には全く問題ない（全部divで作るのをdivスープって言います）んだけど、Googleの検索ロボットとか、画面読み上げソフトからすると「どこが本文でドコがオマケなの！？」ってブチギレ案件になります。SEO（検索順位）下げたくないなら地道に書いた方がいいかも。
<button> と <a>（リンク）ってパッと見同じだけど、どっち使うの？
「別のURLのページに飛ぶ」なら<a>、「画面の中でポチッとアクション起こす（送信とか開くとか）」なら<button>の一択です！これ混同してると、キーボード操作でタブ移動してるユーザーが発狂するUIが爆誕します。
<img> の一番最後に「/」って書くべき？（<img />みたいな）
HTML5的にはどっちでもOKなんだけど、後々Reactとか（JSX）やり始めると、この「/」がないだけで一生エラー吐き続けて泣くハメになるんで、今のうちからスラッシュ付けて閉じる癖つけとくのがおすすめです！
h1要素ってページに1個だけじゃないとダメなの？
昔は「sectionごとになら何個でもいけるべ！」って仕様だったんだけど、結局ブラウザが全然対応してくれなくて「やっぱりページに1個で、あとは順番にh2、h3って使ってね…」って方針に戻った歴史があります。素直に1個にしときましょう。

HTMLの基本を押さえました。

次はCSSで見た目を整えましょう。色、余白、フォントを学びます。

① 解説を読む → ② 演習する（12問）
関連ツール: HTMLエスケープ
🎨

CSS基礎

1週間 入門

色、余白、フォント。見た目を整える。

概要

これは何？

CSSはWebページの見た目を決める言語です。色、サイズ、余白、配置などを指定します。HTMLに<style>タグで書くか、別ファイルに書いてlinkで読み込みます。

なぜ重要？

HTMLだけでは味気ないページになります。CSSで見やすく、使いやすくデザインできます。

何を学ぶか
  • 色の指定（color, background-color）
  • 余白（margin, padding）
  • フォント（font-size, font-family）
  • クラスとセレクタ

詳細解説

CSSの書き方

セレクタ { プロパティ: 値; } の形で書きます。例: h1 { color: blue; } でh1の文字色を青に。複数指定するときはセミコロンで区切ります。

例:
  • h1 { color: blue; }
  • p { font-size: 16px; margin: 10px; }
Tips:
  • プロパティ名と値の間にコロン
  • 最後のセミコロンは省略可だが付ける習慣に
よくある間違い:
  • コロンを忘れる
  • 単位を忘れる（16ではなく16px）

色の指定

colorは文字色、background-colorは背景色。色名（blue）、hex（#0000ff）、rgb（rgb(0,0,255)）が使えます。

例:
  • color: blue;
  • background-color: #f5f5f5;
  • color: rgb(255, 0, 0);
Tips:
  • ダークモード対応ならCSS変数が便利
  • コントラスト比に注意
よくある間違い:
  • 色名のスペルミス
  • 背景と文字が同系色で読めない

余白（marginとpadding）

marginは要素の外側の余白、paddingは内側の余白。上下左右を個別に指定できます。

例:
  • margin: 16px;（四方同じ）
  • padding: 8px 16px;（上下 左右）
Tips:
  • marginは隣同士で相殺される
  • paddingは背景色の内側
よくある間違い:
  • marginとpaddingを混同
  • 単位を忘れる

幅指定とボーダー

widthで要素の幅を、borderで枠線を指定します。角丸はborder-radiusです。

例:
  • width: 300px;
  • border: 1px solid #ccc;
  • border-radius: 8px;
Tips:
  • borderは 線の太さ・種類・色 の順番で書く
よくある間違い:
  • solidなど線の種類を書き忘れて線が出ない

クラスとセレクタ

クラス（.クラス名）で複数要素に同じスタイルを当てられます。HTMLで class="クラス名" を付けて紐づけます。

例:
  • .card { border: 1px solid #ccc; }
  • <div class="card">カード</div>
Tips:
  • クラスは再利用、IDは1要素だけ
よくある間違い:
  • IDを複数に使う
  • !importantの乱用

擬似クラス（hover）

:hoverを付けると、マウスが要素の上に乗ったときのスタイルを指定できます。

例:
  • a:hover { color: red; }
Tips:
  • ボタンやリンクへの反応を付けるのに必須
よくある間違い:
  • スマホではhoverがうまく機能しないので注意

実践手順

  1. 1
    styleタグを追加 2分

    HTMLのhead内に<style>タグを書きます。

    • <head>内に<style>と</style>を書く
    • その中にCSSを書く
    <style>
h1 { color: blue; }
</style>

    ✓ スタイルが反映されている

    トラブルシューティング:

    反映されない → セレクタが正しいか、スペルを確認

  2. 2
    クラスを使ったスタイリング 3分

    要素に対してclass属性を付与し、特定の要素だけにスタイルを適用します。

    • pタグに class="highlight" を追加する
    • CSSに .highlight { background-color: yellow; } を記述する
    <style>
.highlight { background-color: yellow; }
</style>
<p class="highlight">注目箇所</p>

    ✓ 特定の段落だけ背景色が変わった

    トラブルシューティング:

    すべてのpタグが変わってしまった → セレクタが p ではなく .highlight になっているか確認

  3. 3
    ボタンのデザイン作成 5分

    パディング、背景色、角丸、マウスオーバー効果を組み合わせて、クリックしたくなるボタンを作ります。

    • button要素を用意し、btnクラスを付与
    • paddingとborder-radiusで形を整える
    • :hover擬似クラスでホバー時の色を変える
    <style>
.btn {
  padding: 10px 20px;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover {
  background-color: #2563eb;
}
</style>
<button class="btn">送信</button>

    ホバーした際にわずかに色が暗くなるのを確認します。

    ✓ ボタンらしい立体感が出た / マウスを乗せると色が変わる

    トラブルシューティング:

    枠線が残る → border: none; を指定しているか確認

よくある質問

marginが足し算されずに食い込んでるんだけど、バグ？
でた！「マージン相殺（コラプス）」の罠ですね。縦に並んだブロック要素のmarginは、デカい方の数値に吸収されるっていう謎仕様があるんです。間にちょっとでもpaddingや枠線が入ると相殺されなくなったりして、初心者の発狂ポイント第1位です。
z-indexを10000とかにしても上に重なってこない！
z-indexは position が static（デフォルト）以外の要素じゃないと完全に無視されます！さらに、親バカ要素（親のz-indexが低い）に捕まってると、子要素でいくら1億とか指定しても親より上には行けないっていう悲しい身分制度があります。
box-sizing: border-box; ってお呪い、絶対書かなきゃダメ？
個人的には絶対書いた方がいいです！デフォ（content-box）だと幅100%にpadding付けた瞬間、画面はみ出して横スクロールバーが出現する地獄になります。「指定した幅の中でやり繰りしてね」っていう平和な世界にするための神設定です。
CSS書き直しまくってたら、数千行になって何が何だか分からん…
完全にあるあるです。最初はBEMとかの「命名ルールで何とかするぜ！」って流派を学ぶか、最近なら Tailwind CSS みたいに「もうHTML側に直接書いちゃおうぜ！」ってスタイルにするのが主流になってます。今の段階では気にしなくてOK！

CSSの基本を押さえました。

次はJavaScriptで動きを付けましょう。

① 解説を読む → ② 演習する（10問）
関連ツール: 色変換px/rem変換
⚡

JavaScript基礎

2週間 初級

ボタンを押したら文字が変わる。動きを作る。

概要

これは何？

JavaScriptはWebページに動きを付ける言語です。

なぜ重要？

静的なページから、インタラクティブなアプリへ。

何を学ぶか
  • 変数とデータ型
  • 関数の書き方
  • DOM操作
  • イベント

詳細解説

変数（const, let）

データを覚える箱です。constは再代入不可、letは再代入可能。今はvarは使いません。

例:
  • const name = '太郎';
  • let count = 0;
Tips:
  • 基本はconstを使い、変わる値だけletにする
よくある間違い:
  • constで宣言したものに別の値を入れようとしてエラーになる

条件分岐（if文と三項演算子）

「もし〜なら」という処理を作ります。簡単な分岐なら、三項演算子（条件 ? 真の時 : 偽の時）が便利です。

例:
  • if (age >= 18) { console.log('成人'); }
  • const result = score >= 60 ? '合格' : '不合格';
Tips:
  • === は型まで含めた厳密な等価なので、== より === を使う
よくある間違い:
  • if (a = 1) のように == ではなく = にしてしまう

繰り返し（forループ）

同じ処理を何度も繰り返します。配列の処理によく使われます。

例:
  • for (let i = 0; i < 5; i++) {\n console.log(i);\n}
Tips:
  • 配列の中身を1つずつ取り出すときは map や forEach が便利
よくある間違い:
  • 無限ループを作ってブラウザを固まらせる

関数とアロー関数

処理のまとまりです。最近は `() => {}` という短い書き方（アロー関数）がよく使われます。

例:
  • function greet() { return 'Hello'; }
  • const double = (x) => x * 2;
Tips:
  • 1行のアロー関数は return を省略できる
よくある間違い:
  • 波括弧 {} を書いたのに return を忘れて undefined が返る

文字列操作とテンプレートリテラル

文字をつ繋ぐには + を使いますが、バッククォート（`）で囲むと変数を直接埋め込めて便利です。

例:
  • const msg = `こんにちは、${name}さん`;
Tips:
  • バッククォートはShift+@（JISキーボード）
よくある間違い:
  • シングルクォートで囲んで ${name} がそのまま表示される

配列とその操作（map, filter）

複数の値を1つにまとめます。mapは全要素を変換、filterは条件に合うものだけを抽出した新しい配列を作ります。

例:
  • const arr = [1, 2, 3];
  • const doubled = arr.map(n => n * 2);
Tips:
  • 元の配列は変更されない（非破壊的メソッド）
よくある間違い:
  • インデックスは1ではなく0から始まるのを忘れる

実践手順

  1. 1
    scriptタグを追加してログを出す 2分

    JSを書いてブラウザの開発者ツールに文字を出力します。

    • </body>直前に<script>タグを書く
    • console.log('Hello'); と記述
    • F12でConsoleタブを開いて確認
    <script>
console.log('Hello');
</script>

    画面には出ず、裏側のConsoleにだけ出ます。

    ✓ ConsoleにHelloと出た

    トラブルシューティング:

    Consoleに何も出ない → console.log のスペルを確認

  2. 2
    変数を使って計算する 3分

    データを入れておく箱（変数）を作り、簡単な計算をさせます。

    • const price = 1000; を宣言
    • 消費税をかけた値を計算して表示する
    <script>
const price = 1000;
const tax = 1.1;
console.log(`税込価格は ${price * tax}円 です`);
</script>

    ✓ 1100円と計算された

    トラブルシューティング:

    エラーが出た → バッククォート（`）ではなくシングルクォート（'）を使っている可能性があります

  3. 3
    配列とループ処理 5分

    複数のデータをまとめて扱い、繰り返し処理（for）で全て表示します。

    • 果物の配列を作る
    • for文を使って順番にconsole.logへ流し込む
    <script>
const fruits = ['Apple', 'Banana', 'Orange'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
</script>

    ✓ 3つの果物が順番に表示された

    トラブルシューティング:

    無限ループになりブラウザがフリーズした → 条件式 (i < fruits.length) や i++ が間違っていると発生します

よくある質問

0.1 + 0.2 が 0.3 にならないんだけど…バグ？
プログラミングあるある第1位！これはJSのバグじゃなくて「IEEE 754」っていう業界標準の計算ルールのせいで起こる丸め誤差です。お金の計算する時は、一回10倍して整数にしてから足して、後で10で割るみたいな泥臭いことやって回避します。
なんでvar使っちゃダメなの？普通に動くじゃん。
普通に動くからタチが悪いんです…。varは「スコープ（有効範囲）」が広すぎて、全然関係ない場所の同名変数を上書きして大事故を起こす天才なんです。letとconstは「このブロック（{}内）だけ！」って閉じ込められるから安全。varは歴史の闇に葬り去りましょう。
「==」と「===」って何が違うんスか？
「===」は型まで厳密にチェックする超真面目なやつ。「==」はお人好しすぎて文字列の '0' と 数字の 0 を勝手に同じとみなして true を返しちゃう激ヤバ野郎です。マジで予測不能なバグ生むんで、実務では一生「===」だけ使ってください！
thisの中身が勝手に変わってエラー吐くんですけど…
出た、JS最大の闇「thisの挙動が変わる問題」。JSの this 君は「関数がどうやって呼ばれたか」でコロコロ気分（中身）を変えるサイコパスです。最近はアロー関数 (() => {}) を使って、thisを親から引き継いで固定させるのが主流になって平和になりました。

JavaScriptの基本を押さえました。

次はレイアウト（Flexbox、Grid）を学びましょう。

① 解説を読む → ② 演習する（15問）
関連ツール: JSON整形
🕹️

DOM操作

1週間 初心者

JavaScriptからHTMLの要素を操作し、ページを動的に書き換える。

概要

これは何？

DOM（Document Object Model）は、HTMLの要素をJavaScriptのオブジェクトとして扱う仕組みです。

なぜ重要？

DOMを操作できなければ、ページの変化を起こせません。Reactなどの土台となる重要な知識です。

何を学ぶか
  • 要素の取得
  • イベントリスナー
  • クラスやスタイルの変更
  • 要素の生成と削除

詳細解説

要素の取得

HTML上にある要素をJSの世界に持ってきます。idで1つ取得するか、querySelectorでCSSセレクタのように取得します。

例:
  • document.getElementById('msg')
  • document.querySelectorAll('li')
Tips:
  • querySelectorAllは配列のようにforEachで回せる
よくある間違い:
  • 取得できていない（null）のに操作しようとしてエラーになる

イベント（クリック時の処理等）

「ボタンが押された」「文字が入力された」などのタイミングで処理を走らせることをイベントリスナーと言います。

例:
  • btn.addEventListener('click', () => {\n console.log('押された');\n})
Tips:
  • 要素の一覧（ulなど）に1つだけリスナーを付ける「イベントデリゲーション」という応用テクニックがある

要素の書き換え・追加・削除

textContentで文字を変え、classList.addでCSSクラスを追加します。新しく箱を作る場合はcreateElement、消す場合はremoveを使います。

例:
  • el.textContent = 'Hello'
  • el.classList.add('active')
  • el.remove()
Tips:
  • クラスを変えてCSSのtransitionと組み合わせるとアニメーションになる
よくある間違い:
  • innerHTMLで入力をそのまま表示してセキュリティの穴（XSS）を作る

実践手順

  1. 1
    HTML要素を取得する 2分

    JSからHTMLの要素を操作するため、まずは要素をプログラムの世界に引っ張ってきます。

    • 操作したい要素に id="target" を付ける
    • document.getElementById で取得して変数に入れる
    <!-- HTML側 -->
<p id="target">古いテキスト</p>

<script>
const el = document.getElementById('target');
console.log(el);
</script>

    ✓ Consoleにpタグそのものが表示された

    トラブルシューティング:

    nullと表示される → scriptタグを要素より上（head内など）に書いていると、まだ要素が存在せず取得できません。

  2. 2
    文字や見た目を書き換える 3分

    取得した要素の中身やスタイルを直接書き換えます。

    • textContent プロパティで文字を変更
    • style プロパティで文字色を変更
    <script>
const el = document.getElementById('target');
el.textContent = '新しいテキストに変わりました！';
el.style.color = 'red';
</script>

    ✓ 画面の文字が変わり、赤色になった

    トラブルシューティング:

    TypeError: Cannot set properties of null → 要素が正しく取得できていません。idのスペルを確認してください。

  3. 3
    クリックイベントを作る 5分

    ボタンが押された瞬間に処理を走らせる、最も使う仕組みを作ります。

    • button要素を用意しidを付与
    • addEventListener で 'click' イベントを監視する
    • クリックされたらアラートを出す
    <button id="btn">クリック</button>

<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  alert('ボタンが押されました！');
});
</script>

    ✓ ボタンを押すとアラートが出る

    トラブルシューティング:

    何も起きない → clickのスペルミスか、括弧の閉じ忘れがないか確認

よくある質問

innerHTML使うなって怒られた…textContentと何が違うの？
textContentは入力された文字をただの安全な文字として出すんだけど、innerHTMLは「HTMLタグ」として実行しちゃう。つまり、悪意あるユーザーが入力欄にウイルスみたいなスクリプト書いたらそのまま発動しちゃう（XSS攻撃）ってわけ。超キケン。
JSで新しく追加したボタンをクリックしても反応しない！
addEventListener 書いた時点では、まだそのボタンが存在してなかったからスルーされちゃった説が濃厚。こういう時は「親要素」にイベントくっつけておいて、中身（e.target）が新ボタンだったら発動させる「イベントデリゲーション」って技を使います。
querySelectorAllで取った一覧にmap()使ったらエラー出た
それ、見た目は配列（[div, div, div]みたいな）なんだけど、実は NodeList っていう配列の偽物なんです！forEachは使えるけどmapは使えません。Array.from(nodeList) って書いて本物の配列にジョブチェンジさせると使えますよ！

JSでページを動かせるようになりました。

次はレイアウトを学び、見た目も本格的にしましょう。

① 解説を読む → ② 演習する（10問）
📐

レイアウト

1週間 初級

横並び、縦並び、格子状。配置を整える。

概要

これは何？

FlexboxとGridで要素を自由に配置。

なぜ重要？

レイアウトが崩れると使いづらい。

何を学ぶか
  • Flexbox
  • Grid
  • レスポンシブ

詳細解説

Flexbox

display: flexで子要素を横並びにします。中身の中央寄せや、折り返し（flex-wrap）制御が簡単です。

例:
  • display: flex;
  • justify-content: space-between;
  • flex-wrap: wrap;
Tips:
  • gap プロパティを使うと、子要素間の隙間を一発で空けられる
よくある間違い:
  • 親ではなく子要素に display: flex を書いてしまう

Grid

display: gridで2次元の格子状レイアウトを作ります。リッチなカード一覧などに便利です。

例:
  • grid-template-columns: repeat(3, 1fr);
  • gap: 16px;
Tips:
  • 横一列ならFlex、縦横の敷き詰めならGrid

レスポンシブデザイン（メディアクエリ）

画面幅に応じてCSSを切り替えます。スマホとPCでレイアウトを変えるのに必須です。

例:
  • @media (min-width: 768px) {\n .container { display: flex; }\n}
Tips:
  • スマホ向けを基準にし、PC向けを@mediaで上書きする（モバイルファースト）と書きやすい

実践手順

  1. 1
    Flexboxで横並びにする 3分

    最も基本的なレイアウト。要素を横に並べます。

    • 親要素のdiv（クラス container）を作る
    • その中に子要素（item）を3つ入れる
    • container に display: flex; を適用する
    <style>
.container {
  display: flex;
  gap: 10px;
}
.item {
  padding: 20px;
  background: #e5e7eb;
}
</style>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

    ブロック要素なのに縦に積まれず横に並びます。

    ✓ 3つの箱が横に並んだ / 間に10pxの隙間（gap）ができた

    トラブルシューティング:

    縦に並んだまま → .container に正しくクラスが当たっているか確認

  2. 2
    Flexboxで左右に振り分ける（ヘッダー風） 3分

    ロゴを左端、ナビゲーションを右端に配置する、よくあるヘッダーの形を作ります。

    • justify-content: space-between; を使う
    <style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1f2937;
  color: white;
  padding: 10px 20px;
}
</style>
<div class="header">
  <div>Logo</div>
  <div>[メニュー]</div>
</div>

    ✓ 両端に分かれた / 縦方向が中央揃えになった

  3. 3
    Gridで敷き詰める（カード一覧） 5分

    PCでは3列、スマホでは1列で並ぶレスポンシブなカード一覧を作ります。

    • display: grid を使い、列数を指定する
    <style>
.grid-container {
  display: grid;
  /* 最小200px、余ったら均等に広がる魔法の1行 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.card { border: 1px solid #ccc; padding: 20px; }
</style>
<div class="grid-container">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
</div>

    ブラウザの幅を狭めると自動的に列数が減るのを確認してください。

    ✓ 格子状に並んだ

    トラブルシューティング:

    Auto-fitが効かない → minmaxの綴りなどを確認

よくある質問

FlexboxとGridって結局どっち使えばいいの？
横一列（または縦一列）の1次元に並べたい時はFlexboxで、トランプの神経衰弱みたいに縦横の2次元（格子状）にしたい時はGridってイメージが良いかも！！ヘッダーとかはFlex、画像ギャラリーはGridって感じ！
Flexboxの中で文字が長すぎると、折り返さずに突き破っていく…
Flexbox君の「俺たち縮みたくねぇ！」っていう謎の自己主張ですね。折り返したい要素に min-width: 0; を付けると魔法のように大人しく折り返してくれるようになります。CSSの中でもトップクラスの初見殺しデス。
float: left; で横並びにするのはもう古いの？
化石レベルで古いです！昔はそれしか方法がなくて、clearfixとかいう謎の呪文で後始末して超頑張ってたんですが、今はFlexboxがあるのでfloatは本来の「画像の横にテキストを回り込ませたい」時以外は封印推奨です。
スマホ対応で@media (メディアクエリ) 何個も書くのめんどい…
超わかります。最近は画面の幅にあわせて勝手に折り返してくれる flex-wrap とか、Gridの魔法の呪文「repeat(auto-fit, minmax(200px, 1fr))」を使うと、メディアクエリ1行も書かずにスマホ対応できちゃうのでマジで神です。

レイアウトの基本を押さえました。

次はフォームとバリデーションを学びましょう。

① 解説を読む → ② 演習する（8問）
関連ツール: CSS Grid生成
📋

フォーム・バリデーション

1週間 初級

入力を受け取って処理する。

概要

これは何？

フォームはユーザーから入力を受け取る仕組み。

なぜ重要？

Webアプリの基本。

何を学ぶか
  • input, textarea, select
  • label
  • バリデーション

詳細解説

フォーム要素

input, textarea, select。name属性でデータを識別。

例:
  • <input type="text" name="email">

バリデーション

空チェック、形式チェック。

例:
  • required
  • pattern

実践手順

  1. 1
    基本的な入力フォームを作る 3分

    テキスト入力欄と送信ボタンをもつ簡素なフォームをHTMLで作ります。

    • <form>タグで全体を囲む
    • inputとbuttonを配置する
    <form id="myForm">
  <label for="username">名前:</label>
  <input type="text" id="username" name="username">
  <button type="submit">送信</button>
</form>

    ✓ 入力欄とボタンが表示された / ラベル名をクリックすると入力欄にフォーカスが当たる

    トラブルシューティング:

    送信を押すと画面がリロードされて消える → HTML標準のフォーム送信機能が発動しているため正常です。

  2. 2
    JavaScriptで送信を止めて中身を見る 5分

    画面がリロードされてしまうのを防ぎ、JSで入力値を取り出します。

    • form要素のsubmitイベントを監視
    • e.preventDefault() で標準の送信をブロック
    • inputの .value を参照する
    <script>
const form = document.getElementById('myForm');
const input = document.getElementById('username');

form.addEventListener('submit', (e) => {
  // リロードを防ぐ
  e.preventDefault();
  console.log('入力された値:', input.value);
});
</script>

    ✓ 送信を押しても画面がリロードされなくなった / Consoleに入力値が出力された

    トラブルシューティング:

    e.preventDefault がエラーになる → コールバック関数の引数に e (または event) を受け取るのを忘れていませんか？

  3. 3
    空文字バリデーション（入力チェック） 5分

    何も入力されていない場合、エラーメッセージを出して処理を中断します。

    • 入力値が空（''）かどうかを if 文で判定
    • 空ならアラートを出して return する
    <script>
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const val = input.value.trim(); // 前後の空白を消す
  if (val === '') {
    alert('名前を入力してください！');
    return; // ここで処理終了
  }
  alert('送信完了: ' + val);
});
</script>

    ✓ 空で送信するとエラーが出る / 文字が入っていれば送信完了となる

よくある質問

なんでわざわざボタンに type="button" って書くの？
formの中のボタンは、何も書かないと勝手に「俺は送信ボタン（submit）だ！」って爆走して画面リロードさせちゃうからです。単に「ポップアップを開くボタン」のつもりなら、明示的に type="button" って言って落ち着かせる必要があります。
バリデーションってHTMLのrequired付けるだけじゃダメ？
ダメじゃないです！HTMLのrequiredだけでもブラウザが吹き出しで怒ってくれるから超便利。ただ、「文字数は〜で、全角カタカナで…」みたいな複雑な縛りプレイをするときは、結局JSの力が必要になります。両方やるのが一番マッチョな構成です。
入力チェックの前に .trim() してるのは何の意味があるん？
ユーザーって、間違えてスペースキーだけ押して送信したりするんですよ。trim()をかますと前後の空白を全部消し飛ばしてくれるので、「スペースだけの入力」をブロックできます。フォーム作るときのマナーみたいなもんです！
formタグなんて使わずに、div置いてJSで送信ボタン作ればよくね？
動くは動くんですけど…そうすると「入力したあとEnterキー押して送信！」っていうブラウザの神機能が使えなくなっちゃうんですよ。Enter送信をJSで自作するのは超絶ダルいので、素直に form要素に任せた方が幸せになれます。

フォームの基本を押さえました。

次はAPI連携を学びましょう。

① 解説を読む → ② 演習する（5問）
🌐

API連携

2週間 中級

外部データを取得して表示する。

概要

これは何？

APIは外部サービスからデータを取得する仕組み。

なぜ重要？

現代のWebアプリに必須。

何を学ぶか
  • fetch
  • JSON
  • エラー処理
  • 非同期処理

詳細解説

非同期処理とsetTimeout

JavaScriptは通信などの待ち時間が発生するとき、処理を止めずに次へ進む性質があります。意図的に遅らせるならsetTimeoutを使います。

例:
  • setTimeout(() => {\n console.log('3秒後');\n}, 3000);
よくある間違い:
  • 通信が終わる前にデータを使おうとしてエラーになる

fetchとJSON

fetch(url)でHTTPリクエストを送信。awaitでレスポンスを待ってJSONを取り出します。

例:
  • const res = await fetch(url);
  • const data = await res.json();
Tips:
  • await は async function の中でしか使えない
よくある間違い:
  • res.json() の () を忘れる

エラーハンドリング（try-catchとres.ok）

通信は失敗する前提で作る必要があります。異常終了（ネットワーク切断等）はtry-catchで、サーバーエラー（404等）は res.ok を見て対応します。

例:
  • try {\n const res = await fetch(url);\n if (!res.ok) throw new Error('エラー');\n} catch (e) {\n console.log(e.message);\n}
Tips:
  • 例外（Exception）という概念を意識する
よくある間違い:
  • 通信の失敗を一切想定していない

実践手順

  1. 1
    ダミーAPIからデータを取得してみる 3分

    JSONPlaceholderという学習用の無料APIを叩いて、ダミーデータを受信します。

    • fetch 関数にURLを渡す
    • await を使ってレスポンスを待つ
    • res.json() でJSで扱える形式に変換する
    <script>
const url = 'https://jsonplaceholder.typicode.com/users/1';

async function getData() {
  const res = await fetch(url);
  const data = await res.json();
  console.log('取得したデータ:', data);
}

// 関数を実行
getData();
</script>

    ✓ ConsoleにLeanne Grahamさんなどのユーザー情報（オブジェクト）が出力された

    トラブルシューティング:

    await is only valid in async functions というエラーになる → await を使っている関数に async キーワードが付いているか確認してください。

  2. 2
    取得したデータをHTMLに表示する 5分

    裏側で取得したデータを、実際に画面（DOM）に反映させます。

    • 表示用のdiv要素を用意し、idを振る
    • 取得した data のプロパティ（data.name など）を textContent に代入する
    <div id="profile">
  読み込み中...
</div>

<script>
const url = 'https://jsonplaceholder.typicode.com/users/1';

async function renderData() {
  const res = await fetch(url);
  const data = await res.json();
  
  const profileDiv = document.getElementById('profile');
  // バッククォートで文字列に埋め込む
  profileDiv.textContent = `名前: ${data.name} (メール: ${data.email})`;
}
renderData();
</script>

    ✓ 「読み込み中...」が「名前: Leanne Graham...」に切り替わった

  3. 3
    意図的にエラーを起こしてハンドリングする 3分

    URLをわざと間違えて、エラー時の処理（try-catch）が動くことを確認します。

    • 存在しないURLにする
    • try { ... } catch (e) { ... } で囲む
    • if (!res.ok) で例外を投げる（throw）
    <div id="profile">読み込み中...</div>

<script>
// わざと存在しないURL
const url = 'https://jsonplaceholder.typicode.com/users/99999999';

async function renderData() {
  const profileDiv = document.getElementById('profile');
  try {
    const res = await fetch(url);
    if (!res.ok) {
      throw new Error(`HTTPエラー: ${res.status}`);
    }
    const data = await res.json();
    profileDiv.textContent = `名前: ${data.name}`;
  } catch (error) {
    profileDiv.textContent = 'データの取得に失敗しました。';
    profileDiv.style.color = 'red';
    console.error(error);
  }
}
renderData();
</script>

    ✓ 文字が赤くなり「失敗しました」と表示された

よくある質問

無料で叩ける練習用のAPIってなんかある？
JSONPlaceholder（ダミーデータ）、GitHub API（公開情報）、PokéAPI（ポケモン図鑑！）あたりが有名です。最初はPokéAPIを叩いて画面にピカチュウを召喚するのがテンション上がっておすすめ。（知らんけど）
API叩いたら赤い文字でCORSエラーって出て死んだ…
フロントエンド開発者の登竜門ですね！ブラウザが「見ず知らずの他人のサーバーから勝手にデータ引っこ抜くな」って激怒してる状態です。大抵はAPI側で設定してもらうか、自分で中継サーバー立てないと解決しないっていう絶望ルールになってます。
fetchじゃなくてAxiosってやつの方がいいって先輩が言ってた！
実務だとAxiosの方がJSONに自動で直してくれたりして便利なんですが、最近の標準 fetch 君もだいぶ優秀になってきて、「余計なライブラリ入れたくないから全部 fetch でいこうぜ！」ってプロジェクトも増えてます。まずは基本のfetchでOK！
APIのパスワード（Secret Key）ってそのままJSに書いていいの？
絶対に！！！！ダメです！！！フロントのJSはブラウザの検証ツールから世界中の誰でも丸見えなので、一瞬でキー引っこ抜かれて数百万のクラウド破産するリスクがあります。キーが必要なAPIは絶対自作のバックエンド経由で叩いてください！

API連携の基本を押さえました。

最後に実践プロジェクトで総仕上げをしましょう。

① 解説を読む → ② 演習する（5問）
🚀

実践プロジェクト

2週間 中級

学んだことを総動員して、1つの作品を作る。

概要

これは何？

HTML、CSS、JavaScriptを組み合わせて1つのWebアプリを作る。

なぜ重要？

実践で身につく。ポートフォリオに。

何を学ぶか
  • プロジェクト設計
  • 段階的実装
  • 公開方法

詳細解説

設計の考え方

何を作るか→機能リスト→優先順位→小さく作る。

公開の方法

GitHub Pages、Netlify、Vercelで無料公開。

実践手順

  1. 1
    要件とワイヤーフレームを紙に描く 10分

    いきなりコードを書かず、「何ができるか」「どんな画面か」を整理します。

    • 作るアプリ（例：ToDoリスト）を決める
    • 必要なデータ（タスク名、完了フラグなど）を書き出す
    • 紙に画面のラフ画（箱とボタンの配置）を描く

    アナログな作業ですが、これが後々のコーディングスピードを劇的に上げます。

    ✓ どんな機能が必要か人に説明できるようになる

  2. 2
    最小限のHTML/CSSモックを作り機能を入れる 数時間

    デザインに凝る前に、データが動くかどうかを優先的に実装します。

    • 最初はボタンがダサくてもいいのでHTMLとJSを繋ぐ
    • データの追加・表示・削除のコア機能だけをJSで完成させる
    • Consoleへのエラーが出なくなってから、CSSで本番の装飾を行う

    ✓ 見た目は別として、目的のアクションができる

    トラブルシューティング:

    機能追加中にどこがいじったか分からなくなった → Ctrl+Zで戻る限界があります。これを防ぐために次にGit（バージョン管理）を学びます。

  3. 3
    インターネットに公開する（デプロイ） 15分

    完成した作品を、自分以外の人（世界中）が見られるようにサーバーに乗せます。

    • GitHubにアカウントを作る
    • ファイルをGitHubの「リポジトリ」にアップロードする
    • 「GitHub Pages」機能のSettingsからデプロイをONにする
    • 発行されたURLをスマホで開いてみる

    「動いた！俺のアプリがスマホで見れる！」という感動の瞬間です。

    ✓ 他の人にもURLを共有できる状態になった

    トラブルシューティング:

    真っ白な画面になる → index.html がルート（一番上の階層）に置かれているか確認してください

よくある質問

最初のポートフォリオって何作ればいいの？
初心者のド定番は「ToDoリスト」「タイマー」「天気表示（API連携）」あたり。定番すぎ？って思うかもだけど、大事なのは「コードの綺麗さ」とか「スマホでも崩れないか」なので、奇をてらわなくても基礎力は十分アピールできます！
エラー出た時、どうやってググるのが正解？
「JS ボタン 押せない」みたいなポエムで検索するのはNG！「JavaScript addEventListener function null」みたいに、赤い文字のエラーログをそのままコピペして検索するのがプロの技。最近はChatGPTに丸投げしちゃうのが一番手っ取り早いです！
作ったアプリをサクッと公開できる無料の神サービスある？
GitHub Pages、Netlify、Vercelあたりが現代の三種の神器ですね。「独自ドメイン（おれの名前.com みたいな）」を買わない限り、一生無料で爆速の公開環境を維持してくれるバグレベルの神サービスです。
ここまで終わった！フロントエンド極めるなら次はどれ？
お疲れ様です！次は「React」か「Vue.js」っていう流行りのフレームワークに手を出すか、型安全の神である「TypeScript」を学ぶのが王道ルート。あとはチーム開発必須スキルの「Git/GitHub」ですね。ようこそ地獄へ！

おめでとうございます！実務レベルまで到達しました。

React、TypeScriptなど次の技術に進みましょう。

① 解説を読む → ② 演習する（5問）

進め方の確認

① 解説を読む → ② 演習問題に取り組む。この順序で進めることで、着実に実力が身につきます。

各ステップの解説を読んでから、該当カテゴリの演習に進みましょう。

① 最初のステップから始める

職種選びはまだ？ 職種別ロードマップ →