たとえば、https://app.example.com の画面から https://api.example.com のAPIを fetch() で呼び出すと、ブラウザは「この別の場所から返ってきたレスポンスをJavaScriptへ渡してよいか」を確認します。

CORSエラーは、通信が一切サーバーへ届いていないという意味ではありません。多くの場合、ブラウザがレスポンスをJavaScriptへ渡さない状態です。

この記事では、CORSの意味、オリジンの考え方、Access-Control-Allow-Origin の役割、プリフライト、よくある直し方を初心者向けに整理します。

まず結論：CORSは別オリジンAPIの受付ゲート

CORSは、Cross-Origin Resource Sharingの略です。日本語では「オリジン間リソース共有」と説明されますが、最初は 別のオリジンにあるAPIのレスポンスを、ブラウザ上のJavaScriptが読めるようにするための許可ルール と考えると分かりやすいです。

重要なのは、CORSの判断をしている中心がブラウザだという点です。サーバーはレスポンスに許可ヘッダーを付け、ブラウザはそのヘッダーを見て、JavaScriptへレスポンスを渡すかどうかを決めます。

次の図では、画面のJavaScript、ブラウザ、APIサーバーの間にある「受付ゲート」としてCORSを見てください。どこで許可を確認しているかを押さえると、エラーの読み方が変わります。

CORSエラーが出る典型例

CORSエラーは、フロントエンドとAPIを別々の場所で動かすとよく出ます。学習中なら、ReactやVueなどの開発サーバーが http://localhost:3000、APIサーバーが http://localhost:8080 という構成で起きやすいです。

fetch("http://localhost:8080/api/users")
  .then((response) => response.json())
  .then((users) => console.log(users));

このコード自体が間違っているとは限りません。問題は、ブラウザから見ると localhost:3000 と localhost:8080 はポートが違うため、別オリジンとして扱われることです。

そのためAPIサーバー側が、http://localhost:3000 からの読み取りを許可するヘッダーを返さないと、ブラウザはJavaScriptにレスポンスを渡しません。

オリジンとは何か

オリジンとは、Web上の出どころを表す単位です。MDNの同一オリジンポリシーの説明でも、オリジンはスキーム、ホスト、ポートの組み合わせとして扱われます。

スキームは https や http、ホストは example.com のような名前、ポートは 443 や 3000 のような番号です。どれか1つでも違うと、ブラウザは別オリジンとして扱います。

次の図では、オリジンを3点セットとして見てください。CORSエラーの原因を探すときは、ドメインだけでなく、http と https の違いやポート番号の違いも確認します。

同一オリジンポリシーとCORSの関係

ブラウザには、同一オリジンポリシーという重要なセキュリティの仕組みがあります。これは、あるオリジンで読み込まれた文書やスクリプトが、別オリジンのリソースへ自由にアクセスしないように制限する考え方です。

もしこの制限がなければ、悪意のあるページが、利用者がログイン中の別サイトの情報をブラウザ経由で読み取れてしまう可能性があります。CORSは、この制限を壊す仕組みではなく、サーバーが明示的に許可した範囲だけ例外を作る仕組みです。

つまり、同一オリジンポリシーは基本のブレーキ、CORSはサーバーが許可した相手だけに開くゲートです。

CORSの流れ

CORSでは、ブラウザがリクエストに Origin ヘッダーを付けることがあります。APIサーバーは、そのOriginを見て、許可する場合はレスポンスに Access-Control-Allow-Origin を返します。

次の図では、Origin、許可ヘッダー、ブラウザの照合、JavaScriptへの受け渡しの順番を見てください。CORSの主役が「ブラウザの照合」であることが分かります。

Origin: https://app.example.com

Access-Control-Allow-Origin: https://app.example.com

上のように、リクエスト元のOriginと、レスポンスの Access-Control-Allow-Origin が対応していれば、ブラウザはレスポンスをJavaScriptへ渡せます。対応していなければ、コンソールにCORSエラーが表示されます。

Access-Control-Allow-Originの意味

Access-Control-Allow-Origin は、APIサーバーが「このオリジンのJavaScriptには、レスポンスを読ませてよい」とブラウザへ伝えるレスポンスヘッダーです。

開発中にすべてを許可したくなり、* を設定する例を見ることがあります。公開APIのように誰が読んでもよいリソースでは選択肢になりますが、ログイン情報やCookieを含むリクエストでは注意が必要です。

Access-Control-Allow-Origin: https://app.example.com
Vary: Origin

特定の画面からだけAPIを読ませたい場合は、上のように具体的なオリジンを返します。複数のオリジンを許可する場合でも、レスポンスには実際のリクエスト元に対応した1つのオリジンを返す実装が一般的です。

また、Cookieなどの認証情報を含める場合は、Access-Control-Allow-Credentials: true やJavaScript側の credentials: "include" も関係します。この場合、Access-Control-Allow-Origin: * を安易に使えない点に注意します。

プリフライトとは何か

プリフライトとは、本番のリクエストを送る前に、ブラウザが OPTIONS メソッドで事前確認する仕組みです。すべてのCORSリクエストで必ず発生するわけではありません。

たとえば、PUT や DELETE、独自ヘッダー、JSONの Content-Type: application/json などが関係すると、ブラウザは先に「このメソッドやヘッダーで送ってよいか」をAPIサーバーへ確認することがあります。

次の図では、プリフライトを「受付での事前確認」として見てください。OPTIONSが失敗すると、本番のPOSTやPUTの前に止まって見えることがあります。

OPTIONS /api/users HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type

APIサーバーは、この事前確認に対して、許可するメソッドやヘッダーを返します。ここで必要なヘッダーが不足していると、ブラウザは本番リクエストへ進めません。

CORSエラーの直し方

CORSエラーが出たときは、まずブラウザのConsoleだけで判断せず、Networkタブで実際のリクエストとレスポンスヘッダーを見ます。特に、Origin、Access-Control-Allow-Origin、プリフライトの OPTIONS を確認します。

次の図では、CORSエラーを調べる順番を見てください。フロントエンドの fetch() を何度も書き換える前に、APIサーバーがどのヘッダーを返しているかを確認するのが近道です。

• Consoleで、拒否されたOriginとURLを読む
• Networkで、OPTIONSが出ているか、本番リクエストまで進んでいるかを見る
• レスポンスにAccess-Control-Allow-Originがあるか確認する
• 許可したいOriginが、実際のOriginと完全一致しているか確認する
• Cookieを使う場合は、credentials設定とAllow-Credentialsを合わせて確認する

根本的な修正は、多くの場合APIサーバー側で行います。フロントエンド側でCORSヘッダーを追加しても、ブラウザが見ているのはAPIサーバーから返ってくるレスポンスヘッダーです。

CORSと認証・CSRF対策の違い

CORSはセキュリティに関係しますが、認証や権限チェックそのものではありません。CORSを許可したからといって、ログイン不要で何でも見せてよいという意味にはなりません。

認証は、利用者が誰かを確認する仕組みです。権限チェックは、その利用者がそのデータを見たり操作したりしてよいかを判断する仕組みです。CSRF対策は、利用者のブラウザを勝手に使った操作を防ぐための仕組みです。

次の図では、CORS、認証、CSRF対策の役割を分けて見てください。CORSは「読む許可」の話であり、本人確認や権限確認の代わりではありません。

既存記事とあわせて読む順番

CORSは、JavaScriptの fetch()、HTTPヘッダー、Web APIの理解とつながっています。先にAPIやHTTPの用語を押さえておくと、CORSエラーの原因を読みやすくなります。

• 【JavaScript】fetch APIとは？GETとPOSTの使い方
• APIとは？APIとWeb APIの違い
• REST APIとは何か？
• HTTPとは？HTTPSとは？
• async/awaitとは？Promiseとの違い

公式情報と確認先

仕様として確認する場合は、WHATWG Fetch StandardとMDNのCORS、同一オリジンポリシーの説明を参照します。Fetch Standardは、fetch、CORSプロトコル、リダイレクトなど、ブラウザの取得処理を一貫した仕組みとして定義しています。

• Fetch Standard
• MDN: Cross-Origin Resource Sharing
• MDN: Same-origin policy
• MDN: CORS configuration

まとめ

CORSは、別オリジンのAPIレスポンスをブラウザ上のJavaScriptが読めるかどうかを、サーバーのHTTPヘッダーで判断する仕組みです。

• CORSは、別オリジンのレスポンスを読めるかを決めるブラウザ中心の仕組み
• オリジンは、スキーム、ホスト、ポートの3点で決まる
• Access-Control-Allow-Originは、APIサーバーが許可するOriginをブラウザへ伝えるヘッダー
• プリフライトは、本番リクエスト前のOPTIONSによる事前確認
• CORSは認証や権限チェックの代わりではない

CORSエラーが出たら、まずConsole、Network、レスポンスヘッダー、サーバー設定の順に見ます。フロントエンドだけで解決しようとせず、APIサーバーが正しい許可ヘッダーを返しているかを確認しましょう。

HTMLでテーブル（表）を作成するtableタグ（<table>タグ・<tr>タグ・<th>タグ・<td>タグ）の基本・意味・使い方を初心者向けにわかりやすく解説します。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

tableタグはデータを行と列の形式で整理し、表示するために使用されるHTML要素。テーブルは、情報を視覚的に整理して比較しやすくすることができ、一般的には数値データや、関連する項目のリストなどを表示するのに適しています。

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　HTMLの基本構文ルール

HTML：テーブル（表）の定義方法

tableタグを使ってテーブルを作成する際には、次のようなタグを組み合わせて使用します。

テーブルを作るには、tableタグだけではなく、その要素を表す <tr>タグ・<th>タグ・<td>タグが必要になります。

