たとえば、サーバーからデータを取得する処理は、クリックした瞬間に結果が返ってくるとは限りません。通信には時間がかかりますし、失敗することもあります。

Promiseを使うと、そのような非同期処理に対して「成功したらこの処理」「失敗したらこの処理」「最後にこの処理」という形で、後続の処理を整理できます。

Promiseは「値そのもの」ではありません。まだ終わっていない処理の結果を、あとで受け取るための箱のようなものです。

この記事では、Promiseとは何か、then・catch・finallyの使い方、fetchやasync/awaitとの関係を初心者向けに順番に解説します。

まず結論：Promiseは非同期処理の結果をあとで受け取る仕組み

Promiseを最初に理解するときは、次のように考えると分かりやすいです。

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

Promiseは、処理が終わる前に「将来の結果を表すオブジェクト」として返されます。MDNでも、Promiseは非同期処理の最終的な完了または失敗と、その結果の値を表すオブジェクトとして説明されています。

つまり、Promiseは「通信結果そのもの」ではなく、通信結果をあとで受け取るための窓口です。

Promiseが必要になる理由

JavaScriptでは、ブラウザ操作や通信処理など、すぐに終わらない処理がよく出てきます。代表例は、APIからデータを取得するfetchです。

もし通信が終わるまで画面全体が止まってしまうと、ユーザーは何も操作できません。そのためJavaScriptでは、時間がかかる処理を待っている間も、他の処理を進められるように非同期処理を使います。

ただし、非同期処理には問題があります。結果がいつ返るか分からないため、普通の変数代入の感覚で書くと、まだ結果がない状態を読んでしまいます。

そこでPromiseを使い、結果が返ってきたあとに実行する処理を登録します。

Promiseの3つの状態

Promiseには、処理の進み具合を表す状態があります。最初は細かい仕様名よりも、次の3つを押さえれば十分です。

Promiseは最初はpendingです。その後、成功すればfulfilled、失敗すればrejectedになります。

この図では、Promiseを「非同期処理の結果をあとで受け取る流れ」として見てください。thenは成功、catchは失敗、finallyは最後の後片付けに対応します。

then・catch・finallyの基本

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

一番シンプルな形は次の通りです。

fetch("https://example.com/api/users")
  .then((response) => response.json())
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error("取得に失敗しました", error);
  })
  .finally(() => {
    console.log("処理が終わりました");
  });

thenは成功した結果を次へ渡します。catchは途中で失敗したときに呼ばれます。finallyは、成功しても失敗しても最後に実行されます。

Promiseチェーンとは？

Promiseでは、thenをつなげて処理を順番に書けます。このつながりをPromiseチェーンと呼ぶことがあります。

次の例では、最初のthenでレスポンスをJSONに変換し、次のthenで変換後のデータを使っています。

fetch("/users.json")
  .then((response) => response.json())
  .then((users) => users.filter((user) => user.active))
  .then((activeUsers) => {
    console.log(activeUsers);
  })
  .catch((error) => {
    console.error(error);
  });

ポイントは、前のthenで返した値が、次のthenへ渡されることです。

配列のfilterやmapがあやふやな場合は、map・filter・reduceの違いも参考になります。

fetch APIとPromiseの関係

fetchは、HTTP通信を行うためのWeb APIです。そしてfetch()を呼び出すとPromiseが返ります。

そのため、fetchのコードではPromiseの理解がほぼ必須になります。

const promise = fetch("/api/users");

console.log(promise); // Promiseが入っている

この時点で得られるのは、ユーザー一覧そのものではありません。通信結果をあとで受け取るためのPromiseです。

fetchのGET・POSTの基本は、fetch APIとは？で詳しく解説しています。

async/awaitとの違い

async/awaitは、Promiseをより自然な順番で書くための構文です。Promiseと別物というより、Promiseを読みやすく扱うための書き方です。

Promiseチェーンで書くと次のようになります。

fetch("/api/users")
  .then((response) => response.json())
  .then((users) => console.log(users))
  .catch((error) => console.error(error));

同じ処理をasync/awaitで書くと、次のようになります。

async function loadUsers() {
  try {
    const response = await fetch("/api/users");
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error(error);
  }
}

awaitはPromiseの完了を待ち、その結果を取り出します。async/awaitの基本は、async/awaitとは？の記事で解説しています。

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

特に多いのは、thenの中で値を返し忘れることです。次の処理に値を渡したい場合は、returnを意識しましょう。

Promiseをどんな場面で使うのか

Promiseは、次のような非同期処理でよく使われます。

• APIからデータを取得する
• 一定時間後に処理する
• ファイルや画像の読み込みを待つ
• 複数の非同期処理を順番に実行する
• 複数の非同期処理をまとめて待つ

ただし、最初からPromise.allやPromise.raceなどをすべて覚える必要はありません。まずはthen・catch・finallyと、async/awaitとの関係を押さえましょう。

関連して読みたい記事

• JavaScriptのコールバック関数とは？
• fetch APIとは？GETとPOSTの使い方
• async/awaitとは？Promiseとの違い
• JavaScriptのスコープとは？

まとめ

JavaScriptのPromiseは、非同期処理の結果をあとで受け取るための仕組みです。

• thenは成功時の処理を書く
• catchは失敗時の処理を書く
• finallyは最後の後片付けを書く
• async/awaitはPromiseを読みやすく扱う構文

Promiseを理解すると、fetchやasync/awaitのコードがかなり読みやすくなります。最初は「まだ終わっていない処理の結果を、あとで受け取る約束」と考えれば十分です。

たとえば、ユーザー情報を表す型を毎回{ id: number; name: string }と書くのは読みにくくなります。そこでtype User = ...のように名前を付けます。

初心者が迷いやすいのは、typeとinterfaceの違いです。どちらもオブジェクトの形を表せますが、得意な使いどころが少し違います。

