長いオブジェクト型、複数の候補を持つ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>

入力チェックとは、社内システムやWebサイトなどの各種入門画面を持つシステムにおいて、ユーザーからの入力データが予想される形式や範囲に適合しているかどうかを確認するプロセスを指します。

この記事では、必須チェックや相関チェック、外字チェック等々、入力チェックの種類とその意味について丁寧にご説明いたします。

システムエンジニアやプログラマーであれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

入力チェックとは

入力チェックとは、ユーザーからの入力データが予想される形式や範囲に適合しているかどうかを確認するプロセスのこと。

例えば「生年月日」を入力する項目であれば正しく「〇〇〇〇/〇〇/〇〇」の形式で入力されているかどうか？を判定するのが入力チェック（＝この場合は形式チェック）です。

入力チェックは、システムやアプリケーションの正常な動作を保証するために重要な役割を果たしています。ユーザーが誤った形式のデータを入力した場合、システムはそれを適切に処理できず、エラーや不正な操作が発生する可能性が出てきます。

入力チェックとバリデーション

入力チェックと似たような意味をもつ「バリデーション」について少しだけ補足します。

「バリデーション」と「入力チェック」は、両方とも入力データの検証に関連する用語ですが、微妙に異なる意味で利用されます。

入力チェックとバリデーションの違い

• 入力チェック
  データの形式や範囲をチェックする際に利用される。
• バリデーション
  データの形式だけではなく要件やルールに適しているかどうかまでチェックする際に利用される。

「入力チェック」とは、入力データが予想される形式や範囲に適合しているかどうかを確認するプロセスを指します。

たとえば入力されたデータが数値である場合、それが数字のみで構成されているか、負の値ではないか、または特定の範囲内の数値であるかどうかを確認します。

一方、「バリデーション」は入力データが意図した用途に適しているかどうかを検証するプロセスを指します。つまり、データが予想される形式や範囲に適合しているだけでなく、システムやアプリケーションの要件や規則にも適合しているかどうかを確認します。

たとえば、ユーザーの登録フォームにおいて、パスワードが一定の強度基準を満たしているか、または入力されたメールアドレスが有効な形式であるかどうかを確認することができます。

つまり、入力チェックは入力データの形式や範囲の検証に重点を置いているのに対し、バリデーションはデータの用途や要件に適合しているかどうかを検証しています。

入力チェック

入力チェックは、ユーザビリティを考慮し、画面の上から下・左から右の項目順でチェックすることが基本です。

入力チェックには大きく分けて７種類のチェックが存在します。

現場やシステムの種類に応じて多少呼び方が異なる場合もあります。その点あらかじめご了承ください。

１．必須チェック（必須入力チェック）

最も基本形です。

項目に値が入力されているかどうかのチェックです。必須チェックには、「ある項目を選択したら関連項目も必須入力とする」条件付き必須チェックがあります。

例）転記日付が入力されていること

２．項目長チェック（文字数チェック）

入力された文字数が指定された文字数であること、もしくは指定された文字数以内であることをチェックします。

例１）備考欄は30文字以内であること

例２）契約番号は５桁で入力されていること

３．属性チェック

属性とは、文字/数字/日付などのデータ型のことです。

入力された項目が、指定されたデータ型と一致していることをチェックします。

ちなみに、同じ文字といっても「ひらがな」なのか「カタカナ」なのか、全角なのか半角なのか、細かく指定することも可能です。

例）日付項目に日付以外の値が入力されていないこと

４．相関チェック

相関チェックは、複数の項目に入力された値の妥当性のチェックです。

項目Aの入力値と、項目Bの入力値と、項目Cの入力値と、・・・に妥当性があるかどうかを制限するチェックです。

例）転記日付が登録日付より前の日付ではないこと

５．存在チェック

入力値に関連するデータがシステム（データベース）に存在しているかどうかをチェックします。

マスタの値から選択する場合などに用います。

例）勘定コードマスタに存在する勘定コードが入力されていること

６．外字チェック

外字とは、システムに存在しない文字のことです。

つまり、最新のパソコンからであれば入力できるものの、システムには登録されていない文字のことです。「㉚」とか、特殊な文字をよく使う場合には必須です。

外字チェックとは、入力された項目に外字が指定されていないことをチェックすることです。

このチェックをしない場合、プログラム停止か、うまくいっても文字化けします。

例）備考欄にS-JIS以外の文字が入力されていないこと

７．権限チェック

入力された値によるデータへのアクセス権限をチェックします。

例えば、人事システムにおいて給料を確認する際に「自分以外を指定していないか」をチェックするなどというのが代表的な使い方です。

例）指定された会社コードの参照権限があること

補足：入力チェックと一緒に理解したい用語

入力チェックは、画面の入力欄だけでなく、APIやデータベースへ値を渡す前にも重要になります。何をチェックしているのかを考えるときは、データの種類やシステム間の受け渡しも一緒に見ると理解しやすいです。

• データ型とは何かを理解すると、数値・文字列・日付などのチェック観点が整理しやすくなります。
• APIとは何かを読むと、入力値を別システムへ送る前に検証する理由が見えてきます。
• 文字コードも押さえておくと、外字チェックや文字化け対策の背景が理解しやすくなります。

結論「ngOnInitは、Angularのライフサイクルフックの１つで、コンポーネントが初期化された直後に呼び出されます。主に、初期化処理やデータの準備を行うために使用されます。」

Angularのライフサイクルは、コンポーネントやディレクティブが「生成」「変化」「破棄」という流れで動作する仕組みを指します。ngOnInitはこのライフサイクルの中で、初期化のために特化したフックです。

ngOnInitを理解するために、このページではAngularのライフサイクル/ライフサイクルフックの概念について解説します。

Angularのライフサイクルとは？

Angularのコンポーネントは以下のような「一生」を持っています：

1. 生成 (Creation)
   コンポーネントが作られる瞬間。
2. 変化 (Change Detection)
   データが更新され、それに応じてビューが再描画される過程。
3. 破棄 (Destruction)
   役割を終えて、メモリから削除されるタイミング。

この一連の流れが「ライフサイクル」です。

よりシステム的に言えば、対象のコードがロードされ、そのコードが外部からのリクエストで様々な動作をし、最終的に処理が終了する～、という一連の流れをライフサイクルと呼びます。

日常生活の例で考えてみると以下のようなイメージです。