全てを暗記する必要はありませんが、それぞれのタグがどのように利用され、どのような意味を持つのか？をまずは頭に入れておきましょう。

• <table>
  • テーブル全体を定義します。テーブルはこのタグで始まり、</table>で終わります。
• <tr>
  • テーブルの行を定義するために使用されるタグです。
    →Table Row (テーブルの行) の略です。「ここから新しい行が始まりますよ」という意味。
• <th>
  • テーブルの見出しセルを定義するために使用されるタグで、通常は行や列のラベルに使用されます。
    →Table Header (テーブルの見出し) の略です。行の中でも「見出し」となるセルに使います。
• <td>
  • テーブルのデータセルを定義するために使用されるタグで、実際のデータを表します。
    →Table Data (テーブルのデータ) の略です。行の中でも「データ」となるセルに使います。
    

最初のうちはちょっと複雑に感じるかもしれません。順を追って理解していきましょう。

HTML：<table>タグの使い方

<table>タグは、テーブル（表）を作成するタグです。

イメージとして「ここにテーブル（表）を作成しますよ！」という宣言をするだけの役割を担っていると考えてOK。

<table>
<!-- ここに行数や見出しなどを定義していく -->
</table>

HTML：<tr>タグの使い方

<tr>タグはテーブルの行数を指定するタグです。<tr>タグを設置した分だけ、行数が増えていくことになります。

上記の例で言えば、<tr>タグは4つ（＝４行あるので）設置していることになります。必要に応じて、何個でも設置することが可能です。

trとは「Table Row」の略です。Rowとは、行という意味を持つため迷ったときは略す前の名称を思い出すと良いでしょう。<tr>タグは、<table>タグの中にネストして利用します。

<table>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
  <tr>
<!-- ここに表の値などを定義していく -->
  </tr>
</table>

HTML：<th>タグの使い方

<th>タグは、テーブルの見出しやタイトルを定義します。

<th>タグは「Table Header」の略であり、<tr>タグの中にネストして利用します。なお、<th>タグは見出し・タイトルを定義するタグであるため、テキストは太字かつ中央寄せで表示されます。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
<!-- ここに表の値を定義していく -->
  </tr>
</table>

HTML：<td>タグの使い方

<td>タグは「Table Data」の略で、テーブルセルの内容を定義します。<tr>タグの中にネストして利用します。

<table>
  <tr>
    <th>国</th>
    <th>通貨</th>
    <th>言語</th>
  </tr>
  <tr>
    <td>日本</td>
    <td>円</td>
    <td>言語</td>
  </tr>
  <tr>
    <td>アメリカ</td>
    <td>＄</td>
    <td>英語</td>
  </tr>
  <tr>
    <td>イギリス</td>
    <td>￡</td>
    <td>英語</td>
  </tr>
</table>

こちらのコードを実行した結果がこちら。

このように、<table>タグ・<tr>タグ・<th>タグ・<td>タグの４つを利用することでHTMLでテーブル（表）を定義することが可能になります。

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

現代のWeb環境におけるテーブル（表）の重要性

たまに、現代のWeb環境においてはテーブル（tableタグ）はもはや不要である？という意見を見かけますが、以下のような観点を踏まえると依然として重要なタグの１つであると言えます。

1. データの整理と表示
   • HTMLの表はデータを整理し、読みやすい形式で表示するのに適しています。例えば、統計データ、スケジュール、比較リストなどが挙げられます。
2. アクセシビリティ
   • 正しくマークアップされた表は、スクリーンリーダーを使用する視覚障害者に対して、情報の構造を明確に伝えることができます。
3. 互換性と標準化
   • ほとんどのブラウザでサポートされており、異なるデバイスやブラウザ間で一貫した表示を提供します。

ちょっと寄り道的に解説すると、昔はテーブル要素をページのレイアウトを整えるために利用する手法が流行った時期があるのですが、もうその目的では利用しませんよ・・・！ということを勘違いしてしまうと不要論につながってしまいます。

限定的な使用

• レイアウトツールとしての使用の減少
  • 過去にはWebページのレイアウト作成に広く使われていましたが、現在ではCSSフレックスボックスやグリッドレイアウトなどの技術が推奨されています。これらはレスポンシブデザインに適しており、より柔軟なレイアウトを可能にします。

最適な使用

• 意図した目的での使用
  • テーブルは主にタブラー形式のデータ表示のために使用するべきです。レイアウト目的での使用は、セマンティック（意味論的）なWebデザインの原則に反しています。
    参考　セマンティックHTMLとは？

HTMLの表は現代のWeb環境において、特定の用途、特にデータの整理とアクセス可能な表示において重要ですが、ページレイアウトのツールとしては他のより適した技術に取って代わられています。適切なコンテキストで使用される場合、表は効果的なツールであり続けます。

HTML：テーブルのデザイン

ここからは、HTMLでテーブルのデザイン変更を行う方法を解説していきます。CSSを使用してスタイルを指定する方が現代的で柔軟ですが、知識の１つとして知っておいて損はありません。

代表的な以下の属性について解説します。

tableタグで利用できる主な属性

• border属性
• bordercolor属性
• bgcolor属性
• cellspacing属性
• cellpadding属性

テーブルに罫線をつける方法（border属性）

border属性（参考 属性とは？）は、HTMLのtableタグにおいて、テーブルやセルの境界線（ボーダー）の幅を指定するために使用される属性です。この属性に数値を指定することで、ボーダーの幅をピクセル単位で設定できます。

例えば、次のようにtableタグにborder属性を指定することで、テーブル全体に1ピクセル幅のボーダーを適用できます。

<table border="1">
  ...
</table>

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
  }
</style>
<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

上記を実行した結果がこちら。

枠線の色を変える（bordercolor）

bordercolor属性は、HTMLのテーブルやセルの境界線（ボーダー）の色を指定するためにかつて使用されていた属性です。この属性に色名や16進カラーコードを指定することで、ボーダーの色を設定できました。

例えば、以下のようにtableタグにbordercolor属性を指定することで、ボーダーの色を赤に設定できました。

<table border="1" bordercolor="red">
  ...
</table>

しかし、bordercolor属性も非標準の属性であり、HTML標準仕様には含まれていません。そのため、現代のWeb開発では使用を避け、代わりにCSSを利用してボーダーの色をスタイルすることが推奨されています。

例えば、以下のようにCSSのborderプロパティを使用して、同様のボーダーの色を適用できます。

<style>
  table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid red;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

この例では、border-collapse: collapse;を使ってテーブルのボーダーがつながるようにしています。また、thおよびtd要素に対して、border: 1px solid red;を使って1ピクセル幅の赤いボーダーを適用しています。

CSSを使用することで、より柔軟で綺麗なデザインを実現できますし、標準仕様に準拠したコードを書くことができます。

背景色を変更する方法（bgcolor属性）

bgcolor属性は、HTMLの過去のバージョンで使用されていた属性で、テーブルやセルの背景色を指定するために使われていました。この属性に色名や16進カラーコードを指定することで、背景色を設定できました。

例えば、次のようにtableタグやtdタグにbgcolor属性を指定することで、背景色を設定できました。

<table bgcolor="#f2f2f2">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td bgcolor="lightblue">データ1</td>
    <td bgcolor="lightblue">データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

しかし、bgcolor属性はHTML4.01で非推奨となり、HTML5では完全に廃止されました。現代のWeb開発では、代わりにCSSを使用してテーブルやセルの背景色をスタイルすることが一般的です。

例えば、次のようにCSSのbackground-colorプロパティを使用して、同様の背景色を適用できます。

