1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JSPを使ってシステム開発を行った結果、フロントトレンドがReact/Vueに移行した理由を身をもって知った話

Last updated at Posted at 2026-01-31

はじめに

最近、研修でWebアプリケーションの開発を行ったのですが、その際にJSPを使ってみました。
(ちなみに「ReactやVue.js」という単語は耳にしたことがありましたが、JavaScriptに「フレームワーク」という概念があることすら最近知ったばかりの初学者です。)

JSPで開発を終えた後、先輩エンジニアから 「えっ、なんでそんな昔の技術を使ったの!?どこで知ったの?」といわれ、そんなに古い技術とも知らなかったので逆にこっちがびっくり!
私にとってはJavaとHTMLを繋ぐ便利な道具だったJSPが、実はレガシーな技術だったことが衝撃でした。

そして先日、フロントエンドカンファレンス関西で「フロントエンドの技術は、過去の技術の積み重ねの上に新しいものができている」という話を聞いたのを思い出し、なぜ時代はJSPからReact/Vueへと移り変わっていったのか、自分なりに考察してまとめてみました。

↓フロントエンドカンファレンス関西に行った時の記事もぜひ:smirk:

そもそもJSP、React/Vueってなに?

まずは、今回登場する技術について簡単に整理します。

JSP (JavaServer Pages)

HTMLの中にJavaのコードを埋め込んで、サーバー側で動的にWebページを生成する技術。ファイルの中身はHTMLに近いですが、実行時にサーバー内でJavaプログラム(サーブレット)に変換され、最終的にHTMLとしてブラウザに書き出される。

React / Vue.js

これらは「JavaScriptフレームワーク(またはライブラリ)」と呼ばれ、現代のフロントエンド開発の主流の技術。 JSPが「サーバー側」でページを作るのに対し、これらは「ブラウザ側」でJavaScriptを動かして画面を作る。

なぜJSPに出会ったのか?

研修でシステム開発を行う際、見本として示されたのは「サーブレット(Java)」の中でHTMLを組み立てるコードでした。

// サーブレット内でHTMLを書く例。とても読みにくい...
out.println("<html><body>");
out.println("<h1>こんにちは!</h1>");
out.println("</body></html>");

Javaのコードの中にHTMLの文字列が混ざっていて、非常に読みにくく、学生時代の時のようにHTMLファイルとしてデザインを管理できないことにストレスを感じました。

「もっとHTMLを別ファイルとして綺麗に扱える方法はないかな?」と探した結果、出会ったのがスッキリわかるサーブレット&JSP入門という本でした。当時Javaの学習で同シリーズにお世話になっていたこともあり、「これならできそう!」とJSPの採用を決めました。

JSPを使ってみて

実際にJSPを使ってみると、当時の私には非常に合理的な技術に思えました。

1. JavaとHTMLの融合

out.println を連発せずに済む。Javaの変数やメソッドをHTML内に直接埋め込めるのが分かりやすかった。

2. 高い変換効率

JSPは実行時に裏側で「サーブレットクラス」に自動変換される。そのため、Javaで書いたクラスをそのまま呼び出せるなど、技術的な親和性は抜群に感じた。

3. シンプルな構成

フロントエンドとバックエンドを1つのプロジェクトで管理でき、request.setAttribute() したデータを ${} (EL式) で即座に表示できる仕組みは、初学者にも理解しやすかった。

つまり、JSPはコンピュータ(Java実行環境)にとって、非常に相性の良い技術だったのです。

なぜ時代はJSPからReact/Vueに移行したのか?

現代の開発において「相性がいい」の定義は、単なる実行効率から開発のしやすさ&分業のしやすさへとシフトしています。

比較項目 JSP + サーブレット React / Vue + サーブレット
データのやり取り Javaオブジェクトを直接渡す(密結合) JSONという汎用データ形式を投げる(疎結合)
分業のしやすさ デザイナーがJavaタグを壊すリスクがある 見た目とJavaが完全に分離されている
テストの容易性 サーバーを起動しないと見た目を確認できない サーバーが動いていなくてもデザインを確認できる
UIの柔軟性 ページ遷移のたびに再読込が必要 動きが滑らか(スマホアプリに近い)

「作る人間」にとっての都合

自分では「MVCモデル」を意識して開発していたつもりでしたが、振り返ってみると、以下の2点ではReact/Vueの方がより洗練された分業が可能だと気づきました。

  • JSPの問題点
    見た目を変えるだけでもサーバー側の再コンパイルが必要になることがあり、システム全体に影響を与えるリスクを常に抱えている。
  • React/Vueの優位性
    Javaは「データを出す窓口(API)」として独立している。デザイナーやフロントエンジニアがボタンの色を変えたりレイアウトを大幅に変更したりしても、Java側のロジックには1ミリも影響を与えない。

終わりに

JSPを実際に使ってみてわかったことは、JSPはコンピュータの観点から見て効率的に作動しますが、現在の開発環境では技術者にとっての利便性や開発効率も重要視されるようになったということです。

ReactやVue.jsへの移行は、人間(作る人)にとっての都合による変化でした。デザイナー、フロントエンドエンジニア、バックエンドエンジニアがそれぞれの専門領域を全うし、かつ互いの仕事を邪魔しない。そんな健全な開発環境を求めた結果が、今のトレンドを作っているのだと解釈しました。

昔の技術に触れたからこそ、今の技術が解決しようとしている問題を実感することができたのでこの学びを活かして、次はモダンなフロントエンド技術にも挑戦してみたいですね~:muscle_tone1:

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?