最初は「typeは型に名前を付ける」「interfaceはオブジェクトの形を宣言する」と分けて考えると理解しやすいです。

この記事では、TypeScriptのtypeとは何か、基本構文、union型での使い方、interfaceとの違い、実務での使い分けを初心者向けに解説します。

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

typeは、型に別名を付けるために使います。TypeScript公式ドキュメントでも、type aliasは任意の型に名前を付けるものとして説明されています。

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

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

この例では、{ id: number; name: string }というオブジェクトの型に、Userという名前を付けています。

一度名前を付けると、変数、関数の引数、戻り値などで同じ型を使い回せます。

typeが必要になる理由

TypeScriptでは、型を直接書くこともできます。

function printUser(user: { id: number; name: string }) {
  console.log(user.name);
}

短いコードならこれでも問題ありません。しかし、同じ型を何度も書くと、コードが長くなり、修正漏れも起きやすくなります。

typeを使うと、型の意味が名前で分かるようになります。

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

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

このように、typeはコードを短くするためだけでなく、型の意味を名前で伝えるために使います。

typeの基本構文

typeの基本構文は次の通りです。

type 型名 = 型;

オブジェクト型に名前を付ける場合は、次のように書きます。

type Product = {
  id: number;
  name: string;
  price: number;
};

関数の引数や戻り値にも使えます。

function formatProduct(product: Product): string {
  return `${product.name}: ${product.price}円`;
}

TypeScriptの型注釈や関数の基本がまだ曖昧な場合は、TypeScript超入門やTypeScriptの関数宣言/関数式を先に読むと理解しやすくなります。

typeはunion型にも名前を付けられる

typeの大きな特徴は、オブジェクト型だけでなく、union型にも名前を付けられることです。

type ID = number | string;

function findUser(id: ID) {
  console.log(id);
}

number | stringは、「数値または文字列」という意味です。このような型をunion型と呼びます。

毎回number | stringと書く代わりにIDと名付けることで、「これはIDとして扱う値だ」と読み取りやすくなります。

この図では、typeを「型そのものを作る魔法」ではなく、型に名前を付けて使いやすくする入口として見てください。

interfaceとの違い

typeとinterfaceは、どちらもオブジェクトの形を表せます。

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

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

この例だけを見ると、ほとんど同じに見えます。実際、単純なオブジェクト型であれば、どちらでも表せます。

TypeScript公式ドキュメントでも、ほとんどのinterfaceの機能はtypeでも使える一方、interfaceは後から拡張できる点が大きな違いとして説明されています。

すでにTypeScriptのinterfaceを読んでいる場合は、この記事と合わせて見ると使い分けが整理しやすくなります。

typeを使うとよい場面

typeは、次のような場面で特に便利です。

• union型に名前を付けたい
• tuple型に名前を付けたい
• 関数型に名前を付けたい
• 複数の型を組み合わせたい
• APIレスポンスの型を読みやすく整理したい

たとえば、状態を文字列で表す場合はtypeが分かりやすいです。

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

function render(status: Status) {
  if (status === "loading") {
    return "読み込み中";
  }
  if (status === "success") {
    return "成功";
  }
  return "エラー";
}

このように書くと、statusには決められた文字列だけを渡せます。入力ミスにも気づきやすくなります。

interfaceを使うとよい場面

一方、interfaceは、オブジェクトの形を中心に扱う場面でよく使われます。

• クラスに実装させる契約を表したい
• オブジェクトの構造を外部に公開したい
• ライブラリや拡張前提の型を定義したい
• 同じ名前のinterfaceを後から拡張したい

たとえば、クラスが持つべきメソッドを表す場合はinterfaceが読みやすいことがあります。

interface Repository {
  findById(id: string): Promise<User>;
  save(user: User): void;
}

ただし、これは絶対ルールではありません。プロジェクトごとのコーディング規約がある場合は、それに従うのが実務では重要です。

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

特に重要なのは、typeは実行時の値ではなく、開発中にコードを安全に読むための型情報だという点です。

実務での使い分けの目安

迷ったときは、次のように考えると整理しやすくなります。

初心者のうちは、まずtypeでunion型、interfaceでオブジェクトの契約、と覚えると混乱しにくくなります。

関連して読みたい記事

• TypeScript超入門
• TypeScript入門
• TypeScriptのinterfaceとは？
• TypeScriptの変数と基本的な型
• TypeScriptの関数宣言/関数式

まとめ

TypeScriptのtypeは、型に名前を付けるための書き方です。

• 同じ型を何度も書かずに済む
• 型の意味を名前で伝えられる
• union型やtuple型にも名前を付けられる
• interfaceとは拡張方法や得意分野が違う

最初は、type ID = number | stringのような短い例から始めると理解しやすくなります。慣れてきたら、APIレスポンスや画面状態の型にも使ってみましょう。

たとえば、ある人のPCでは動くのに、別の人のPCでは動かない、という問題があります。Node.jsやPython、データベース、ライブラリのバージョンが違うと、同じコードでも動きが変わることがあります。

Dockerを使うと、アプリに必要な実行環境をイメージとしてまとめ、コンテナとして起動できます。これにより、開発環境、テスト環境、本番環境の差を小さくしやすくなります。

Dockerは「軽い仮想マシン」と説明されることがありますが、厳密には仮想マシンそのものではありません。まずはコンテナを動かす仕組みとして理解しましょう。

この記事では、Dockerとは何か、コンテナ・イメージ・Dockerfileの関係、仮想マシンとの違い、開発現場で使う理由を初心者向けに解説します。

まず結論：Dockerはアプリの実行環境をまとめて扱う仕組み

Dockerを最初に理解するときは、次の流れで考えると分かりやすいです。

Dockerfileを書く
  ↓
Dockerイメージを作る
  ↓
イメージからコンテナを起動する
  ↓