• 生成: 新しい家を建てる。
• 変化: 家具を配置し直したり、壁を塗り替える。
• 破棄: 家を解体する。

ライフサイクルフックとは？

ライフサイクルフックは、ライフサイクルの特定のタイミングで実行される「きっかけ」や「スイッチ」のようなものです。開発者がこれを利用して、適切なタイミングでカスタムロジックを追加することができます。

これをシステム的に捉えると、ライフサイクルフックは「状態遷移」に基づくイベント駆動型プログラミングの一部と説明できます。アプリケーションやコンポーネントは、それぞれの状態（生成、更新、破棄など）において異なる責務を持ち、ライフサイクルフックはその責務を実行するトリガーとして機能します。

Angularの主要フック

ngOnInitの役割と特徴

ngOnInitは、Angularがすべての入力プロパティ（@Input）を設定した後、1度だけ呼び出されます。生成フェーズの一部として、コンポーネントの初期化処理を担当します。

特徴

• 呼び出し回数: 一度だけ呼び出される。
• 依存性注入後に実行: コンストラクタで設定された依存性を利用可能。
• データが利用可能: 入力プロパティ（@Input）が初期化された状態。

用途

1. 初期データの設定
   • APIからのデータ取得。
   • 初期状態を設定する。
2. 入力データの利用
   • @Inputで渡された値を基にロジックを実行。
3. コンストラクタとの分離
   • 初期化ロジックをコンストラクタから分離し、コードを整理する。

ngOnInitを通じてライフサイクルを理解する

ここからは具体的にどんな感じで動作するのか？をイメージできるように実際のコードを用いてご説明します。

以下のコードでngOnInitがライフサイクル全体の中でどのように機能するかを見てみましょう。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `<p>{{message}}</p>`
})
export class DemoComponent implements OnInit {
  @Input() userName: string = ''; // 入力プロパティ
  message: string = '';

  constructor() {
    console.log('Constructor: コンポーネントが生成されました');
  }

  ngOnInit() {
    console.log('ngOnInit: 初期化処理を実行します');
    this.message = `こんにちは、${this.userName}さん！`;
  }
}

このコードは、Angularのコンポーネントを使って、ユーザー名を受け取り、その名前を使ってメッセージを表示する仕組みを実現しています。以下に、実行結果と動作の原理をわかりやすく説明します。

実行結果

このコンポーネントを以下のように使用すると、画面に「こんにちは、〇〇さん！」と表示されます。

<app-demo [userName]="'太郎'"></app-demo>

画面の表示：

こんにちは、太郎さん！

動作の原理

1. コンポーネントの基本構成
   • @Component デコレーターでコンポーネントの情報を設定します。
   • selector: 'app-demo' により、このコンポーネントは <app-demo> というタグで使用可能になります。
   • template: <p>{{message}}</p> で、HTMLテンプレートに表示する内容を指定しています。
2. 入力プロパティ (@Input)
   • @Input() デコレーターを使うと、親コンポーネントから値を受け取ることができます。
   • この例では、userName プロパティが入力プロパティで、親コンポーネントから値が渡されます。
3. コンストラクター
   • constructor() は、コンポーネントが生成されたタイミングで一度だけ呼び出されます。
   • ここでは特別な処理はしていませんが、ログ出力で確認できます。
4. ngOnInit メソッド
   • ngOnInit() は、コンポーネントが初期化された後に呼び出されます。
   • このメソッドで、userName を使って message の内容を設定しています。
5. 動作の流れ
   • 親コンポーネントから <app-demo [userName]="'太郎'"></app-demo> として userName に値が渡されます。
   • ngOnInit() が実行され、message プロパティに「こんにちは、太郎さん！」という文字列がセットされます。
   • テンプレートの <p>{{message}}</p> がその値を表示します。

補足：ngOnInitはAngular全体の中で理解する

ngOnInitだけを単独で覚えるより、Angularのコンポーネントやデータ表示の流れとセットで見ると理解しやすくなります。どのタイミングで初期化処理を書くのか、どこから値が渡ってくるのかを順番に確認しましょう。

• Angularとは何かを読むと、フレームワーク全体の役割を先に整理できます。
• Angularのコンポーネント作成を押さえると、ngOnInitがどの部品の中で使われるかが見えやすくなります。
• Angularのデータバインディングも一緒に読むと、初期化した値が画面に表示される流れを理解しやすくなります。

ただし、3つの違いを曖昧なまま使うと、変数のスコープや再宣言の挙動で混乱しやすくなります。この記事では、let・const・var の違い、使い分け、よくあるつまずきを初心者向けに整理します。

迷ったら、まず const で書けないかを考えるのがいちばん実務的です。

結論：let・const・var の違いはここだけ押さえればOK

1. var は古い書き方で、挙動が少し特殊

var は昔からある変数宣言です。いまでも古いJavaScriptコードではよく見かけますが、ブロックスコープを持たないため、初心者が混乱しやすい書き方でもあります。

if (true) {
  var message = "varで宣言";
}

console.log(message); // varで宣言

この例では、if 文の中で宣言した message を外でも使えています。これは var が { } のブロックではなく、関数単位で有効になるためです。

さらに var は同じスコープで再宣言もできるので、意図しない上書きが起きやすくなります。

var count = 1;
var count = 2;

console.log(count); // 2

この柔らかさが便利な場面もありますが、現在の開発ではバグの原因になりやすいため、新しく書くコードではあまり使いません。

2. let は「あとで値が変わる変数」に使う

let はブロックスコープを持つ変数宣言です。つまり、if 文や for 文などの { } の中で宣言すると、その外では使えません。

if (true) {
  let total = 10;
  console.log(total); // 10
}

// console.log(total); // ReferenceError

また、let は再代入できます。

let score = 0;

score = 100;

console.log(score); // 100

そのため、カウントアップや入力値の更新など、途中で値が変わる前提の変数に向いています。

3. const は「基本の選択肢」

const も let と同じくブロックスコープです。違いは、再代入できないことです。

const taxRate = 0.1;

// taxRate = 0.2; // TypeError

一度決めた値を後から変えたくないときに使うことで、「この値は書き換えないつもりです」という意図がコードから伝わります。

ただし、ここで1つだけ勘違いしやすい点があります。const は「中身が完全に不変」という意味ではありません。再代入できないのは変数そのもので、オブジェクトや配列の中身は変更できます。