<style>
  table {
    background-color: #f2f2f2;
  }
  td:first-child {
    background-color: lightblue;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

セル間のスペースを指定（cellspacing属性）

cellspacing属性は、HTMLのtableタグにおいて、テーブル内のセル間のスペース（セルスペーシング）を指定するために使用される属性です。この属性に数値を指定することで、セル間のスペースをピクセル単位で設定できます。

例えば、次のようにtableタグにcellspacing属性を指定することで、セル間に5ピクセルのスペースを設けることができます。

<table cellspacing="5">
  ...
</table>

しかし、cellspacing属性も他の属性と同様にHTML5で非推奨となりました。代わりにCSSを使用してテーブルのセル間のスペースをスタイルすることが一般的です。

例えば、次のようにCSSのborder-spacingプロパティを使用して、同様のセル間のスペースを設定できます。

<style>
  table {
    border-collapse: separate;
    border-spacing: 20px;
  }
</style>

<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

この例では、border-collapse: separate;を使ってテーブルのボーダーが分離されるようにしています。また、border-spacing: 20px;を使ってセル間のスペースを20ピクセルに設定しています

セル内のスペースを指定（cellpadding属性）

cellpadding属性は、HTMLのtableタグにおいて、テーブルのセル内の余白（セルパディング）を指定するために使用される属性です。この属性に数値を指定することで、セル内の余白をピクセル単位で設定できます。

例えば、次のようにtableタグにcellpadding属性を指定することで、セル内の余白を10ピクセルに設定することができます。

<table cellpadding="10">
  ...
</table>

しかし、cellpadding属性についてもHTML5で非推奨となりました。

代わりにCSSを使用してテーブルのセル内の余白をスタイルすることが一般的です。例えば、次のようにCSSのpaddingプロパティを使用して、同様のセル内の余白を設定できます。

<style>
  th, td {
    padding: 10px;
  }
</style>
<table>
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
  </tr>
  <tr>
    <td>データ3</td>
    <td>データ4</td>
  </tr>
</table>

長いオブジェクト型、複数の候補を持つunion型、関数の引数や戻り値の型を、そのまま毎回書くとコードが読みにくくなります。typeを使うと、それらの型に意味のある名前を付けられます。

typeはJavaScriptの値を作る命令ではありません。TypeScriptの型チェックで使う「型の名前」です。

この記事では、typeの基本構文、union型で便利な理由、interfaceとの違い、実務での使い分けを初心者向けに整理します。

まず結論：typeは型に名前を付けるための書き方

TypeScript公式ドキュメントでは、同じ型を何度も参照するために名前を付けられる仕組みとしてtype aliasが説明されています。まずは「型の別名を作る」と考えると分かりやすいです。

type User = {
  id: number;
  name: string;
};

function showUser(user: User) {
  console.log(user.name);
}

この例では、{ id: number; name: string }という型にUserという名前を付けています。以後は、同じ型をUserとして読めます。

typeが必要になる理由

型をその場に直接書くこともできます。しかし、同じ型が複数箇所に出てくると、コードの意味が追いにくくなります。

function send(user: { id: number; name: string; email?: string }) {
  // ...
}

function save(user: { id: number; name: string; email?: string }) {
  // ...
}

このような型は、typeで名前を付けると、何を表すデータなのかが分かりやすくなります。

type User = {
  id: number;
  name: string;
  email?: string;
};

function send(user: User) {
  // ...
}

function save(user: User) {
  // ...
}

typeの価値は、短くすることではなく、型に意味のある名前を付けることです。

typeの読み方を図で見る

次の図では、typeを「型を書く、名前を付ける、何度も使う」という流れで見てください。型の分類名より先に、再利用の流れを理解するのがポイントです。

union型に名前を付けると便利

typeは、オブジェクト型だけでなく、複数の候補を持つunion型にも名前を付けられます。

type Status = "loading" | "success" | "error";

let currentStatus: Status = "loading";

このように書くと、Statusには指定した文字列だけを入れられます。画面の状態、APIの結果、処理ステータスなどを表すときに便利です。

typeは実行時の値を作らない

初心者が混同しやすいのは、typeがJavaScriptのオブジェクトや変数を作るわけではない点です。TypeScriptの型は、基本的にコンパイル時のチェックに使われます。

type User = {
  id: number;
  name: string;
};

const user: User = {
  id: 1,
  name: "Sato",
};

実際に存在する値はuserです。Userは、その値がどんな形であるべきかを確認するための型名です。

interfaceとの違い

typeとinterfaceは、どちらもオブジェクトの形に名前を付けられます。そのため、簡単なオブジェクト型だけを見ると似ています。

TypeScript公式ドキュメントでも、typeとinterfaceは多くの場面で似ており、必要な機能が出てくるまでは個人の好みで選べるという考え方が示されています。

typeを使うとよい場面

• union型に名前を付けたい
• 文字列リテラルの候補を管理したい
• 関数の引数や戻り値の型を短く読みたい
• 複数の型を組み合わせて別名を付けたい

type ApiResult =
  | { ok: true; data: string[] }
  | { ok: false; message: string };

このような「成功か失敗かで形が変わるデータ」は、typeで表すと読みやすくなります。

interfaceを使うとよい場面

interfaceは、オブジェクトの形を拡張していく場面でよく使われます。クラスの実装条件や、ライブラリの型定義でもよく見かけます。

interface User {
  id: number;
  name: string;
}

interface AdminUser extends User {
  role: "admin";
}

初心者のうちは、union型や文字列候補ならtype、オブジェクトの形を拡張したいならinterfaceと考えると判断しやすいです。

初心者がつまずきやすいポイント

type名の付け方

typeは型を短くするためだけに使うものではありません。型名を見たときに、そのデータが何を表すのか分かることが大切です。

たとえば、DataやValueだけでは意味が広すぎます。ユーザー情報ならUser、画面状態ならPageStatus、APIの返却結果ならApiResultのように、役割が分かる名前を付けると読みやすくなります。

type PageStatus = "idle" | "loading" | "success" | "error";

type UserSummary = {
  id: number;
  displayName: string;
};

名前を付けることで、関数の引数や戻り値を見ただけで、コードの意図を追いやすくなります。これは型安全性だけでなく、チームで読むコードの分かりやすさにも効きます。

型を直すときの考え方

実務では、最初に作った型があとから変わることがあります。たとえば、APIの返却項目が増えたり、ステータスの種類が増えたりする場合です。

このとき、同じ型を複数箇所へ直接書いていると、修正漏れが起きやすくなります。typeで名前を付けておけば、変更する場所を集約しやすくなります。

ただし、何でも1つの巨大な型にまとめると、逆に読みにくくなります。画面用、API用、保存用など、役割が違う型は分けて名前を付けるのが現実的です。

チームで読むコードとしてのtype

TypeScriptの型は、自分のためだけでなく、あとから読む人への説明にもなります。関数の引数にUserと書かれていれば、その関数がユーザー情報を受け取ることがすぐ分かります。

逆に、毎回長いオブジェクト型を直接書いていると、同じ意味の型なのか、少し違う型なのかを判断しづらくなります。共有して使う型には名前を付け、画面の中だけで一度しか使わない型は無理に外へ出さない、という線引きが実務では扱いやすいです。

公式情報と関連して読みたい記事

• TypeScript Handbook: Type Aliases
• TypeScript Handbook: Object Types
• TypeScriptのinterfaceとは？
• TypeScriptのunion型とは？

まとめ

TypeScriptのtypeは、型に名前を付けて読みやすく再利用するための書き方です。

• 長い型に意味のある名前を付けられる
• union型や文字列リテラル型と相性がよい
• 実行時の値を作るものではない
• interfaceとは似ているが、得意な場面が少し違う

Promiseが分かると、fetch、then、catch、async/await のコードを「何を待って、どこで結果を受け取るのか」という流れで読めるようになります。

Promiseは「結果そのもの」ではなく、「あとで結果を受け取る入口」です。最初はこの理解だけで十分です。

この記事では、Promiseの意味、3つの状態、then・catch・finallyの使い方、fetchでつまずきやすいポイント、async/awaitとの関係を順番に解説します。

まず結論：Promiseは将来の結果を表すオブジェクト

Promiseは、非同期処理の最終的な成功または失敗を表すオブジェクトです。MDNでも、Promiseは非同期処理の完了または失敗と、その結果の値を表すものとして説明されています。

ただし、初心者のうちは仕様文を暗記するより、次の読み方を先に覚える方が実用的です。

非同期処理を始める
  ↓
Promiseが返る
  ↓
成功したら then
失敗したら catch
最後に finally

この時点で大事なのは、Promiseが返ってきても、まだ中身の結果を直接持っているとは限らないことです。結果はあとから成功または失敗として確定します。

Promiseが必要になる場面

JavaScriptでは、通信、タイマー、ファイル読み込みのように、すぐ終わらない処理がよく出てきます。特にWebアプリでは、APIからデータを取るfetchが代表例です。

通信が終わるまで画面全体を止めると、ユーザーは操作できません。そのためJavaScriptでは、通信を待っている間も他の処理を進め、結果が返ってきたときに続きを実行します。

この「あとで続きを実行する」ための約束を整理するのがPromiseです。

Promiseの流れを図で見る

次の図では、Promiseを「非同期処理の結果を、成功・失敗・最後の処理へ分けて受け取る流れ」として見てください。細かい用語より先に、左から右への読み順を作るのがポイントです。

pending・fulfilled・rejectedの3状態

Promiseには状態があります。まずは次の3つだけ押さえれば十分です。

Promiseは最初にpendingになり、その後、成功すればfulfilled、失敗すればrejectedになります。成功と失敗のどちらかに決まった状態を、実務では「settled」と表現することもあります。

then・catch・finallyの役割

Promiseでよく使うのは、then、catch、finallyです。

fetch("/api/users")
  .then((response) => response.json())
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error("取得に失敗しました", error);
  })
  .finally(() => {
    console.log("読み込み処理を終了します");
  });

ポイントは、前のthenで返した値が、次のthenへ渡されることです。response.json()を返すから、次のthenで変換後のデータを受け取れます。

fetchでよくある誤解：HTTPエラーは必ずcatchに入るわけではない

Promiseをfetchで使うとき、初心者がつまずきやすいのがエラー処理です。ネットワーク自体に失敗した場合はcatchに入りますが、HTTPステータスが404や500の場合は、必ずしも自動でcatchに入るとは限りません。

fetchの結果では、response.okを見て、HTTPとして成功扱いできるかを確認するのが安全です。

fetch("/api/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }
    return response.json();
  })
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error(error);
  });

このように書くと、通信そのものの失敗だけでなく、サーバーがエラーを返した場合も同じcatchで扱いやすくなります。

async/awaitはPromiseを読みやすくする書き方

async/awaitは、Promiseと別物ではありません。Promiseを、上から順に読む形で書きやすくするための構文です。

async function loadUsers() {
  try {
    const response = await fetch("/api/users");

    if (!response.ok) {
      throw new Error("HTTPエラー: " + response.status);
    }

    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error(error);
  }
}

awaitはPromiseの完了を待ち、その結果を取り出します。つまり、async/awaitを使っていても、裏側ではPromiseを扱っています。

最初に覚える判断基準

• fetch()の戻り値はPromiseとして読む
• thenでは次へ渡したい値をreturnする
• HTTPステータスの失敗はresponse.okで確認する
• async/awaitはPromiseを消すものではなく、読みやすくする書き方と考える

Promise.allは最初から暗記しなくてよい

Promiseを調べると、Promise.all、Promise.race、Promise.allSettledなども出てきます。これらは複数のPromiseをまとめて扱うための機能です。