アプリが決められた環境で動く

Docker公式ドキュメントでも、Dockerはコンテナと呼ばれる分離された環境でアプリケーションをパッケージ化し、実行できるプラットフォームとして説明されています。

初心者のうちは、Dockerを「環境ごとアプリを動かしやすくする道具」として理解すれば十分です。

Dockerが必要になる理由

開発では、コードだけでなく実行環境も重要です。アプリが動くには、プログラミング言語の実行環境、ライブラリ、設定ファイル、OS上のツール、データベースなどが関係します。

これらが人によって違うと、次のような問題が起きます。

• 自分のPCでは動くが、他の人のPCでは動かない
• 本番環境だけエラーになる
• 環境構築の手順が長く、新人が詰まりやすい
• 古いプロジェクトと新しいプロジェクトで必要なバージョンが衝突する

Dockerは、このような環境差を小さくするために使われます。環境構築の手順をファイルとして残し、同じイメージから同じようなコンテナを起動できるようにします。

サーバーの基本がまだ曖昧な場合は、先にサーバーとは何か？を読むと、Dockerがどこで役立つかイメージしやすくなります。

コンテナとは何か

コンテナとは、アプリとその実行に必要なものを、他の環境から分けて動かすための単位です。

Docker公式の入門ドキュメントでは、コンテナはアプリの各部品ごとに分離されたプロセスとして説明されています。重要なのは、コンテナがホストOS全体を丸ごと複製するわけではない点です。

コンテナは、必要なファイルや設定を持ちながら、ホストや他のコンテナへの影響を小さくしてアプリを動かします。

イメージとは何か

Dockerイメージとは、コンテナを起動するためのテンプレートです。Docker公式ドキュメントでも、イメージはコンテナを作るための読み取り専用テンプレートとして説明されています。

たとえば、Node.jsアプリを動かすなら、Node.jsの実行環境、アプリのコード、必要なライブラリ、起動コマンドなどをイメージにまとめます。

イメージとコンテナの違いは、次のように考えると分かりやすいです。

この図では、Dockerfile、イメージ、コンテナの関係を左から右へ見てください。Dockerを理解するときは、まずこの3つを分けることが重要です。

Dockerfileとは何か

Dockerfileとは、Dockerイメージを作るための手順を書いたファイルです。

たとえば、次のような内容を書きます。

FROM node:22
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "start"]

この例では、Node.jsのイメージを土台にして、作業ディレクトリを作り、依存ライブラリをインストールし、最後にアプリを起動しています。

Dockerfileがあると、環境構築の手順を口頭や手順書だけでなく、実行できる形で残せます。

Dockerでよく出てくるコマンドの流れ

Dockerを学び始めると、build、run、ps、stopなどのコマンドが出てきます。最初はすべてを暗記するより、何を操作しているのかを分けて考えることが大切です。

ここでも中心になるのは、イメージとコンテナの違いです。buildはテンプレートを作る操作、runはそのテンプレートから実体を起動する操作、と見ると混乱しにくくなります。

また、実務では複数のコンテナをまとめて起動するためにDocker Composeを使うこともあります。ただし、初心者の最初の理解では、まず1つのDockerfileから1つのイメージを作り、1つのコンテナを起動する流れを押さえるのが先です。

仮想マシンとの違い

Dockerコンテナと仮想マシンは、どちらも環境を分けるために使われます。ただし仕組みは違います。

Docker公式ドキュメントでも、仮想マシンはカーネルやドライバを含むOS全体を持つ一方、コンテナは必要なファイルを持つ分離されたプロセスとして説明されています。

そのため、Dockerは仮想マシンより軽く扱えることが多いですが、すべての用途で仮想マシンの代わりになるわけではありません。

Dockerを使うメリット

Dockerを使う主なメリットは次の通りです。

• 環境構築を再現しやすい
• 開発者ごとの差を小さくできる
• CI/CDで同じ環境を使いやすい
• アプリと依存関係をまとめて扱いやすい
• 古い環境と新しい環境を分けやすい

特にCI/CDでは、テストやビルドを毎回同じ環境で実行しやすくなります。CI/CDの基本は、GitHub Actionsとは？やビルドとは？と一緒に見ると理解がつながります。

Dockerを使うときの注意点

Dockerは便利ですが、使えば自動的にすべてが解決するわけではありません。

初心者のうちは、まずローカル開発環境で小さく使い、イメージとコンテナの違いを実際に確認するのがおすすめです。

関連して読みたい記事

• サーバーとは何か？
• VPSとは？
• ビルドとは？
• GitHub Actionsとは？
• APIとは？Web APIとの違い

まとめ

Dockerは、アプリを動かすための環境をコンテナとしてまとめ、どこでも同じように動かしやすくするための仕組みです。

• Dockerfileはイメージを作る手順
• イメージはコンテナを起動するテンプレート
• コンテナは実際に動いている実行環境
• 仮想マシンとは仕組みが違う
• 環境差を減らし、開発やCI/CDを進めやすくする

最初から本番運用まで理解する必要はありません。まずは、Dockerfile、イメージ、コンテナの3つを分けて考えるところから始めましょう。

たとえば、開発者がGitHubにコードをpushしたとします。そのたびに、人が手作業でビルドして、テストして、問題がなければデプロイの準備をするのは大変です。そこで使われる考え方がCI/CDです。CI/CDでは、コード変更をきっかけに、ビルド、テスト、成果物作成、デプロイ準備などを自動で実行します。

CI/CDはツール名ではありません。GitHub ActionsやJenkinsなどは、CI/CDを実現するための道具です。

この記事では、CI/CDとは何か、CIとCDの違い、ビルド・テスト・デプロイとの関係、GitHub Actionsとのつながりを初心者向けに解説します。

まず結論：CI/CDは変更を安全に届けるための流れ

CI/CDを最初に理解するときは、次のように考えると分かりやすいです。