const user = {
  name: "田中"
};

user.name = "佐藤";

console.log(user.name); // 佐藤

この性質まで知っておくと、const への苦手意識がかなり減ります。

4. どう使い分ければよいのか

実務でも学習でも、使い分けは次のルールでほぼ十分です。

• 基本は const
• あとで値を入れ替えるなら let
• var は古いコードを読むときの知識

たとえば、APIのURLや設定値、固定のメッセージなどは const に向いています。ループ回数や状態の更新などは let が自然です。

変数の有効範囲まで含めて理解したい方は、JavaScriptのスコープの記事もあわせて読むと、より整理しやすくなります。

5. よくあるつまずき

宣言前に使おうとしてエラーになる

let と const は、宣言より前で使うとエラーになります。これは不具合ではなく、安全のための仕様です。

// console.log(price); // ReferenceError
let price = 500;

const なのに中身を書き換えられる

const は再代入を禁止するだけなので、配列の push やオブジェクトのプロパティ変更はできます。ここで「壊れている」と感じやすいですが、仕様どおりです。

var を使っていて思わぬ場所で値が見えてしまう

古いサンプルコードをそのまま写すと、if 文の外でも値が使えてしまい、なぜ動くのか分からなくなることがあります。そういうときはまず「var だからかもしれない」と疑うと解決しやすいです。

補足：コードと実務場面で見る let・const・var の選び方

ここまでで let・const・var の基本的な違いを整理しました。ここでは、実際にコードを書いているときに迷いやすい場面を、もう少し具体的に見ていきます。

特に初心者の方がつまずきやすいのは、「値を変えられるか」だけで判断してしまうことです。もちろん再代入できるかどうかは大事ですが、実務ではそれと同じくらい「その変数がどこから見えるか」も重要になります。

まずは次の画像で、var と let の見え方の違いを確認してください。コードそのものは短いですが、JavaScriptの変数宣言で混乱しやすいポイントが詰まっています。

この画像で見てほしいのは、if の中で宣言した変数が、外側から使えるかどうかです。var で宣言した oldName は外側でも表示されますが、let で宣言した newName は外側で参照すると ReferenceError になります。

一見すると、外側でも使える var のほうが便利に見えるかもしれません。しかし、実務では「思ったより広い範囲から変数が見えてしまう」ことがバグにつながります。たとえば、画面の入力チェック、一覧の絞り込み、フォームの送信処理などでは、同じ名前の変数を別の場所で使ってしまうことがあります。そのとき、変数の有効範囲が広すぎると、どこで値が変わったのか追いかけにくくなります。

そのため、今から新しくJavaScriptを書くなら、まずは const を基本にして、値を後から入れ替える必要がある場合だけ let を使うのが安全です。var は「古いコードを読むために知っておくもの」と考えると、かなり整理しやすくなります。

この図では、迷ったときの判断順を示しています。最初に「その値は後から変わるか」を考えます。変わらないなら const、変わるなら let、古いコードを読むときだけ var を理解する、という流れです。

たとえば、消費税率、APIのURL、HTML要素を取得した結果など、基本的に差し替えない値は const が向いています。一方で、クリック回数、フォーム入力の途中状態、ループの中で更新する合計値などは let が向いています。

const taxRate = 0.1;
let total = 0;

for (const price of [100, 200, 300]) {
  total += price;
}

console.log(total); // 600

この例では、taxRate のように変わらない値は const、total のように後から加算していく値は let にしています。こうして役割を分けると、後から読んだ人も「この値は変わるのか、変わらないのか」をすぐ判断できます。

よくあるミスは、すべてを何となく let で書いてしまうことです。動きはしますが、変わらないはずの値まで再代入できる状態になってしまいます。逆に、すべてを const にしてしまうと、カウントや合計のように値を更新する処理で困ります。大事なのは、宣言方法を暗記することではなく、変数の役割に合わせて選ぶことです。

実務でよく見る場面

実際の開発では、const は「参照先を変えないもの」によく使います。たとえば、フォーム要素を取得した結果、APIのエンドポイント、画面に表示する固定メッセージなどです。これらは一度決めたら別の値に差し替えないため、const にしておくと読み手が安心できます。

let は、処理の途中で値が変わること自体に意味がある場面で使います。たとえば、検索条件を組み立てる途中の文字列、合計金額、ページ番号、バリデーション結果などです。あとで値が変わることが分かっているなら、let を使う理由があります。

var は、古い記事や古い社内システムのコードを読むときに出てきます。新しく書くコードでは避けることが多いですが、既存コードを保守する場面では、var がなぜ外側から見えてしまうのかを理解しておく必要があります。

迷ったときのチェックリスト

• その値を後から入れ替える必要がないなら、まず const を選ぶ
• カウントや合計のように値を更新するなら、let を選ぶ
• 古いコードを読むときだけ、var の関数スコープに注意する
• 同じ名前の変数を近い場所で何度も使っていないか確認する

この違いが分からないと困ること

変数宣言の違いを曖昧にしたままだと、最初は動いているように見えても、少しコードが長くなった時点で原因を追いにくい不具合が出ます。たとえば、同じ画面の中で検索条件、並び替え条件、入力チェック結果を扱っているとき、意図しない場所で変数が上書きされると、表示結果だけがおかしく見えることがあります。

このような不具合は、文法エラーとしてすぐ止まるとは限りません。画面は表示されるのに、検索結果だけ違う、ボタンを2回押したときだけ値が変になる、という形で現れることがあります。だからこそ、最初から変数の範囲を狭くし、変えない値は変えられないようにしておくことが大切です。

実務では、コードを書いた本人だけでなく、あとから別の人が読むことも多いです。const が使われていれば「この値は基本的に変わらない」、let が使われていれば「後で変わる可能性がある」と読み取れます。宣言方法そのものが、コードを読む人への小さなメッセージになります。

この考え方は、JavaScriptのスコープ や function（関数） を学ぶときにもつながります。変数がどこから見えるのか、どこで値が変わるのかを意識できると、JavaScriptのコードはかなり読みやすくなります。

もう少し実務寄りに考えると、変数宣言は「将来の自分が読み返したときのヒント」にもなります。数週間後に同じコードを見たとき、const で宣言されていれば、その値は途中で差し替えない前提だとすぐ分かります。

