NFS（Network File System）とは、ネットワーク越しに他のコンピュータのディスク（フォルダ）を、自分のローカルディスクのように扱えるようにする通信プロトコルです。

一言でいうと、

「遠くにあるフォルダを、手元にあるかのように使える技術」

これがNFSの本質です。

NFSはもともと Sun Microsystems によって開発され、現在ではLinux/Unix系システムを中心に、サーバ環境で広く使われています。

そもそも「ファイル共有」が必要になる理由

まず前提として、現代のシステムでは次のような状況がよくあります。

• サーバが複数台ある
• それらが同じデータを参照する必要がある
• 画像・帳票・ログ・アップロードファイルなどを一元管理したい

例：

• Webサーバが3台ある
• どのサーバからアクセスしても同じ画像フォルダを使いたい

このとき各サーバに同じファイルをコピーして回るのは現実的ではありません。

そこで登場するのが NFS です。

NFSの基本的な仕組み

登場人物はたった2つ

NFSは、とてもシンプルな構成です。

サーバ側で共有設定したディレクトリを、クライアント側で mount（マウント）すると、クライアントからは普通のフォルダとして見えるようになります。

構造を簡略化すると、次のようになります。

[NFSクライアント] ─── ネットワーク ─── [NFSサーバ]
        |
     /mnt/share   ← 実体はサーバ側ディスク

ポイントはここです。

• クライアントから見ると /mnt/share は普通のフォルダ
• しかし実体はNFSサーバ上に存在

アプリケーションは「ローカルファイル」だと思って読み書きしますが、裏ではNFSがネットワーク越しに通信しています。

NFSを使うと何が嬉しいのか？

代表的なメリットは次の3つです。

1. アプリケーションを変更しなくてよい

NFSは「ファイルシステム」として見えるため、

• 特別なAPI
• 専用ライブラリ

が不要です。

既存アプリはそのままで、

/data/file.txt

を読むだけ。
それがたまたまNFSなだけ、という状態になります。

2. 複数サーバで同じデータを共有できる

典型構成：

WebサーバA ─┐
WebサーバB ─┼─ NFSサーバ
WebサーバC ─┘

これにより、

• アップロードファイル
• 画像
• 帳票

などを1か所に集約できます。

3. 構成がシンプル

最低限必要なのは：

• NFSサーバ
• NFSクライアント

だけ。

大規模な分散ストレージと比べると、導入・理解・運用のハードルが低いのも特徴です。

ローカルディスクとNFSの違い

感覚的な違いを表にまとめます。

見た目は同じ、裏側が違う。
これが最大のポイントです。

超かんたん：NFSの利用イメージ（概念）

サーバ側（共有する）

/share

というフォルダを公開。

クライアント側（使う）

mount サーバ:/share /mnt/share

すると、

/mnt/share

が現れ、普通のフォルダとして操作可能になります。

以降は：

• ls
• cp
• vi

すべて通常通り。

実務で必ず意識すべき注意点

便利なNFSですが、設計時には以下が重要です。

● ネットワーク＝性能

ファイルI/Oはすべてネットワーク越し。
大量アクセス時はボトルネックになります。

● NFSサーバは単一障害点になりやすい

NFSサーバが落ちると、

→ 接続している全クライアントが影響を受けます。

冗長化設計が重要になります。

● 同時書き込み

複数マシンから同じファイルを書く場合、

• ロック
• 整合性

を意識しないと事故が起きます。

まとめ

最後に要点を整理します。

• NFSとは「遠隔フォルダをローカルのように使える」プロトコル
• サーバが公開、クライアントがマウントするだけ
• アプリは通常のファイル操作のまま利用可能
• 複数サーバでのデータ共有が簡単
• 一方で、性能・単一障害点・同時更新には注意が必要

enum Season {
    SPRING, SUMMER, FALL, WINTER;
}

「曜日」「四季」のように、選択肢が限られているものを表現するために使用されるため、enumは「選択肢の管理者」のような役割を果たします。

+---------------------+
|       enum Day      |  <-- 列挙型 (enum)
+---------------------+
| - MONDAY            |  <-- 定数1
| - TUESDAY           |  <-- 定数2
| - WEDNESDAY         |  <-- 定数3
| - THURSDAY          |  <-- 定数4
| - FRIDAY            |  <-- 定数5
| - SATURDAY          |  <-- 定数6
| - SUNDAY            |  <-- 定数7
+---------------------+

Javaの列挙型（enum）とは？

enumは、決まった範囲の値を１つの型としてまとめる役割を持つデータ型の一種（厳密にはjava.lang.Enumを継承したクラスとして扱われます）。

具体的な例として、曜日（MONDAY、TUESDAY）や四季（SPRING、SUMMER）を扱う際に便利なデータ型です。

例え話：レストランの注文で・・・

• レストランでは「ラーメン」「カレー」「ハンバーグ」など、メニューから選んで注文します。これ以外の注文が来ても対応できません。同様に、enumを使えば、プログラム内で定義した選択肢以外の無効な値を防ぐことができます。

enumを使わない場合の問題

選択肢を文字列（String）で扱う場合、タイプミスや異なる表記によるエラーが発生しやすくなります。以下の例を見てください。

// Stringを使った例（エラーの原因）
String day = "Mondai"; // スペルミスによるバグ

// enumを使った例（安全）
Day day = Day.MONDAY; // 決まった選択肢だけが使用可能

要するにタイプミスやコーディングミスを制限するために役立つのがenumのもう１つの側面でもあります。

enumの基本的な使い方：構文ルール

以下のように、Javaのenumは特定の選択肢を定数として宣言します。

public enum Day {
    MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY
}

ポイント　enumの基本的な性質：不変性

• 要素の追加・削除不可：enumの宣言後に要素を追加したり削除することはできません。
• 要素の再代入不可：プログラムの実行中にenumの要素を新しい値に変更することはできません。
• 定数はすべて暗黙的にfinalかつstatic：そのため、インスタンス化も変更もできません。

public enum Day {
    MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY;
}

// 以下のコードはコンパイルエラーになる
Day today = Day.MONDAY;
// today = "Holiday"; // エラー: 型が一致しない

※enumの要素は型名.要素名で呼び出します（例：Day.MONDAY）。

public enum Color { RED, GREEN, BLUE; }

public final class Color extends java.lang.Enum<Color> {
    public static final Color RED = new Color("RED", 0);
    public static final Color GREEN = new Color("GREEN", 1);
    public static final Color BLUE = new Color("BLUE", 2);
    private static final Color[] $VALUES = { RED, GREEN, BLUE };

    private Color(String name, int ordinal) {
        super(name, ordinal);
    }

    public static Color[] values() {
        return $VALUES.clone();
    }

    public static Color valueOf(String name) {
        return Enum.valueOf(Color.class, name);
    }
}

enumの活用例

enumの要素は定数（staticなインスタンス）として定義されているので、クラス名.要素名の形で呼び出せます。

// 列挙型(enum)の定義
enum Day {
    MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY;
}

public class EnumExample {
    public static void main(String[] args) {
        // 今日の曜日を設定
        Day today = Day.MONDAY;

        // 曜日に応じた条件分岐
        if (today == Day.MONDAY) {
            System.out.println("今日は月曜日です！");
        } else {
            System.out.println("今日は月曜日ではありません。");
        }
    }
}

出力例:

今日は月曜日です！

enumもクラスの一種！そして、enumの各定数は自動的にstatic finalなインスタンスとして生成される！

という点だけ頭に入れておけば基本的には自由に使いこなすことができるはずです。

enumの応用例

ここからは、enumの応用編です。より実践に近づけながら解説します。

enumにメソッドを追加する

enumは定数の集合だけでなく、メソッドを持たせることで、より柔軟な使い方が可能です。

参考　メソッドとは？

enumにメソッドを持たせる理由はなんでしょうか？

例えば「四季」や「状態」を表すenumがあったとしましょう。各季節に「気候の説明」を持たせたい場合、ただの定数ではそれを表現するのは難しいです。ここで、メソッドを使えば、それぞれの要素に必要な情報を持たせ、簡単に取得できるようになります。

// enumの定義：四季に説明を持たせる
enum Season {
    SPRING("暖かい"), 
    SUMMER("暑い"), 
    FALL("涼しい"), 
    WINTER("寒い");

    private final String description; // 各要素の説明を保持するフィールド

    // コンストラクタ：各要素を初期化
    Season(String description) {
        this.description = description;
    }

    // 説明を取得するメソッド
    public String getDescription() {
        return description;
    }
}

public class EnumMethodExample {
    public static void main(String[] args) {
        // SUMMERの説明を取得
        Season currentSeason = Season.SUMMER;
        System.out.println("今の季節は " + currentSeason + " で、" + currentSeason.getDescription() + "です。");
    }
}

出力結果：

今の季節は SUMMER で、暑いです。

enumの内部動作

enumは、内部的にクラス（参考　クラスとは？）として実装され、各要素はシングルトンインスタンスとして生成されます。つまり、同じenum要素を比較する際に==を使うことができ、常に正しい比較が保証されます。

1. enumがクラスとして実装されるとは？

Javaでは、enumはコンパイル時に特別なクラスとして変換されます。これは、各enum要素が通常のクラスインスタンスとして扱われるという意味です。しかし、開発者が自分でインスタンスを生成したり変更することはできません。

enumの内部クラス構造イメージ

以下は、enumが内部的にどのような形でクラスとして扱われるかをイメージ化したものです。

// 実際にはJavaコンパイラによってこのようなクラスに変換される
public final class Day extends Enum<Day> {
    public static final Day MONDAY = new Day("MONDAY", 0);
    public static final Day TUESDAY = new Day("TUESDAY", 1);
    // 他の曜日も同様に定義