コードを変更する
  ↓
自動でビルドする
  ↓
自動でテストする
  ↓
問題がなければ、届けられる状態にする

この一連の流れをまとめてCI/CDと呼びます。

日本語では、CIは「継続的インテグレーション」、CDは「継続的デリバリー」または「継続的デプロイメント」と呼ばれます。

難しく見えますが、初心者のうちは「変更したコードを、毎回きちんと確認して、届けやすくする仕組み」と理解すれば十分です。

CIとは？変更をこまめに取り込み、自動で確認すること

CIは、Continuous Integrationの略です。直訳すると「継続的インテグレーション」です。

インテグレーションとは、複数の変更を1つに統合することです。チーム開発では、複数人がそれぞれコードを変更します。その変更を長期間ため込むと、あとでまとめたときに問題が起きやすくなります。

CIでは、コードの変更をこまめに取り込み、そのたびに自動で確認します。

• ビルドできるか
• テストが通るか
• 基本的なチェックに失敗していないか

つまりCIの目的は、問題を早く見つけることです。

ビルドの意味が曖昧な場合は、先にビルドとは？を読むと理解しやすくなります。コンパイルとの違いは、コンパイルとは？で整理しています。

CDとは？確認済みの変更を届けられる状態にすること

CDは、文脈によって2つの意味で使われます。

初心者がまず押さえるべきなのは、CDは「確認済みの変更を届ける段階」だということです。

ただし、すべての現場で本番環境への反映まで完全自動化しているわけではありません。最後の公開判断は人が行い、そこまでのビルドやテスト、リリース準備を自動化する構成もよくあります。

「CD」とだけ書かれている場合は、継続的デリバリーなのか、継続的デプロイメントなのかを文脈で確認しましょう。

CI/CDの全体像を図で整理する

CI/CDは、コード変更からリリース準備までをつなぐパイプラインとして考えると理解しやすくなります。

次の図では、CIは「壊れていないか確認する場所」、CDは「届けられる状態にする場所」として見てください。CI/CDをツール名として覚えるより、この流れで見る方が実務の会話を理解しやすくなります。

パイプラインとは、複数の処理を順番につないだ流れのことです。CI/CDパイプラインでは、たとえば次のような処理が順番に動きます。

• コードがpushされる
• 依存ライブラリを準備する
• ビルドする
• 自動テストを実行する
• 成果物を作る
• 必要に応じてデプロイする

重要なのは、CI/CDが「一度設定したら何でも勝手にうまくいく魔法」ではないことです。どのチェックを実行するか、失敗したときに止めるか、誰が最終確認するかは、プロジェクトごとに設計します。

CI/CDでは何が自動化されるのか

CI/CDで自動化される代表的な処理を整理します。

すべてのプロジェクトで、これらを全部自動化する必要があるわけではありません。最初は「pushしたらテストだけ自動で動く」でもCIの第一歩です。

GitHub ActionsとCI/CDの関係

GitHub Actionsは、GitHub上でワークフローを自動実行できる仕組みです。CI/CDそのものではなく、CI/CDを実現するためのツールの1つです。

たとえば、GitHubにpushされたらテストを実行する、pull requestが作られたらビルドする、といった処理を自動化できます。

name: ci

on:
  push:
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm test

この例では、pushやpull requestをきっかけに、依存ライブラリのインストールとテストを実行しています。実際の設定はプロジェクトによって変わりますが、考え方は同じです。

GitHub Actionsの基本は、GitHub Actionsとは？の記事で解説しています。Gitの変更単位であるコミットについては、Gitのコミットとは何か？もあわせて読むと理解しやすくなります。

CI/CDを使うメリット

CI/CDを使うメリットは、単に作業が楽になることだけではありません。開発の品質とスピードを両方支えるために使われます。

• 問題を早く見つけられる
• 手作業によるミスを減らせる
• チーム全員が同じ確認手順を使える
• リリース前の不安を小さくできる
• 小さな変更をこまめに届けやすくなる

特に大きいのは、問題を「あとでまとめて見つける」のではなく、「変更した直後に見つける」点です。

テストの考え方を押さえたい場合は、システムテストの７原則や、ホワイトボックステストとブラックボックステストの違いも参考になります。

手作業リリースとの違い

CI/CDを導入する前は、ビルドやテスト、デプロイ準備を人が手順書に沿って実行することがあります。もちろん手作業がすべて悪いわけではありませんが、毎回同じ確認を人が行うと、漏れや手順違いが起きやすくなります。

この比較図で見てほしいのは、CI/CDが単に「作業を楽にする仕組み」ではない点です。重要なのは、確認を人の記憶や手順から、毎回同じように動く仕組みへ移すことです。

ただし、CI/CDを入れれば品質が自動的に上がるわけではありません。意味のあるテストやチェックを用意し、その結果をチームが見て改善していくことが重要です。

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

CI/CDで初心者がつまずきやすいポイントを整理します。

特に大事なのは、CI/CDを「自動化ツールの設定」とだけ考えないことです。CI/CDの本質は、変更を小さく確認し、問題を早く見つけ、届けるまでの流れを安定させることです。

関連して読みたい記事

CI/CDは、Git、ビルド、テスト、構成管理とつながっている用語です。次の記事もあわせて読むと理解が深まります。

• GitHub Actionsとは？仕組みや使い方を３分でわかりやすく
• ビルドとは？プログラミングの基本用語を１分でわかりやすく
• コンパイルとは？初心者向けに1からわかりやすく解説
• Gitのコミットとは何か？その本質を3分でわかりやすく解説
• 構成管理とは？目的と意味を３分で解説！

まとめ

CI/CDとは、コードの変更を自動で確認し、安全に届けるための流れです。