ただし、初学者が最初に全部を覚える必要はありません。まずは、1つのPromiseが成功・失敗へ分かれる流れを読めることが先です。複数の通信を同時に待つ必要が出てきたときに、Promise.allを学ぶ順番で問題ありません。

たとえば、ユーザー情報と注文履歴を同時に取得したい場合は、複数のPromiseをまとめて待つ考え方が必要になります。一方、単に1つのAPIからデータを取るだけなら、then・catch・finallyとasync/awaitを理解していれば十分です。

コードレビューで見るポイント

Promiseを使ったコードを読むときは、まず「どこでPromiseが作られ、どこで結果を取り出しているか」を見ます。次に、失敗時の処理があるか、ローディング表示などの後片付けが漏れていないかを確認します。

特にWeb画面では、通信中の表示、成功時の表示、失敗時の表示がそろっているかが重要です。Promiseの文法だけでなく、ユーザーに何が見えるかまで考えると、実務のコードを読みやすくなります。

公式情報と関連して読みたい記事

• MDN: Promise
• MDN: Fetch API の使用
• fetch APIとは？GETとPOSTの使い方
• async/awaitとは？Promiseとの違い

まとめ

Promiseは、非同期処理の結果をあとで受け取るための仕組みです。最初は「将来の結果を表すオブジェクト」と考えれば十分です。

• 成功時はthen
• 失敗時はcatch
• 最後の処理はfinally
• fetchではresponse.okも確認する
• async/awaitはPromiseを読みやすくする構文

まず最初にお伝えしたいのは、JSPは決して難しいものではありません。むしろ、「ちょっと動きのあるWebページを、できるだけ簡単に作りたい！」という人のために生まれたものなのです。近年では他の技術に取って代わられた印象が否めないJSPですが、昔からある巨大なレガシーシステムなどでは現役で、システムの更改案件などではよく目にすることがあります。

このページでは「JSPってそもそも何？」という一番大事な部分から、初心者向けに順を追って１からわかりやすく専門用語を避けて解説します。

JSPとは何か？

JSP（Java Server Pages）は、Javaを使ってWebページを動的に生成するための技術で、通常のHTMLファイルにJavaのコードを埋め込むことで、アクセスするたびに内容が変化するページを作成することを可能にします。

そのため、JSPはJavaをベースとしていますが、HTMLの知識があれば、基本的な使い方は十分に理解することができます。

【前提１】静的なページと動的なページ

Webページには、大きく分けて2種類あります。
1つは「静的なページ」、もう1つは「動的なページ」です。

静的コンテンツ/動的コンテンツの違いを１分で解説【初心者向け】

【初心者向け】「動的」「静的」という言葉の意味とその違いを端的に解説します。本で学習したがイマイチ理解できない、、、結局一言でいうと違いは何？という疑問をお持ちの方に具体例を用いながら分かりやすく解説します。

it-biz.online

2026.04.26

静的なページとは、内容があらかじめ決まっていて、アクセスするたびに同じ内容が表示されるページです。たとえば、自己紹介だけが書かれた会社のホームページや、お知らせ一覧だけが載っているページなどが該当します。

一方、動的なページは、アクセスした時点の情報や、閲覧しているユーザーの状態に応じて内容が変わります。たとえば、ショッピングサイトで商品が表示されたり、ログイン中のユーザー名が画面に表示されたりするページがそうです。

静的なページはHTMLだけで作成できますが、動的なページを作るには、プログラムによってページの内容を生成する仕組みが必要です。JSPは、そのような仕組みの一つです。

もちろんJSP以外にも同じようなことを実現することが可能で、現代ではほとんどJSP以外が主役です。なのですが、レガシーシステムでは今でも現役で動いていることが多いので「まあ知っておいて損はないかな」というのがJSPの位置づけです。

JSPとはどのような技術か

JSPは、JavaのコードをHTMLに埋め込むことで、Webサーバー上で動的にHTMLを生成する技術です。拡張子が .jsp であるファイルを使ってページを作成します。

JSPファイルは、Webサーバー（通常はTomcat）に配置され、ユーザーがアクセスすると、サーバー側でJavaのコードが実行されます。その結果として生成されたHTMLが、ブラウザに送信され、画面に表示されます。

つまり、JSPは「動的にHTMLを生成する仕組み」であり、「HTMLの中にJavaの処理を一部書き足せる形式のファイル」と言えます。

JSPの動作のしくみ

JSPファイルは、ユーザーがアクセスしたときに、サーバー側で一度「Javaのクラス（Servlet）」に変換されます。変換されたクラスはコンパイルされ、Javaプログラムとして実行されます。このとき、JSPファイルに書かれたHTMLの部分はそのままHTMLとして出力され、Javaのコード部分は処理されて結果が埋め込まれます。最終的に生成されたHTMLがブラウザに送信され、ユーザーに表示されます。

このしくみによって、JSPは1枚のファイルで「HTMLの見た目」と「動的な処理」を両立させることができます。

JSPの動き方の流れ

1. ユーザーが .jsp ファイルをリクエストする（例：hello.jsp）
2. Tomcat がその .jsp を読んで、中の Java を実行
3. 結果として HTML を作り出し、ブラウザに返す
4. ブラウザには、あたかも普通のHTMLのように見える

この一連の流れによって、「動きのあるページ」がリクエスト元に返却されることになります。

JSPを動かすための準備

JSPファイルは、通常のHTMLファイルと違い、単独では動作しません。JSPはサーバー側でJavaのコードを実行する仕組みのため、その処理を受け持つ「Webサーバー」や「Javaの開発環境」が必要です。

この章では、JSPを動かすために必要なソフトウェアや環境を、1つずつ順を追って準備していきます。

JSPの動作に必要なもの

JSPを動作させるには、次の3つが必要です。ここでは、それってそもそも何？みたいな説明＋実際にあなたのPCにインストールする手順をメモ程度に記載しておきますので、この辺の知識がすでにあるよ！という方は読み飛ばしてください。

JDKのインストール

まず、Javaの開発環境であるJDKをインストールします。JDKがインストールされていないと、JSPも動作しません。

Javaの開発環境構築の３ステップ解説（JDK/JRE/JVMの仕組みを１から解説）

【超・初心者向け】Javaの開発環境を初心者向けに簡単に設定する方法をわかりやすく解説します。JDKのインストール、IDEの選択、開発のスタートまで、スムーズにJavaプログラミングを始める方法をご説明します。

it-biz.online

2026.04.16

手順

1. Oracleの公式サイトまたはOpenJDKのサイトから、JDKをダウンロード。
2. お使いのOSに合ったインストーラを選び、画面の指示に従ってインストール。
3. インストール後、コマンドプロンプト（またはターミナル）を開き、↓のコマンドを入力。

java -version

バージョンが表示されれば、正常にインストールされています。

Tomcatのインストール

JSPファイルを処理するために、Tomcatをインストールします。TomcatはJavaで動作するWebサーバーで、JSPの実行に適した軽量なサーバーです。

手順

1. Apache Tomcat の公式サイトにアクセス。
2. zip ファイル（Windows の場合）または tar.gz ファイル（Mac/Linux の場合）をダウンロード。
3. ダウンロードしたファイルを任意の場所に展開（解凍）。
   →C:\tomcat や ~/tomcat などが一般的ですが、どこでもOK。
4. binフォルダにある startup.bat（Windows）または startup.sh（Mac/Linux）を実行。
5. ブラウザを開き、次のURLにアクセスします：

無効なURLです

localhost

Tomcatのトップページが表示されれば、インストールは成功です。

JSP用のフォルダを作る

Tomcatでは、webapps フォルダの中にあるプロジェクトが自動的に読み込まれます。自分でJSPファイルを作って表示するには、ここに新しいフォルダを作成します。

手順

1. Tomcatフォルダ内の webapps に移動。
2. 新しくフォルダを作成し、たとえば jsp-demo という名前をつける。
3. jsp-demo フォルダの中に、最初のJSPファイルを作成します。ファイル名は hello.jsp など。

エディタの準備

JSPファイルは、普通のテキストファイルとして作成できますが、プログラミングに適したエディタを使うと効率が上がります。以下のいずれかのエディタを使用するのが一般的です。

• Visual Studio Code（無料で軽量、拡張機能が豊富）
• IntelliJ IDEA（Javaに特化した統合開発環境）
• Eclipse（Java開発で定番のIDE）

初心者の方には、Visual Studio Codeが扱いやすくおすすめです。必要に応じて「Java Extension Pack」などを追加すると、補完機能や構文チェックも利用できます。

最初のJSPファイルを作ってみよう

前の章で、JSPを動かすための準備が整いました。この章では、実際にJSPファイルを1つ作成し、それをブラウザで表示するところまで進めます。

ここでは、「JSPとはどういうものか」を実際に体験しながら、基本的な書き方や仕組みを理解していきます。

JSPファイルとはどんなファイルか

JSPファイルは、基本的にはHTMLっぽく見えるコードで、この中の必要な部分にJavaのコードを差し込むことで、表示内容を動的に変えることができるようにしています。たとえば、「現在の日時を表示する」などの処理が可能になります。

JSPファイルの拡張子は .jsp です。ファイルの中には、通常のHTMLタグと、Javaのコードが組み合わさって記述されます。

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello JSP</title>
</head>
<body>
  <h1>こんにちは、JSPの世界へようこそ！</h1>
  <p>現在の時刻は：<%= java.time.LocalDateTime.now() %></p>
</body>
</html>

上記のJSPファイルの中では、JavaのコードとHTMLが組み合わさっています。それぞれの部分について説明します。

• <%@ page contentType="text/html; charset=UTF-8" %>
  → この行は「ページ全体の設定」です。文字コードをUTF-8にすることで、文字化けを防ぎます。
