【業務系】世の中に逆行するJavaのWebアプリでの画面フレームワーク選定

これは何？

• Java Advent Calendar 2020 を見て、記事の少なさ (後で見たら参加者増えてた！)、よい記事なのにLGTMの少なさに驚愕して、少しでもJava言語を盛り上げたく記事を書きます。
• Webな業務アプリにおいて画面を作る画面系フレームワークの選択肢について、偏見たっぷりに書いてみます
  • 想定読者：Javaで画面フレームワーク？ReactとかVueとかじゃねーの？っていう人向け。

業務系 && Webアプリ で画面フレームワークといったら？（前置き）

普段はBtoBでJavaで業務アプリを開発しています。Spring Framework(Boot)だったり、JavaEE(JakartaEE)にお世話になっております。
今時の定番でいえば、やはり、Spring MVCでしょうか？
更にモダンになると、RESTfulAPI + Vue.js とか ReactJs とか Angularみたいな組合せになるのでしょうか？

ココではあえて、世の中のトレンドから外れた選択肢の紹介と考察を加えてみたいと思います。
そして、ここであえて、独断と偏見により、世の中に逆行する点上げておきます。（選定理由に大きく影響します）

• 画面はなるべくJavaの世界で完結したい。そうSwingやAWTのように！
• JavaScriptのエコシステムとJavaScriptが大嫌い。
  • 理由は、「Java言語と混同されがちなネーミング（Javaを汚している！）」、「進化が早さすぎてちょっと前の開発エコシステムが維持できないこと」、「TypeScriptによってだいぶマシになったものの書き方のバリエーションや言語仕様の理解がしにくく、いつまで経ってもちゃんと書ける気がしない」の三点です。異論は認めない！
• Spring MVCのようにアクションベースの画面設計が大嫌い。楽して画面を作りたいので、コンポーネントベースの画面フレームワークが好きです。むしろ、Vue.jsやReactもコンポーネントベースじゃないですか！？

業務系アプリ（と言ったも色々ありますが）の画面的特徴として下記のパターンでほぼほぼ画面要求を網羅できると感じています。

• 一覧（&検索）画面　･･･　データの一覧と検索
• 詳細編集画面　･･･　データの一覧から遷移した個別の詳細画面。編集（削除）もセットでできることも
• 新規作成画面　･･･　データの新規作成画面。

もちろん例外もありコールセンター業務のように一度に様々な情報を表示することが必須となる画面、グラフがいっぱい表示されたりするダッシュボード的な画面など当てはまらないケースもあったりしますが、基本的にはデータに対する検索、更新、削除、追加の観点が揃っている画面がセットで開発されていく感じだと思います。

上記のような嗜好と業務系アプリ画面の特徴を踏まえて、オープンソースの画面フレームワークを紹介します。

定番：Java Server Faces(JSF)

一言で説明しろ： とにかく定番。デザインはHTMLで書いて、ロジックはJavaで書くみたいな感じ。HTMLの知識は必須。

もうちょっと詳しく：
JSFは、仕様なので、実装として、MyFaces や Mojarra といった実装があります。（なので他と違って公式サイトといった様なものを挙げにくい事情があります）
JSFは、画面の構造をサーバ側に保持しておき状態変化に応じて常に同期（更新）していくステートフルな仕組みです（クライアントに置く方式もありますが構造を保持する点は同じ）。そのため、ボタン押下や画面更新の都度に、サーバ側との通信が発生することでVue.jsやReactJsに比べて動作はもっさりしますし、BtoCのようなスケーラブルなアプリケーションで利用するには工夫が必要（セッションを共有化するとかセッションに応じてアクセスするアプリケーションサーバを固定化する等）なフレームワークです。ある程度利用者が限定できるBtoBの業務システムなどに向いていると考えています。
また、悪いことにドキュメントが少なく（特に日本語では）、とっつき易いフレームワークか、と言われれば否です。とはいえ、StackOverFlowのコミュニティは活発で、質問すればだいたい数時間でまともな返答がかえってきて頼もしいです。

JSF単独で利用するというより、UIライブラリを組み合わせて使うのが定番です。
UIコンポーネント PrimeFaces
画面テーマ： AdminFaces