逆に let が使われている場合は、処理のどこかで値が変わる可能性を意識して読みます。デバッグするときも、最初から「この変数は更新されるものだ」と分かるため、確認すべき場所を絞り込みやすくなります。

初心者の段階では、まず「基本は const、必要なときだけ let、古いコードで var を読む」と決めておくと迷いが減ります。このルールだけでも、変数の上書きミスやスコープの勘違いをかなり減らせます。

小さなルールですが、コードが長くなるほど効果が出ます。変数宣言を丁寧に選ぶことは、バグを防ぐだけでなく、チームで読みやすいコードを書く第一歩になります。

関連して学びたい記事

• JavaScriptのスコープ（変数の有効範囲）とは？
• JavaScriptの関数 function の使い方
• JavaScriptのアロー関数とは？

まとめ

JavaScriptの変数宣言は、最初にきちんと整理しておくと後の学習がかなり楽になります。特にスコープと再代入の違いを押さえておくと、関数やアロー関数、非同期処理を学ぶときにもつまずきにくくなります。

意味だけ聞くと抽象的ですが、実際は配列処理やイベント処理、非同期処理で毎日のように使われます。この記事では、コールバック関数の意味、基本例、非同期処理との関係、Promiseとの違いを初心者向けに整理します。

「あとで呼び出すために渡す関数」と言い換えると、かなり分かりやすくなります。

結論：コールバック関数は処理の差し込み口

まずはシンプルな例を見てみます。

function processUser(name, callback) {
  console.log("処理開始");
  callback(name);
}

function greet(userName) {
  console.log("こんにちは、" + userName + "さん");
}

processUser("田中", greet);

この例では、greet がコールバック関数です。processUser に渡されて、内部であとから実行されています。

つまり、コールバック関数は「処理の流れのどこかで実行したい追加処理」を外から差し込むための仕組みです。

1. なぜコールバック関数を使うのか

コールバック関数を使うと、親の関数の中身を固定しすぎず、実行する処理だけを外から差し替えられます。

たとえば、同じ「データ取得後の処理」でも、ある画面では表示したい、別の画面では保存したい、ということがあります。そんなとき、結果の後処理だけをコールバックとして渡せば、関数の再利用性が高まります。

2. 配列処理でもコールバックは使われている

コールバック関数は非同期処理だけの話ではありません。配列の forEach や map でも使われています。

const numbers = [1, 2, 3];

numbers.forEach(function(number) {
  console.log(number);
});

forEach に渡している関数がコールバック関数です。配列の要素1つ1つに対して、あとで順番に呼び出されています。

この形はアロー関数と相性がよく、実務では次のようにもよく書きます。

numbers.forEach(number => {
  console.log(number);
});

forEach の記事やアロー関数の記事もあわせて読むと、実際の見え方がつかみやすいです。

3. 非同期処理でのコールバック関数

コールバック関数が特に重要になるのは、時間がかかる処理の完了後に何かをしたい場面です。

setTimeout(function() {
  console.log("2秒後に実行");
}, 2000);

ここでは、setTimeout に渡した関数が2秒後に実行されます。これも立派なコールバック関数です。

つまり、「今すぐではなく、ある条件がそろった後で呼び出す関数」がコールバックだと考えると整理しやすいです。

4. Promise や async/await と何が違うのか

昔からJavaScriptの非同期処理ではコールバック関数がよく使われてきました。ただ、非同期処理が何段も続くと、関数の入れ子が深くなって読みにくくなることがあります。

step1(function() {
  step2(function() {
    step3(function() {
      console.log("完了");
    });
  });
});

このような状態は「コールバック地獄」と呼ばれます。そこで、今のJavaScriptでは Promise や async/await を使って、もっと読みやすく非同期処理を書くことが増えました。

ただし、だからといってコールバック関数が不要になるわけではありません。イベント処理、配列メソッド、ライブラリのAPIなどでは今でも頻繁に登場します。

5. よくあるつまずき

関数を渡すのではなく、その場で実行してしまう

コールバック関数では、greet を渡すのであって、greet() を先に実行するわけではありません。この違いは非常に大切です。

processUser("田中", greet);   // OK
// processUser("田中", greet()); // これは別物

引数の流れが分からなくなる

親の関数からコールバックへ、どの値が渡されるのかを追う必要があります。慣れるまでは、サンプルコードを紙に書いて流れを追うと理解しやすいです。

非同期処理だけの用語だと思ってしまう

実際には forEach や map のような同期処理でも使われています。コールバックは「使われる場面」ではなく、「関数の渡し方」の名前だと考えるのがポイントです。

補足：コールバック関数を実務で読むための見方

コールバック関数は、言葉だけ見ると難しそうですが、実際には「あとで実行してほしい処理を、先に渡しておく仕組み」です。イベント処理、配列処理、API通信など、JavaScriptではかなり頻繁に登場します。

まずは、コールバックを処理の流れとして見てみます。ポイントは、関数をその場で実行するのではなく、別の関数に預けて、必要なタイミングで呼び出してもらうことです。

この図で見てほしいのは、「渡す」と「呼ぶ」が別のタイミングで起きることです。コールバック関数は、渡した瞬間に必ず実行されるわけではありません。親の関数の中で、条件がそろったとき、クリックされたとき、通信が終わったときなどに実行されます。

実務でよく見るのは、ボタンのクリック処理です。画面のボタンに対して「クリックされたらこの関数を実行してね」と登録する処理は、コールバックの代表例です。

function sayHello() {
  console.log("こんにちは");
}

button.addEventListener("click", sayHello);

この例では、sayHello をその場で実行しているのではなく、クリックされたときに実行してもらうために渡しています。ここで重要なのが、関数名の後ろに () を付けないことです。

この画像では、sayHello と sayHello() の違いを示しています。sayHello は関数そのものを渡しているため、クリック後に実行されます。一方で sayHello() はその場で関数を実行してしまい、イベントに登録したい処理としては意図とずれます。

初心者の方が混乱しやすいのは、「関数を渡す」と「関数を実行する」が見た目では少ししか違わないことです。カッコがあるかないかだけですが、意味は大きく変わります。コールバックを読むときは、まずその関数が今実行されるのか、あとで実行されるのかを確認しましょう。

もうひとつ大切なのは、コールバック関数は非同期処理だけの用語ではないという点です。forEach や map のような配列処理でも、引数として渡している関数はコールバックです。

const numbers = [1, 2, 3];

