キタエル × フロントエンドの技術選定ができるようになっている

ゴール

技術選定について考えを持ち結論を提示できること
- 要件を満たせるように検証できていること
  まとめ
プロジェクト特性に合わせて技術を選定するのが大事

https://speakerdeck.com/kakehashi/furikaeri-about-our-spa-stack-2023?slide=3

フロントエンドの技術選定を知ること

プロダクトの特性をまとめている

PCでの操作
薬局内の安定した環境からの利用
ユーザーログイン型の業務システム
ユーザーの挙動いいねコメントが多いコンテンツ
閲覧では認証必須なのでSEOは考慮しない

選定時の状況

更新状況と頻度と需要
- Next.jsが大きく更新され周りで多く利用されるようになり、勢いがあるなど
- AppRouterの安定板が出て使えるようになったり
今後の成長を見据える
- どれだけの規模のサイトページに成長させたいのか、その時どのようなコンポーネントを利用していれば良いのか
- 今後何人のユーザーに利用されることを想定しているのか
技術への好奇心や挑戦
- 社内での実績がなくチャレンジもかねてやってみる
ユーザー側にすべて処理をまとめる CSRか? それともSSRか?
- SSRで描画に必要な情報はブラウザ経由で取得してHTML,CSSを生成する
- サーバ側とクライアントのどちらで処理をしてブラウザ描画をするのか。

技術の選定

候補
- Vue
- React ※ これに決定(技術者が多いから)
- Angular

フレームワークを利用するか否かの判断

PMFしていない状況で未到達の技術チャレンジによるリスクは抑えたい
SSRが不要であり、サーバの維持コストは押さえたい
各種フレームワーク(Next.jsやRemix)のバージョンアップが頻繁に行われており、開発中に何度か大きな改修が必要になるんじゃね
依存が少ないほど業界スタンダートが決まれば対応しやすい => Vita + React

知らなかったこと

Reactはフレームワークではない
- UIを構築するライブラリ
Viteについて
- フロントエンドの開発環境をより良く簡単に作ってくれる
- TypeScriptなどを用いた開発をすぐに開始できる。importのみで設定不要
- 開発サーバの起動が異様に早い & 簡単
- HMR ファイルを変更してブラウザへの反映が速い
- bundle が速い. 本番に反映した内容を npm build で反映しサイズを小さくする最適化もする
- ReactやVueのプラグインを簡単なインストールと設定で利用できる
PMFってなに
- 製品やサービスがターゲット市場のニーズと一致し需要が高まる状態
- PMFを達成するとクライアントが製品を高く評価し更にサービス利用数が増える https://zenn.dev/comm_vue_nuxt/articles/what-is-vite 過去の技術選定の例より、ポイントを抑える

ChatGPT先生に聞く!! 技術選定前に準備すること

1. プロジェクトの全体像を理解する
ドキュメントのレビュー: プロジェクトの要件、目的、スコープに関する既存のドキュメントを読み込み、全体像を把握します。

関係者とのヒアリング: プロジェクトのステークホルダーと面談し、彼らの期待や要件を確認します。

2. 現状の技術スタックを把握する
現在使用している技術の理解: 現在のフロントエンド技術スタックとその利点や制約をしっかり把握します。
過去の問題点の洗い出し: 現行システムの問題点や改善点をリストアップします。

3. 最新のフロントエンド技術のリサーチ
技術トレンドの調査: 最新のフロントエンドフレームワークやツールのトレンドをリサーチし、主要な選択肢をリストアップします。
競合他社の分析: 競合サービスがどのような技術を採用しているかを調査します。

4. 学習とスキルアップ
新しい技術の基本理解: 候補となる技術について基本的な理解を深めておくと、選定プロセスでの判断が容易になります。
ハンズオン: 簡単なプロトタイプや小規模なプロジェクトで、実際に技術を試してみることで理解を深めます。

