フロントエンド入門【2026】HTML・CSS・JavaScript・ReactとAIチャット画面の作り方

IT基礎シリーズの全体像

この記事は、AIエージェント時代のIT基礎ロードマップの第2章です。第1章 Webの仕組み入門で学んだ「ブラウザが届いた材料を組み立てて描画する」ステップの、材料そのものがこの章のテーマです。

フロントエンドとは？3つの言語の役割

フロントエンドとは、Webサービスのうちユーザーのブラウザの中で動く部分のことです。反対に、サーバーの中で動く裏方の部分をバックエンドと呼びます（第3章）。レストランでいえば、フロントエンドは客席とメニュー表と店員さん、バックエンドは厨房です。

フロントエンドは、次の3つの言語の組み合わせでできています。家づくりにたとえると分かりやすくなります。

HTML：何がどこにあるか

HTMLは、<タグ名>中身</タグ名> という「タグ」で文章に意味を付けていく言語です。

<h1>AIチャット</h1>                  <!-- 大見出し -->
<p>質問を入力してください。</p>       <!-- 段落（文章） -->
<input type="text">                  <!-- 1行の入力欄 -->
<button>送信</button>                <!-- ボタン -->

HTMLだけでも画面は表示されますが、白地に黒文字の素っ気ない見た目で、ボタンを押しても何も起きません。

CSS：どう見えるか

CSSは、「どの部品を」「どう見せるか」を指定します。

button {                      /* すべてのbuttonに対して */
  background: #3b5bdb;        /* 背景を青に */
  color: #fff;                /* 文字を白に */
  padding: 8px 16px;          /* 内側の余白 */
  border-radius: 8px;         /* 角を丸く */
}

JavaScript：どう動くか

JavaScriptは、ブラウザの中で動くプログラミング言語です。「ボタンが押されたら」「入力された文字を読み取って」「サーバーに送って」「返事を画面に書き足す」といった動きを担当します。AIチャット画面の主役はここです。

助手アイ骨組みがHTML、内装がCSS、電気がJavaScript。家と同じで、電気だけあっても柱がなければ住めないんですね！

DOM・イベント・非同期：JavaScriptの3つの基本

AIチャット画面を作る前に、JavaScriptの3つのキーワードを押さえましょう。

1. DOM：画面を「部品の木」として扱う

ブラウザはHTMLを読み込むと、それをDOM（Document Object Model）という「部品の木構造」に変換して記憶します。JavaScriptはこのDOMを通して、「id が log の部品を探す」「新しい吹き出しの部品を作って追加する」といった操作をします。HTMLは設計図、DOMはその設計図から建てた実物の家で、JavaScriptは実物の家を後からリフォームできる、というイメージです。

2. イベント：「〜したら」をきっかけに動く

「ボタンがクリックされた」「フォームが送信された」「キーが押された」といった出来事をイベントと呼びます。JavaScriptでは addEventListener で「このイベントが起きたら、この処理をしてね」と登録しておきます。玄関のチャイム（イベント）が鳴ったらドアを開ける（処理）、と決めておくようなものです。

3. 非同期（fetch / await）：待っている間も固まらない

AIへの質問は、返事が来るまで数秒〜数十秒かかることがあります。その間ずっと画面が固まっていたら困りますよね。そこで使うのが非同期処理です。

• fetch：JavaScriptからHTTPリクエストを送る命令。第1章で学んだGETやPOSTを、プログラムから送れます
• await：「返事が来るまでここで待つ。ただし画面の他の部分は動かしたままで」という指示。async を付けた関数の中で使います

レストランでたとえると、注文したあと料理が来るまで店員さんが厨房の前で固まっているのではなく、呼び出しベルを持って他の仕事をしながら待つのが非同期です。

最小のAIチャット画面を作ってみる

それでは、ここまでの知識を組み合わせて、最小のAIチャット風画面を作ってみましょう。全体の流れは次のとおりです。

ポイントは③です。ブラウザはAIの会社のAPIに直接送るのではなく、自分たちのサーバーの /api/chat という窓口に送ります。窓口の中でAIのAPIを呼ぶ部分（バックエンド）は、第3章で作ります。

HTML：骨組み（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ミニAIチャット</title>
  <link rel="stylesheet" href="chat.css">