    private Day(String name, int ordinal) {
        super(name, ordinal);
    }
}

2. シングルトンパターンの適用

• シングルトンパターンは、あるクラスのインスタンスが1つだけ存在することを保証するデザインパターンです。
• enumでは、このシングルトンの特性が自動的に適用されます。

enum要素はシングルトン

enumの各要素（例：MONDAY、TUESDAY）は、プログラム全体で一度だけ生成されるインスタンスです。これにより、同じ要素同士を比較するときに==演算子を使って正しく比較できるのです。

3. ==演算子による比較の正しさ

通常、Javaでは==演算子はオブジェクトの同一性（同じインスタンスかどうか）をチェックします。例えば、newキーワードで作成したオブジェクト同士を==で比較すると、異なるインスタンスなのでfalseになります。

例：newで作成したオブジェクトの比較

String a = new String("Hello");
String b = new String("Hello");
System.out.println(a == b);  // false

上記の例では、aとbは同じ内容でも、異なるインスタンスなのでfalseになります。

enumでの比較

しかし、enumの場合、各要素はシングルトンとして管理されているため、同じenum要素は常に同じインスタンスです。

Day day1 = Day.MONDAY;
Day day2 = Day.MONDAY;
System.out.println(day1 == day2);  // true

ポイント　enumの内部動作

• 各要素はstatic finalなインスタンスとして扱われます。
• Javaコンパイラはenumをクラスとして変換し、最適化します。
• ordinal()メソッドを使うと、要素のインデックスを取得できますが、順序に依存しない設計が推奨されます。

実務でのenumの活用例

プロジェクトの進捗状況の管理

public enum Status {
    PENDING, IN_PROGRESS, COMPLETED
}

プロジェクトの進捗を管理する際、enumを使って状態を表現することで、管理を簡潔にします。

Status projectStatus = Status.IN_PROGRESS;
if (projectStatus == Status.COMPLETED) {
    System.out.println("プロジェクトが完了しました！");
}

switch文との連携

switch文(参考　switch文の基本)とenumの組み合わせは、条件分岐を簡潔かつ可読性高く実装するのに有効です。

public class EnumSwitchExample {
    public static void main(String[] args) {
        Day day = Day.FRIDAY;

        switch (day) {
            case MONDAY:
                System.out.println("仕事が始まる日");
                break;
            case FRIDAY:
                System.out.println("週末の前日！");
                break;
            default:
                System.out.println("平日");
        }
    }
}

出力例:

週末の前日！

enum Day {
    MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY;
}

Day today = Day.MONDAY;
if (today == Day.MONDAY) {
    System.out.println("今日は月曜日です！");
}

この記事では、①JavaScriptで関数を定義する方法、②関数に情報（引数）を渡す方法、③関数から結果（戻り値）を受け取る方法を、初心者でも理解しやすいように順を追って１から解説します。

サンプルコード　JavaScriptの関数の基本

// 2つの数値を受け取り、それらの和を返す関数
function add(a, b) {
    return a + b;
}

// 関数の使用例
let sum = add(5, 3);
console.log(sum); // 出力: 8

実際のプログラミングで関数がどのように役立つかについて、具体的な使用例を通じて紹介します。

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

JavaScript：関数の基本

関数はプログラミングにおいて非常に重要な概念です。関数は特定のタスクを実行するコードの集まり（＝部品）であり、コードの再利用性を高めつつプログラムの構造を明確にし保守を容易にする役割があります。

はじめに関数の基本的な概念についておさらいしておきます。「関数」の基礎理解はある！という方はこの章は読み飛ばしてください。

関数とは？

関数とは一連の処理をまとめたコードのブロック（＝部品）です。関数を使うことで、同じコードを何度も書く必要がなくなり、コードの重複を避けることができます。

参考　プログラミングにおける「関数」とは？

例えば、１つの「メッセージを表示」させたり「ポップアップ」を表示させたり「日付を計算したり」という共通的な処理については、１つの機能の中で何度も登場します。このとき、毎回同じコードを都度記述していくのは大変です。そんなときに予め関数を定義しておいて、必要なタイミングでその関数を呼び出すような形にすることで、必要最低限のコード分量で開発が完了します。

関数を使用することで、プログラムを小さな単位に分割し、各部分を独立させることが可能になります。

ポイント　関数を利用するメリット

1. 再利用性
   • 一度定義した関数は、プログラムのどこからでも何度でも呼び出すことができる。
2. 構造化
   • 関数を使用することで、コードを小さな単位に分割し、プログラムの構造を明確にすることができる。
3. 保守性の向上
   • プログラムを関数に分割することで、特定の機能を修正する際に影響を受ける範囲を限定し、保守性を向上させることができます。

関数はJavaScriptプログラミングの基礎を形成し、効率的で読みやすいコードを書くために必要不可欠。ここからは本編、関数の定義方法について詳しくご説明します。。

JavaScript：関数宣言（function）

JavaScriptにおける関数の定義方法は主に2つあります。
→①関数宣言（Function Declarations）と②関数式（Function Expressions）。

この章では、これらの定義方法をそれぞれサンプルコード付きで解説します。関数の呼び出し方も紹介します。

パターン１：関数宣言（Function Declarations）

この方法はJavaScriptにおける最も基本的な関数の定義方法です。この方法で関数を定義すると、関数名を指定してコードブロックをグループ化→その関数名を使っていつでもそのコードブロックを実行できるようになります。関数宣言はfunctionキーワードで始まり、以下の要素で構成されます。

function functionName(parameters) {
    // 関数の本体
    // ここに実行するコードを記述します
}

1. function
   • このキーワードは、JavaScriptにおいて関数を定義する際に使用。
     →関数を定義しますよ！という意味だと理解すればOK。
2. functionName
   • 関数名。この名前を使って後から関数を呼び出せます。（呼び出し方は後述）
3. parameters
   • 関数に渡される引数のリスト。引数はコンマ(,)で区切られます。関数に引数が必要ない場合は、このカッコは空にする。
4. 関数の本体
   • 中括弧{}で囲まれた部分。この中には、関数が呼び出されたときに実行されるコードが含まれます。

サンプルコード　関数宣言と呼び出し

// 2つの数値を受け取り、その和を返す関数
function add(a, b) {
    return a + b;
}

// 関数の呼び出し
const sum = add(5, 7);
console.log(sum); // 出力: 12

↑の例では、addという関数が定義されています。この関数は2つの引数aとbを受け取りその和を返します。関数を呼び出すときは、関数名addの後にカッコを付けその中に引数5と7を渡します。そして、この関数は2つの引数の和12を返し、それが変数sumに格納され、最後にコンソールに出力されます。

ここで、関数の基本である「引数」と「戻り値」について解説します。

引数（Parameters）

引数（またはパラメータ）は関数に渡される情報であり、関数がその操作を行うために必要なデータです。引数は関数の定義部分にリストされ、関数が呼び出される際に実際の値（引数値またはアーギュメント）として渡されます。

• 定義時の引数（パラメータ）：関数定義においてカッコ()内に指定される変数。これにより、関数は外部からのデータを受け取ることができる。
• 呼び出し時の引数（アーギュメント）：関数が実行される際に関数に渡される具体的な値。

function sample() {
    //処理
    return 式
}

戻り値（Return Value）

戻り値は、関数がその処理を完了した後に「返す」データです。return文を使用して関数から値を返すことができます。

サンプルコード　引数と戻り値

// 引数として2つの数値を受け取り、その和を戻り値として返す関数
function add(a, b) {
    return a + b;
}

// 関数を呼び出し、引数に5と7を渡す
const sum = add(5, 7);

// 戻り値をコンソールに出力
console.log(sum); // 出力: 12

↑の例では、add関数は2つの引数aとbを受け取りその和を計算して戻り値として返します。この関数を呼び出す際に5と7を引数として渡すと、関数はこれらの値の和12を返します。この戻り値は変数sumに格納され、コンソールに出力されています。

パターン２：関数式（Function Expressions）

関数式はJavaScriptにおける便利な機能の１つで、関数を変数に割り当てることができる表現方法です。関数式を使用すると、無名関数（匿名関数）を作成することが可能となり、これにより即時実行関数や高階関数（他の関数を引数として受け取る関数や関数を戻り値として返す関数）などの高度なプログラミングパターンを実装することができます。

ポイント　関数式の基本構文

const myFunction = function(parameters) {
    // 関数の本体
};

myFunctionは関数を参照する変数名。functionキーワードの後ろに続くのは関数のパラメータと本体です。

サンプルコード　関数式

// 関数式を使用して関数を定義
const greet = function(name) {
    console.log(`こんにちは、${name}さん!`);
};

// 関数を呼び出す
greet('太郎'); // 出力: こんにちは、太郎さん!

↑の例では、greet変数に関数式を割り当て。関数はnameという引数を受け取り、挨拶のメッセージをコンソールに出力しています。

無名関数（匿名関数）

関数式には２つの形式があります。

// 名前付き関数式
const myNamedFunction = function namedFunction() {
    console.log('名前付き関数式');
};

// 無名関数式
const myAnonymousFunction = function() {
    console.log('無名関数式');
};

1. 通常の関数式（名前付き関数式）
2. 無名関数（匿名関数式）

この２つの違いは関数に名前が付けられているか否か。以下では、それぞれの構文の違いと使い分けを解説します。

ポイント１　通常の関数式（名前付き関数式）

通常の関数式では関数に名前を付けます。これにより、関数内部から自身を参照することが可能になり、再帰呼び出しやデバッグが容易になります。名前付き関数式の構文は以下の通りです。

const myFunction = function functionName(parameters) {
    // 関数の本体
};

functionName：関数の名前。この名前を使用して関数自身を関数の本体内部で参照することができるようになります。