5. チームとの連携準備
チームのスキルセットの確認: チームメンバーが持つスキルや経験を把握し、それを基に選定時に考慮すべき点を整理します。
フィードバック体制の構築: 技術選定プロセス中にチームからフィードバックを得られるよう、オープンなコミュニケーション環境を整備します。

技術選定を行う段取り

技術選定を行う前に考慮すべきことはたくさんありますが、以下のステップを踏むと良いでしょう。

1. プロジェクト要件の明確化
ユーザー要件: ターゲットユーザーは誰か？どのようなデバイスでアクセスするのか？
機能要件: 必要な機能やインタラクションを明確にします。
パフォーマンス要件: サイトの速度や応答性の目標を設定します。

2. チームのスキルと経験の把握
既存のスキルセット: チームメンバーが既に精通している技術やフレームワークを確認します。
学習コスト: 新しい技術を導入する際の学習曲線を考慮します。

3. 既存の技術スタックとの互換性
バックエンドとの統合: フロントエンドがバックエンドとどのように連携するかを確認します。
既存のインフラストラクチャ: 既存のインフラに適応できるかどうかを確認します。

4. 将来の拡張性とメンテナンス性
スケーラビリティ: サービスが成長した際に対応できる技術であるか確認します。
コミュニティとサポート: フレームワークやライブラリのコミュニティサポートが充実しているかを確認します。

5. セキュリティとパフォーマンス
セキュリティ: 選定する技術がセキュリティ上の問題を解決できるか確認します。
パフォーマンス: 高速で効率的に動作するかを確認します。

6. コストとライセンス
コスト: 技術選定によるコストを考慮します（ツールやライセンス、トレーニングなど）。
ライセンス: 選定する技術のライセンスに関して問題がないかを確認します。

7. テストとプロトタイプの作成
プロトタイピング: 小規模なプロジェクトで試験的に導入してみる。
テスト: パフォーマンスやセキュリティのテストを行い、問題点を確認します。

対象ライブラリ/フレームワーク検討

候補ライブラリ

React
- react-admin
jQuery
Node.js
D3
TypeScript

候補フレームワーク

Vue
- Vue Element Admin
Bootstrap
- AdminLTE
AngularJS

仮定した要件と要件にあったフレームワークの検討

要件

1. 柔軟に画面をカスタマイズしたい
2. JavaでDBへのクエリ後、フロントエンドにデータを反映したい
3. ダッシュボード形式でグラフや表を表示したい
4. データを検索しクエリ結果をダウンロードしたい
5. データの件数は最大100万件ほど

検討

1. BootstrapのAdminLTE
理由:

利点:

Bootstrapベースであり、幅広いカスタマイズが可能です。
HTMLテンプレートとして提供されるため、Javaと簡単に統合できます。
大量のサードパーティプラグインが利用可能で、グラフや表の表示に強いです。
シンプルな構造なので、素早くプロジェクトを開始できます。
欠点:

デザインの柔軟性には限界があり、独自のカスタマイズには追加の作業が必要です。
大量データの処理には、パフォーマンスの最適化が必要です。
2. Vue Element Admin
理由:

利点:

Vue.jsとElement UIに基づいており、カスタマイズ性が非常に高いです。
Vueの再利用可能なコンポーネントシステムにより、複雑なUIの構築が容易です。
データバインディングとVueのリアクティブ性により、Javaからのデータのフロントエンド反映がスムーズに行えます。
ダッシュボードのグラフや表を効率的に表示できます。
欠点:

学習コストが高く、Vue.jsやElement UIに慣れていない場合は習得に時間がかかる可能性があります。
大量データの処理には最適化が必要で、パフォーマンスが課題となることがあります。
3. react-admin
理由:

利点:

Reactのコンポーネントベースのアーキテクチャにより、高度なカスタマイズが可能です。
API駆動の設計が容易で、Javaからのデータ反映がシンプルに行えます。
大規模データの処理においてもReactの仮想DOMが効率的に動作するため、高いパフォーマンスを発揮します。
豊富なサードパーティライブラリやプラグインが利用可能で、ダッシュボードやデータ管理に強いです。
欠点:

Reactエコシステムへの慣れが必要で、初期学習コストが発生します。
プラグインの種類は豊富ですが、特定のニーズに完全に合うものが少ない場合があります。
結論
あなたの要件を考慮すると、react-adminが最も適している可能性が高いです。以下の理由からです：

カスタマイズ性: Reactの柔軟性により、画面のカスタマイズが容易で、要求に応じたUIの実現が可能です。
パフォーマンス: 仮想DOMを活用した効率的なデータ処理により、大量データを扱う場合でも高いパフォーマンスを発揮します。
データ処理と反映: Javaとの統合がスムーズで、API駆動の開発が可能です。また、Reactのエコシステムは成熟しており、グラフや表の表示、データダウンロードなどの機能も強力です。
ただし、Vue.jsに慣れている場合や、よりコンポーネントの再利用性を重視する場合は、Vue Element Adminも非常に有力な選択肢です。どちらが自分のチームにとって使いやすいか、開発者のスキルセットに基づいて最終的な決定をすると良いでしょう。

react-admin

カスタマイズがそれほど不要(react-adminの機能で十分で、それほどデータの規模が大きくないと良い) 独自のUIを作りこめない可能性がある ``` 【react-adminの利点】・データソースの柔軟性: REST APIやGraphQLなど、さまざまなデータソースと簡単に統合できます。・CRUD操作の標準装備: データリスト、詳細ビュー、編集フォームなどがデフォルトで提供されており、設定も簡単です。・豊富なカスタマイズ性: 標準コンポーネントをカスタマイズすることで、独自のUI/UXを作りやすいです。・テーマの設定: Material-UIをベースにしているため、テーマやスタイルのカスタマイズが容易です。・コミュニティサポート: 広範なドキュメントやコミュニティのサポートがあり、問題解決がしやすいです。【具体的なユースケース】・管理画面のレイアウト: react-adminを使うと、ダッシュボード、ユーザー管理、商品管理、レポート生成など、一般的な管理画面に必要な機能を素早く構築できます。・フィルタリングや検索: デフォルトで強力な検索・フィルタリング機能があり、すぐに利用可能です。・エクスポート機能: レコードをCSV形式でエクスポートする機能もサポートされているため、カスタム実装が少なくて済みます。【デメリット】 ## 柔軟性が無い! ・独自の学習が必要でドキュメントをちゃんと読む必要がある・フレームワークの規約に沿わない実装が大変であり、内部構造に依存する ## パフォーマンスの低下・大規模表示や複雑なフィルタリングはパフォーマンスが下がる　→ 読み込み時間が長くなり表示までに時間がかかる可能性がある・いらないがデフォルトでONにされてるからちゃんとOFFにしないと処理遅くなる ## デザインに自由度がない・Material-UIに大きく依存している ```

知らなかったこと

Rails
- フレームワークであり、MVCモデルを起用している。Ruby on Rails と言われ、Rubyとの関係性が強い？

疑問点

今回のリニューアルはどの程度リニューアルするのか
- 全てを作り直すのか? 一部画面だけを作り直すのか?
- 全ての場合認証周りも変わるのかとか気になるなぁ

TODO

vue element ui と react-admin のuiを把握してみよう
typscriptの検討もしてみる

重要な視点

要件から技術的制約を絞り込むことで技術の選択肢が絞られ選定技術を特定できる

絞り込む観点

要件
SPA or MPA
- 適したライブラリが異なる

リニューアルにあたり知りたいこと

改修規模はどの程度になるのか.すべて1から作り直すのか

SPAについて

静的リソース部分を取得しておき更新が必要な部分のみ都度更新する仕組み
Thymeleafを静的リソース部分として、更新部分を Reactにすることも可能