• <%= java.time.LocalDateTime.now() %>
  → この部分がJSPの特徴です。「現在の時刻を表示する」Javaのコードが入っています。
  <%= と %> で囲まれた中はJavaの「式」として実行され、結果がそのままHTMLに差し込まれます。

上記のファイルをブラウザで表示するためにエディタで編集して保存しましょう。

1. Tomcatの webapps フォルダの中にある、前章で作成した jsp-demo フォルダに移動。
2. hello.jsp という名前の新しいファイルを作成。
3. ファイルをエディタで開き、↑の内容を記述し保存！

ブラウザで表示してみる

ファイルを保存したら、Tomcatが起動していることを確認し、ブラウザで次のURLにアクセスしてみましょう。

無効なURLです

localhost

画面に「こんにちは、JSPの世界へようこそ！」という見出しと、現在の時刻が表示されていれば成功です。

ブラウザでページを更新するたびに、時刻が変化するはずです。これは、JSPがアクセスされるたびにJavaのコードを実行して、ページの中身を動的に作っているということを意味します。

JSPの基本構文

前の章では、JSPファイルを作成し、Javaのコードを埋め込むことで「現在の時刻を表示する」ページを作成しました。ここからは、JSPファイルで使われる代表的な構文について解説します。どのようにJavaのコードをHTMLに差し込むのか、そしてJSP特有の書き方にはどんな種類があるのかを、順を追って学習していきましょう。

JSPの構成要素

JSPでは、以下の4種類の記述形式が用意されています。これらを使い分けることで、Javaの処理とHTMLの表示を同時に扱うことができます。

ディレクティブ

ディレクティブは、JSPファイル全体に関する設定を行うものです。最もよく使われるのは page ディレクティブです。

<%@ page contentType="text/html; charset=UTF-8" %>

この記述によって、出力するHTMLの文字コードがUTF-8になります。日本語を正しく表示するために必須です。

スクリプトレット

スクリプトレットは、JSPファイル内にJavaの処理を書くための領域です。

<%
  int year = java.time.LocalDate.now().getYear();
  String message = "今年は " + year + " 年です。";
%>
<p><%= message %></p>

この例では、Javaで現在の年を取得し、それを文字列として作成しています。そして <%= ... %> を使って、結果をHTMLに出力しています。

スクリプトレットの中ではJavaの文法がそのまま使えます。ただし、後述するようにスクリプトレットは新しい開発ではなるべく使わない方向にあります。

式（Expression）

式は、値をそのままHTMLとして出力したいときに使います。

<p>こんにちは、<%= "JSPユーザー" %>さん！</p>

上の例では、"JSPユーザー" という文字列がHTMLに挿入され、ブラウザには次のように表示されます。

こんにちは、JSPユーザーさん！

この書き方は非常にシンプルで、値を表示するだけであれば便利ですが、複雑な処理は向きません。

宣言

宣言は、JSPファイルの中でメソッドや変数を定義したい場合に使います。

<%! 
  private String getGreeting(String name) {
    return "こんにちは、" + name + "さん！";
  }
%>
<p><%= getGreeting("太郎") %></p>

このように、JSPファイルの中で小さな関数を定義して、それを式の中で呼び出すこともできます。ただし、JSPファイルに処理を詰め込みすぎると保守が難しくなるため、このような記述はできるだけ避け、外部のJavaクラスに処理を分けることが望まれます。

コメントの書き方

JSPには、HTMLのコメントと、JSP用のコメントの2種類があります。

<!-- これはHTMLのコメントです（ブラウザの「ページのソース」に表示されます） -->

<%-- これはJSPのコメントです（ブラウザには一切表示されません） --%>

HTMLのコメントはWebページに送信されるため、内容を見られる可能性があります。
一方、JSPのコメントはサーバー側で処理が止まるため、セキュリティ的に重要なコメントや開発者向けのメモはJSPのコメントで書くのが安全です。

スクリプトレットはなるべく使わない

JSPの構文として紹介しましたが、スクリプトレット（<% ... %>）の使用は、今では非推奨とされています。理由は以下の通り。

• HTMLとJavaのロジックが混ざることで、読みづらくなる
• 保守性が下がり、エラーが起きやすくなる
• JSTL（JSP標準タグライブラリ）やEL（式言語）の方がシンプルで安全に書ける

そのため、今後はJSTLやELを使って、できるだけ「Javaコードを書かずに表示を制御する方法」を覚えていくことが大切です。

次の章では、JSTLとEL（式言語）を使った“スクリプトレットを使わない”JSPの書き方を学びます。より読みやすく、安全なJSPの記述方法を習得していきましょう。

ELとJSTLでスクリプトレットのないJSPへ

ここまでの解説では、JSPの基本構文としてスクリプトレット（<% ... %>）などを紹介しました。
しかし近年のJSP開発では、スクリプトレットを使わない記述スタイルが主流となっています。

この章では、EL（Expression Language）とJSTL（JSP Standard Tag Library）という2つの仕組みを使って、JSPファイルの中にJavaコードを書かずに動的な表示を行う方法を学んでいきます。

EL（式言語）とは

EL（Expression Language）は、JSPの中でJavaの値を簡潔に記述するための言語です。
スクリプトレットのように <%= で囲む必要がなく、シンプルに ${変数名} と書くだけで値を出力できます。

<p>こんにちは、${userName} さん。</p>

このコードでは、Javaのサーバー側で userName という名前のデータ（属性）が用意されていれば、自動的にその値が表示されます。

JSTL（JSP標準タグライブラリ）とは

JSTLとは、JSP上で使える共通の処理をあらかじめタグ化したライブラリです。
たとえば、以下のような処理が可能です。

• 条件分岐（if）
• 繰り返し処理（forEach）
• 値のフォーマット（日付や数値）
• URLの生成

JSTLを使うことで、複雑なJavaの処理をわかりやすいタグで書くことができるようになります。

JSTLを使う準備

JSTLを使うには、JSTLライブラリの .jar ファイルを JSPプロジェクトの中に追加する必要があります。

手順

1. JSTLの最新版（Jakarta標準）をダウンロード
   → https://jakarta.ee/specifications/tags/
2. ダウンロードした jakarta.servlet.jsp.jstl-api-x.x.x.jar などの .jar ファイルを、Tomcatの lib フォルダ、またはプロジェクトの WEB-INF/lib フォルダにコピーします。
3. JSPファイルの先頭に、以下のようにタグライブラリを読み込む宣言を記述します。

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>

この設定により、<c:if> や <c:forEach> などのJSTLタグが使えるようになります。

JSTLで条件分岐をする

スクリプトレットで if 文を書かなくても、JSTLの <c:if> タグを使うことで簡単に条件分岐ができます。

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<c:if test="${loginUser != null}">
  <p>ようこそ、${loginUser.name} さん</p>
</c:if>

このように、loginUser という属性が null でなければ、挨拶文が表示されます。

JSTLで繰り返し表示をする

リストや配列の内容を繰り返し表示するには、<c:forEach> を使います。

サーバー側で、次のようにリストをセットしておきます（Servletなどで）：

List<String> names = List.of("太郎", "花子", "次郎");
request.setAttribute("nameList", names);

JSPファイルでは、次のように記述します：

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<ul>
  <c:forEach var="name" items="${nameList}">
    <li>${name}</li>
  </c:forEach>
</ul>

このコードにより、以下のようなHTMLが生成されます：

<ul>
  <li>太郎</li>
  <li>花子</li>
  <li>次郎</li>
</ul>

JSPをすっきり保つために

ELとJSTLを使うことで、JSPファイル内にJavaのコードを書く必要がなくなり、HTMLに近い構造を保ちながら動的な処理を行うことができます。
これは、JSPを読みやすく・保守しやすくする上でも非常に重要です。

また、デザイナーと共同で作業するようなプロジェクトでも、HTMLに近い見た目を保つことで、分業がしやすくなります。

フォームからデータを受け取る

JSPを使ってWebアプリケーションを作成する際、ユーザーの入力に応じて処理を行うことは非常に重要です。この章では、HTMLのフォームを使って入力されたデータを、JSPで受け取って表示する方法を学びます。

フォーム送信の流れ

フォームを使った処理は、次のような流れで行われます。

1. 入力フォームのあるページ（JSP）を表示する
2. ユーザーが名前などの情報を入力し、送信ボタンを押す
3. 入力内容がサーバーに送られる
4. 受け取ったJSPファイルがその情報を読み取り、画面に表示する

JSPではこの一連の流れを、HTMLとJavaの仕組みで簡単に実現できます。

フォームを作るJSP（entry.jsp）

まずは、名前を入力するための簡単なフォームを作成します。

entry.jsp

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>名前の入力</title>
</head>
<body>
  <h2>お名前を入力してください</h2>
  <form action="result.jsp" method="post">
    <label>名前：<input type="text" name="username" /></label>
    <input type="submit" value="送信" />
  </form>
</body>
</html>

このページでは、名前を入力して「送信」ボタンを押すと、result.jsp にPOSTリクエストでデータが送信されます。

データを受け取るJSP（result.jsp）

次に、送信されたデータを受け取って表示するためのJSPファイルを作成します。

result.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>入力結果</title>
</head>
<body>
  <h2>ようこそ！</h2>
  <p>あなたの名前は <strong><%= request.getParameter("username") %></strong> さんですね。</p>
</body>
</html>

ここでは、request.getParameter("username") というコードで、フォームから送られたデータを取得しています。

• request はJSPに自動で用意されているオブジェクト。
• getParameter("username") は、フォームのname="username" に対応した値を取得するメソッド。

ELを使って書き換える