ポイント２　無名関数（匿名関数式）

無名関数では、関数に名前を付けません。これは一度きりの使用や、即時実行関数、コールバック関数などに便利です。無名関数式の構文は以下の通りです。

const myFunction = function(parameters) {
    // 関数の本体
};

↑の形式では関数は名前を持たず直接変数に割り当てられます。この関数を呼び出すには、変数名（この例ではmyFunction）を使用します。

JavaScript：関数の呼び出し・実行

ここからは定義した関数を呼び出す方法・実行する方法をいくつかのサンプルコード付きでご説明していきます。

パターン１：基本的な関数の呼び出し

関数を呼び出す基本的な方法は、関数名の後にカッコ()を付ける方法です。必要に応じてカッコ内で引数を指定します。

// 関数の定義
function sayHello(name) {
    console.log(`こんにちは、${name}さん!`);
}

// 関数の呼び出し
sayHello('太郎');

この例では、sayHello関数が定義されており、'太郎'という引数を渡して呼び出されています。結果として、こんにちは、太郎さん!というメッセージがコンソールに出力されます。

パターン２：引数を複数持つ関数の呼び出し

関数は複数の引数を受け取ることができます。関数を呼び出す際には、それらの引数をカンマで区切って渡します。

// 関数の定義
function add(a, b) {
    return a + b;
}

// 関数の呼び出し
const sum = add(5, 3);
console.log(sum); // 出力: 8

この例では、2つの数値を引数として受け取り、それらの和を返すadd関数を呼び出しています。

パターン３：関数を変数に割り当ててから呼び出す

関数式を使用して関数を変数に割り当て、その変数を通じて関数を呼び出すことができます。

const multiply = function(x, y) {
    return x * y;
};

const product = multiply(4, 5);
console.log(product); // 出力: 20

この例では、multiply変数に割り当てられた関数を使用して、2つの数値の積を計算しています。

パターン４：コールバック関数としての関数の呼び出し

関数を別の関数の引数として渡し、その関数内で呼び出すことができます。これは、非同期処理やイベント処理などで一般的に使用されます。

function processUserInput(callback) {
    const name = prompt('名前を入力してください:');
    callback(name);
}

processUserInput(sayHello);

この例では、processUserInput関数にsayHello関数をコールバックとして渡し、ユーザーからの入力に基づいてsayHello関数を呼び出しています。

JavaScript：関数を利用する際の注意点

JavaScriptで関数を利用する際には、いくつかの重要な注意点があります。これらを理解し、適切に対処することで、より効率的かつエラーの少ないコーディングが可能になります。

1. スコープの理解

JavaScriptでは、関数はそれ自身のスコープを持ちます。これは、関数内で宣言された変数は関数の外部からはアクセスできないことを意味します。しかし、関数内からは外部スコープの変数にアクセスすることができます。

let globalVar = "外部変数";

function testScope() {
    let localVar = "内部変数";
    console.log(globalVar); // アクセス可能
}

testScope();
console.log(localVar); // ReferenceError: localVar is not defined

2. 巻き上げ（Hoisting）

JavaScriptでは、関数宣言と変数宣言は巻き上げられます。つまり、コードの実行前に関数と変数がそのスコープの先頭に移動するような振る舞いをします。ただし、関数式は巻き上げの対象ではないため、宣言前に関数式を呼び出そうとするとエラーになります。

console.log(declaredLater); // undefined（巻き上げによりundefinedが返される）
var declaredLater = "宣言後に定義される変数";

declaredFunction(); // 正常に実行される

function declaredFunction() {
    console.log("関数宣言は巻き上げられる");
}

undeclaredFunction(); // TypeError: undeclaredFunction is not a function

var undeclaredFunction = function() {
    console.log("関数式は巻き上げられない");
};

3. 再帰関数の使用

再帰関数は自分自身を呼び出す関数です。無限ループに陥らないように終了条件を正しく設定することが重要です。

function countDown(number) {
    if (number <= 0) {
        console.log("完了");
        return;
    }
    console.log(number);
    countDown(number - 1);
}

countDown(3);

// 関数宣言
function greet(name) {
    console.log(`こんにちは、${name}さん!`);
}

// 関数式（無名関数を使用）
const sayGoodbye = function(name) {
    console.log(`さようなら、${name}さん!`);
};


// 関数の呼び出し
greet('太郎');
sayGoodbye('花子');
console.log(add(5, 3));

具体的には、ユーザーがページ上の要素をクリックしたり、キーボードを操作したりするたびにイベントリスナーはこれらのアクションを「聞き」プログラムされたタスクを実行するということです。

イベントリスナーを適切に利用することにより、Webサイトやアプリケーションに対してインタラクティブな体験を提供することが可能になります。この記事では、イベントリスナーの基本から、具体的な使用方法・コーディング方法まで、初心者でも理解しやすいように段階的に解説していきます。

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

イベントとは？

イベントとはユーザーがマウスやブラウザから特定のアクションを行うことです。マウスをクリックしたり、キーボードのキーを押したり。また、ページが読み込まれたり、ウインドウ（画面サイズ）がリサイズされるといったブラウザの動作などがその一例です。

以下に代表的なイベントを記載します。

これらのイベントは、Webページ上で発生する様々なユーザー行動やブラウザ状態の変化を表します。JavaScriptを使ってこれらのイベントを検出し、適切な応答をプログラムすることで、Webページをよりインタラクティブでユーザーフレンドリーなものにすることが可能です。

ザックリいえば、JavaScriptではユーザが起こしたアクションによって、様々な処理ができる！ということ。「〇〇をクリックしたら、表示を△△に変える」というようなことです。

このクリックなどの操作を「イベント」と呼ぶということをおさえておければOKです。

イベントリスナーとは？

イベントリスナーとは、特定のイベントが発生したときに実行される関数や処理のこと・その仕組みを指します。経てばユーザが「クリック」したら、入力チェックを行う・・・というような仕組みのこと。

参考　JavaScriptの関数

イベントリスナーはWebページ上の動的なインタラクションを可能にする概念の１つで、ユーザーがページ上で行う様々なアクション（例えば、クリックやキーボードの入力など）を捉え、それに応じた特定の反応をプログラムすることができます。

「ユーザがクリックしたら、関数〇〇を実行する」というような処理があるとすると、ユーザーがクリックするかどうかを見張っているのがイベントリスナーと言えます。

イベントリスナーの仕組み

イベントリスナーは、以下のような手順で機能します。詳しい仕組み後ほど解説するので、ここではイベントリスナーという仕組みの動作原理についての概要を押さえておきましょう。

1. イベントリスナーの登録
   • まずは、特定のイベントに反応するようにイベントリスナーを登録します。これは、対象となる要素に対して、監視したいイベントタイプと、そのイベントが発生したときに呼び出されるコールバック関数を指定します。
2. イベントの監視
   • イベントリスナーが登録されると、ブラウザは指定されたタイプのイベントがその要素で発生するのを監視し始めます。
3. イベントの発生と処理の実行
   • 対象のイベントが発生すると、ブラウザは事前に登録されたコールバック関数を呼び出し、プログラムされた処理を実行します。

イベントリスナーの使用例

JavaScriptでは、addEventListenerメソッドを使用するのがイベントリスナーを登録する基本的な方法の１つです。このメソッドは、対象の要素、イベントタイプ、そしてイベントが発生した際に実行される関数を引数に取ります。例えば、ボタンがクリックされたときにアラートを表示するイベントリスナーは次のように書くことができます。

document.getElementById('myButton').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

↑のコードは、ID：myButtonの要素に対してクリックイベントリスナーを追加しています。ボタンがクリックされると、アラートが表示されるというシンプルな処理を行っています。

このように、ユーザの何か特定の処理を「イベント」として検知し、そのイベントに対応する処理を記述することで様々な動的な画面制御を行うことができるようになるのが、このイベントリスナーという仕組み・概念です。

ここから、より実践的にイベントリスナーの定義方法・コーディング方法を詳しく解説していきます。

イベントリスナーの追加：addEventListener

イベントリスナーを追加するためのメソッドはaddEventListenerです。このメソッドを使用することで、特定の要素にイベントを監視するリスナーを登録できます。

ポイント　addEventListenerメソッドの構文

element.addEventListener(event, function, useCapture);

1. element: イベントリスナーを追加したいDOM要素
2. event: 監視するイベントの名前（例: 'click', 'mouseover'）
3. function: イベントが発生したときに実行されるコールバック関数
4. useCapture (オプション): イベントキャプチャを使用するかどうかのブール値。デフォルトはfalseで、イベントバブリングのフェーズでリスナーが動作

さっそく具体的に１からイベントリスナーを登録する方法を見ていきましょう。

ステップ1　対象となる要素を選択する

まず、イベントリスナーを追加したいHTML要素をJavaScriptを使って選択します。例えば、IDがmyButtonのボタン要素を選択するには、次のようにします。

var button = document.getElementById('myButton');

参考　JavaScript変数：var

ステップ2　addEventListenerメソッドを使用してイベントリスナーを追加する

次に、addEventListenerメソッドを使用して選択した要素にイベントリスナーを追加します。例えば、ボタンがクリックされたときにアラートを表示するには、次のように記述します。

button.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

↑のコードは、myButtonIDを持つボタンがクリックされたときに、アラートを表示するイベントリスナーを追加します。

以下のコードをHTMLファイルに保存して実行してみましょう。イベントとイベントリスナーの動きがより視覚的に理解できると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>クリックイベントデモ</title>
  <style>
    #myButton {
      padding: 12px 24px;
      font-size: 16px;
      border: 2px solid #333;
      border-radius: 8px;
      cursor: pointer;
      background-color: #f0f0f0;
    }

    #myButton:hover {
      background-color: #d0e6ff;
    }
  </style>