デモ

• PrimeFacesデモサイト：https://www.primefaces.org/showcase/
• AdminFacesデモサイト：https://adminfaces-adminfaces.apps.ca-central-1.starter.openshift-online.com/ (高確率でダウンしてます)

第二候補： Vaadin

一言で説明しろ： Web版Swing/AWT or Android画面の作り方のWeb版（基本的に画面もロジックもJavaで完結！）

もうちょっと詳しく：
2007年頃までは、裏側はGWTで構築されていたが、近年Vue.jsとかをバックエンドに持つようになった。
Javaで書いた内容が、Vue.jsとかのフレームワークの実装に変換されてWebアプリとして構成される感じ。
なので、動作にはnodeとか（大嫌いな）javascirptのエコシステムは裏側で動いている。

JSFに比べてクライアントサイドで完結する部分があり、動作が速い。
元々準備されているUIコンポーネントが、モダンで、いい感じで、キレイ！テンション上がる。

でも、UIコンポーネントにハマらない画面を作ろうとすると途端に大変に。コンポーネントの良さが失われる。
その点、JSFの方が、最悪なんとかなる感じはしている。

デモ：
https://demo.vaadin.com/invoice-editor-app/

第三候補： CUBA Platform

一言で説明しろ： Vaadinの皮を被った業務用アプリケーションフレームワークと開発エコシステム（もちろんJava）

もうちょっと詳しく：
VaadinのUIをもう少し業務アプリケーションで使えるようにカスタマイズした感じ。
根っこの部分は、Vaadinと変わらない。

Spring + Vaadin をベースにして、業務アプリのためにがっつりフレームワークとして作り込んでいるイメージ。
また、業務アプリ開発に対応したGUIツールをIntellij IDEAのプラグインとして提供していて、かなり使えそう。
あいにく、ドキュメント群が英語しかないのが難点だが･･･

個人的にはイチオシしたい！
画面フレームワークという立ち位置で語るのは少し微妙で、適切な立ち位置は、業務アプリケーションフレームワークという感じだろうか？
例えば、下記のような面々が競合になるだろう。

• JHipster - アプリのひな形生成
• Apache Isis - 業務アプリのUIのひな形生成
• OpenXava - EntityからのCRUDアプリケーションの生成
• iPLass - 業務システム系の開発プラットフォーム

デモ：

• https://www.cuba-platform.com/learn/live-demo/

落選？： GWT:Google Web Toolkit

一言で説明しろ： 一昔前にGoogle App Engineの登場と共に一斉を風靡したあのフレームワーク。書き方的には、WicketやVaadinに近いか？

もうちょっと詳しく：
最近のリリースもあるし、全然廃れていない。悪くない。

ただ、マイナス点として･･･

• Spring Frameworkと組合せて動かす場合に、情報も少なく、かなりハマってしまいきつかった･･･
• 情報量が少ない
  • きっと知る人は知る的な状態？

デモサイト：

• http://www.gwtproject.org/examples.html

落選？：Apache Wicket

一言で説明しろ：
JSF+Vaadinを足して2で割った様なフレームワーク。JSFよりはSwing的にコンポーネントをコードで書いていくやり方だが、若干のHTMLを書く必要がある。

もうちょっと詳しく：
コードの見通し、書き方、いずれをとっても、悪くない。むしろ使いたい。（むしろJSFより好き）
でも、JSFのPrimeFacesに相当するような実用的なUIコンポーネントライブラリなどが乏しく、
業務的に使っていくには周辺ライブラリを整備したりと、かなり時間を掛けて手を入れていく必要があると感じています。
エコシステムの成熟がイマイチ感がある。

知らないだけかもしれない･･･が、それなりにがっつり調べた過去があり、採用を見送った経緯がある。

デモ：

• https://wicket.apache.org/learn/examples/index.html

まとめ

モダンな選択肢以外にも手堅い、面白い選択肢があったのではないでしょうか？
もちろん、BtoCのWeb系サービスのようにUI/UXの要求が厳しいところに対して使うのは難しい側面があります。
銀の弾丸はありません。選択肢は多く知っておいた方が良いのではないかと思う次第です。

それでは。