JSTLやELを使えば、result.jsp をもっとすっきり書くこともできます。以下のようにリクエスト属性に値をセットしてから表示することで、式言語を活用できます。

Servlet側（例）

String name = request.getParameter("username");
request.setAttribute("username", name);
request.getRequestDispatcher("/result.jsp").forward(request, response);

result.jsp：

<%@ taglib prefix="c" uri="https://jakarta.ee/taglibs/core" %>
<p>こんにちは、${username} さん！</p>

ただし、Servletを使う方法はこのガイドの後半で詳しく扱いますので、今はまず request.getParameter() による受け取りに慣れることをおすすめします。

セッションとCookieでデータを保持する

JSPでは、ユーザーが入力した情報を「別のページでも使いたい」という場面がよくあります。
たとえば、ログイン状態を維持したり、前の画面で入力された名前を次の画面でも表示したりする場合です。

そのようなときに役立つのが セッション（Session） と クッキー（Cookie） です。
この章では、それぞれの役割と使い方を学びます。

セッションの基本操作

データの保存：

<%
  String name = request.getParameter("username");
  session.setAttribute("userName", name);
%>

このコードは、userName という名前でセッションに値を保存します。

データの取得：

<%
  String name = (String) session.getAttribute("userName");
%>
<p>ようこそ、<%= name %> さん</p>

このようにすれば、前のページで保存した値を、別のページで取り出して使うことができます。

セッションの有効期間と注意点

セッションは、ユーザーがブラウザを閉じるか、一定時間操作をしないと自動的に無効になります。Tomcatの初期設定では、30分間操作がないとセッションが切れます。

また、多くの情報をセッションに保存しすぎると、サーバーのメモリを圧迫する可能性があるため、用途を絞って使うことが大切です。

Cookieとは

Cookie（クッキー）は、情報をユーザーのブラウザに保存する仕組みです。
サーバー側から「この情報を保存しておいてください」と指示すると、ブラウザがその内容を保持し、次回以降のアクセス時にその情報を自動的に送信してきます。

Cookieの基本操作

Cookieの作成と送信：

<%
  String name = request.getParameter("username");
  Cookie cookie = new Cookie("userName", name);
  cookie.setMaxAge(60 * 60); // 1時間（秒単位）
  response.addCookie(cookie);
%>

Cookieの取得：

<%
  String name = "";
  Cookie[] cookies = request.getCookies();
  if (cookies != null) {
    for (Cookie c : cookies) {
      if ("userName".equals(c.getName())) {
        name = c.getValue();
      }
    }
  }
%>
<p>こんにちは、<%= name %> さん</p>

このように、Cookieを使えば、ブラウザに保存された情報を次回のアクセス時にも利用できます。

セッションとCookieの使い分け

一時的な状態保持（ログイン情報など）にはセッション、
ユーザーに関連する設定（言語選択やテーマなど）にはCookieがよく使われます。

JSPで簡単なアンケートアプリを作ろう

JSPを使ってWebアプリケーションを作るには、「複数ページにまたがる処理」を整理することが大切です。
この章では、3画面構成のアンケートアプリを作り、情報の受け渡し、表示の切り替え、セッションの活用を総合的に体験します。

アプリの構成と目的

このアプリでは、以下のような流れでユーザーにアンケートに答えてもらい、最終画面でまとめて表示します。

1. 入力画面：名前と好きな色を入力（form）
2. 確認画面：入力された内容を表示（セッションで一時保持）
3. 完了画面：ありがとうメッセージと入力内容の最終確認

プロジェクト構造

jsp-demo/
├─ input.jsp     （入力画面）
├─ confirm.jsp   （確認画面）
└─ thanks.jsp    （完了画面）

入力画面：input.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>アンケート入力</title></head>
<body>
  <h2>アンケートにご協力ください</h2>
  <form action="confirm.jsp" method="post">
    <p>お名前：<input type="text" name="userName" /></p>
    <p>好きな色：
      <select name="favoriteColor">
        <option value="赤">赤</option>
        <option value="青">青</option>
        <option value="緑">緑</option>
      </select>
    </p>
    <input type="submit" value="確認画面へ" />
  </form>
</body>
</html>

確認画面：confirm.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%
  String userName = request.getParameter("userName");
  String favoriteColor = request.getParameter("favoriteColor");

  session.setAttribute("userName", userName);
  session.setAttribute("favoriteColor", favoriteColor);
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>確認画面</title></head>
<body>
  <h2>以下の内容でよろしいですか？</h2>
  <p>お名前：<%= userName %></p>
  <p>好きな色：<%= favoriteColor %></p>
  <form action="thanks.jsp" method="post">
    <input type="submit" value="送信する" />
  </form>
</body>
</html>

完了画面：thanks.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%
  String name = (String) session.getAttribute("userName");
  String color = (String) session.getAttribute("favoriteColor");

  // 必要があればセッションのデータを破棄
  session.invalidate();
%>
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>送信完了</title></head>
<body>
  <h2>ご協力ありがとうございました！</h2>
  <p><strong><%= name %></strong> さんの好きな色は <strong><%= color %></strong> ですね。</p>
</body>
</html>

条件分岐の制御フローを定義する命令には、if文を使う方法もありますが、条件が多分岐になる場合にはswitch文を用いるほうが可読性が上がります。

このページでは、switch文の使い方を解説しif文との使い分け方法をサンプルコード付きで解説します。

JavaScript初心者であれば、知らないと恥ずかしい基本的な知識です。是非最後までご覧ください。

条件分岐とは？

条件分岐とは、プログラム中である条件を満たしているかどうかを判定し、満たしている場合/満たしていない場合に応じて処理を変えることです。

基本的には、「もし○○ならば××せよ」というような書き方で処理の内容を分岐させていきます。

JavaScriptでは、if文と本ページで解説するswitch文を用いて条件分岐を指定します。

JavaScriptで用いる条件分岐命令

• if文　　　⇒　二分岐に用いる
• switch文　⇒　多分岐に用いる

if文について詳しく知りたい方はこちら。

【JavaScript】if文で条件分岐の書き方の基本とコツを３分で解説

JavaScriptのif文の基本から応用までを簡潔に解説。初心者向けにelseやelse ifの使い方、論理演算子の活用方法をサンプルコード付きで紹介します。条件分岐をマスターして、効率的なプログラミングを始めましょう。

it-biz.online

2024.02.02

switch文：構文ルール

switch (変数) {
case 値1:
(変数が値１の場合の処理);
break;
case 値2:
(変数が値２の場合の処理) ;
break;
　・・・・
default;
(変数がどの値にも合致しない場合)
}

この構文により、変数の値に応じて複数の条件分岐を定義することができます。

• 「変数が値１の場合に処理〇〇を行う」
• 「変数が値２の場合に処理△△を行う」

このように記述することで、多分岐の条件を分かりやすく記述することが可能です。

"default" はどの条件にも合致しない場合を表します。if文でいう「else」の役割と同じように考えてOK。

JavaScriptのswitch文では、上から順に変数の値を比較していき、合致した時点で該当する処理が行われます。そして、なんとそれ以降に記載された処理もすべて実行されてしまうのです。

switch文の「break」の必要性

"break" は強制的に処理を抜ける命令です。この命令は、for文やwhile文でも利用することができます。

"break" を意図的に書かずにコーディングする方法もありますが、基本的にはswitch文を利用して記述するのが一般的です。

仮に、"break" を用いずに以下のようなコードを記述したとしましょう。

See the Pen switch② by ビズドットオンライン (@BizOnline) on CodePen.

お気づきですね。「case 2;」以降のコードがすべて実行されてしまうのです。

基本的にcase文は条件分岐で用いる命令であるため、繰り返し処理（順次処理）的に利用するのはお勧めできません。そのため、基本的には "break" とセットで用いるのが正解と言えるのです。

switch文の使い方

実際に、switch文を利用したサンプルコードがこちらです。

「今日の天気」を選択して「ボタン」をクリックしてみましょう。（右下の「Rerun」ボタンを押せば何度も実行できます！）

See the Pen switch① by ビズドットオンライン (@BizOnline) on CodePen.

いかがでしょうか？

選択したラジオボタンに応じて、表示される文章が変わることが分かるかと思います。

上記のサンプルコードでは、以下のようにswitch文を用いて条件分岐を定義しています。

 switch (result) {
   case "晴れ":
     document.write(`本日は晴天なり`);
     break;
   case "曇り":      
     document.write(`本日はどんより曇りです`);
     break;
   case "雨":
     document.write(`本日は傘が必要です`);
     break;
   case "雪":
     document.write(`雪だるまを作りましょう`);
     break;
   }

if文との比較

ちなみに、冒頭でも説明した通り、必ずしもswitch文を使う必要はありません。if文でも同じ条件分岐を定義することが可能です。

 if (result = "晴れ") {
     document.write(`本日は晴天なり`);
    } else if(result = "曇り"){      
      document.write(`本日はどんより曇りです`);
    } else if(result = "雨"){
      document.write(`本日は傘が必要です`);
    } else if(result = "雪"){
      document.write(`雪だるまを作りましょう`);
    }

if文の方がコードの行数自体は減りますが、なんとなく読みやすさはswitch文の方が勝っている気がします。

また、switch文の場合は、１つの変数の値をもとに条件分岐させていくのに対して、if文は条件式に記述すべき変数は１つでなくてもOK。

そのため、条件をMECEにしたいという人は、switch文を好むようです。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

初心者にとっては理解しづらい返り値（Boolean型の変数）など、分かりやすく丁寧に説明していきます。

比較演算子についてはJavaScriptの超・基本的な内容なので、是非このページでマスターしておきましょう！

比較演算子とは？