numbers.forEach(number => {
  console.log(number);
});

この例では、number => { ... } がコールバック関数です。配列の要素ごとにあとから呼ばれる処理として渡されています。配列処理でコールバックに慣れておくと、Promiseや async/await の理解にもつながります。

関連して、関数そのものの基本は function（関数）、短く書く記法は アロー関数、非同期処理の整理は async/await を読むと理解がつながりやすいです。

コールバックを読むときのチェックリスト

コールバック関数を読むときは、いきなり中身を細かく追うより、まず「誰が、いつ、この関数を呼ぶのか」を確認すると整理しやすいです。配列処理なら配列の各要素ごと、イベント処理ならクリックされたとき、通信処理なら結果が返ってきたとき、というように実行タイミングを先に押さえます。

• 関数を渡しているだけなのか、その場で実行しているのか
• コールバックに渡される引数は何か
• 戻り値を使う処理なのか、表示や保存などの副作用を起こす処理なのか
• 非同期処理なら、どの順番で実行されるのか

特に非同期処理では、コードに書いた順番と実行される順番が一致しないことがあります。たとえば、タイマー、API通信、ファイル読み込みなどは、後から処理が完了します。その「完了したあとに何をするか」を渡すのが、コールバックの重要な役割です。

console.log("開始");

setTimeout(() => {
  console.log("あとで実行");
}, 1000);

console.log("終了");

このコードでは、出力順は「開始」「終了」「あとで実行」になります。setTimeout に渡した関数は、すぐには実行されず、指定した時間のあとに呼び出されるからです。

コールバックで混乱しやすい実務場面

実務でコールバックが分かりにくくなるのは、処理が何段階もつながったときです。たとえば、ボタンを押す、入力値をチェックする、APIへ送る、結果を受け取る、画面を書き換える、という流れでは、それぞれのタイミングで関数が呼ばれます。

このとき、どの関数が最初に実行され、どの関数があとから実行されるのかを整理しないと、コードが急に読みにくくなります。特に、通信処理では結果が返ってくるまで時間がかかるため、「送った直後」と「結果が返った後」を分けて考えることが大切です。

最近のJavaScriptでは、非同期処理を Promise や async/await で書くことも多いですが、内部では「処理が終わったら次に何をするか」という考え方が残っています。つまり、コールバックを理解しておくと、より新しい書き方も読みやすくなります。

このように、コールバック関数は「処理の順番を後ろへ回す」「処理の一部を外から差し込む」ための基本的な考え方です。最初は難しく感じますが、イベント処理や配列処理の身近な例から慣れていくと、Promiseやasync/awaitも理解しやすくなります。

注意点として、コールバックに渡す関数をその場で実行してしまうミスはとても多いです。イベントに登録したいのに () を付けてしまうと、クリック前に処理が走ってしまい、クリック時には何も起きないように見えることがあります。

もうひとつのよくあるミスは、コールバックの中で使う値が、実行されるタイミングでは変わっているケースです。特にループや非同期処理では、コードを書いた順番だけでなく、実際にいつ呼ばれるかを意識する必要があります。

コールバックを読むときは、「渡している関数」「受け取っている関数」「実行されるタイミング」を分けてメモすると整理しやすいです。最初は少し面倒に感じますが、この3つを分けるだけで、イベント処理やAPI通信のコードがかなり読みやすくなります。

実務では、ボタンを押した後の処理、入力フォームの変更検知、通信完了後の画面更新など、ユーザー操作とコールバックが強く結びつきます。つまり、コールバックは文法だけでなく、画面の動きそのものを理解するための考え方でもあります。

慣れてきたら、コールバックで書かれた処理を async/await ではどう表すかを比べてみると理解が深まります。書き方は変わっても、「ある処理が終わった後に次の処理を実行する」という基本は同じです。

最初は、ボタンや配列処理のような身近な例から確認すると十分です。小さな例で「あとで呼ばれる」感覚をつかめると、非同期通信のコードも段階的に読みやすくなります。

迷ったときは、関数名の後ろにカッコがあるかを最初に確認しましょう。

関連して学びたい記事

• JavaScriptの関数 function の使い方
• JavaScriptのアロー関数とは？
• JavaScriptの forEach メソッドとは？

まとめ

コールバック関数は、最初は抽象的に見えますが、「後で呼び出すための関数を渡しているだけ」と分かると一気に読みやすくなります。JavaScriptの非同期処理を理解する土台にもなるので、ここでしっかり押さえておくのがおすすめです。

関数を理解すると、コードの重複を減らし、読みやすく保守しやすいプログラムを書けるようになります。この記事では、JavaScriptの関数とは何か、書き方、引数と戻り値、よくあるつまずきを初心者向けに整理します。

まずは「同じ処理を何度も使い回すための仕組み」と覚えるだけでも十分です。

結論：関数で押さえたいのは3つだけ

• 関数は処理のまとまり
• 引数は関数に渡す入力
• 戻り値は関数が返す結果

function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

この短いコードだけでも、関数の基本が詰まっています。add が関数名、a と b が引数、return a + b; が戻り値です。

1. 関数とは何か

関数は、一連の処理をひとまとまりにしたものです。たとえば「税込価格を計算する」「あいさつ文を作る」「ボタンが押されたら実行する処理」などを関数として切り出せます。

関数を使うメリットは主に次の3つです。

• 同じコードを何度も書かずに済む
• 処理の意味が名前で分かるようになる
• 修正箇所を1か所にまとめやすい

2. JavaScriptで関数を書く基本形

もっとも基本的な書き方は、function を使う関数宣言です。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet("田中");

この例では、greet という名前の関数を定義し、後から greet("田中") のように呼び出しています。

書き方の流れは次のとおりです。

3. 引数と戻り値を理解すると実用的になる

関数は外から値を受け取り、その結果を返せます。これが引数と戻り値です。

function getTaxIncludedPrice(price) {
  return price * 1.1;
}

const total = getTaxIncludedPrice(1000);
console.log(total); // 1100

price が引数、price * 1.1 が戻り値です。こうしておくと、1000円でも2000円でも同じ関数を再利用できます。

初心者の方は、引数 = 入力、戻り値 = 出力 と考えると整理しやすいです。

4. 関数宣言と関数式の違い

JavaScriptでは、関数は function で宣言する以外に、変数へ代入する形でも書けます。これを関数式といいます。

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