• CIは、変更をこまめに取り込み、自動で確認すること
• CDは、確認済みの変更を届けられる状態にすること
• GitHub Actionsなどのツールは、CI/CDを実現する手段
• CI/CDの目的は、問題を早く見つけ、手作業のミスを減らすこと

最初から高度なデプロイ戦略まで覚える必要はありません。まずは、「pushしたら自動でビルド・テストが動き、問題があれば早く気づける仕組み」として理解すると、CI/CDの全体像をつかみやすくなります。

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

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

JSPとは何か？

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

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

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

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

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

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

it-biz.online

2026.04.26

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

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

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

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

JSPとはどのような技術か

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

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

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

JSPの動作のしくみ

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

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

JSPの動き方の流れ

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

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

JSPを動かすための準備

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

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

JSPの動作に必要なもの

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

JDKのインストール

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

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

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

it-biz.online

2026.04.16

手順

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

java -version

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

Tomcatのインストール

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

手順

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

無効なURLです

localhost

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

JSP用のフォルダを作る

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

手順

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

エディタの準備

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ブラウザで表示してみる

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

無効なURLです

localhost

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

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

JSPの基本構文

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

JSPの構成要素

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

ディレクティブ

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

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

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

スクリプトレット

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

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

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

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

式（Expression）

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

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

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

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

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

宣言

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

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

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

コメントの書き方

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

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

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

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

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

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

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

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

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

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

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

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

EL（式言語）とは

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

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

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

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

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

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

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

JSTLを使う準備

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

手順

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

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

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

JSTLで条件分岐をする

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

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

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

JSTLで繰り返し表示をする

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

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

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

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

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

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

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

JSPをすっきり保つために

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

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

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

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

フォーム送信の流れ

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

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

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

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

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

entry.jsp

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

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

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

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

result.jsp

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

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

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

ELを使って書き換える

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

Servlet側（例）

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

result.jsp：

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

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

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

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

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

セッションの基本操作

データの保存：

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

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

データの取得：

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

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

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

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

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

Cookieとは

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

Cookieの基本操作

Cookieの作成と送信：

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

Cookieの取得：

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

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

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

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

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

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

アプリの構成と目的

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

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

プロジェクト構造

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

入力画面：input.jsp

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

確認画面：confirm.jsp

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

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

完了画面：thanks.jsp

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

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

たとえば、名簿の中から「Sで始まる名前だけ」を取り出して、「大文字」に変えて、「新しいList」にしたいとします。このような処理を、上から順番に読める形で書けるのがStream APIです。

最初から難しい用語を覚える必要はありません。まずは「データを流して、途中で絞り込みや変換をして、最後に結果を受け取る」と考えればOKです。

この記事では、Stream APIの意味、for文との違い、filter・map・collectの読み方を、初心者向けにできるだけかみ砕いて解説します。

なお、この記事で扱うStreamは、java.util.streamのStream APIです。ファイルの読み書きで出てくるInputStreamやOutputStreamとは別物です。ファイル入出力のストリームは、Java.ioを使用したファイルの読み書きで解説しています。

まず結論：Stream APIは「データを順番に加工する書き方」

Stream APIを理解するときは、次の3つだけを先に押さえてください。

• 元になるデータを用意する
• 途中で、必要なものだけ残したり、形を変えたりする
• 最後に、Listなどの結果として受け取る

この流れをコードで書くと、だいたい次の形になります。

元のデータ.stream()
        .途中の処理()
        .途中の処理()
        .最後に結果を受け取る処理();

専門用語では、途中の処理を「中間操作」、最後の処理を「終端操作」と呼びます。ただ、初心者のうちは、まず「途中の処理」と「最後の処理」と考えれば十分です。

何に困ったときにStream APIを使うの？

Stream APIは、複数のデータをまとめて扱うときによく使います。

たとえば、次のような場面です。

• Listの中から条件に合うデータだけ取り出したい
• Listの中身を別の形に変換したい
• 条件に合うデータが何件あるか数えたい
• 最初の1件だけ取り出したい

つまりStream APIは、「データの一覧をどう加工するか」を書くときに便利です。

まだListやMapがあやふやな場合は、先にJavaのListやMapの使い方を読むと理解しやすくなります。

まずはこのコードを読めればOK

Stream APIの基本は、次のコードでかなりつかめます。

List<String> result = names.stream()
        .filter(name -> name.startsWith("S"))
        .map(name -> name.toUpperCase())
        .collect(Collectors.toList());

このコードは、次のように読みます。

この読み方ができれば、最初の一歩としては十分です。

for文で書く場合と比べてみる

Stream APIでできることは、for文でも書けます。まず、for文で書くと次のようになります。

List<String> result = new ArrayList<>();

for (String name : names) {
    if (name.startsWith("S")) {
        result.add(name.toUpperCase());
    }
}

これはこれで分かりやすい書き方です。ただし、処理の流れを読むには、resultを作って、for文で回して、if文で判定して、addする、という手順を追う必要があります。

同じ処理をStream APIで書くと、次のようになります。

List<String> result = names.stream()
        .filter(name -> name.startsWith("S"))
        .map(name -> name.toUpperCase())
        .collect(Collectors.toList());

Stream APIでは、「何をしたいのか」が上から順番に並ぶため、慣れると処理の目的を読み取りやすくなります。

Stream APIは「for文より偉い書き方」ではありません。データを絞り込み、変換し、結果を作る流れを見せたいときに便利な書き方です。

filter・map・collectを1つずつ理解する

初心者が最初に覚えるべきなのは、filter・map・collectの3つです。

filterは「条件に合うものだけ残す」

filterは、条件に合うデータだけを残す処理です。

.filter(name -> name.startsWith("S"))

この例では、「Sで始まる名前だけ残す」という意味です。条件に合わないTanakaのような名前は、次の処理へ進みません。

mapは「別の形に変える」

mapは、データを別の形に変える処理です。

.map(name -> name.toUpperCase())