</head>
<body>

  <h2>ボタンをクリックしてください</h2>
  <button id="myButton">クリック</button>

  <script>
    var button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('ボタンがクリックされました！');
    });
  </script>

</body>
</html>

サンプルコード　マウスオーバーイベントの追加

マウスが特定の要素の上に移動したときに反応するイベントリスナーを追加する例を見てみましょう。

var myElement = document.getElementById('myElement');

myElement.addEventListener('mouseover', function() {
    myElement.style.backgroundColor = 'yellow';
});

↑のコードは、IDがmyElementの要素にマウスが乗ると、その要素の背景色を黄色に変更します。

サンプルコード　フォーム送信イベントの追加

フォームが送信されたときにカスタム処理を実行するイベントリスナーを追加する例です。

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // デフォルトのフォーム送信を防止
    alert('フォームが送信されました！');
});

↑の例では、フォーム送信イベントが発生した際に、ブラウザによるデフォルトの送信処理をpreventDefaultメソッドでキャンセルし、代わりにアラートを表示しています。

addEventListenerメソッドを使用することで、様々なイベントに対して柔軟に対応することができます。イベントリスナーの追加は、Webページをよりインタラクティブでユーザーフレンドリーにする上で重要な役割を果たします。

上記の例を参考に、様々なイベントに対応するイベントリスナーの追加を試してみてください。

イベントリスナーの削除：removeEventListener

イベントリスナーの追加と同様に重要なのが不要になったイベントリスナーを削除することです。イベントリスナーが不要になるのは、例えばユーザーが特定の操作を完了した後や、ページの特定の部分が非表示になった時などです。イベントリスナーを削除することで、メモリリークを防ぎ、アプリケーションのパフォーマンスを維持することが可能になります。

特に大規模で複雑なWebアプリケーションを開発する際にはこの点も重要となるのでこの章で詳しく解説しておきます。

ポイント　removeEventListenerメソッド

イベントリスナーを削除するためには、removeEventListenerメソッドを使用します。このメソッドの構文はaddEventListenerに似ていますが、イベントを削除するだけです。

element.removeEventListener(event, function, useCapture);

1. element: イベントリスナーを削除したいDOM要素
2. event: 削除したいイベントの名前
3. function: 削除したいイベントリスナーに紐づけられている関数
4. useCapture: イベントリスナーがキャプチャフェーズで登録されているか、バブリングフェーズで登録されているかを示すブール値。addEventListenerと同じ値を指定する必要があります。

イベントリスナーの削除：具体例

イベントリスナーを削除する際には、addEventListenerで指定したのと同じ関数をremoveEventListenerに渡す必要があります。これは、無名関数を直接addEventListenerに渡す代わりに、関数を変数に割り当てておくとよいでしょう。

var button = document.getElementById('myButton');
var handleClick = function() {
    alert('ボタンがクリックされました！');
};

// イベントリスナーを追加
button.addEventListener('click', handleClick);

// イベントリスナーを削除
button.removeEventListener('click', handleClick);

↑の例では、handleClick関数がクリックイベントのコールバックとして使用されています。イベントリスナーを削除する際も、同じhandleClick関数をremoveEventListenerメソッドに渡しています。これにより、正確に特定のイベントリスナーを削除することができます。

イベントリスナーの追加だけでなく、適切なタイミングでの削除もWebアプリケーションの効率的な動作には不可欠です。addEventListenerとremoveEventListenerを適切に使用することで、ユーザーインターフェースのコントロールを精密に行い、リソースを効率的に管理することが可能になります。

イベントリスナーのライフサイクル管理を意識することは、ウェブ開発のスキルを向上させる上で重要なポイントです。

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

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

JSPとは何か？

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

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

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

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

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

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

it-biz.online

2020.05.15

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

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

静的なページは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

2025.03.05

手順

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>

？？？となってしまった方でも１から理解できるように前提の前提から理解できるようにわかりやすく解説します。

Angular：ルーティングとは？

Angularのルーティングは、Webアプリケーション内でのページ遷移（＝実際にはページを遷移するのではなく、今見ているページの内容を書き換える）を制御する仕組み。

通常のWebアプリケーションでは複数のページ（ユーザ情報表示用ページ、トップページ、レポートページなど）があり、リンクをたどることでそれぞれのページに遷移していくのですが、AngularはSPA（シングルページアプリケーション）なのでそのような動作はしません。

シングルページアプリケーション（SPA）では、従来のWebサイトのようにページを全て読み込み直して表示するのではなく、必要なデータやコンポーネントのみを動的に読み込むことでページの内容を更新します。つまり、ここでいう「ページ遷移」とは、実際にはページをまたいで移動するのではなく、単一のページ内で表示内容を切り替えることを指します。

この方法を採用することで、リンクをクリックするたびに発生する全画面の読み込みを待つことなく、ほぼ即座に新しいコンテンツを見ることができるようになります。また、このページ遷移のプロセスはブラウザの履歴管理と連携しているので、ユーザーがブラウザの「戻る」や「進む」ボタンを使用しても、適切なコンテンツが表示されるようにできている点が特徴です。

Angularでは別のページに移動しているわけではなく、１つのページ内で表示を変えている！ってのを理解できればOKです。

それでは、ここから具体的な実装方法を見ていきます。Angularではどのようにページ遷移を実現しているのか？という点に注目してください。

Angularでのルーティング設定

Angularでのルーティング設定を４ステップにわけて説明します。ざっくり言うと、ルーティング用のモジュール（ここにはURLと表示するコンポーネントの紐づけ情報を保持）を作って、そのモジュールをアプリケーションモジュールにImportするという手順です。

ステップ１　ルーティングモジュールの作成

Angular CLIを使用して、ルーティングモジュールを作成します。このモジュールは、ルート（URLパターンとそれに対応するAngularコンポーネントのマッピング）の定義を保持します。

コマンドは以下の通り。

ng generate module app-routing --flat --module=app

1. --flatフラグ
   • 新しいフォルダを作成せずにファイルをプロジェクトのルートに直接置くことを指定。
2. --module=app
   • 新しく生成されたルーティングモジュールをアプリケーションのルートモジュールに自動的にインポートするように指定。

このフラグは必要に応じて書き換えてください。

ステップ２　ルートの定義

ルーティングモジュール（例: app-routing.module.ts）内で、Routes型の配列を定義し、各ルートを設定します。Routes型は@angular/routerからインポートされます。

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component'; // 例としてHomeComponentをインポート
import { AboutComponent } from './about/about.component'; // AboutComponentも例として

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  // その他のルート定義...
];

↑の配列はpathとcomponentプロパティを持ちます。pathはURLの一部。componentにはそのURLが指定されたときに表示されるコンポーネントを指定します。

/home を含むURLを押したときに「HomeComponent」を表示するよ！ということ。

ステップ３　RouterModuleのインポートと設定

次に、RouterModuleをルーティングモジュールにインポートし、forRoot()メソッドを使ってアプリケーションのルートルートを設定します。

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• imports配列でRouterModule.forRoot(routes)を呼び出すことにより、先ほど定義したルートがアプリケーションに登録されます。
• exports配列にRouterModuleを含めることで、ルーティング機能がアプリケーションの他の部分から利用可能になります。

ステップ４　アプリケーションモジュールにルーティングモジュールをインポート

最後に、AppRoutingModuleをアプリケーションのルートモジュール（通常はapp.module.ts）にインポートします。これは、Angular CLIを使用してルーティングモジュールを生成した場合、自動的に行われることが多いですが、手動で行う必要がある場合もあります。

import { AppRoutingModule } from './app-routing.module'; // AppRoutingModuleのインポート

@NgModule({
  // ...
  imports: [
    // ...
    AppRoutingModule // ルーティングモジュールをインポート
  ],
  // ...
})
export class AppModule { }

これで、ルーティングの基本設定は完了。実はそんなに難しいことはしていません。

が、Angularのルーティングはここからが本番です。ページを切り替えたときにどのコンポーネントを表示するか？は決まったものの、どこに表示するか？を決められていません。

続いては、ルーターアウトレット（router-outlet）についてご説明します。

Angular：<router-outlet>とは何か？

<router-outlet>は、テンプレート内に配置されるディレクティブ（指示子）で、Angularが動的にコンポーネントを表示する場所を表します。

つまり、URLに基づいて、コンポーネントをこの<router-outlet>の場所に読み込む役割を持ちます。

サンプルコード　router-outlet

app-routing.module.tsに、2つのコンポーネントへのルートを定義。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html（または任意のテンプレートファイル）に<router-outlet>を配置。これにより、ルートに応じてコンポーネントがこの場所に表示されます。

<!-- ナビゲーションリンク -->
<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

<!-- ルートコンポーネントが表示される場所 -->
<router-outlet></router-outlet>

上記の例では、ブラウザで/homeや/aboutにアクセスすると、<router-outlet>の位置に対応するコンポーネントが表示されるということです。

<router-outlet>がAngularアプリケーションにおけるルーティングとビューの管理の中心であることが理解できましたか？実際には、さらに多くのルートや複雑なナビゲーション構造を設定することができますが、基本的な考え方は同じ。

<router-outlet>は、Angularでのルーティングシステムにおいて、動的にコンポーネントを表示する場所を指定するディレクティブ。アプリケーションのナビゲーションに従って、指定されたコンポーネントをこの場所に読み込み、表示します。

ナビゲーションとリンク

最後にリンクの設定方法を解説します。

ルーティングモジュール（コンポーネントとURLの紐づけ）、ルーターアウトレット（コンポーネントの表示領域）の設定が完了したら、あとは画面上に上記のURLを配置していくだけ。ただし、普通にHTMLのaタグを配置するだけでは不十分です。

