この記事では、①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をセットアップして、実際にコードを書いて動かしてみてください。公式ドキュメントや様々なチュートリアルも素晴らしい学習リソースです。

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

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

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

参考　HTMLの基本構文ルール

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

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

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

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

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

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

HTML：<table>タグの使い方

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

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

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

HTML：<tr>タグの使い方

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

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

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

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

HTML：<th>タグの使い方

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

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

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

HTML：<td>タグの使い方

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

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

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

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

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

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

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

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

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

限定的な使用

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

最適な使用

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

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

HTML：テーブルのデザイン

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

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

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

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

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

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

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

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

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

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

枠線の色を変える（bordercolor）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なので、JavaScriptに対する基礎知識を持っているとある程度楽に学習を進めることができます。

TypeScriptで書いたコードは、TypeScriptコンパイラまたはBabelなどのトランスパイラを使用してJavaScriptに変換→任意のブラウザやNode.js環境で実行することができます。手軽さや移行のしやすさから、現在多くのWebサイトがTypeScriptを用いて構築されています。

function addNumbers(a: number, b: number): number {
    return a + b;
}

const sum = addNumbers(10, 5);
console.log(sum); // 出力: 15

このページではTypeScriptの基本的な概念を解説します。
また、今後TypeScriptを使ってみたいと思う方のために、必要な環境設定から最初のTypeScriptファイルの作成方法に至るまで1個1個順を追ってご説明します。

TypeScriptとは

TypeScriptはJavaScriptの拡張版（＝進化版）としてMicrosoftにより開発されたプログラミング言語です。JavaScriptの弱点の一つであった「データ型」の問題を克服するために、静的型付けといった強力な型システムを加えることで、開発者がより安全に、かつ効率的にコードを記述できるようにすることを目的としています。

JavaScriptが、ブラウザやNode.jsなど広範囲にわたるプラットフォームでの動的なWebアプリケーション開発に不可欠な言語というのは変わりませんが、TypeScriptはその能力をさらに拡張し、大規模なアプリケーションの開発を容易にしているという点がポイントです。

参考　Node.jsとは？

TypeScriptの特徴（Type：型）

TypeScriptの核心機能は、その名が示す通り「Type：型」にあります。

この仕組みのおかげで、変数、関数の引数、戻り値などに明確な型を指定できるため、開発の早い段階で型不一致やその他の一般的なエラーを検出することが可能になります。この型システムはオプショナル：任意の機能なので、JavaScriptのコードをそのままTypeScriptファイルにコピー＆ペーストして、段階的に型を導入することもできます。

また、IDEやエディタの強力なサポートがあるので、リアルタイムのエラーチェック、コード補完、リファクタリングが容易に。→開発プロセスの生産性を大幅に向上させることが可能になります。

TypeScriptの環境設定

TypeScriptを利用するためには、まず開発環境を適切にセットアップする必要があります。このセクションでは、TypeScript開発のための基本的な環境設定手順を説明します。

主に、Node.jsのインストール、TypeScriptコンパイラのセットアップ、そして開発効率を高めるための統合開発環境（IDE）の設定などをご説明します。

Node.jsのインストール

TypeScriptをコンパイルするにはNode.jsが必要です。Node.jsは、サーバーサイドでJavaScriptを実行するためのランタイム環境であり、npm（Node Package Manager）が含まれています。npmとは、JavaScriptのライブラリやツールを管理するためのパッケージマネージャーのようなもの。

まずは、Node.jsの公式ウェブサイトからインストーラをダウンロードし、指示に従ってNode.jsをインストールしてください。

TypeScriptコンパイラのセットアップ

Node.jsのインストールが完了したら、次はnpmを使用してTypeScriptコンパイラをインストールします。コマンドラインまたはターミナルを開き、以下のコマンドを実行してください。

npm install -g typescript

このコマンドにより、TypeScriptコンパイラがグローバルにインストールされ、任意のプロジェクトで使用できるようになります。インストールが完了したら、以下のコマンドを実行してTypeScriptのバージョンを確認し、正しくインストールされていることを確認します。

