2章 "コメント"でコードを意のままに操る！

INDEX

前の章に戻る次の章に進む

2章 "コメント"でコードを意のままに操る！

この章の目安学習時間：90分

この章で到達できるゴール：

日本語のコメントや指示から、HTML/CSS/JavaScriptのコードを生成できる。
自分の作りたいものを自然言語でAIに伝え、コーディングさせるスキルが身につく。

【2-1】コメントからHTML/CSSを生成する

目安の学習時間：30分

コメントがコードに変わる！基本の術

これからのコーディングの基本スタイルはコメント駆動開発（Comment Driven Development）です。
これは、まず「これから何を作りたいか」をコメントとして書き、そのコメントに基づいてAIにコードを生成させる手法です。

このように、HTMLファイルやCSSファイルに日本語でコメントを書くと、Copilotはそのコメントのすぐ下に、対応するコードをインライン補完で提案してくれます。

この手法により、頭の中のイメージをまず言語化し、その言語化された指示から具体的なコードを生み出すという、新しい開発フローが実現します。

秒速で組めるHTMLの骨格

それでは、実際にHTMLの骨格をコメントから生成してみましょう。

空のHTMLファイルの body タグ内に「サイト全体の基本構造を作成します。header、main 、footerタグを使って構成してください。」のようなコメントを記述し、その下でEnterキーを押すと、Copilotがコメントの構造通りに header , main , footer タグを含んだ骨格全体を提案してくれます。
Tab キーで受け入れるだけで、サイトの基本構造が一瞬で完成します。

複雑な構造であっても、コメントで「 section の中に article を3つ配置して、それぞれに h2 と p タグを入れる」のように具体的に指示すれば、その通りに生成してくれます。

CSSはAIに"いい感じ"を伝えるのがコツ

次に、生成したHTMLにスタイルを当てていきましょう。
CSSの指示は、Copilot Chatを使うとより柔軟に行えます。

先ほど生成したHTMLコード全体をコピーし、Copilot Chatに貼り付けて、次のように指示します。

プロンプト例：CSSの生成

以下のHTML構造に対して、基本的なスタイリングを行ってください。

ヘッダーのナビゲーションメニューはflexboxを使って横並びにする。
全体的にモダンでおしゃれな雰囲気にする。
ナビゲーションのリンクにマウスがホバーしたら、文字色が少し濃くなるようにして。

---

（ここにHTMLコードを貼り付ける）

ポイントは、「モダンでおしゃれに」「ホバーしたら少し濃く」といった、具体的な数値ではなく「いい感じ」を伝えることです。
AIはこちらの曖昧な意図を汲み取り、適切なCSSコードを提案してくれます。

練習問題

問題
HTMLファイルに「サイトのフッターを作成します。ロゴとコピーライトの表記を含めてください。」というコメントを書き、CopilotにHTMLを生成させてみましょう。

解答例
Copilotは以下のような、footer タグと基本的なクラス名、そして内部要素を含んだHTMLを提案するはずです。（クラス名などは提案によって変わります）

<footer class="site-footer">
  <div class="footer-content">
    <div class="footer-logo">
      <img src="logo.png" alt="会社ロゴ">
    </div>
    <div class="footer-copyright">
      <p>&copy; 2025 会社名. All Rights Reserved.</p>
    </div>
  </div>
</footer>

HTML

さらにチャットで「このフッターのCSSを書いて。
ロゴとコピーライトが左右に分かれるようにflexboxを使って」と指示すれば、CSSもすぐに完成します。

【2-2】AIと創るJavaScriptアニメーション！

目安の学習時間：30分

動きをプラス！JavaScriptアニメーション

Webサイトに動きを加えることで、ユーザー体験は格段に向上します。
インタラクティブな機能の実装に欠かせないのがJavaScriptです。

ここでは、Webサイトで頻繁に使われるUI（ユーザーインターフェース）の一つである「アコーディオン」をAIと共に実装してみましょう。
アコーディオンとは、質問部分をクリックすると回答部分がスライドして開閉するUIのことです。

JavaScriptの処理をAIと実装する

まずはアコーディオンの見た目となるHTMLとCSSを準備します。
これもCopilotに「アコーディオンUIのHTMLとCSSを生成して」と頼めば、基本的な構造はすぐに作ってくれます。

ここでは、以下のようなHTML/CSSが準備できたとします。

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-question">質問1はなんですか？</h3>
    <div class="accordion-answer">
      <p>回答1です。ここに回答文が入ります。</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-question">質問2はなんですか？</h3>
    <div class="accordion-answer">
      <p>回答2です。ここに回答文が入ります。</p>
    </div>
  </div>