Angularでは、ページ遷移を実現するために、ディレクティブとプログラム的な方法の両方を提供しています。ここでは、両方の方法を使ってナビゲーションを実装する方法について詳しく見ていきましょう。

ナビゲーションリンク（routerLinkディレクティブ）

Angularでは、テンプレート内で<a>タグにrouterLinkディレクティブを使用して、ナビゲーションリンクを簡単に作成することができます。routerLinkは、ユーザーがリンクをクリックしたときに遷移するパスを指定します。

<nav>
  <ul>
    <li><a routerLink="/home">Home</a></li>
    <li><a routerLink="/about">About</a></li>
  </ul>
</nav>

参考　navタグ / リストタグ

このサンプルコードでは、ホームページ(/home)と詳細ページ(/about)へのリンクを含むナビゲーションバーを作成しています。ユーザーがこれらのリンクのいずれかをクリックすると、指定されたパスに対応するコンポーネントを<router-outlet>に表示します。

プログラムによるナビゲーション（Routerサービス）

Angularでは、Routerサービスをインジェクトしてプログラムによるナビゲーションを実装することもできます。これは、ユーザーがフォームを送信した後や、特定のイベントが発生したときなど、コード内から直接ページ遷移をトリガーする場合に便利です。

ちょっと難しいですが、実際のコードを見てみましょう。コンポーネントクラス内でRouterサービスを使う方法は以下の通り。

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(private router: Router) {}

  navigateToHome() {
    this.router.navigate(['/home']);
  }
}

そして、テンプレート内で、このメソッドをイベント（例えば、ボタンクリック）にバインドします。↓の例では、navigateToHomeメソッドがボタンクリックイベントにバインドされているので、このメソッドが実行されると、アプリケーションは/homeパスに遷移させます。

<button (click)="navigateToHome()">Go to Home</button>

最後にAngularにおけるルーティングの基本知識を表形式で整理します。自分の理解が十分であるかどうか？チェックしておきましょう。

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

このページでは、Angular初心者の方向けにそもそもモジュールとは何か？という初歩の初歩から解説し、@NgModuleの意味と基本的な使い方を１からわかりやすくサンプルコード付きで解説します。

Angularのモジュールとは？

Angularのモジュールは、レゴブロックのセットのようなものです。

レゴは１つひとつの小さなブロックを組み合わせて様々なものを組み立てていきますよね。たとえば、家を作る時には、窓のブロック、ドアのブロック、屋根のブロックなど、それぞれのパーツを組み合わせることで１つの家を作り上げることができます。
レゴブロックに家を組み立てるためのブロックセットがあるように、Webページの一部分を作るために必要な「コンポーネント」や「サービス」などのパーツを１つにまとめたものとして、Angularのモジュールが存在します。

例えば、「プロフィールページ」というモジュールがあるとすると、このモジュールには「ユーザーの写真を表示するパーツ」「ユーザーの名前を表示するパーツ」「連絡先を表示するパーツ」などが含まれるかもしれません。これらのパーツを１つにまとめたものが「プロフィールページモジュール」です。

モジュールの必要性

大きなレゴの城を組み立てるとき、0から100までの全部を一度に組み立てようとすると大変です。（土台から天守閣までの一度に作成しようとすると、作業中に「いまは何をしていたっけ？」というように混乱してしまう・・・）

しかし、城の一部分ごとにセットを分けて、それぞれのセットを別々に組み立ててから、最後に全部をつなげるともっと簡単にできます。まずは、土台を作り、次に1階部分、2階部分として作成し、最後にそれぞれのブロックを連結させて作った方が簡単です。

Angularのモジュールも同じで、Webアプリケーションをいろいろなモジュール（セット）に分けることで、ひとつひとつをシンプルに作っていくことができます。そして、全部のモジュールが完成したら、それをつなげて一つの大きなWebアプリケーションを完成させるようなイメージです。

このモジュールを作成するために利用するのが@NgModuleです。

Angular：@NgModuleデコレータ

@NgModuleはAngularのデコレータの一種で、指定したクラスをAngularモジュールとして識別する役割を担います。モジュールのメタデータをAngularフレームワークに提供するために使用され、モジュールの振る舞いを定義します。

【TypeScript】デコレータ＠とは？1分でわかりやすく解説

Angularのデコレータは、コードをより宣言的で簡潔にし、フレームワークの機能を効果的に活用するための強力なツールです。この記事で紹介した主要なデコレータを理解することで、Angularアプリケーションの開発がよりスムーズに進むはずです。

it-biz.online

2025.04.23

ひとまずここでは「モジュールはいろんな部品をまとめた１つの箱」のようなイメージを持てればOK。

言葉だけで説明されても、中々イメージは湧かないと思いますので、早速モジュールの作成方法～利用方法までをサンプルコード付きで解説していきます。

@NgModuleの構文ルール

@NgModuleデコレータは、クラス定義の直前に配置。デコレータは次のように使用します。

@NgModule({
  // プロパティ: 値
})
export class MyModule {}

@NgModuleデコレータのプロパティ

これらのプロパティを使用して、Angularモジュールを定義し、アプリケーションの構造を整理することができます。

サンプルコード　Angularモジュールの作成例

// 必要なAngularのコアモジュールをインポート
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリケーションが使用するコンポーネントをインポート
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent // アプリケーションのコンポーネントを宣言
  ],
  imports: [
    BrowserModule // ブラウザで動作するアプリケーションに必要なモジュールをインポート
  ],
  providers: [], // サービスプロバイダー（ここでは空）
  bootstrap: [AppComponent] // アプリケーションのルートコンポーネントを指定
})
export class AppModule { }

AppModuleはAngularのルートモジュールとして機能し、アプリケーションで最初にロードされるモジュールです。declarationsには、このモジュールが直接使用するAppComponentが含まれています。importsには、アプリケーションがブラウザで動作するために必要なBrowserModuleが含まれています。bootstrapには、アプリケーションの起動時に最初にロードされるコンポーネントが指定されています。

モジュールの使用

ここからは、具体的な例を用いて実際にモジュールを定義する方法を見ていきましょう。

サンプルシナリオ

アプリケーションに「ユーザー管理機能」と「注文管理機能」があるとします。これらの機能をそれぞれ別のモジュールで管理することにしました。UserModuleとOrderModuleを作成し、それぞれに関連するコンポーネントやサービスをグループ化します。

ステップ1: 機能モジュールの作成

UserModuleには、ユーザー一覧を表示するUserListComponentとユーザーの詳細を表示するUserDetailComponentを含めます。

// src/app/user/user.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list.component';
import { UserDetailComponent } from './user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [CommonModule],
  exports: [UserListComponent] // UserListComponentを外部に公開
})
export class UserModule {}

同様に、OrderModuleには注文一覧を表示するOrderListComponentを含めます。

// src/app/order/order.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderListComponent } from './order-list.component';

@NgModule({
  declarations: [OrderListComponent],
  imports: [CommonModule],
  exports: [OrderListComponent] // OrderListComponentを外部に公開
})
export class OrderModule {}

ステップ2: モジュールの利用

AppModule（ルートモジュール）でUserModuleとOrderModuleを利用することにします。これにより、アプリケーション全体でユーザー管理と注文管理の機能が使えるようになります。

// src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module'; // UserModuleをインポート
import { OrderModule } from './order/order.module'; // OrderModuleをインポート

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UserModule, // AppModuleにUserModuleを追加
    OrderModule // AppModuleにOrderModuleを追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

このように、Angularモジュールは「呼び出し」されるものではなく、アプリケーションの構造を定義し、コードを機能単位で整理するために「利用」されます。ルートモジュール（AppModule）または他の機能モジュール内でモジュールをインポートすることにより、そのモジュールが提供する機能（コンポーネント、サービスなど）をアプリケーションの他の部分で使用できるようになります。

デコレータとは？コードへの注釈による機能拡張

デコレータは、クラス、メソッド、プロパティ、パラメータに対して付与される特殊な構文です。@ 記号に続いてデコレータ名を記述することで、対象となるコード要素に対する注釈として機能し、TypeScriptコンパイラや関連フレームワークに対し、その要素の特性や振る舞いに関する情報を提供することになります。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

// ↓がデコレータ
@sealed
class MyClass {
  constructor(public name: string) {}
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

TypeScriptにおけるデコレータの利点：表現力と保守性の向上

TypeScriptでデコレータを活用することには、複数の利点があります。

使いこなしていくうちに徐々にメリットを感じていけると思いますが、事前に簡単に利点を整理しておきます。

• メタプログラミングの実現
  プログラム自身がその構造や実行時の振る舞いを操作するメタプログラミングを可能にする。
• 関心事の分離
  ログ記録、認証、トランザクション管理といった横断的な関心事を、主要なビジネスロジックから分離し、コードの可読性と保守性を高めることができる。
• コードの再利用性
  一度定義されたデコレータは、複数のクラスやメンバーに適用でき、重複したコードを削減できる。
• フレームワークとの統合
  Angularなどのフレームワークは、デコレータを基盤としており、フレームワークの機能利用を簡潔化します。

TypeScriptの主要なデコレータの種類と機能

TypeScriptは、デコレータが適用される対象に応じて、以下の種類を提供します。

1. クラスデコレータ

クラス定義の直前に記述され、クラス全体の振る舞いを変更、またはメタデータを付与します。クラスデコレータは、クラスのコンストラクタ関数を引数として受け取ります。

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class MyClass {
  constructor(public name: string) {}
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

const instance = new MyClass("TypeScript");
instance.greet(); // 出力結果：Hello, TypeScript!

2. メソッドデコレータ

メソッド定義の直前に記述され、メソッドの振る舞いを修飾、またはメタデータを付与します。メソッドデコレータは、ターゲットオブジェクト、メソッド名、プロパティ記述子を引数として受け取ります。

function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`メソッド '${propertyKey}' が引数 ${JSON.stringify(args)} で呼び出されました。`);
    const result = originalMethod.apply(this, args);
    console.log(`メソッド '${propertyKey}' の実行結果: ${result}`);
    return result;
  };
  return descriptor;
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calc = new Calculator();
const sum = calc.add(5, 3);
console.log(`合計: ${sum}`);
// 出力結果：
// メソッド 'add' が引数 [5,3] で呼び出されました。
// メソッド 'add' の実行結果: 8
// 合計: 8