tsc --version

IDEの設定

TypeScriptの開発には、Visual Studio Code（VS Code）などのTypeScriptに対応したIDEを使用することをお勧めします。VS Codeは無料で提供されており、TypeScriptのコード補完、リファクタリング、エラーチェックなどの強力な機能を備えています。VS Codeをまだお持ちでない場合は、Visual Studio Codeの公式ウェブサイトからダウンロードしてインストールしましょう。

インストール後、VS Codeで新しいプロジェクトを開き、.ts拡張子を持つファイルを作成すると、自動的にTypeScriptのサポートが有効になります。

これで、TypeScriptの開発環境の基本的なセットアップが完了です。

TypeScriptファイルの作成

ここまでの章でTypeScriptの基本と環境設定の方法を解説してきました。ここからは、実際にTypeScriptを使って最初のファイルを作成し、それをJavaScriptにトランスパイルするプロセスを見ていきます。

このステップでは、TypeScriptの基本的な使い方を理解し、TypeScriptプロジェクトでの作業フローを体験していきます。

TypeScriptファイルの作成

まず、任意のテキストエディタまたはIDE（前述のVisual Studio Codeがお勧め）を使用して、新しいファイルを作成します。ファイル名はhello.tsとしましょう。このファイルに以下のTypeScriptコードを記述してください。

function sayHello(name: string): string {
    return `Hello, ${name}!`;
}

const message = sayHello('TypeScript');
console.log(message);

このコードは、与えられた名前に挨拶を返すシンプルな関数sayHelloを定義しています。ここで、引数nameと戻り値に型アノテーションstringを使用しています。これにより、関数が文字列型の引数を受け取り、文字列型の値を返すことがTypeScriptによって保証されます。

tscコマンドによるトランスパイル

次に、コマンドラインまたはターミナルを開き、hello.tsファイルが保存されているディレクトリに移動します。次のコマンドを実行して、TypeScriptファイルをJavaScriptにトランスパイルしてください。

tsc hello.ts

このコマンドを実行すると、同じディレクトリにhello.jsという新しいファイルが作成されます。このファイルには、hello.tsからトランスパイルされたJavaScriptコードが含まれています。TypeScriptコンパイラは、TypeScriptのコードを標準的なJavaScriptに変換することで、どのJavaScript環境でも実行できるようにします。

実行結果の確認

最後に、トランスパイルされたJavaScriptファイルを実行してみましょう。次のコマンドを使用して、hello.jsをNode.jsで実行します。

node hello.js

コマンドを実行すると、コンソールにHello, TypeScript!というメッセージが表示されます。これは、TypeScriptで書かれたコードが正しくJavaScriptに変換され、期待通りの結果を出力したことを意味します。

これで、あなたはTypeScriptの基本的な使い方をマスターできました。

TypeScriptファイルの作成、トランスパイル、そして実行のプロセスを通じて、TypeScriptがどのように機能するかの基本的な理解を深めることができたかと思います。

Angularにおけるパイプ (Pipe) は、テンプレート内で表示するデータを「見た目」や「形式」の観点から変換・加工する仕組みです。このページでは、初心者向けのイメージと、仕組みの本質的な部分を段階的に解説していきます。

パイプ (Pipe) とは何か？

パイプの目的・役割

1. データ変換 (Formatting / Transforming)
   テンプレート (HTML) に表示する「直前」で、コンポーネントから受け取った生データを、ユーザーが見やすい・使いやすい形に整形する。
   例）日付の表示形式、数値の3桁区切り、文字列の大文字化など。
2. テンプレートの可読性向上
   もしパイプがない場合、コンポーネントやテンプレート内にフォーマット用の複雑な処理が散らばるおそれがある。パイプを使うことで、
   • ビジネスロジック (コンポーネント) と表示用のフォーマット処理 (ビュー) を分離しやすい
   • テンプレートは「必要な変換をパイプでつなぐ」だけになる
     ため可読性が向上する。