この例では、名前を大文字に変えています。SatoはSATOになります。

collectは「最後に結果を受け取る」

collectは、途中で処理した結果を最後に受け取るための処理です。

.collect(Collectors.toList())

この例では、処理結果を新しいListとして受け取っています。

ここで出てくるname -> ...の部分はラムダ式です。ラムダ式が分からない場合は、Javaのラムダ式の記事をあわせて読むと理解しやすくなります。

実際に動くサンプルコード

全体のコードは次の通りです。

import java.util.Arrays;
import java.util.List;
import java.util.stream.Collectors;

public class StreamSample {
    public static void main(String[] args) {
        List<String> names = Arrays.asList("Sato", "Suzuki", "Tanaka", "Sasaki");

        List<String> result = names.stream()
                .filter(name -> name.startsWith("S"))
                .map(name -> name.toUpperCase())
                .collect(Collectors.toList());

        System.out.println(result);
    }
}

実行すると、次のように表示されます。

[SATO, SUZUKI, SASAKI]

TanakaはSで始まらないため、filterの時点で除外されています。

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

Stream APIで最初につまずきやすいポイントを整理します。

特に大事なのは、Streamは元のListを直接書き換えるものではないという点です。

次のコードでは、大文字にした結果はresultに入ります。元のnamesがそのまま大文字に変わるわけではありません。

List<String> result = names.stream()
        .map(name -> name.toUpperCase())
        .collect(Collectors.toList());

また、findFirst()のようなメソッドではOptionalが出てくることがあります。Optionalについては、JavaのOptionalとは？で解説しています。

Stream APIはいつ使う？いつ使わない？

Stream APIは、次のような処理に向いています。

• Listから条件に合うものだけ取り出す
• データを別の形に変換する
• 件数を数える
• 処理の流れを短く、読みやすく見せたい

一方で、処理の途中で複雑な分岐が何度も出てくる場合や、for文の方が素直に読める場合は、無理にStream APIを使う必要はありません。

Stream APIは、コードを短くするためだけの道具ではありません。データをどう加工して、最後に何を得たいのかを見やすくするための道具です。

関連して読みたい記事

Stream APIは、Javaの他の基礎知識とつながっています。

• Java：ListやMapの使い方を3分で1から解説
• Java：ラムダ式（lambda）を3分でわかりやすく
• Javaの関数型インターフェースを1分でわかりやすく
• JavaのOptionalとは？nullを安全に扱う基本
• Java学習ロードマップ完全版

まとめ

JavaのStream APIは、Listなどのデータを「処理の流れ」として書くための仕組みです。

初心者のうちは、まず次の3つだけ覚えてください。

• filterは、条件に合うものだけ残す
• mapは、別の形に変える
• collectは、最後に結果を受け取る

最初から難しいメソッドを全部覚える必要はありません。まずは、names.stream().filter(...).map(...).collect(...)という流れを読めるようになればOKです。

ステップ１：Javaファイルの作成

まず、ステップ１：Javaのプログラムを書いて保存します。基本的な構文ルールはこちら（関連　Javaの1stステップ：基本的な構文ルールを１分で復習！）を参考にしてみてください。

Javaファイル作成手順

1. テキストエディタを開く
   • メモ帳、VS Code、Eclipseなどのテキストエディタを使用します。どのような手段を使ってもOKで、どの方法でも最終的な結果に影響することはありません。
2. コードを入力する
   • 以下のコードを入力します。これは「Hello World」と表示するシンプルなプログラムです。

// HelloWorld.java

public class HelloWorld {
    public static void main(String[] args) {
        // "Hello, World!" をコンソールに出力します
        System.out.println("Hello, World!");
    }
}

3. ファイルを保存する：
   • HelloWorld.java という名前で保存します。保存する場所はPCのデスクトップでもドキュメントフォルダでもどこでもOK。（Javaプログラムはこの保存したディレクトリ上でコンパイル～実行することになります。）
   • ファイル名とクラス名（この場合は HelloWorld）は同じにする必要があります。

ステップ２：Javaファイルのコンパイル

次に、Javaファイルをコンパイルして、コンピュータが理解できる形（バイトコード）に変換します。

コンパイル手順

1. コマンドラインを開く
   • Windowsの場合は「コマンドプロンプト」、MacやLinuxの場合は「ターミナル」を開きます。
2. 保存したディレクトリに移動する
   • cd コマンドを使って、HelloWorld.java を保存したディレクトリに移動します。
   • 例：ファイルがデスクトップに保存されている場合「cd Desktop」
3. コンパイルコマンドを入力する
   • 以下のコマンドを入力してコンパイルします。
     javac HelloWorld.java
4. バイトコードファイルが生成
   • コンパイルが成功すると、HelloWorld.class というファイルが生成されます。

javac -encoding UTF-8 HelloWorld.java

ステップ３：プログラムの実行

最後に、生成されたバイトコードファイルを実行します。

プログラム実行手順

1. 実行コマンドを入力する
   • 以下のコマンドを入力してプログラムを実行します。
     java HelloWorld
     
   • ここで指定している「HelloWorld」はJavaの「クラス名」です。クラスを指定してjavaコマンドを実行することで.classファイルが動きます。
2. プログラムの出力を確認
   • コンソールに Hello, World! と表示されます。

これで、Javaプログラムの作成～実行までが完了です。

IT業界に全く関わりのない方でも理解できるように「要件定義」とか「仕様書作成」などのIT用語は使わずに、システムを「家」に例えて解説していきます。

加えて「ITコンサルタントってどういう職業？」という疑問にもお答えします。

IT用語がわからない人でも理解できるよう平易な言葉で解説していきますので、是非最後までご覧ください。

システムエンジニアとは？

システムエンジニアの主な役割は「設計」です。