3. プロパティデコレータ

プロパティ定義の直前に記述され、プロパティのメタデータを付与、またはアクセス時の振る舞いを変更します。プロパティデコレータは、ターゲットオブジェクトとプロパティ名を引数として受け取ります。

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Person {
  @readonly
  name: string = "John Doe";

  constructor() {}
}

const person = new Person();
console.log(person.name); // 出力結果：John Doe
// person.name = "Jane Doe"; // コンパイルエラーが発生します

function readonly(target: any, propertyKey: string) {
  Object.defineProperty(target, propertyKey, {
    writable: false
  });
}

class Person {
  @readonly
  name: string = "John Doe";

  constructor() {}
}

4. パラメータデコレータ

メソッドのパラメータ定義の直前に記述され、パラメータに関するメタデータを付与します。パラメータデコレータは、ターゲットオブジェクト、メソッド名、パラメータのインデックスを引数として受け取ります。

function paramInfo(target: any, methodKey: string, parameterIndex: number) {
  console.log(`クラス '${target.constructor.name}' のメソッド '${methodKey}' のインデックス ${parameterIndex} 番目のパラメータです。`);
}

class Greeter {
  greet(@paramInfo message: string) {
    console.log(`Greeting: ${message}`);
  }
}

const greeter = new Greeter();
greeter.greet("Hello!");
// 出力結果：
// クラス 'Greeter' のメソッド 'greet' のインデックス 0 番目のパラメータです。
// Greeting: Hello!

デコレータの動作原理：メタデータの利用

TypeScriptコンパイラは、デコレータを特別な関数として処理し、デコレートされた要素に関する情報を引数としてデコレータ関数に渡します。

デコレータ関数は、この情報に基づいて、クラスやメンバーの振る舞いを変更したり、メタデータを格納したりします。このメタデータは、TypeScriptランタイムやフレームワークがコードの構造と意図を解釈し、適切な処理を実行するために利用されます。

Angularにおけるデコレータの応用：フレームワークの基礎構造

Angularフレームワークは、TypeScriptのデコレータ機能を広範に活用しています。

@Component、@Directive、@Injectable、@Input、@Output などのAngularデコレータは、クラスに特定の役割と機能を持たせるための重要なメカニズムです。例えば、@Component デコレータは、TypeScriptクラスをUIコンポーネントとして定義し、テンプレートやスタイルといった関連情報をAngularに提供します。

深堀りしていくと、深い話も尽きないのがどのプログラミング言語にも共通する特徴ですが、まずはその土台としての解説ページです！是非最後までご覧ください。

プログラミングの超基本：「文」と「セミコロン」

どんなプログラミング言語にも共通しますが、プログラムはコンピューターに対する指示の集まりでできています。この１つ１つの指示のことを文 (Statement) と呼びます。

// これは「変数 message を宣言し、"Hello" という文字列を代入する」という１つの文
let message: string = "Hello";

// これも「変数 year を宣言し、2025 という数値を代入する」という別の１つの文
let year: number = 2025;

// これも「コンソールに message 変数の内容を表示する」という文
console.log(message);

プログラムは、これらの文が上から順に実行されることで動きます。

セミコロン ; の役割

多くのプログラミング言語では、文の終わりを明確にするためにセミコロン (;) を付けます。TypeScript（および元になったJavaScript）でも、文の終わりにはセミコロンを付けるのが基本的なルールです。

let greeting: string = "Good morning"; // 文の終わりにセミコロン
let count: number = 10;             // 文の終わりにセミコロン
console.log(greeting);             // 文の終わりにセミコロン

Tips：セミコロンは省略できる？

実は、TypeScript (JavaScript) では、多くの場合、行の終わりが文の終わりであると自動的に判断してくれるため、セミコロンを省略しても動くことがあります。

let city: string = "Tokyo" // セミコロンなしでもOK
let population: number = 14000000 // セミコロンなしでもOK
console.log(city)           // セミコロンなしでもOK

しかし、以下のような理由から、基本的にはセミコロンを付けることが推奨されています。

1. 意図しない動作を防ぐ
   特定の状況では、セミコロンがないとコードが予期せぬ形で結合され、エラーやバグの原因になることがあります。
2. コードの明確性
   文の終わりが明確になり、コードが読みやすくなります。
3. チーム開発での一貫性
   複数人で開発する場合、セミコロンを付けるか付けないかのルールを統一しておくと、コードのスタイルが揃います。

TypeScriptとは？

さて、本題のTypeScriptです。
TypeScriptは、Microsoftによって開発された、JavaScriptを拡張して作られたプログラミング言語です。一番大きな特徴は静的型付けができることです。

• JavaScriptのスーパーセット
  TypeScriptはJavaScriptの機能をすべて含んでいます。つまり、JavaScriptを知っていれば、TypeScriptは比較的スムーズに学べます！
• 静的型付け
  プログラムを実行する前に、データ（後述する「値」や「変数」）に「型」（種類）を指定することで、型の間違いを早期に発見できます。これがコードの品質を高め、開発を助けてくれます。

なぜ型が必要なの？

コンピューターは、「数値」と「文字列（文字の並び）」を区別します。
例えば、100 は数値、"100" は文字列です。

JavaScriptでは、実行時に型が決まるため、意図せず数値と文字列を足し合わせてしまうようなミスが起こりえます（例: 1 + "0" が "10" になる）。TypeScriptでは、あらかじめ「これは数値だよ」「これは文字列だよ」と宣言することで、そのようなミスを防ぎます。

参考　「データ型」とは？

基本的な「値」と「型」

プログラムが扱うデータの基本的な単位を値 (Value) と呼びます。値には様々な種類があり、その種類のことを型 (Type) と言います。

TypeScriptでよく使う基本的な型を見ていきましょう。

• string (文字列型)
  文字や文章を表す値の型です。ダブルクォーテーション " またはシングルクォーテーション ' で囲みます。
  • 値の例: "こんにちは", 'TypeScript', "123" (これは数値ではなく文字列)
• number (数値型)
  整数や小数を表す値の型です。
  • 値の例: 100, 0, -5, 3.14
• boolean (真偽値型)
  「正しい (true)」か「間違っている (false)」かの二択を表す値の型です。
  • 値の例: true, false
• Array (配列型)
  同じ型の値を複数まとめて順番に格納する型です。角括弧 [] を使います。
  • 値の例: [1, 2, 3] (数値の配列), ["apple", "banana"] (文字列の配列)
• null
  「何もない」ことを意図的に示す特殊な値。
• undefined
  値が「未定義」であることを示す特殊な値。変数を宣言しただけで、まだ値を入れていない状態など。
• any (任意型)
  どんな型の値でも入る特殊な型。
  便利ですが、TypeScriptの型チェックの恩恵を受けられなくなるため、使用は慎重に。

値を覚えておく：「変数」

プログラムの中で、値を一時的に保存しておくための「名前付きの箱」のようなものが変数 (Variable) です。変数を使うことで、値に名前を付けて何度も利用したり、値を変更したりできます。

参考　プログラミングの変数とは？１分でわかりやすく

変数を使うには、まず宣言 (Declaration) が必要です。TypeScriptでは let または const を使って変数を宣言します。

• let: 値を後から変更可能な変数を宣言します。
• const: 値を後から変更不可能な（定数 Constant）変数を宣言します。基本的には const を使い、値の変更が必要な場合のみ let を使うのが良い習慣です。

宣言の際には、変数名の後に : (コロン) と型名を指定しその変数にどんな型の値を入れるかを指定します（型注釈 Type Annotation）。そして = の後に、その変数に入れる最初の値（初期値）を書きます。

// string 型の変数 message を宣言し、初期値として "Hello, TypeScript!" を入れる
let message: string = "Hello, TypeScript!";

// number 型の定数 year を宣言し、初期値として 2025 を入れる
const year: number = 2025;

// boolean 型の変数 isActive を宣言し、初期値として true を入れる
let isActive: boolean = true;

// number 型の配列 scores を宣言
const scores: number[] = [80, 95, 72];

// message 変数の中身を "Hi!" に変更する (let なので変更可能)
message = "Hi!";

// year 変数の中身を変更しようとするとエラーになる (const なので変更不可)
// year = 2026; // エラー!

// 型が違う値を入れようとするとエラーになる
// message = 100; // エラー! message は string 型

TypeScript：変数と基本的な型を３分でわかりやすく解説

TypeScriptの変数宣言、基本的なデータ型（number, string, boolean, null, undefined, array, tuple, enumなど）の概要と使用方法を3分で簡潔に解説します。TypeScriptでの型注釈と型推論の基本もカバーし、初心者がTypeScriptの型システムを効果的に活用するための入門ガイド。

it-biz.online

2024.03.08

型推論 (Type Inference)

実は多くの場合、TypeScriptは初期値から変数の型を自動的に推測してくれます。これを型推論と呼びます。型推論が可能な場合は、型注釈を省略できます。

let user = "Alice"; // 初期値が文字列なので string 型と推論される
const pi = 3.14;    // 初期値が数値なので number 型と推論される

// user = 123; // エラー! user は string 型と推論されている

値を作り出す：「式」