</div>

HTML

/* CSS (回答部分は初期状態で非表示) */
.accordion-answer {
  display: none;
}

CSS

この状態で、Copilot Chatに次のように表示します。

プロンプト例：JavaScriptの実装

以下のHTML構造のアコーディオンを動かすためのJavaScriptを書いてください。

要件は、「.accordion-question」の要素がクリックされたら、その直後にある「.accordion-answer」の要素が開閉（表示/非表示が切り替わる）するようにしてください。

---

（ここにHTMLコードを貼り付ける）

Copilotは、指定されたクラス名（ .accordion-question と .accordion-answer ）を元に、イベントリスナーを追加し、クリックされた際の表示/非表示を切り替えるロジックを正確に生成してくれます。
生成されたコードをJavaScriptファイルに貼り付け、HTMLに読み込ませれば、アコーディオンUIの完成です。

考えてみよう！

Copilotが生成したアコーディオンのコードは、一つ開くと他の項目も開いたままでした。
「一つの項目を開いたら、他の開いている項目は閉じる」ように機能変更するには、AIにどんな追加指示を出せば良いでしょうか？

解答例
現在の状況と、望む結果を具体的に伝えることが重要です。
「ありがとうございます。素晴らしいコードです。
追加で、一つのアコーディオンを開いた時に、他の既に開いているアコーディオンは自動的に閉じるように機能を変更してください。」
このように、まずはAIの働きを肯定し、その上で追加の要件を明確に伝えることで、AIは文脈を理解し、適切な修正コードを提案してくれます。

【2-3】2章 -章末課題- [AIだけで作るカードコンポーネント]

目安の学習時間：30分

問題

AI（Copilot）へのコメントやチャットでの指示だけを使って、「画像、タイトル、説明文、ボタン」で構成されるカード型のコンポーネントを作成してください。
ホバーするとカードが少し浮き上がる（ box-shadow が濃くなる、または少し上に移動するなど）CSSも適用してください。

解答手順

操作手順

HTMLファイルを開き、エディタ内で「画像、タイトル、説明文、ボタンを含むカード型のコンポーネントを作成してください。」のようなコメントを書きます。Copilotが提案するHTMLコードを受け入れます。
CSSファイルを開きます。Copilot Chatに生成したHTMLを貼り付け、「このカードコンポーネントのCSSを書いてください。カードには白い背景、薄いグレーの枠線、少しの角丸をつけてください。」と指示します。
続けてチャットで、「カード内の要素に適切な余白（padding）を設定してください。」と指示し、基本的なスタイリングを完成させます。
最後に、「このカードにマウスがホバーしたら、少しだけカードが上に移動し、影（box-shadow）が少し濃くなるようなインタラクティブな効果をCSSで追加してください。transitionも設定して、滑らかに変化するようにしてください。」と指示し、ホバーエフェクトを適用します。
完成したHTMLとCSSのコードを、課題として提出します。

解答例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <img src="image.jpg" alt="Sample Image">
        <h2>Card Title</h2>
        <p>This is a description of the card. It provides some information about the content.</p>
        <button>Click Me</button>
    </div>
    <script>
        document.querySelector('.card button').addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
    <p>
      このコードは、HTML、CSS、およびJavaScriptを使用しています。
      カードのスタイルはCSSで定義され、ボタンのクリックイベントはJavaScriptで処理されています。
    </p>
</body>
</html>

HTML

.card {
    background-color: #fff;         /* 白い背景 */
    border: 1px solid #e0e0e0;      /* 薄いグレーの枠線 */
    border-radius: 8px;             /* 角丸 */
    padding: 16px;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 軽い影（任意） */
    transition: box-shadow 0.3s, transform 0.3s; /* 追加: 滑らかな変化 */
}
.card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 12px;
}
.card h2 {
    margin: 12px 0 8px;
}
.card p {
    margin-bottom: 16px;
}
.card button {
    margin-top: 8px;
}
.card:hover {
    transform: translateY(-8px); /* 少し上に移動 */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* 影を濃くする */
}

CSS

この章のまとめ

これで「2章："コメント"でコードを意のままに操る！」の解説を終わります。

コメントという自然言語から、構造（HTML）、見た目（CSS）、動き（JS）を自在に生み出すテクニックを学びました。
これは、これからのコーディングのスタンダードとなる強力なスキルです。

次の章では、新しくコードを作るだけでなく、既存のコードをAIの力でより良く改善する「リファクタリング」の技術を学びます。

前の章に戻る次の章に進む