</head>
<body>
  <main class="chat">
    <h1>ミニAIチャット</h1>
    <!-- 会話が並ぶ場所。aria-liveで読み上げソフトにも新着を伝える -->
    <div id="log" class="log" aria-live="polite"></div>
    <!-- 入力フォーム -->
    <form id="form" class="form">
      <label for="msg">質問</label>
      <input id="msg" type="text" placeholder="質問を入力…" autocomplete="off" required>
      <button type="submit">送信</button>
    </form>
  </main>
  <script src="chat.js"></script>
</body>
</html>

• <meta name="viewport" ...>：スマホで見たときに、画面幅に合わせて表示する指定（後述のレスポンシブに必須）
• <link rel="stylesheet" ...>：見た目の指定（CSSファイル）を読み込む
• id="log"：会話を並べる箱。JavaScriptから「id が log の箱」として探せるように名前を付けている
• <form>：入力欄と送信ボタンのまとまり。Enterキーでも送信できるようになる
• <script src="chat.js">：動き（JavaScript）を読み込む。HTMLの部品が揃ったあとに読み込むため、bodyの最後に置いている

CSS：見た目（chat.css）

body { margin: 0; font-family: sans-serif; background: #f5f6fa; }
.chat { max-width: 640px; margin: 0 auto; padding: 16px; }     /* 中央寄せ・最大幅 */
.log  { display: flex; flex-direction: column; gap: 8px;
        min-height: 300px; margin-bottom: 12px; }                /* 吹き出しを縦に並べる */
.msg  { padding: 10px 14px; border-radius: 14px; max-width: 80%;
        white-space: pre-wrap; line-height: 1.6; }               /* 改行をそのまま表示 */
.msg.user { align-self: flex-end;   background: #3b5bdb; color: #fff; }  /* 自分：右・青 */
.msg.ai   { align-self: flex-start; background: #fff; border: 1px solid #dde; } /* AI：左・白 */
.form { display: flex; gap: 8px; align-items: center; }
.form input  { flex: 1; padding: 10px; font-size: 16px; }         /* 16px未満だとiPhoneで拡大されやすい */
.form button { padding: 10px 16px; font-size: 16px; }

display: flex は、部品を横や縦にきれいに並べるための指定です。自分の吹き出しは右（flex-end）、AIの吹き出しは左（flex-start）に寄せて、よく見るチャットの見た目にしています。

JavaScript：動き（chat.js）

// ① 画面の部品をDOMから探しておく
const form  = document.getElementById("form");
const input = document.getElementById("msg");
const log   = document.getElementById("log");

// ② 吹き出しを1つ作って会話欄に追加する関数
function addMessage(role, text) {
  const div = document.createElement("div");
  div.className = "msg " + role;       // "msg user" または "msg ai"
  div.textContent = text;               // innerHTMLではなくtextContent（安全のため）
  log.appendChild(div);
  div.scrollIntoView();                 // 新しい吹き出しまでスクロール
  return div;
}

// ③ フォームが送信されたら（イベント）
form.addEventListener("submit", async (event) => {
  event.preventDefault();               // ページの再読み込みを止める
  const text = input.value.trim();
  if (!text) return;

  addMessage("user", text);             // 自分の吹き出しを表示
  input.value = "";
  const reply = addMessage("ai", "考え中…");

  try {
    // ④ 自分のサーバーの窓口にPOSTで送る（APIキーはここに書かない！）
    const res = await fetch("/api/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: text }),
    });
    if (!res.ok) throw new Error("HTTP " + res.status);  // 429や500など
    const data = await res.json();      // 例：{ "reply": "こんにちは！" }
    reply.textContent = data.reply;
  } catch (err) {
    reply.textContent = "エラーが発生しました（" + err.message + "）";
  }
});

1行ずつ意味を確認しましょう。

• ① document.getElementById("form") で、HTMLで名前を付けた部品をDOMから探して変数に入れています。
• ② createElement で新しい div を作り、appendChild で会話欄に追加します。これがDOM操作です。文字を入れるときに textContent を使うのは、ユーザーやAIの文章に <script> のようなタグが紛れ込んでもプログラムとして実行されず、ただの文字として表示されるようにするためです（XSSという攻撃への基本対策）。
• ③ addEventListener("submit", ...) で「フォームが送信されたら」というイベントに処理を登録しています。preventDefault() は、フォーム送信時にページが再読み込みされる標準の動きを止める命令です。
• ④ fetch("/api/chat", {...}) で、第1章で学んだPOSTリクエストを送っています。body には質問文をJSON（データをやり取りするための書き方。第4章で詳しく）に変換して入れています。await で返事を待ち、res.ok（ステータスコードが200番台か）を確認してから中身を取り出します。
• try / catch：通信の失敗や429・500などのエラーが起きても画面が止まらないように、エラー時の表示を用意しています。

なぜブラウザからAIのAPIキーを使ってはいけないのか

ここは、この章で一番大事なポイントです。「AIの会社のAPIに、ブラウザのJavaScriptから直接送ればバックエンドがいらなくて楽では？」と思うかもしれません。つまり、こんなコードです。

// ブラウザ側のJavaScriptにAPIキーを書いてしまっている
const API_KEY = "sk-xxxxxxxxxxxxxxxx";   // ← 誰でも見られる！
const res = await fetch("https://（AIの会社のAPIのURL）", {
  method: "POST",
  headers: { "Authorization": "Bearer " + API_KEY },
  ...
});

これが危険な理由は、ブラウザに届いたHTML・CSS・JavaScriptは、すべて利用者のパソコンにダウンロードされ、誰でも中身を読めるからです。第1章で紹介した開発者ツールを開けば、ファイルの中身も、通信のヘッダーに付いたAPIキーも丸見えです。

正しい構成は次のとおりです。

サーバーを間に挟むことで、キーを隠せるだけでなく、「1人あたり1分に何回まで」といった使いすぎ防止や、ログイン済みの人だけに使わせる認証もかけられるようになります。

エージェント博士APIキーはお店の金庫の鍵じゃ。客席（ブラウザ）に置いておいたら、誰でも持って帰れてしまう。鍵は必ず厨房の奥（サーバー）にしまうんじゃぞ。AIが作ったコードでも、ここだけは毎回自分の目で確かめるんじゃ

文字が少しずつ出る仕組み（ストリーミング）

ChatGPTやClaudeの回答は、1文字ずつ（正確にはトークンという単位ごとに）流れるように表示されます。これは演出ではなく、ストリーミングという通信の仕組みによるものです。

AIの文章生成は、先頭から順に1トークンずつ作られていくので、「できた分から送る」ストリーミングとの相性がとても良いのです。

Server-Sent Events（SSE）という考え方

ストリーミングでよく使われる仕組みの一つがServer-Sent Events（SSE）です。名前のとおり「サーバーから送られてくる出来事（イベント）」を、1本のHTTPの接続を開いたまま次々に受け取る方式です。レスポンスの中身はおおむね次のような形で、data: で始まる行が少しずつ届きます。

data: {"text": "こん"}

data: {"text": "にちは"}

data: {"text": "！何を"}

data: {"text": "お手伝いしましょうか？"}

AnthropicやOpenAIのAPIも、ストリーミングを指定するとこうした形式で少しずつ回答を返してくれます（イベントの細かい種類や形式は各社で異なります）。一般的な構成では、自分のサーバーがAIのAPIからストリーミングで受け取り、それをそのままブラウザへ流し直します。

ブラウザ側では、届いた分をその都度吹き出しに書き足すだけです。考え方を示すと、次のようになります（サーバーがプレーンな文字列を小分けに送ってくる場合の簡略版）。

const res = await fetch("/api/chat", { method: "POST", /* 省略 */ });
const reader  = res.body.getReader();     // 届いたデータを少しずつ読む道具
const decoder = new TextDecoder();        // バイト列を文字に戻す道具
reply.textContent = "";
while (true) {
  const { done, value } = await reader.read();  // 次の小分けを待つ
  if (done) break;                               // 全部届いたら終了
  reply.textContent += decoder.decode(value, { stream: true }); // 書き足す
}

実際のSSEでは data: の行を1行ずつ取り出して中身を読む処理が加わります。ブラウザには EventSource というSSE専用の受信機能もありますが、これはGETリクエスト専用なので、質問文をPOSTで送るAIチャットでは上のように fetch で読み進める方法がよく使われます。ここでは「届いた分から書き足していく」という考え方だけ押さえておけば十分です。

React・Next.js・Vueの位置づけ

上のチャット画面は、素のHTML・CSS・JavaScript（「バニラJS」と呼ばれます）で作りました。小さな画面ならこれで十分ですが、画面が増え、状態（ログイン中か、会話履歴、読み込み中か…）が複雑になると、DOMを手作業で書き換えるのは大変になってきます。そこで使われるのがフレームワーク／ライブラリです。

たとえるなら、バニラJSは材料から手作りする料理、フレームワークは下ごしらえ済みの食材と調理家電がそろったキッチンです。

大事なのは、どのフレームワークを使っても、最終的にブラウザで動くのはHTML・CSS・JavaScriptだということです。フレームワークは、それらを効率よく書くための道具にすぎません。

AIエージェントに「AIチャットアプリを作って」と頼むと、ReactやNext.jsで書かれたコードが出てくることがよくあります。これはAIの学習データにReact系のコードが大量に含まれていることや、UIを生成するツールの多くがReactを前提にしていることが背景にあると考えられます。初心者の方は、まず素のHTML・CSS・JavaScriptで仕組みを理解してから、「同じものをReactで書くとこうなる」とAIに変換してもらうと、違いがよく分かります。

レスポンシブとアクセシビリティ

レスポンシブ：スマホでもPCでも見やすく

レスポンシブデザインとは、画面の幅に合わせてレイアウトを自動で調整する作り方です。1つのHTMLで、スマホでは縦1列、PCでは横2列、といった切り替えをCSSで行います。

.cards { display: grid; gap: 12px; }           /* 基本（スマホ）：1列 */
@media (min-width: 700px) {                      /* 画面幅が700px以上なら */
  .cards { grid-template-columns: 1fr 1fr; }     /* 2列にする */
}

@media は「画面の条件によってCSSを切り替える」指定です。多くのWebサイトでスマホからのアクセスは大きな割合を占めるため、まずスマホで見やすく作り、PCで広げる考え方が主流です。先ほどのHTMLに入れた <meta name="viewport"> も、スマホ表示を正しくするために欠かせません。

アクセシビリティ：誰でも使えるように

アクセシビリティは、目の見えにくい人が読み上げソフトを使っても、マウスを使えない人がキーボードだけで操作しても、誰でも使えるように作ることです。入力欄に <label> を付ける、画像に alt（代わりの説明文）を付ける、文字と背景の色の差をはっきりさせる、ボタンは <button> タグで作る——といった小さな積み重ねで大きく改善できます。先ほどのチャット画面の aria-live も、新しいメッセージを読み上げソフトに伝えるための工夫です。

AIエージェントに画面を作らせるコツとチェックポイント

2026年のいま、画面づくりはAIエージェントが最も得意とする仕事の一つです。画面の叩き台を生成するv0（Vercel社のUI生成ツール）、会話しながらコードを書いてくれるClaudeやChatGPT、エディタに組み込まれたCursor、ファイルを直接編集するClaude Codeなど、多くの選択肢があります（各ツールの機能や料金は変化が速いため、執筆時点（2026年9月）の情報として、利用前に公式サイトを確認してください）。

指示のコツ：4つの要素を具体的に

特に「制約」は書かないとAIは気にしてくれないことが多い部分です。技術を指定しないと、Reactのような初心者には読みにくいコードが出てくることもあります。既存のサイトに合わせたい場合は、既存のHTMLやCSSを一緒に渡して「このデザインに合わせて」と伝えるのも効果的です。

生成されたUIのチェックポイント

助手アイAIが作ってくれた画面が「動く」だけで満足しちゃいそうでした…。キーが書かれてないか、スマホで崩れてないか、ちゃんと確認します！

自社事例：このサイトのフロントエンド

🤖 AIエージェントとやってみよう

ChatGPTやClaudeに、以下のプロンプトをそのまま貼り付けて試してみてください。生成されたコードは、PCで index.html などのファイルとして保存し、ブラウザで開けば動作を確認できます。

やってみよう1：ダミー応答で動くチャット画面を作る

プログラミング初心者です。AIチャット風の画面を作る練習をしています。
次の条件で、1つのHTMLファイルにまとめたコードを書いてください。

・フレームワークは使わず、HTML・CSS・JavaScriptのみ
・入力欄と送信ボタン。Enterキーでも送信できる
・自分の発言は右寄せの青い吹き出し、AIの返事は左寄せの白い吹き出し
・本物のAIには接続せず、1秒後に「（ダミー）受け取りました：〇〇」と返す
・返事は1文字ずつ流れるように表示する
・スマホ幅でも崩れないようにする
・メッセージの表示には innerHTML ではなく textContent を使う

コードの後に、各部分が何をしているかを初心者向けに説明してください。

やってみよう2：生成されたコードをレビューしてもらう

次のフロントエンドのコードを、以下の観点でチェックしてください。
問題があれば、どこをどう直すべきかを具体的に教えてください。

1. APIキーやパスワードなどの秘密情報がブラウザ側に書かれていないか
2. fetchの送信先が、AI会社のAPIではなく自分のサーバーになっているか
3. スマホで表示したときに崩れる可能性がある箇所
4. キーボードだけで操作できるか、読み上げソフトに配慮されているか
5. 通信エラー時にユーザーに分かるメッセージが出るか

（ここにコードを貼り付ける。APIキーなど本物の秘密情報は消してから）

やってみよう3：同じ画面をReactで書くと？

やってみよう1で作ったHTML・CSS・JavaScriptのチャット画面を、
Reactのコンポーネントで書き直すとどうなるか見せてください。
そのうえで、
・素のJavaScriptとReactで書き方が大きく違う点を3つ
・Reactを使うと楽になる場面と、逆にいらない場面
を初心者向けに説明してください。

よくあるつまずき

CSSを変えたのに見た目が変わらない

ほとんどの場合、ブラウザのキャッシュが原因です。強制再読み込み（Windowsは Ctrl + Shift + R、Macは Cmd + Shift + R）を試しましょう。公開サイトでは、このサイトのように ?v=日付 を付ける方法が有効です。それでも変わらなければ、CSSファイルのパスが間違っていないか、開発者ツールのNetworkタブで style.css が404になっていないかを確認します。

ボタンを押しても何も起きない

開発者ツールのConsole（コンソール）タブを開きましょう。JavaScriptのエラーが赤字で表示されているはずです。「Cannot read properties of null」は、getElementById で探した部品が見つからなかった（idの綴り間違いや、HTMLより先にJavaScriptが読み込まれている）ことが多い典型例です。このエラー文をそのままAIに貼ると、原因をすぐに教えてくれます。

ファイルをダブルクリックで開くとfetchが失敗する

HTMLファイルをダブルクリックで開くと、URLが file:// で始まる状態になり、/api/chat のような送信先が正しく解決できません。fetch を試すときは、ローカルで簡易サーバーを立てて http://localhost:... で開く必要があります（方法は第5章で扱います）。AIに「ローカルサーバーで確認する方法を教えて」と聞くのも手です。

「CORSエラー」が出た

ブラウザには、「あるサイトのJavaScriptが、別のサイト（ドメイン）に勝手にリクエストを送って結果を読むこと」を制限する安全装置があり、それに引っかかるとCORSエラーになります。フロントエンドから外部のAPIへ直接送ろうとしたときによく起きます。多くの場合、自分のサーバーの窓口を経由する構成にすれば解決し、APIキーの問題も同時に解消できます。

この章の用語まとめ

まとめ｜画面は「AIとの接点」、だからこそ中身を知っておく

フロントエンドは、HTML（骨組み）・CSS（見た目）・JavaScript（動き）の3つでできています。AIチャット画面も、入力を受け取り、fetch で自分のサーバーの /api/chat に送り、返ってきた回答をDOMに書き足す——という、この章で学んだ基本の組み合わせにすぎません。文字が流れるように出るのは、ストリーミングで届いた分から書き足しているからです。

そして何より、AIのAPIキーはブラウザに置かない。AIエージェントに画面を作らせるときも、この一点と、スマホ表示・操作性のチェックは人間の役目です。次の第3章 バックエンド入門では、今回の画面が送った質問を受け止める /api/chat の窓口——AIエージェントの「司令塔」を作ります。

基礎を身につけたら、次は「仕事」につなげる

独学で進めるのも十分可能ですが、「最短で実務レベルにしたい」「転職・副業につなげたい」なら、次の記事も参考にしてください。

• 仕事用の外付けモニターおすすめ3選【2026】：エディタ・ターミナル・ブラウザを並べると作業効率が段違い
• AI・IT業界への転職ガイド【2026】：作ったものをポートフォリオに。未経験からの進め方と転職エージェントの選び方

関連記事

• AIエージェント時代のIT基礎ロードマップ【2026】
• Webの仕組み入門【2026】ブラウザ・サーバー・HTTP・DNSをAIエージェントと一緒に理解
• 第3章 バックエンド入門（IT基礎シリーズ）
• プロンプトの書き方ガイド
• AIツールおすすめまとめ