プログラムの中で、計算や処理を実行して最終的に１つの値になるものを式 (Expression) と呼びます。

• 1 + 2 は、計算されて 3 という値になるので式。
• year （上で宣言した変数）は、その中に入っている 2025 という値になるので式。
• message は、その中に入っている "Hi!" という値になるので式。
• scores[0] は、配列 scores の最初の要素である 80 という値になるので式。
• isActive === true は、比較の結果 true または false という値になるので式。

文と式の違い

• 文 (Statement)
  コンピューターへの指示。何かを実行させる。
  例: let x = 10;, console.log("OK");
• 式 (Expression)
  評価されると１つの値になるもの。
  例: 10, x, 10 + 5, x > 5

文の中に式が含まれていることがよくあります。例えば、let x = 10 + 5; という文には、10 + 5 という式が含まれています。この式が評価されて 15 という値になり、その値が変数 x に代入されます。

処理をまとめる：「関数」

一連の処理をまとめて名前を付け、繰り返し呼び出せるようにしたものが関数 (Function) です。関数を使うことで、同じようなコードを何度も書く手間が省け、プログラムが整理されます。

参考　プログラミングの「関数」とは？

関数を定義するには function キーワードを使います。関数には引数 (Argument/Parameter) を渡すことができ、処理の結果として戻り値 (Return Value) を返すことができます。

TypeScriptでは、関数の引数と戻り値にも型注釈を付けます。

// 関数宣言の基本形
// function 関数名(引数1: 型, 引数2: 型, ...): 戻り値の型 {
//   // 関数の処理
//   return 戻り値; // 戻り値がある場合
// }

// ２つの数値を受け取り、合計を返す関数
function add(a: number, b: number): number {
  const result: number = a + b; // a + b は式
  return result;             // result を戻り値として返す文
}

// 戻り値がない (何かを表示するだけなど) 関数の戻り値の型は `void`
function printMessage(message: string): void {
  console.log(message); // message を表示する文
  // return 文がない、または return; だけ
}

// 関数を呼び出す (実行する)
const sum: number = add(5, 3); // add関数を呼び出し、戻り値 (8) を変数 sum に代入する文
console.log(sum); // 出力: 8

printMessage("関数のテスト"); // printMessage関数を呼び出す文 (出力: 関数のテスト)

アロー関数

JavaScriptでお馴染みの、より簡潔に関数を書く方法であるアロー関数も使えます。

// アロー関数の基本形
// const 関数名 = (引数1: 型, 引数2: 型, ...): 戻り値の型 => {
//   // 関数の処理
//   return 戻り値;
// };

const multiply = (x: number, y: number): number => {
  return x * y;
};

// 処理が1行で終わる場合は {} と return を省略可
const difference = (a: number, b: number): number => a - b;

const resultMultiply: number = multiply(4, 6); // 24
const resultDifference: number = difference(10, 7); // 3

console.log(resultMultiply);
console.log(resultDifference);

TypeScript：関数宣言/関数式の基本を１分でわかりやすく

TypeScriptでの関数の基本的な定義方法、実行方法、さらにジェネリック型、高階関数、オーバーロード、タプルとデストラクチャリングを使った応用的な使い方までをわかりやすく解説しています。TypeScriptの型安全性を活かした関数の使いこなし方を学び、より安全で再利用可能なコードの書き方をマスターしましょう。

it-biz.online

2025.01.10

オブジェクトの形を決める：「インターフェース」

複数の値をまとめて、１つの意味のあるデータとして扱いたい場合があります。例えば、「ユーザー」を表すデータとして、ID、名前、メールアドレスなどをまとめたい、といった場合です。このようなデータのまとまりをオブジェクト (Object) と呼びます。（オブジェクトについては、次の章で解説します。）

インターフェース (Interface) は、オブジェクトがどのようなプロパティ（オブジェクト内の個々のデータのこと）を持つべきか、その「形」や「構造」を定義するための設計図のようなものです。

// User というインターフェース (設計図) を定義
interface User {
  id: number;     // id という名前のプロパティがあり、その型は number
  name: string;    // name という名前のプロパティがあり、その型は string
  isAdmin: boolean; // isAdmin という名前のプロパティがあり、その型は boolean
  email?: string; // ? を付けると、あってもなくても良いプロパティ (オプショナル)
}

// User インターフェースに従ったオブジェクトを作成
// このオブジェクトは User の設計図通りに作られている
let user1: User = {
  id: 1,
  name: "David",
  isAdmin: true,
  email: "david@example.com"
};

// email プロパティがなくても User インターフェースを満たす
let user2: User = {
  id: 2,
  name: "Eve",
  isAdmin: false
};

// インターフェースで定義されていないプロパティを持っていたり、
// 必須のプロパティがなかったりするとエラーになる
// let user3: User = {
     id: 3, 
     username: "Frank"
}; // エラー: nameがない、username は未定義

// 関数が User 型のオブジェクトを受け取ることを明示できる
function displayUserName(user: User): void {
  console.log(user.name);
}

displayUserName(user1); // 出力: David
displayUserName(user2); // 出力: Eve

インターフェースを使うことで、「このオブジェクトには必ず id と name が number 型と string 型で存在する」といったルールを明確にでき、コードの安全性が高まります。

TypeScript：interface（インターフェース）の基本を３分で解説

TypeScriptのインターフェースの基本から応用までを徹底解説。初心者でも理解しやすいように、インターフェースの定義方法、利点、関数やクラスとの連携、さらには宣言のマージについても具体的な例を交えて紹介。TypeScriptでの型安全なコーディングをマスターしたい方必見の内容です。

it-biz.online

2025.01.17

オブジェクトの設計図と機能：「クラス」

インターフェースがオブジェクトの「形」だけを定義するのに対し、クラス (Class) はオブジェクトの「形」（プロパティ）に加えて、そのオブジェクトが持つ「機能」（メソッド Method と呼ばれる関数）も一緒に定義できる、より高機能な設計図です。オブジェクト指向プログラミングの中心的な概念です。

参考　Typescriptのオブジェクトとは？

class Product {
  // プロパティ (クラスが持つデータ)
  name: string;
  price: number;
  readonly id: number; // readonly: 一度設定したら変更できない

  // コンストラクタ: クラスからオブジェクトを生成するときに自動的に呼ばれる特殊なメソッド
  // プロパティの初期化などを行う
  constructor(id: number, name: string, price: number) {
    this.id = id; // this は生成されるオブジェクト自身を指す
    this.name = name;
    this.price = price;
    console.log(`商品「${this.name}」が生成されました。`);
  }

  // メソッド (クラスが持つ機能・関数)
  getPriceWithTax(taxRate: number): number {
    // 税込み価格を計算して返す
    return this.price * (1 + taxRate);
  }
}

// クラス (設計図) から実際のオブジェクト (インスタンス) を生成する
const productA = new Product(101, "高機能マウス", 5000); // コンストラクタが呼ばれる
const productB = new Product(102, "キーボード", 8000);

// オブジェクトのプロパティにアクセス
console.log(productA.name); // 出力: 高機能マウス
console.log(productB.price); // 出力: 8000

// オブジェクトのメソッドを呼び出す
const priceAWithTax = productA.getPriceWithTax(0.1); // 税率10%
console.log(`商品Aの税込価格: ${priceAWithTax}円`); // 出力: 商品Aの税込価格: 5500円

// readonly なプロパティは変更できない
// productA.id = 200; // エラー!

クラスを使うと、関連するデータ（プロパティ）と処理（メソッド）をひとまとめにして管理できるため、複雑なプログラムを構造化しやすくなります。

型に別名を付ける：「型エイリアス」

複雑な型や何度も使う型に、分かりやすい別名を付けることができるのが型エイリアス (Type Alias) です。type キーワードを使って定義します。

// 文字列リテラルの組み合わせに 'Status' という別名を付ける
type Status = "pending" | "processing" | "completed" | "failed";
// Status 型の変数は、上記4つの文字列のどれかしか受け付けない

let orderStatus: Status = "processing";
console.log(orderStatus);

orderStatus = "completed";
// orderStatus = "shipped"; // エラー! Status 型には 'shipped' は含まれない

// オブジェクトの型にも別名を付けられる (インターフェースと似ている)
type Point = {
  x: number;
  y: number;
};

function distance(p1: Point, p2: Point): number {
  const dx = p1.x - p2.x;
  const dy = p1.y - p2.y;
  return Math.sqrt(dx * dx + dy * dy); // Math.sqrt は平方根を計算する組み込み関数
}

const point1: Point = { x: 0, y: 0 };
const point2: Point = { x: 3, y: 4 };
console.log(distance(point1, point2)); // 出力: 5

// 関数型に別名を付ける
type StringFormatter = (input: string) => string;

const toUpperCase: StringFormatter = (str) => str.toUpperCase();
const addGreeting: StringFormatter = (str) => `Hello, ${str}!`;

console.log(toUpperCase("test")); // 出力: TEST
console.log(addGreeting("World")); // 出力: Hello, World!

型エイリアスを使うと、コードが読みやすく、意図が伝わりやすくなります。

型を引数にする：「ジェネリクス」

ジェネリクス (Generics) は、関数やクラスを定義するときに、そこで使われる型を固定せず、後から指定できるようにする仕組みです。→型を関数の引数のように扱えます。

これにより、様々な型に対応できる、再利用性の高いコードを書くことができます。

// この関数は、呼び出すときに指定された型 T の配列を受け取り、
// その型の要素を返す（もし配列が空なら undefined を返す）
function getFirstItem<T>(items: T[]): T | undefined {
  // T は型引数と呼ばれる。呼び出し時に具体的な型が決まる。
  return items.length > 0 ? items[0] : undefined;
}