比較演算子とは「==（等価）」「>=（以上）」などのことで、２つの値を比較するために用います。また、ただ値を比較するだけではなく、比較した結果を論理値（Boolean型）として返すことができます。

そのため、比較演算子は、if文 / for文 / while文などのループ処理の条件式で利用されることが一般的です。

この章では、比較演算子の意味と使い方・注意点を解説していきます。

等価 (==)

等価演算子（==）は、２つの値が等しいかどうか？を検証します。

比較する２つの値が等しい場合、結果を「TRUE」で返却します。

早速、以下のサンプルコードをご覧ください。

See the Pen 比較演算子== by ビズドットオンライン (@BizOnline) on CodePen.

5行目で、変数「hensu1」と「hensu2」を比較しています。

今回、２つの変数に代入されている値はどちらも「１」です。この場合、等価演算子で比較した結果は「真」となりますので、比較結果として「TRUE」が返されます。

※比較結果については、任意の変数に代入することができます。代入は必須ではありません。

逆に２つの値が一致しない場合は、「FALSE」が返却されます。

See the Pen 比較演算子==② by ビズドットオンライン (@BizOnline) on CodePen.

ちなみに、なぜ "=" を２つ続けるか？これは、"=" １つでは代入の意味になるためです。

「A = B」としてしまうと、Bの値をAに代入する処理になってしまいますので、注意して覚えましょう。

不等価（!=）

等価演算子の反対です。２つの値を比較して値が等しくない場合に "TRUE" が返却されます。

See the Pen 比較演算子!= by ビズドットオンライン (@BizOnline) on CodePen.

～より大きい（>）/より小さい（<）

左オペランドが右オペランドより大きい（小さい）場合に "TRUE" が、そうでない場合に "FALSE" が返却されます。

See the Pen 比較演算子 > by ビズドットオンライン (@BizOnline) on CodePen.

～以上（>=）/～以下（<=）

左オペランドが右オペランドより同じか大きい（小さい）場合に "TRUE" が、そうでない場合に "FALSE" が返却されます。

See the Pen 比較演算子>= by ビズドットオンライン (@BizOnline) on CodePen.

厳密等価演算子（===）の意味

さて、ここまでは比較的理解しやすい演算子を解説してきました。

この章では、厳密等価演算子と呼ばれる "===" と記述する演算子の意味について解説します。

厳密等価演算子は、２つの値に加えて２つの値のデータ型まで比較します。

どういうことか早速以下のサンプルコードをご覧ください。

単純な等価演算子（==）であれば、変数の値だけを比較するため結果は "TRUE" となりますが、厳密等価演算子（===）は、２つの変数のデータ型も一致しているかどうか？を比較します。

したがって、上記サンプルコードでは、"===" で比較を行った結果 "FALSE" が返却されているのです。

厳密不等価演算子(!==)　⇒　"===" の反対

厳密不等価演算子（!==）は、ちょっと理解しづらいのですが（===）の反対の結果を返すと覚えればOKです。

See the Pen 厳密不等価　!== by ビズドットオンライン (@BizOnline) on CodePen.

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

そのため、単なる省略記法だと思っていると後で混乱しやすくなります。この記事では、アロー関数の意味、基本構文、function との違い、使いどころを初心者向けに整理します。

「短く書ける」だけでなく、「this が変わる」と覚えておくと実務で役立ちます。

結論：アロー関数は短い関数を書くのに向いている

const add = (a, b) => {
  return a + b;
};

上のように、function を使わず => で関数を書けるのがアロー関数です。特に、配列処理やコールバック関数でよく使われます。

1. アロー関数の基本構文

通常の関数式は次のように書きます。

const greet = function(name) {
  return "こんにちは、" + name + "さん";
};

同じ処理をアロー関数で書くと、こうなります。

const greet = (name) => {
  return "こんにちは、" + name + "さん";
};

このように、function を省いて、引数の後ろに => を置くのが基本形です。

2. さらに短く書けるパターン

アロー関数は、条件がそろうとさらに短く書けます。

引数が1つなら () を省略できる

const double = n => {
  return n * 2;
};

1行で値を返すなら return と { } を省略できる

const double = n => n * 2;

この書き方はとても便利ですが、短くしすぎると読みにくくなることもあります。初心者のうちは、まずブロック付きで書ければ十分です。

3. アロー関数と function の大きな違い

ここが大事です。アロー関数は単なる短縮形ではありません。

this を自分で持たない

通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。

そのため、オブジェクトのメソッドやクラスのメソッドで、どちらを使うかによって挙動が変わることがあります。

arguments を持たない

通常の関数には arguments がありますが、アロー関数にはありません。可変長引数を扱いたいときは、通常は ...args を使います。

コンストラクタとして使えない

アロー関数は new と一緒には使えません。オブジェクトを生成するコンストラクタ用途なら、通常の関数や class を使います。

4. どんな場面で使うのか

アロー関数が特に活躍するのは、短いコールバック関数を書く場面です。

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);

console.log(doubled); // [2, 4, 6]

このように、配列の map や filter、イベント処理、非同期処理などで非常によく見かけます。

一方で、メソッド定義や this の理解が必要な場面では、通常の function のほうが意図が伝わりやすいこともあります。

5. よくあるつまずき

return が省略されていて意味が分からなくなる

1行アロー関数では、式の結果が自動で返ります。慣れるまでは、あえて { } と return を書いたほうが理解しやすいです。

オブジェクトを返したいのにエラーになる

オブジェクトを1行で返すときは、丸かっこで囲む必要があります。

const createUser = name => ({ name: name });

this が思った通りにならない

アロー関数は自分の this を持たないため、「メソッド内だから自動でそのオブジェクトを指す」と考えるとズレることがあります。ここは通常の関数との最重要ポイントです。

補足：アロー関数を実務で読むときの見方

アロー関数は「短く書ける関数」と説明されることが多いですが、実際のコードではそれだけでは少し足りません。特に、配列処理、イベント処理、コールバック関数の中でよく登場するため、コードを読むときは「どの値を受け取り、何を返しているのか」を先に見ると理解しやすくなります。

まずは、配列の map でアロー関数を使う例を見てください。アロー関数がどんな場面で自然に使われるのかが見えやすい例です。

この画像で見てほしいのは、price => { ... } の部分です。これは「priceを受け取り、税込価格に変換する処理」を map に渡しています。関数名を付けて何度も使うほどではない短い処理を、その場で渡したいときにアロー関数はよく使われます。

実務では、商品一覧の価格を加工する、ユーザー一覧から名前だけ取り出す、APIで受け取ったデータを画面表示用に整える、といった場面でよく出てきます。つまり、アロー関数は「短く書けるから使う」というより、「その場限りの小さな処理を読みやすく渡すために使う」と考えると自然です。

const users = [
  { name: "田中", age: 24 },
  { name: "佐藤", age: 31 }
];

const names = users.map(user => user.name);

console.log(names); // ["田中", "佐藤"]

この例では、user => user.name が「ユーザー情報から名前だけ取り出す処理」です。処理が1行で済むため、アロー関数にすると何をしているかが見えやすくなります。

一方で、アロー関数には注意点もあります。特に this の扱いは、通常の function と違います。次の図で、アロー関数が this をどう扱うかを整理します。

この図で重要なのは、アロー関数が「自分専用の this を持たない」という点です。通常の function は呼び出し方によって this が変わりますが、アロー関数は外側の this をそのまま使います。

この性質は、クラスやオブジェクトの中でイベント処理を書くときに役立つことがあります。ただし、オブジェクトのメソッドそのものをアロー関数で書くと、期待した this にならないこともあります。初心者のうちは、短いコールバックや配列処理ではアロー関数、オブジェクトのメソッドでは通常の function やメソッド記法、と分けて考えると安全です。

よくあるミスは、アロー関数を「functionの完全な置き換え」と思ってしまうことです。確かに似た場面で使えますが、this、arguments、コンストラクタ利用では違いがあります。迷ったときは、まず function（関数）の基本 を押さえ、そのうえで コールバック関数 や JavaScriptのthis とつなげて読むと理解しやすいです。

使ってよい場面・避けたほうがよい場面

アロー関数が特に向いているのは、配列処理や一時的なコールバックです。map、filter、forEach のように、関数をその場で渡す処理では、短く書けることが読みやすさにつながります。

一方で、オブジェクトのメソッドとして this を使う処理では注意が必要です。アロー関数は外側の this を引き継ぐため、「このオブジェクト自身」を指してほしい場面で期待と違う挙動になることがあります。

const user = {
  name: "田中",
  greet: function() {
    console.log(this.name);
  }
};

user.greet(); // 田中

このように、オブジェクト自身の情報を使うメソッドでは、まず通常の関数やメソッド記法で書くと安全です。アロー関数は便利ですが、いつでも短くすればよいわけではありません。

初心者が見るべきポイント

• => の左側は受け取る値、右側は実行する処理
• 1行で返すときは return が省略されていることがある
• this を使う処理では、通常の function との違いを見る
• 配列処理やイベント処理でよく出てくると覚える

読みづらいアロー関数に出会ったとき

アロー関数は短く書ける反面、短くしすぎると初心者には読みづらくなります。特に、引数が複数あり、さらに三項演算子やオブジェクトの返却が混ざると、どこまでが引数で、どこからが戻り値なのか見失いやすくなります。

そのようなコードに出会ったら、いったん通常の関数の形に戻して読むと理解しやすいです。user => user.name なら「userを受け取ってuser.nameを返す関数」、(a, b) => a + b なら「aとbを受け取って足し算の結果を返す関数」と読み替えます。

また、アロー関数の中で処理が長くなっている場合は、無理に1行で書かず、{ } と return を使って複数行にしたほうが読みやすいこともあります。短さよりも、何をしているかがすぐ分かることを優先しましょう。