動作の考え方は似ていますが、書き方や呼び出せるタイミングに違いがあります。関数式の基本を知りたい方は、関数式の記事も合わせて読むと理解が深まります。

また、最近のJavaScriptではこの関数式を短く書けるアロー関数もよく使われます。

5. 関数の中で作った変数は外では使えない

関数には独自のスコープがあります。つまり、関数の中で宣言した変数は、外からは参照できません。

function sample() {
  const message = "関数の中だけ";
  console.log(message);
}

sample();
// console.log(message); // ReferenceError

このルールを知っておくと、「なぜその変数が使えないのか」で悩みにくくなります。スコープをしっかり整理したい方は、JavaScriptのスコープ解説もおすすめです。

6. よくあるつまずき

関数を定義しただけで実行されたと思い込む

関数は定義しただけでは実行されません。最後に () を付けて呼び出して初めて動きます。

return と console.log を同じものだと思ってしまう

console.log は表示するだけ、return は関数の結果を返すためのものです。ここを区別できると、関数の理解が一気に進みます。

引数を受け取る関数に値を渡し忘れる

関数に必要な引数を渡さないと、undefined になることがあります。エラーではなく動いてしまう分、初心者が見落としやすいポイントです。

function greet(name) {
  console.log("こんにちは、" + name + "さん");
}

greet(); // こんにちは、undefinedさん

補足：関数を実務で使うときの見方

関数は、文法として覚えるだけでは少しもったいないです。実務では、関数を「処理を分けて、名前を付けて、あとから使いやすくするための部品」として使います。問い合わせフォーム、料金計算、入力チェック、画面の表示切り替えなど、同じような処理が何度も出てくる場面で特に役立ちます。

まずは、関数を入力から結果までの流れとして見てみます。関数が苦手な方は、function という単語よりも「引数・処理・戻り値」の3点に分けて考えると理解しやすくなります。

この図で見てほしいのは、関数の中に入るものと、関数から出てくるものです。引数は関数に渡す入力、戻り値は関数が呼び出し元へ返す結果です。たとえば税込価格を計算する関数なら、税抜価格が引数で、税込価格が戻り値になります。

function addTax(price) {
  return Math.floor(price * 1.1);
}

const total = addTax(1000);
console.log(total); // 1100

この例では、1000 が引数として関数に入り、計算された 1100 が戻り値として返っています。戻り値があるからこそ、結果を total に入れて、次の処理で使えます。

初心者が特につまずきやすいのが、return と console.log の違いです。どちらも画面上では何かが表示されることがあるため、同じものだと思いやすいですが、役割はまったく違います。

この画像では、関数の中で console.log(a + b) を実行しているため、画面には 5 が表示されます。しかし、関数が return していないため、result には undefined が入ります。

実務でよくあるのは、デバッグ中に console.log で値が見えたため「関数が値を返している」と勘違いするケースです。画面に表示するだけなら console.log で十分ですが、その計算結果を別の関数へ渡したり、画面表示に使ったりするなら return が必要です。

もうひとつ大事なのは、関数名です。関数名はコメントの代わりにもなります。calc のような曖昧な名前より、calculateTotalPrice や validateEmail のように、何をする関数なのか分かる名前にすると、あとから読む人が理解しやすくなります。

関数を理解したら、次は アロー関数 や コールバック関数 へ進むと自然です。どちらも関数の考え方を土台にしているため、引数と戻り値を押さえておくと一気に読みやすくなります。

関数に切り出すか迷ったときの判断

初心者のうちは、どこまでを関数にすればよいか迷いやすいです。判断の目安は、「同じ処理が2回以上出てくるか」「処理に名前を付けると読みやすくなるか」です。同じ計算、同じチェック、同じ表示処理が何度も出てくるなら、関数に切り出す価値があります。

たとえば、メールアドレスの形式チェックを複数の画面で使うなら、毎回同じコードを書くより validateEmail のような関数にまとめたほうが安全です。あとでチェック条件を変えたいときも、修正箇所を1つにできます。

function validateEmail(email) {
  return email.includes("@");
}

if (!validateEmail(inputValue)) {
  console.log("メールアドレスを確認してください");
}

この例では、メールアドレスらしいかを確認する処理を関数にしています。実務ではもっと厳密なチェックが必要になることもありますが、「何を確認している処理なのか」が関数名で分かる点が大きなメリットです。

よくあるミスを防ぐコツ

• 関数を作っただけで満足せず、必要な場所で呼び出す
• 戻り値を使うなら、必ず return を書く
• 関数名は「何をするか」が分かる動詞から始める
• 1つの関数に、関係ない処理を詰め込みすぎない

関数を小さく分けるメリット

関数を小さく分けると、コード全体の流れが追いやすくなります。たとえば、会員登録画面の処理を考えると、入力値を取得する、メールアドレスをチェックする、パスワードをチェックする、エラーを表示する、送信する、という複数の役割があります。これを1つの大きな関数に全部入れると、どこで何をしているのか分かりにくくなります。

一方で、それぞれを関数に分けると、処理の名前を見るだけで流れを読めるようになります。getFormValues、validateEmail、showErrorMessage のように分けておけば、細かい中身を読む前に全体像をつかめます。

もちろん、何でも細かく分ければよいわけではありません。1回しか使わず、名前を付けても分かりやすくならない処理まで無理に関数化すると、逆に読みにくくなります。まずは「同じ処理が繰り返される」「名前を付けると意味が伝わる」「修正箇所をまとめたい」という場面から関数化するとよいです。

関数を書くときの順番

関数を書くときは、いきなり文法から入るよりも、「何を受け取るか」「何を返すか」「関数名を何にするか」の順番で考えると整理しやすいです。たとえば税込価格を計算するなら、受け取るのは税抜価格、返すのは税込価格、関数名は addTax や calculateTaxIncludedPrice のようになります。

この順番で考えると、関数の中身も自然に決まります。引数が足りない、戻り値を返し忘れる、関数名と処理内容が合っていない、といったミスにも気づきやすくなります。

• まず、関数に渡す入力を決める
• 次に、呼び出し元へ返す結果を決める
• 最後に、処理内容が分かる名前を付ける

関数は、JavaScriptだけでなく多くのプログラミング言語で使う基本です。ここで「入力、処理、戻り値」の感覚をつかんでおくと、アロー関数、コールバック関数、Promise、async/awaitを学ぶときにも土台になります。