システムエンジニアは「建築士」に例えることができます。建築士が決めるのは「間取りをどうするか？」「見た目は何色にするか？」「材料は何を使うか？」といった基礎的な内容です。

これと同じで、システム構築時にシステムエンジニアが決めるのは「どのような機能にするか？」「どのような画面にするか？」といったユーザに直接影響が出てくる内容が中心。

もし、システムエンジニアが設計をミスれば、その設計書に従って作業するプログラマーの作業も無駄になってしまいます。

プログラマー（PG）とは？

対して、プログラマーは「大工」です。

つまり、システムエンジニアが作った設計書を基にプログラミングをしていく人です。

ただし、こう説明すると「なんだよ、プログラマーってただの作業者じゃないか。。。」という方がいらっしゃいますが、それは完全な誤りです。

例えば、同じ設計書でも大工さんによって出来栄えが完全に異なることがあります。これは、大工の世界に職人技が存在するためです。

「釘はこう打つと良い！」とか、「この木材は、この角度で切らないと脆くなってしまう。」とか。一般の我々からは想像もつかない深い世界が存在するように、プログラマーの世界にもそれがあります。

「BよりAのロジックで構築したほうがパフォーマンスが良い！」とか、「こうしたほうがエラーが発生しづらい！」とか。

こう考えると、プログラマーのスキルはシステム構築において非常に重要なファクターであると言えます。

IT用語の補足【基本設計と詳細設計】

厳密に言えば、プログラマーもいきなりコーディングするわけではありません。システムエンジニアが作った設計書を基に「プログラムの詳細を整理する」詳細設計を行います。

基本設計と詳細設計。微妙に聞きなれない用語ですが、システムエンジニアとプログラマーの違いをより深く理解できるようになると思います。詳細は以下の記事をご覧ください。

基本設計（外部設計）と詳細設計（内部設計）の違いを３分で解説

本ページでは、基本設計と詳細設計の違いを実例を交えながら解説します。用語基本設計は、現場によって「外部設計」、詳細設計は「内部設計」とも呼ばれますが、本ページでは「基本設計」「詳細設計」の用語で統一します。「基本設計＝外部設計」「詳細設計＝内部設計」基本的には、呼び方が変わるだけなので深く考えなくて...

it-biz.online

2026.04.26

プログラマーとシステムエンジニア（SE）　どちらがおすすめ？

プログラマーとシステムエンジニア、結局どちらがおすすめの職業なのでしょうか？なんとなく、システムエンジニアの方が給料もよさそうだな・・・と考える人。プログラマーの方が技術が身に付きそう！と考える人。

結論「最初はプログラマー！」です。

いきなりシステムエンジニアとして就職・転職するのは（あまり）おすすめできません。

その理由を3点、解説します。

理由①システム設計にプログラミングスキルは必須！

IT業界未経験（特にプログラミング未経験）で、システムエンジニアになるとどうなってしまうか？

結論、「ありえない設計をしてしまう建築士の誕生」です。

システムエンジニアは、機能の概要・システムの大きな方向性を決めることが主な役割ですが、設計を行う段階である程度の実現可能性（英：Feasibility）を予見する必要があります。

つまり、「この機能は実現可能なのか？（コーディング可能？）」ということを事前に整理・検討した上で設計しないと、コーディング不可（作れない）の機能設計になってしまいます。

建築士さんが「土地は6畳で、間取りは３LDKにしよう。」なんていう訳の分からない設計書を作ってきたら、大工さんはどうしようもありませんよね。したがって、システムエンジニアはプログラミングの知識が（ある程度）ないと務まりません。

理由②設計段階で決めなければいけないことが分かるようになる

実は、プログラマー（大工）とシステムエンジニア（建築士）って結構対立します。

その理由で一番多いのが、システムエンジニアが決めるべき内容を決めていないということです。

プログラマー出身のシステムエンジニアであれば、ここまで決めてあげればOK!というのが分かっている設計ができるようになります。

例えば「キッチンは、縦２m/横5mで壁から1m離して設置してね。色と形は、よしなに決めてね！」みたいな感じであれば、プログラマーの作業が明確になりますよね。

いきなり、システムエンジニアになってしまうとそもそも何を決めたらよ良いのか？みたいな壁にぶち当たる人が多いです。

理由③「イケてる」システムが何かわかるようになる

最後、これが一番重要なのですが、プログラマーとして仕事を進めていくにつれて「どんなシステムがイケてるのか」が分かるようになってきます。

例えば、「AをBにしていたらもっとバグは少なかったのに」とか、「AじゃなくてBにしてしまっていたら、大変だった」とか。

大工さんに例えれば、設計書にしたがって家を作っていく中で「この木材じゃなくてこっちにした方が頑丈になるのにな」とか、「なるほど、ここに柱を立てるのはそういう意味があったのか！」みたいな感じです。

どんなシステムがイケてるのか？―。これを、自分で考えられるようになると、おのずと「自分で設計してみたい！」という思いが強くなっていきます。「自分ならこうする。こうしたほうが、イケてるシステムになる。」

このレベルに達することができれば、「できるエンジニア」の誕生です。

1人前のシステムエンジニア(SE)になるために勉強した５つのこと

本ページでは、１人前のシステムエンジニアになるために学んだこと・読んだ本・勉強したプログラミング言語を現役のエンジニアが１から紹介しています。「正直何を勉強したらよいかわからない」という疑問をお持ちの方は特に必見です。

it-biz.online

2021.07.29

【補足】システムエンジニアとコンサルタントの違い

ちなみに、最近よく聞くITコンサルタントって何をする人なんでしょう？

プログラマーとは違いそうだし、、、システムエンジニアともやってることはかっこよさそう・・・

皆さんそれぞれでITコンサルタントへのイメージをお持ちかと思いますが、結論ITコンサルタントは、ざっくりですが「システムエンジニアよりさらに大きな方向性を決める人」と言えます。