実務では、チームのコード規約によってアロー関数を積極的に使う場合もあれば、読みやすさを優先して通常の関数を選ぶ場合もあります。大切なのは、どちらか一方を丸暗記することではなく、処理の短さ、this の扱い、読みやすさを見て選べるようになることです。

アロー関数を通常の関数に戻して読む練習

アロー関数が読みにくいと感じたときは、頭の中で通常の関数に戻してみると理解しやすくなります。たとえば price => price * 1.1 は、次のように読み替えられます。

function(price) {
  return price * 1.1;
}

このように戻してみると、左側の price が引数で、右側の price * 1.1 が戻り値だと分かります。アロー関数は記号が少ないぶん、慣れるまでは情報が省略されているように感じます。読みづらいときは、無理に一瞬で理解しようとせず、通常の関数に展開して確認しましょう。

また、アロー関数が連続して出てくるコードでは、最初から全部を理解しようとすると疲れます。まずは「配列の要素を1つ受け取って、別の形に変換しているのか」「条件に合うものだけ残しているのか」「クリック後に実行する処理なのか」を見ると、コードの目的がつかみやすくなります。

実務のコードレビューでは、アロー関数が短いかどうかよりも、意図が伝わるかどうかを見ます。1行で書ける処理でも、条件分岐が増えて読みにくいなら、複数行にして変数名を付けたほうがよい場合があります。

特に、画面表示用のデータ変換では、アロー関数の中で価格表示、日付整形、ステータス変換などをまとめて行うことがあります。処理が増えたら、無理にその場へ詰め込まず、名前付きの関数へ分けると読みやすくなります。

初心者の方は、アロー関数を見たらまず「これはどこへ渡されている関数なのか」を確認してください。map に渡されているなら変換、filter に渡されているなら絞り込み、クリックイベントに渡されているなら操作後の処理、というように周辺の関数名から役割を推測できます。

この見方ができるようになると、アロー関数は単なる省略記法ではなく、JavaScriptの処理の流れを表す重要なサインとして読めるようになります。

最初は記号に目が行きますが、慣れてくると「受け取る値」と「返す値」を素早く読めるようになります。そこまで来ると、配列処理やイベント処理のコードがぐっと身近になります。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptの関数式とは？
• JavaScriptのコールバック関数とは？

まとめ

アロー関数は、JavaScriptを学ぶうえで避けて通れない基本文法です。まずは「短い関数を書きやすい仕組み」と理解し、次に this の違いまで押さえると、実務でもかなり読みやすくなります。

alertメソッドは、JavaScript内であらかじめ用意されているwindowオブジェクトのメソッドです。

alertメソッドを利用することで、以下の画像のように「ポップアップ画面」を表示することが可能になります。

このページでは、alertとは何か？アラートメッセージの表示方法を１から解説し、基本的な利用方法をマスターできるようサンプルコード付きで解説します。

JavaScript学習中の方であれば、知らないと恥ずかしい超・基本知識ですので、是非最後までご覧ください。

alert（アラート）とは？

alert（アラート）は、テキストメッセージと「OK」ボタンが設置されている画面をポップアップで表示するメソッドです。

入力した内容に誤りがある場合や、注意メッセージを読ませたい場合などに用いられます。alertは決して「警告文」を表示させるだけではありません。使い方は自由です。

ユーザに何らかのメッセージを伝えたい場合は、このalertメソッドが用いられることが多いです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    alert("ここには注意喚起したい内容などが記載されます。")
    </script>
  </body>
</html>

ここでは簡易的にポップアップを表示させるだけのコードを載せていますが、他のロジックと組み合わせることでボタンを押したタイミングでポップアップを表示させたり、表示するメッセージを動的に変更したりすることが可能になります。

【補足】alert：モーダルウィンドウ

alertメソッドで表示される画面はモーダルウィンドウという種類の画面です。

モーダルウィンドウとは、その画面を閉じない限り（OKボタンか×ボタンを押さない限り）他の操作が行えない画面のことです。このページでは、ポップアップとモーダルウィンドウを区別していませんが、厳密に言えば両者は別物です。

alert（アラート）メソッドの使い方

alertメソッドの構文は非常にシンプルです。

（　）の中に表示させたいメッセージを記述します。ここには、数字でも文字列でも、その他事前に定義した変数でも指定することが可能です。

数値を表示させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    alert("20201231")
    </script>
  </body>
</html>

変数の値を表示させる

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>はじめてのalert</title>
  </head>
  <body>
    <script>
    const str = "変数strの値";
    alert(str)
    </script>
  </body>
</html>

【補足】window.alert()の意味/alert()との違い

初心者にとっては、少しだけ分かりづらいのですが、alertメッセージはwindowオブジェクトの中の１つのメソッドです。

したがって、本来は以下の記述方法が正式な形です。

ただし、このwindowは基本的に省略可能なので、通常はコードの可読性向上のために単に「alert()」とコーディングすることが多いです。

window.alert('メッセージ');     //windowを記述しても処理内容は全く同じです

alert('メッセージ');            //windowを省略することもできます

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30

document.write()は、JavaScript初心者が初めて動かすメソッドになることが多いのですが、そもそもdocument.write()って何？と疑問に思う方も大勢いらっしゃるはずです。

このページでは、document.write()の意味と使い方、基本的な構文ルールや実際の利用シーンなどを網羅的に解説します。

JavaScript初心者の方にとって、JavaScriptをマスターするために避けては通れない必須知識ですので是非最後までご覧ください。

document.writeとは？

document.write()は、文字列や変数の値を表示させるメソッドです。

引数「( )の中」に直接表示させたい内容を指定するだけでOKです。

document.write(表示させたい内容)

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

文字列だけではなく、例えば変数の内容を表示させることもできます。

See the Pen document.write1 by ビズドットオンライン (@BizOnline) on CodePen.

JavaScriptでは、例えば変数の中身を知りたいときや、処理の結果を知りたいときにこのdocumentwrite()メソッドを高頻度で利用します。

※JavaScriptの「変数宣言」について詳しく知りたい方はこちらのページをご覧ください。

【JavaScript】let・const・var の違いとは？初心者向けに使い分けを3分で整理

JavaScript初心者向けガイド：変数の宣言方法をvar, let, constの違いを中心に解説。関数スコープ、ブロックスコープ、巻き上げ、再代入の可否などの基本概念を明確に理解し、実用的なサンプルコード付きでわかりやすくご説明します。

it-biz.online

2026.04.26

文字列は``or""で囲む

文字列は、``（シングルクォーテーション）もしくは""（ダブルクォーテーション）で囲む必要があります。

document.write("Hello World!");　//正常に出力される

document.write(`Hello World!`);       //こちらも正常に出力される

document.write(Hello World);          //出力エラー

最後のHello World!は文字列とみなされないため、エラーが発生します。

ちなみに、シングルクォーテーションとダブルクォーテーションを混ぜて利用するのはNGです。

document.write(`Hello World!");　//これはエラーになります

document.writeーHTMLタグと組み合わせ

【初心者向け】HTMLの書き方の基本/基礎を３分で解説

【HTML入門編】HTMLの書き方を初心者向けにわかりやすくまとめました。HTMLって何？イメージがわきづらい方もこのページをご覧になれば「何となく」のイメージをつかめるはずです。

it-biz.online

2023.07.10

document.write()では、引数の中身にHTMLタグを設置することができます。

document.write("<開始タグ>文字列</終了タグ>")

See the Pen document.write3 by ビズドットオンライン (@BizOnline) on CodePen.

ここで注意すべきは、あくまでも表示される内容はHTMLのコードであるということです。

つまり、JavaScript自体はHTMLのタグを認識しません。いわば通常のHTMLのタグも通常通りの文字列として一旦主力され、ブラウザで表示する際にHTMLタグが読み込まれるとも言えます。

したがって、変数の値にHTMLタグを表示する際には、以下のようにそれぞれ別に””でくくる必要があります。

See the Pen document.write7 by ビズドットオンライン (@BizOnline) on CodePen.

そうしないと、以下のように文字列の一部として認識されてしまいます。

See the Pen document.write4 by ビズドットオンライン (@BizOnline) on CodePen.

初心者の方ほど、この点を誤ってしまうため注意が必要です。

document(オブジェクト).write(メソッド)

ここまでの解説で、「document.write()」を利用すれば指定した文字列を表示できることが分かりました。

この章では「document.write()」について少しだけ深堀して補足します。

document　⇒　オブジェクト

「document.write()」の「document」はJavaScriptの中の１つのオブジェクトです。

オブジェクトは、目に見える対象物のことを表し、具体的にこのページで解説したdocumentは「今見ているページ」のことを指し示しています。

write　⇒　メソッド

対して、write()は「documentオブジェクトのメソッド」のこと。

メソッドとは、オブジェクトに備えらている「動作」のことです。具体的に説明すると「write()」は、（）の中に指定した文字列を書き込む処理のことを表しています。

すなわち「document.write()」は、今見ているページに「（）の中の内容を書き込む」処理を表している処理であると理解できます。初心者の方であれば、オブジェクトとメソッドについてはまだ理解できていない、という方もいらっしゃるかもしれませんが、ここではなんとなくの意味をつかめればOKです。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

おすすめプログラミングスクールTOP５【現役エンジニア推薦】

プログラミングスキルを習得したい社会人・学生の方へおすすめしたいプログラミングスクールをニーズ別に３つに絞ってご紹介します。本当に未経験からでも実務レベルのスキルはみにつくか？現役エンジニアが口コミや実体験をもとに解説します。

it-biz.online

2023.05.30