関数は、コードを短くするためだけのものではありません。処理に名前を付け、あとから読み返しやすくし、修正しやすくするための整理方法でもあります。

実務では、関数を作ったあとに「この関数は何を知らなくてよいか」も考えます。たとえば、税込価格を計算する関数なら、画面のどこに表示するかまでは知らなくて構いません。計算は計算、表示は表示に分けると、修正時の影響範囲が小さくなります。

この分け方ができると、同じ関数を別の画面でも使いやすくなります。商品一覧、カート、注文確認画面で同じ計算を使う場合、計算処理を1つにまとめておけば、税率や丸め方を変えるときも修正漏れを防げます。

初心者のうちは、まず「関数名だけを読んで処理の目的が想像できるか」を確認してみてください。名前を見ても目的が分からない場合は、処理を詰め込みすぎているか、名前が曖昧な可能性があります。

関数は、プログラムの中に小さな見出しを作るようなものです。適切に分けられた関数は、コード全体を読みやすくし、ミスが起きたときに調べる場所を見つけやすくしてくれます。

また、関数を小さくしておくとテストもしやすくなります。入力に対して期待した戻り値が返るかを確認できるため、画面全体を動かさなくても一部の処理だけを検証できます。

関連して学びたい記事

• JavaScriptの関数式とは？
• JavaScriptのアロー関数とは？
• JavaScriptのスコープとは？

まとめ

JavaScriptの関数は、文法そのものよりも「何のために使うのか」が分かると覚えやすくなります。まずは短い関数を自分で書いて、引数と戻り値の流れに慣れていくのがおすすめです。

結論からいうと、alt属性とは、画像が見えない・読み上げられる・読み込めないときに、画像の意味を文字で補うための属性です。SEOのためだけにキーワードを詰める場所ではなく、画像が伝えている内容をテキストで伝えるために使います。

まず見てください：alt属性は画像の意味を文字で補う

alt属性の役割は、画像の代わりになる説明文を用意することです。まずは、imgタグにalt属性を書いたコードと、ブラウザ側で画像の意味がどう補われるかを並べて見てみましょう。

この画像で大切なのは、alt属性が「画像ファイルの名前」ではなく「画像が伝えている意味」を補う点です。左側の alt="ログイン画面の入力例" は、右側の画像が見えない・読み上げられる場面でも、何の画像なのかを伝えるための文章です。装飾だけの画像なら、例のように alt="" と空にすることもあります。

alt属性は「この画像が見えなかったら、何と説明すれば伝わるか」で考えると書きやすいです。

結論：alt属性は画像の代替テキストを書く場所

alt 属性は、imgタグ に書く代替テキストです。代替テキストとは、画像そのものが使えないときに、画像の役割や内容を文字で伝えるための説明です。

<img src="contact-form.png" alt="問い合わせフォームの入力例">

この例では、画像が「問い合わせフォームの入力例」を示していることをalt属性で伝えています。画像ファイル名の説明ではなく、ページを読んでいる人にとって必要な意味を言葉にしている点が重要です。

alt属性が必要な理由

alt属性が必要な理由は、大きく3つあります。どれも「画像が見える人だけに情報が偏らないようにする」ためのものです。

• 画像が読み込めないときに内容を補える
• スクリーンリーダーなどで画像の意味を伝えやすくなる
• 検索エンジンにも画像の内容を理解してもらいやすくなる

ただし、SEOだけを目的に不自然なキーワードを詰め込むのは逆効果です。alt属性は、あくまで画像の代わりになる説明です。ページの内容と関係ない言葉や、同じキーワードの連続は避けます。

alt属性の基本的な書き方

基本形は、imgタグの中に alt="説明文" を書きます。説明文は長すぎず、画像の意味が伝わる自然な日本語にします。

<img src="login-screen.png" alt="ログイン画面でメールアドレスとパスワードを入力する例">

このように書くと、画像が表示されない状況でも「ログイン画面の入力例を示す画像だ」と分かります。単に alt="画像" や alt="login-screen" とするより、読者にとって意味が伝わりやすくなります。

画像の種類ごとにaltの書き方を変える

alt属性は、すべての画像に同じテンションで説明を書けばよいわけではありません。画像がページ内でどんな役割を持っているかによって、書き方を変えます。

装飾画像に長い説明を入れると、読み上げ時に余計な情報が増えてしまいます。逆に、内容を伝える画像のaltが空だと、画像を見られない人に必要な情報が届きません。画像の役割を見て、説明するか空にするかを判断します。

実務で使うalt属性の例

ブログや企業サイトでは、alt属性を書く場面が多くあります。たとえば記事内の説明画像、商品写真、サービス紹介の図、操作手順のスクリーンショットなどです。

<img src="html-form-example.png" alt="HTMLフォームで氏名とメールアドレスを入力する例">

<img src="service-flow.png" alt="問い合わせから契約までの流れを示す図">

<img src="decoration-line.png" alt="">

1つ目と2つ目は、画像そのものが情報を持っているため説明を書いています。3つ目は装飾線のような画像を想定しているため、空のaltにしています。すべての画像へ機械的に文章を入れるのではなく、画像の役割に合わせるのがポイントです。

title属性やファイル名との違い

alt属性は、title属性や画像ファイル名とは役割が違います。混同しやすいので、ここで整理しておきます。

たとえば img001.png というファイル名では、画像の意味はほとんど伝わりません。title属性も補足には使えますが、alt属性の代わりとして考えないほうが安全です。

alt属性でよくあるミス

• alt="画像" のように意味が伝わらない説明にする
• 画像と関係ないSEOキーワードを詰め込む
• 装飾画像にも長い説明を入れてしまう
• 内容を伝える画像なのに alt="" にしてしまう
• title属性を書いたからalt属性はいらないと思い込む

alt属性は、短ければよい、長ければよいというものではありません。大事なのは、画像を見られない人にもページの意味が伝わることです。迷ったら「この画像が表示されなかったら、どんな一文があれば困らないか」と考えてみてください。

まとめ

alt属性は、imgタグで表示する画像の意味をテキストで補うための属性です。画像が見えない状況、読み上げ環境、検索エンジンの理解などに関わるため、HTMLを書くうえでとても重要です。

• alt属性は画像の代替テキストを書く場所
• 画像のファイル名ではなく、画像が伝える意味を書く
• 装飾だけの画像では alt="" を使うことがある
• SEOキーワードの詰め込みではなく、自然な説明を意識する