ITコンサルタントは、システムエンジニアより上流の内容を決めることが多いようです。（例外はもちろんあります。）

つまり、導入するシステムをスクラッチ開発するのか？それとも、パッケージを導入するのか？費用対効果を踏まえて提案したりします。

では「戦略コンサルタント」は？

戦略コンサルタントになると、「そもそも家を建てる必要ってあるんでしたっけ？」的な超・上流の検討/提案がメインになってきます。

「建てるのではなく、借りるというのはどうか？」「シェアハウスはどうか？」

戦略コンサルタントになると、ITありきの世界ではなくなって（家を建てる前提ではなくなる）きます。前提を疑って、より最適な方向へとクライアントを導くことが使命となるため、その点でITコンサルタントとは役割が異なります。

プログラマーを目指したくなったら

プログラミングの知識をつけて、プログラマーになりたい！

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

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

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

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

it-biz.online

2023.05.30

結論から言うと静的コンテンツは、クライアントからのリクエスト内容にかかわらず常に同じ結果を返すコンテンツのこと。対して、動的コンテンツは、リクエスト内容に応じて異なる結果を返すコンテンツのことです。

どういうことか。例を踏まえつつ、IT初心者の方でも理解しやすいよう分かりやすく解説します。

言葉ではなくイメージと具体例で理解することが重要です。エンジニアを目指す方であれば知らないと恥ずかしい基本知識ですので、是非最後までご覧下さい。

前提：Webの仕組み

まずは前提として、Webの仕組みから。

我々が今見ているWebページは、パソコンやスマートフォンのブラウザを通して、特定のサーバ上から取得されたものです。

今あなたが見ているこのページも、GoogleやYahooを通して特定のサーバ上からページコンテンツが配信された結果。

見たいページをクリックしたときに、特定のサーバに「あなたの〇〇というコンテンツを読みたいです！」という要求が伝えられ、サーバはその要求に応じて求められたコンテンツをあなたに渡しているのです。

これが、Webページの仕組みであり基本となる知識。想像している以上に簡単なことなです。

もう少し詳しく学びたい方は

この章で紹介したWebページを閲覧する際の仕組みを詳しく知りたい方は、クライアントサーバシステムについて学習してみましょう。以下の記事では、ブラウザとは何か？サーバとは何か？という基本となる知識について解説しています。

クライアントサーバシステムとは？メリット・デメリットを３分で解説

【初心者向け】クライアントサーバシステムとは何か？クライアントって具体的に言うと何？サーバって？そんな疑問をお持ちの方に１からイメージ図付きで分かりやすく解説します。

it-biz.online

2021.11.12

さて、ここからが本題です。

静的コンテンツと動的コンテンツの違い

静的コンテンツと動的コンテンツの違いは１つだけ。それは、サーバから返される結果が誰に対しても同じになるかどうか？

静的コンテンツ

静的コンテンツは要求内容・人にかかわらずいつでも同じ結果を返すコンテンツのこと。

例えば、今あなたが見ているこの記事自体も静的コンテンツです。誰が見ようが、いつ見ようが、結果は常に同じ（表示する記事の内容に変化はありません）。隣の人がこのページを見たとしても、あなたが読んでいる文章と全く同じ文章が表示されます。

静的コンテンツは、Webサーバ上のみ（プレゼンテーション層）のみで処理が可能なため結果が返ってくるまでが早いのが特徴です。

動的コンテンツ

動的コンテンツは、要求内容や要求する人に応じて異なる結果を返すコンテンツです。

例えば、Amazonへログインした後のページがわかりやすいのではないでしょうか。ログインした後のページで出てくるおすすめ商品や、購入履歴はだれが見るかに応じて変わりますよね。

同じAmazonのリンクからログインしても、Aさんが開いた場合とBさんが開いた場合とで結果が異なります。これが、動的コンテンツです。

どのように、見る人によって内容を変えているのでしょうか？ここでは、ちょっとだけ深堀してご説明します。

次のイメージ図をご覧ください。

動的コンテンツといっても、Webの基本原理は変わりません。あなたがブラウザを通してみたいページをクリック（サーバに対してコンテンツを要求）するというアクションは同じです。

ただし、サーバ側からあなたに返すコンテンツが異なるのです。

例えば、Aさんの購入履歴に基づくおすすめ商品を表示する動的コンテンツであれば以下のような処理が行われます。

1. 動的コンテンツのリクエストを受け取る
   （Aさんがおすすめ商品の表示をクリックする）
2. Aさんの購入履歴を踏まえてコンテンツを編集する
   （Aさんの購入履歴と同じような種類の商品一覧を作成する）
3. 編集したコンテンツをユーザに返す
   （おすすめ商品一覧ページが表示される）

動的コンテンツをうまく組み合わせることで、個人個人の好みに応じたコンテンツを配信することができるようになります。現在のWebページの主流は、動的コンテンツです。

先ほど、このWebサイト（ビズドットオンライン）は厳密に言えば動的コンテンツを配信していると注意書きしましたが、どこが動的コンテンツになっているかと言うと、サイドバーやページ上部に表示されているおすすめページ欄です。

ここは、その日の人気記事や新着記事を見るタイミングや見る人によって内容が異なって表示されています。うまくいっていれば、あなたの好みのページがおすすめ記事として表示されているかもしれません。

以上が、静的コンテンツと動的コンテンツの違いです。

プログラミングを１から学んでみたい方は

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

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

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

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

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

it-biz.online

2023.05.30

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

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

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

入力チェックとは

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

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

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

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

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

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

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

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

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

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

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

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

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

入力チェック

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

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

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

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

最も基本形です。

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

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

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

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

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

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

３．属性チェック

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

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

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

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

４．相関チェック

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

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

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

５．存在チェック

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

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

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

６．外字チェック

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

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

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

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

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

７．権限チェック

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

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

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

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

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

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