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

displayプロパティは初心者にとって理解しづらい部分ではありますが、CSSでのレイアウト整理において最も基本的で重要な役割を担っています。このページでは、displayプロパティの意味と使い方をサンプルコード付きで１から解説していきます。

Web担当者やWebデザイナーを目指す方であれば、絶対に知っておきたい重要知識ばかりですので是非最後までご覧ください。

【前提】CSSの基本―プロパティとは？

HTMLの各要素の色や形を変える（デザインを変更する）役割を担うのが、CSS（Cascading Style Sheet）の役割でした。CSSの基本構造は「①どの要素の」「②どの部分を」「③どのように変えるか？」という３つの情報から成り立ちます。

「②どの部分を」の情報をCSSでは「プロパティ」と呼びます。本ページで紹介するdisplayも、CSSで指定する「プロパティ」の一種です。

CSSの基本を丁寧に復習したい方はまずはこちらの記事をご覧ください。

【初心者向け】CSSとは？３分でわかりやすく簡単に解説

【初心者向け】CSSとは？３分でわかりやすく簡単に解説 - CSS（Cascading Style Sheets）の基本概念、セレクタとプロパティについて、初心者にも理解しやすい言葉で解説します。Webページのデザインやレイアウトをコントロールする方法を短時間で学べます。

it-biz.online

2023.04.18

ブロックレベル要素とインライン要素

displayプロパティを理解するためには、インライン要素とブロック要素の違いを押さえましょう。

ブロックレベル要素とインライン要素を用いて実際のWebページを作成した例がこちらです。

<h2>ブロック要素</h2>
<p>pタグはブロック要素です。</p>
<p>そのため、pタグで囲まれた範囲は行全体に広がります。</p>
<div>背景色が行全体に広がります。</div>
<p>新しく定義したブロック要素は必ず改行されて表示されます。</p>

div{
  background-color:#f5ef42;
}

インライン要素とブロックレベル要素の違いについては、以下のページでも詳しく解説しております。

【HTML】インライン要素とブロック要素の違いを３分でわかりやすく解説

HTMLのインライン要素とブロック要素の違いをわかりやすく解説！3分で理解できるコンパクトなガイド。要素の配置、幅と高さ、余白と境界線、要素の含有についての違いを簡潔に説明します。

it-biz.online

2023.04.20

displayプロパティの意味と使い方

displayプロパティは、要素の表示形式を変更することができるプロパティです。このプロパティを用いることで、要素レベル（ブロックレベル要素 / インライン要素）を変更することが可能になります。

例えば、divタグはデフォルトではブロックレベル要素ですが、displayプロパティを用いて「インライン要素」に変更することができます。

ここでは、プロパティが取る代表的な４つの値を解説していきます。それぞれどのように利用されるのか？をイメージできるようにしましょう。

display: block

「display: block」とすると、対象の要素を「ブロックレベル要素」に変更することができます。

以下のタグはデフォルトで「display: block」となっています。

【HTML】divタグの使い方とコツを３分でわかりやすく解説

HTMLにおけるdivタグの基本的な使い方と、実際のWebページでの活用例、そしてdivタグを使う際のコツや注意点について、3分でわかりやすく解説します。初心者でも理解しやすいように、図解付きで丁寧に説明します。

it-biz.online

2024.03.21

【HTML】hタグ（見出し）タグ：h1~h6を３分でわかりやすく解説

【Webエンジニア向け】hタグ（見出し）タグ：h1~h6 の意味と使い方、注意点をわかりやすく３分で解説します。

it-biz.online

2023.03.14

display: inline

「display: inline」とすると、対象の要素を「インライン要素」に変更することができます。

以下のタグはデフォルトで「display: inline」となっています。

【HTML】aタグ（リンク）の基本を３分でわかりやすく

【Webエンジニアを目指すなら】初心者向けにHTMLのaタグ（リンクタグ）の基本・使い方をサンプルコード付きで解説。target属性・title属性の使い方まで網羅的にご説明します。

it-biz.online

2023.03.14

【HTML】spanタグ：使い方と実践的な例を３分でわかりやすく解説

スタイリングの秘密兵器：spanタグの活用法とHTMLでの使い方をIT初心者向けに１からわかりやすくサンプルコード付きで解説します。初心者から上級者になるために、spanタグのHTMLにおける活用法とポイントをご説明します。

it-biz.online

2023.03.18

【HTML】img（画像タグ）を３分でわかりやすく解説

【初心者向け】HTML imgタグの基本を理解し、画像を効果的に表示する方法を学びましょう。src、alt、width、height属性の使い方や注意点、アクセシビリティやSEO対策など、初心者にも分かりやすい解説が盛りだくさんです。

it-biz.online

2023.04.04

display: inline-block

「display: inline-block」を指定すると、ブロックレベル要素とインライン要素の両方の特徴を兼ね備えた要素として表示されます。

といっても、難しく考える必要はありません。結論「inline-blockは、ブロックレベル要素だけど横に並ぶ」と理解しておけばOKです。

display: none

「display: none」を指定すると、対象が非表示となります。

あくまでも非表示にするだけなので、ブラウザでは対象の要素を読み込みに行くことになります。したがって、ページを軽くしようとする目的で「display: none」を利用しても全く意味がありません。

HTML/CSSを体系的に学びたい方は

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

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

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

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

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

it-biz.online

2023.05.30

結論「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のデータバインディングも一緒に読むと、初期化した値が画面に表示される流れを理解しやすくなります。