Thymeleaf
特徴: Spring Frameworkの公式テンプレートエンジンとして推奨されています。Spring Bootプロジェクトでは特に設定が容易で、サーバーサイドレンダリングを行うテンプレートエンジンです。
メリット: Springの@Controllerや@ModelAttributeなどとシームレスに連携でき、フォーム処理や国際化、認証などの機能も簡単に組み込むことができます。HTMLテンプレートとしての記述も直感的で、Javaベースのアプリケーションに最適です。
2. JSP (JavaServer Pages)
特徴: 伝統的なサーバーサイドテンプレートエンジンで、Spring MVCとも連携可能です。特にレガシーシステムや既存のJava EEアプリケーションで使われてきました。
メリット: 長年使用されてきた技術で、多くの既存システムと互換性があります。JSPタグライブラリを利用して、動的なコンテンツを生成することができます。
3. Vue.js
特徴: シンプルで柔軟なJavaScriptフレームワーク。ThymeleafやJSPと組み合わせて、部分的にSPAのようなインタラクティブなUIを実装することが可能です。
メリット: Vue.jsは軽量であり、既存のSpringプロジェクトに段階的に組み込むことができます。バックエンドをSpringで構築し、フロントエンドでVue.jsを使用して、特定の部分にインタラクティブ性を追加することが可能です。
4. React
特徴: Facebookが開発したコンポーネントベースのライブラリ。SpringのREST APIと連携して、フロントエンドを構築するのに向いています。
メリット: RESTful APIをSpring Bootで提供し、Reactをフロントエンドに使用することで、モダンなSPAを構築することができます。また、Spring SecurityやSpring Dataと組み合わせて、認証やデータ管理を効率化できます。
5. Angular
特徴: Googleが開発したフルスタックなJavaScriptフレームワークで、大規模なアプリケーションに向いています。Spring Bootと組み合わせることで、エンタープライズ向けのSPAを構築することができます。
メリット: TypeScriptを使用するため、型チェックが強力で、大規模プロジェクトの保守性が高まります。SpringのバックエンドサービスとAngularのフロントエンドが分離されているため、開発の分担がしやすいです。
まとめ
サーバーサイドレンダリング（MPA）: ThymeleafやJSPは、Spring MVCと非常に相性が良く、サーバーサイドでHTMLを生成する場合に最適です。
クライアントサイドレンダリング（SPA）: Vue.js、React、Angularは、SpringのREST APIと連携することで、モダンなフロントエンドを構築するのに適しています。
プロジェクトの要件に応じて、これらのフレームワーク・ライブラリを選択することが望ましいです。

改修規模が全てであれば 1 から目的に応じたライブラリでモダンに作るのもいいような気がする
改修規模が一部であれば該当箇所のみをSPAライブラリとして、それ以外はThymeleafを今まで利用するのがいいような気がする

SPAとMPAどちらにしたいのか

要件

開発要件

1. 柔軟に画面をカスタマイズしたい @ boot(core-ui)などをりようする場合既存のUI制約をに引っ掛かる
2. JavaでDBへのクエリ後、フロントエンドにデータを反映したい 
3. ダッシュボード形式でグラフや表を表示したい @react,vue,bootどれでも既存ライブラリは存在しそう
4. データを検索しクエリ結果をダウンロードしたい @なんでもどうぞ
5. データの件数は最大100万件ほど @データ件数によってはクライアントに処理を任せる兼ね合い上PCがかくつきそう
++ 以降が重要 ++
6. コードの運用が簡単
7. 習得が容易であり業界スタンダードである

エンジニア的要件

1. 技術スタックを習得している人がいる or 習得が容易である 
  1. react , vue , boot 
2. 運用する場合 機能追加や回収が容易 @SPA(htmlが減ってjsがメイン)
  1. 今からだと `typescript` になるかな？

vue
- version upが多い
- admin系のライブラリを利用する場合 element-ui となり、学習コストが高いらしい
- yaml みたいな書き方してる
react
bootstrap

GitEngHar / WorkUp