3. Angular が提供するビルトイン機能との連携
   代表的なビルトインパイプ (DatePipe, NumberPipe, CurrencyPipe, PercentPipe, UpperCasePipe など) を利用することで、面倒なデータ変換の多くを少ないコードで実現できる。

パイプを使うには

• “|” (パイプ記号) を使う
  テンプレート内で {{ 変数 | pipe名 }} のように使います。複数のパイプをつなげて使うこともできます。

<!-- 例: 価格を3桁区切りにフォーマットし、通貨も付けて表示する -->
{{ price | number:'1.0-0' | currency:'JPY' }}

初心者がつかむべき「イメージ」と簡単な利用シーン

単純なビルトインパイプの利用例

<!-- コンポーネントのプロパティ -->
export class ExampleComponent {
  today = new Date();  // たとえば 2025-01-18
  price = 1234.5;
  userName = 'angular user';
}

<!-- テンプレート -->
<!-- ① 日付を表示 -->
<p>Today: {{ today | date:'yyyy/MM/dd' }}</p>
<!-- 出力例: Today: 2025/01/18 -->

<!-- ② 価格を3桁区切りにして、通貨表記に -->
<p>Price: {{ price | currency:'USD':'symbol':'1.0-2' }}</p>
<!-- 出力例: Price: $1,234.50 -->

<!-- ③ 文字列をすべて大文字に -->
<p>User: {{ userName | uppercase }}</p>
<!-- 出力例: User: ANGULAR USER -->

• このように、{{ 変数 | pipe名:オプション }} の形で、テンプレート上で値を変換するのがパイプの基本的な使い方です。
• 利用シーン: ユーザーに見せたい情報があるとき、コンポーネント側のデータ構造や型はそのままで、最後の「表示」のタイミングだけパイプでスッキリ変換できる。

複数パイプの連続利用

1つの値に対して、パイプ記号 | を複数つなげることも可能です。

<!-- 価格を3桁区切り→JPY表記→大文字に -->
<p>{{ price | number:'1.0-0' | currency:'JPY':'symbol' | uppercase }}</p>

• price を整数表記にして (number:'1.0-0')、
• currency で通貨（￥）を付与し (currency:'JPY')、
• uppercase で最終的に大文字化したものが表示される。

データ変換が段階的に行われるため、一連のフォーマット処理をテンプレート上で可視化しやすいのが利点の１つです。

カスタムパイプの基本と概念

Angularで用意されているビルドインパイプでは要件を満たさない場合、自分でパイプを作成することもできます。

例）日付 +「何日前」「何時間前」といった表示形式にしたい、配列を特定の条件でフィルタリングしたい、など。

カスタムパイプの最小構成