画像表示そのものの基本を復習したい場合は、imgタグの解説 や HTML属性の基本 も合わせて読むと、alt属性の位置づけがより分かりやすくなります。

なぜなら、sectionタグは label のように画面上の見え方が大きく変わるタグではない からです。

そこで今回は、定義から入るのではなく、まず「1ページの中で section をどこに使うのか」を実例で見てから意味を整理します。sectionタグは、見た目を装飾するためのタグではなく、ページの中にある話題の区切りを表すためのタグです。

まず見てください：section は 1 ページの中の話題ごとに使う

下の画像は、サービス紹介ページをイメージした例です。ページ全体の主内容があり、その中に「特徴」「料金プラン」「よくある質問」といった話題のまとまりが並んでいます。このような 同じページの中で話題が切り替わる単位 を section と考えると、かなり分かりやすくなります。

この画像で見てほしいのは、section が「見た目の箱」ではなく「話題の単位」を表している点です。ページ全体は main のイメージで、その中に「特徴」「料金プラン」「FAQ」など、1つのテーマとして読めるまとまりが入っています。section は、このまとまりごとに「ここからここまでが同じ話題です」と示すために使います。

• ページ全体の主内容は main で考える
• その中にある話題ごとの区切りが section
• 各 section には見出しがあると、何のまとまりかが一目で伝わる

section は「ただ囲むタグ」ではなく、「このページの中で話題がここで切り替わります」と示すタグです。

結論：sectionタグは 1 ページ内の話題のまとまりを表すタグ

結論からいうと、sectionタグとは、文書やページの中にある「意味のある話題のまとまり」を表すためのタグです。特徴、料金、よくある質問、概要、手順、注意点のように、1つのテーマとして読める単位を分けたいときに向いています。

つまり、sectionタグは「見た目を整えるための箱」ではなく、ページの内容を章や節のように分けるためのタグです。

前提：section は見た目を変えるタグではないので、初心者は迷いやすい

sectionタグが分かりにくい理由は、使ってもブラウザ上の見た目が劇的に変わるわけではないからです。<div> で囲んでも、<section> で囲んでも、CSS を当てなければ表示結果はかなり似ています。

だから初心者のうちは、「見た目が同じなら div でよいのでは？」と感じやすいです。ただし HTML では、見た目だけでなく その部分が何を表しているか も大切です。MDN でも、section は一般的なセクションを表す要素で、スタイル用ラッパーに過ぎないなら div を使うべきだと説明されています。

つまり section を理解するコツは、「見た目で違いを探すこと」ではなく、「この部分は同じ話題として読めるまとまりか」を考えることです。

基本の書き方は、見出し付きのまとまりを section で囲む形

もっとも基本的で分かりやすい書き方は、見出しと本文を1つのまとまりとして section で囲む方法です。サービス紹介ページや記事本文の一部をイメージすると自然に理解できます。

<main>
  <section>
    <h2>特徴</h2>
    <p>このサービスの特徴を紹介します。</p>
  </section>

  <section>
    <h2>料金プラン</h2>
    <p>月額料金や無料プランを説明します。</p>
  </section>

  <section>
    <h2>よくある質問</h2>
    <p>導入前によくある質問をまとめます。</p>
  </section>
</main>

この例では、ページ全体の主内容が main で、その中に3つの話題のまとまりがあります。各まとまりは、それぞれ独立した話題として読めるので section を使うのが自然です。見出しが入っているので、「このまとまりは何について書いているか」もすぐ分かります。

MDN でも、section には少数の例外を除いて見出しを置くよう案内されています。初心者のうちは、section を使うなら見出しもセットで考えると覚えておくと失敗しにくいです。

div・article・main との違いをページの役割で整理すると分かりやすい

sectionタグが難しく感じる最大の理由は、似たタグが近くにあるからです。ここは「見た目」ではなく「役割」で分けると整理しやすくなります。

たとえばブログ記事ページなら、記事本文全体が main の中にあり、その中に「概要」「手順」「注意点」といった section が入るイメージです。逆に、ブログ記事1本そのものを表したいなら article が向いています。横並びのレイアウトや装飾のために囲むだけなら div のほうが自然です。

迷ったときは、次のように考えるとかなり整理しやすいです。1ページの中の話題なら section、単体で完結する記事なら article、見た目のためだけなら div です。

section を使うと自然な場面

sectionタグは抽象的に見えますが、実際にはかなり身近な場面で使いやすいタグです。特に次のようなページでは、section の考え方がそのまま活きます。

• サービス紹介ページの「特徴」「料金」「導入事例」「よくある質問」
• 会社紹介ページの「事業内容」「実績」「採用情報」「お問い合わせ案内」
• ブログ記事の「概要」「手順」「注意点」「まとめ」
• ドキュメントページの「前提」「設定方法」「確認方法」

共通しているのは、どれも「1ページの中に複数の話題がある」ことです。section は、こうしたページを意味のある単位に分けて考えるときにとても役立ちます。

逆に、単なるカードの横並びや余白調整のために囲むだけなら、section より div のほうが自然です。意味ではなくレイアウトが目的だからです。

よくあるミスと迷いどころ

• 見た目の囲みとしてだけ section を使っている
• 何の話題か説明できないブロックまで section にしている
• 独立した記事なのに section だけで済ませている
• 見出しのない section を大量に並べて、まとまりの意味が見えにくくなっている

一番大切なのは、「この部分は何のまとまりですか？」と聞かれたときに答えられることです。答えられるなら section の可能性がありますし、答えられないなら div のほうが自然なことが多いです。

また、MDN では section よりも具体的な意味を持つ要素があるなら、そちらを優先すると説明されています。たとえばページの主内容なら main、独立した記事なら article、ナビゲーションなら nav です。section は便利ですが、何でも section にすればよいわけではありません。

まとめ

sectionタグは派手なタグではありませんが、セマンティックHTMLを理解するうえでとても大事です。まずは「1ページの中で話題が変わる場所を区切るタグ」と覚え、サービス紹介ページや記事本文の構成を section の視点で見てみると、使いどころがかなり掴みやすくなります。

関連する考え方も一緒に整理したい方は、セマンティックHTMLとは？、divタグの使い方、mainタグの意味と使い方 も続けて読むと、役割の違いがさらに見えやすくなります。