// number 型を指定して呼び出す
const numbers: number[] = [10, 20, 30];
const firstNum: number | undefined = getFirstItem<number>(numbers);
console.log(firstNum); // 出力: 10

// string 型を指定して呼び出す
const colors: string[] = ["red", "green", "blue"];
const firstColor: string | undefined = getFirstItem<string>(colors);
console.log(firstColor); // 出力: red

// 型を省略すると、TypeScriptが推論してくれる場合もある
const flags = [true, false, true];
const firstFlag = getFirstItem(flags); // boolean 型だと推論される
console.log(firstFlag); // 出力: true

// 空の配列の場合
const emptyArray: any[] = [];
const firstEmpty = getFirstItem(emptyArray);
console.log(firstEmpty); // 出力: undefined

ジェネリクスは少し高度な概念ですが、ライブラリなどでは頻繁に使われているため、覚えておくと役立ちます。

コードの説明書き：「コメント」

コードの中に、プログラムの動作には影響しない説明文を書き残すことができます。これをコメントと呼びます。後で自分が見返したときや、他の人がコードを読むときに、処理内容を理解しやすくするために使います。

TypeScript (JavaScript) では、コメントの書き方は主に2種類あります。

• 一行コメント: // から行末までがコメントになります。 TypeScript// これは一行コメントです let price: number = 100; // 税抜き価格
• 複数行コメント: /* と */ で囲まれた範囲がコメントになります。 TypeScript/* これは複数行コメントです。 複数行にわたって説明を記述できます。 関数やクラスの説明などによく使われます。 */ function calculateTotal(price: number, quantity: number): number { // 消費税率 (10%) const taxRate = 0.1; const subTotal = price * quantity; const tax = subTotal * taxRate; return subTotal + tax; // 合計金額を返す }

コメントのルールはJavaと同一です。

適切なコメントは、コードの可読性を大きく向上させます。

TypeScript：文法まとめ

今回は、プログラミングの本当に基本的な「文」や「値」から始まり、TypeScriptのコアとなる「型」「変数」「関数」「インターフェース」「クラス」などの概念を駆け足で見てきました。

• プログラムは文の集まり。文末にはセミコロン ; を付けるのが基本。
• データには値があり、その種類が型。
• 値を保存するのが変数 (let, const)。型注釈と型推論がある。
• 値を生成するのが式。
• 処理をまとめるのが関数。引数と戻り値に型を付ける。
• オブジェクトの形を定義するのがインターフェース。
• 形と機能を定義するのがクラス。
• 型に別名を付けるのが型エイリアス。
• 型を柔軟に扱うのがジェネリクス。
• コードの説明はコメントで。

TypeScriptは、JavaScriptに「型」という強力な武器を与えてくれます。最初は覚えることが多く感じるかもしれませんが、型があることでエラーが減り、コードが読みやすくなり、安心して開発を進められるようになります。

ぜひ、ご自身の環境でTypeScriptをセットアップして、実際にコードを書いて動かしてみてください。公式ドキュメントや様々なチュートリアルも素晴らしい学習リソースです。

検索ヘルプ（F4ヘルプ）とは、選択画面の各項目に値を入力する際に、値入力をアシストしてくれる機能のこと。

通常、検索ヘルプはディクショナリオブジェクトに割り当てることによって付与するのが一般的ですが、ここではプログラム中で検索ヘルプを付与する方法を解説します。

検索ヘルプの利用方法・登録方法は以下の記事をご参照ください。

【SAP】３分で学ぶ「検索ヘルプ」の作り方

【初心者向け】SAPにおける検索ヘルプ（F4ヘルプ・入力ヘルプ）の使い方と作り方を１から図解します。基本検索ヘルプ・複合検索ヘルプの違い、選択メソッド・検索ヘルプパラメータって何？という疑問をお持ちの方は必見です。

it-biz.online

2023.07.06

SAPエンジニアやABAPerを目指す方であれば知っておきたい重要知識です。是非最後までご覧ください。

前提：イベントブロックとは？

検索ヘルプを付与する方法を正確に理解するためには、イベントブロックについての理解が必須のため、ここではイベントブロックについて簡単におさらいしておきます。

前提　イベントブロックとは、一言で言うとイベントを定義した１つの塊です。

イベントとは？

ユーザによるキーボードの操作、マウスのクリックなどによって、システムに何らかの変更が加えられシステムの状態が変化する出来事のことです。

例えば・・・

「”Enter”ボタンを押す」

「"戻るボタン" をマウスでクリックする」

「"選択画面" が表示される」

上記のようなシステムに対する何らかのアクション・何らかのリクエストをABAPではイベントと総称します。

今回解説する「AT SELECTION-SCREEN ON VALUE-REQUEST」は「ユーザが〇〇項目の検索ヘルプを利用したとき」というイベントを示します。

そのイベントが実行された場合に動くポップアップ画面等を用意しておくイメージです。このページでは、検索ヘルプイベントの定義方法の解説がメインとなりますので、イベントブロックについて１から学習したいという方は以下の記事をご覧ください。

【ABAP】イベントブロックを１から分かりやすく解説

【初心者向け】ABAPの基本ーイベントブロックについて解説します。"INITIALIZATION" "AT-SELECTION-SCREEN" "START-OF-SELECTION"など基本のイベントから"TOP-OF-PAGE"などの見慣れないイベントブロックまで整理して解説します。（サンプルコードつき）

it-biz.online

2023.07.06

 AT SELECTION-SCREEN ON VALUE-REQUEST

検索ヘルプを付与するには、「〇〇項目の検索ヘルプが呼び出されたとき」というイベントを作成します。構文ルールは以下の通り。

AT SELECTION-SCREEN ON VALUE-REQUEST FOR <input_field>.

実際のサンプルコードがこちら。

* アップロードファイルの画面項目
SELECTION-SCREEN BEGIN OF LINE.
  SELECTION-SCREEN COMMENT (10) TEXT-S01 FOR FIELD P_FLNM.
  PARAMETERS P_FLNM TYPE STRING.
SELECTION-SCREEN END OF LINE.

* 検索ヘルプの付与
AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_FLNM.
  " 検索ヘルプが呼び出されたときの処理↓
  CALL METHOD CL_GUI_FRONTEND_SERVICES=>FILE_SAVE_DIALOG
    CHANGING
      FILENAME = LV_FILENAME
      PATH     = LV_PATH
      FULLPATH = P_FLNM.   

PARAMETERS命令で定義した画面項目に対して、「当該項目のヘルプが呼び出されたとき」というイベントを定義しています。（以下の部分）

* 検索ヘルプの付与
AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_FLNM.

その際、このイベントブロックの配下に記述されているクラスが実行される、という仕組みです。

  " 検索ヘルプが呼び出されたときの処理↓
  CALL METHOD CL_GUI_FRONTEND_SERVICES=>FILE_SAVE_DIALOG
    CHANGING
      FILENAME = LV_FILENAME
      PATH     = LV_PATH
      FULLPATH = P_FLNM.   

もう１個別のサンプルコードを記載しておきます。

PARAMETERS: p_empid TYPE zempid. " 社員ID（Zテーブルなど）

AT SELECTION-SCREEN ON VALUE-REQUEST FOR p_empid.

  DATA: lt_values TYPE TABLE OF ddshretval,
        lt_empids TYPE TABLE OF zempid,
        lv_field  TYPE help_info-fieldname.

  " 候補データを作成（ここでは簡易的に固定）
  APPEND '1001' TO lt_empids.
  APPEND '1002' TO lt_empids.
  APPEND '1003' TO lt_empids.

  " ヘルプ表示
  CALL FUNCTION 'F4IF_INT_TABLE_VALUE_REQUEST'
    EXPORTING
      retfield        = 'P_EMPID'
      dynpprog        = sy-repid
      dynpnr          = sy-dynnr
      dynprofield     = 'P_EMPID'
    TABLES
      value_tab       = lt_empids
      return_tab      = lt_values
    EXCEPTIONS
      parameter_error = 1
      no_values_found = 2
      OTHERS          = 3.

このサンプルコードではPARAMETERS に入力フィールドを定義。ON VALUE-REQUEST でF4イベントに割り込みを作り、固定の候補リスト（lt_empids）を作って F4IF_INT_TABLE_VALUE_REQUEST で表示します。

Tips：ディクショナリ入力ヘルプが存在する場合

画面項目に検索ヘルプが紐づいている場合（これをディクショナリ入力ヘルプと呼びます）、上記で説明したようなコードは不要です。

上記「会社コード」項目は、ディクショナリを参照していますが、そのディクショナリには検索ヘルプが付与されているため、特段の設定をせずとも検索ヘルプが利用可能な状態になっています。

さて、この場合に「VALUE-REQUEST」で検索ヘルプを付与するとどうなるでしょうか。

* 画面項目「会社コード」
PARAMETERS P_BURKS TYPE BUKRS.

* 検索ヘルプの付与
AT SELECTION-SCREEN ON VALUE-REQUEST FOR P_BUKRS.
  " 検索ヘルプが呼び出されたときの処理↓
  CALL FUNCTION 'F4_FILENAME'
    IMPORTING
      FILE_NAME = P_BUKRS.

結果は、ディクショナリ入力ヘルプよりも、「VALUE-REQUEST」の検索ヘルプが勝ちます。つまり、上記のサンプルコードを実行した場合、会社コードの入力ヘルプではなく、ファイル選択のヘルプが呼び出されます。
→ 標準のF4ヘルプは無効化され、ON VALUE-REQUEST の処理が優先されます。

■ポイント整理

あまり、利用する機会はないものの一応頭に入れておくと良いかと思います。

AT SELECTION-SCREEN ON VALUE-REQUEST FOR <フィールド名>.
  " F4が押されたときの処理を書く