// ex-rate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'exRate' // テンプレート上で使うパイプ名
})
export class ExRatePipe implements PipeTransform {
  // transformメソッドが肝。引数は自由に定義できる（最初が「値」、それ以降がパラメータ）
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

1. @Pipe() デコレーターで、パイプであることとパイプ名を宣言。
2. PipeTransform インターフェースの transform メソッドを実装する（必須）。
3. 変換したい処理を transform で書き、戻り値を返す。

テンプレートでの使用例

<!-- コンポーネントで amount = 100 として、1ドル=135円換算 で表示 -->
<p>JPY: {{ amount | exRate:135 }}</p>
<!-- 実行結果: 13500 -->

@Pipe({
  name: 'exRate'
})
export class ExRatePipe implements PipeTransform {
  transform(value: number, rate: number): number {
    return value * rate;
  }
}

Change Detection (変更検知) との関係

(1) Angular における変更検知

• Angular はコンポーネントのプロパティが変わったかどうかを監視 (Change Detection) し、変更があればテンプレートを再描画 (再評価) する仕組み。
• 純粋パイプ (Pure Pipe) は「入力値 (およびその参照) が変わったときのみ」transform を再実行する。
• 非純粋パイプ (Impure Pipe) は「変更検知サイクルごとに」transform を再実行する。

(2) 純粋パイプと非純粋パイプ

1. 純粋パイプ (Pure Pipe)
   • デフォルトではこちら。@Pipe({ name: 'xxx' }) と書くだけで純粋パイプとして扱われる。
   • 値が変わったときだけ再評価されるので、パフォーマンスによい。
   • 単純な日付変換や数値フォーマットなど、入力値が変わらないときに「結果も変わらない」処理に最適。
2. 非純粋パイプ (Impure Pipe)
   • @Pipe({ name: 'xxx', pure: false }) のように、pure: false を指定すると非純粋パイプになる。
   • 変更検知サイクルのたびに毎回 transform が走るので、配列やオブジェクトの“中身”の変化に対しても都度再評価される。
   • 利用シーン:
     • 配列・オブジェクトをテンプレート上でフィルタやソートしたいときに、「単純に参照が新規になった/ならない」を超えて、内容の微細な変化に対応させたい場合など。
     • ただしパフォーマンスに影響するので、よく検討してから使う。

非純粋パイプの簡単な例

@Pipe({
  name: 'search',
  pure: false // 非純粋パイプ
})
export class SearchPipe implements PipeTransform {
  transform(items: any[], keyword: string): any[] {
    return items.filter(item => item.name.includes(keyword));
  }
}

この例では、items (配列) や keyword (検索文字列) が細かく変化するたびにパイプを再評価し、フィルタ済みの配列を返す。もし純粋パイプだと、配列の「参照」が同じままでは再実行されないため、意図するタイミングで結果が更新されない場合がある。とはいえ「毎回呼ばれる」ことになるため、大きな配列・複雑な処理には注意が必要です。

具体的な利用シーンとコード例

シーン1: ユーザー一覧の表示をフィルタ/ソートしたい

• パイプでフィルタ処理を書けば、テンプレートに | filterUser:'xxx' のように書くだけで表示を切り替えられる。
• ただし大量データがある場合は、都度全件フィルタするとパフォーマンスが落ちるため、コンポーネント側でフィルタした結果を保持するなど検討が必要。

@Pipe({ 
  name: 'filterUser'
})
export class FilterUserPipe implements PipeTransform {
  transform(users: { id: number; name: string; }[], searchTerm: string): any[] {
    if (!searchTerm) return users;
    return users.filter(user => 
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }
}

<!-- テンプレート -->
<input [(ngModel)]="keyword" placeholder="検索ワード" />
<ul>
  <li *ngFor="let user of users | filterUser:keyword">
    {{ user.name }}
  </li>
</ul>

シーン2: 日付の差分を表示したい (たとえば「xx日前」「xx時間前」)

• ビルトインの DatePipe では「相対的な日付表示」はサポートしていない (locale, format によるもの) ので、カスタムパイプで実装する。

@Pipe({
  name: 'relativeTime'
})
export class RelativeTimePipe implements PipeTransform {
  transform(value: Date): string {
    const now = new Date();
    const diffMs = now.getTime() - value.getTime();
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));

    if (diffDays > 0) {
      return `${diffDays}日前`;
    } else if (diffHours > 0) {
      return `${diffHours}時間前`;
    } else {
      return 'たった今';
    }
  }
}

<!-- テンプレート例 -->
<p>投稿時刻: {{ post.createdAt | relativeTime }}</p>
<!-- 出力例: "1日前" "2時間前" ... -->

パイプは「コンポーネント → テンプレート」の単方向データフローの、テンプレート直前でのフォーマット処理 としてとらえると理解しやすいです。

前提として「Angularの変更検知の流れ (コンポーネントのプロパティが変わるとテンプレートに反映される)」を押さえておけば、純粋パイプと非純粋パイプの振る舞いも自然と理解できるでしょう。一度使ってみるとその便利さを実感できるので、まずはビルトインパイプの日付フォーマットや数値フォーマットから試し、必要に応じてカスタムパイプでオリジナルの変換処理を実装してみてください。