Tweet
Tweet

Slide 1

Slide 1 text

JHipsterで 爆速かつ堅牢な エンタープライズ Spring Boot 3 開発を実現する 株式会社アルファシステムズ 鏡味 秀行 https://github.com/hide212131

Slide 2

Slide 2 text

自己紹介 鏡味(かがみ) 秀行 (50歳) • Java歴: Hotjava(‘95)～SI案件15年ほど • 他: JavaScript, Python, C#, Ruby, ...,Lisp • 趣味・興味: 日曜プログラミング、生成AI(Llama2)、 緑黄色社会、ドラム JHipsterとのかかわりは、 • 日本語サイト構築 • https://www.jhipster.tech/jp/ • バグ直しやエンハンス対応 2

Slide 3

Slide 3 text

3 セッションを通して • JHipsterの魅力に気づいてもらえると嬉しいです • 現場でお役に立てば、この上ないです • お仲間を増やしたいです

Slide 4

Slide 4 text

4 セッションの内容 • JHipsterとはなにか？ • 機能紹介 • コード生成完了後に出来ていること • 拡張機能 • エンタープライズシステム開発とJHipster/組織での活 用法

Slide 5

Slide 5 text

JHipsterとはなにか？ https://www.jhipster.tech https://github.com/jhipster …その前に ちょっとデモ アプリを作る ツールですが

Slide 6

Slide 6 text

JHipsterで作った アプリをEnd-to-End テスト Cypress使います

Slide 7

Slide 7 text

実はこれ… アプリ作って10分後！ Cypress実行中…

Slide 8

Slide 8 text

アプリ作って10分後に E2Eテスト？ (それが何の役に立つかは置いといて) GPT4先生すら匙を投げる レベル そんな想像の斜め上のことが できるJHipsterのお話です

Slide 9

Slide 9 text

JHipsterとはなにか？ 9 JHipster = “J”(Java) + “Hipster”(流行に敏感な人) • OSSの「ソースコード生成ツール」です • Spring Boot + React/Angular/Vue + 多くの技術スタックを使い フルスタックの、動作する、アプリケーションコードを生成します

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

Java Spring Framework Spring Boot JHipster 言語, 実行プラットフォーム Javaで効果的に開発するためのアプリケーション 基盤 Spring Frameworkを効果的に使用できる 開発・実行環境 Spring Bootに機能を追加し、 「アプリとして動く」コードを生成 11 Spring Boot (Initializr) と違う？ Spring Initializrは、ライブラリと依存 関係を整理した、開発環境の足場を生成

Slide 12

Slide 12 text

JHipsterの歴史と現在 12 • 2013.10: Julien Duboisさん (現MS) により開発開始 • 以降、その時代の主流を随時取り込みながら発展 • JavaやSpringBootのバージョンアップ • Microservice • Angular2、React(ComponentからHooksへ) 、Vue • … • 2023.10: 10周年🎉 • 2023.11: v8.0.0リリース🚀 • 2年半ぶりのメジャーバージョンアップ • Java21, Spring Boot 3.1.5 • Angular16, Vue3 Java SE 7 や AngularJS の時代

Slide 13

Slide 13 text

JHipsterでアプリ作成開始① 13 • Java17以上/Node18以上のインストール/Git/Dockerあるとよし • sdkman / nvm 経由のインストールが便利 • インストールして実行 $ npm install -g generator-jhipster #ツールのインストール $ take myApp #作業フォルダ作成 $ jhipster #質問に答えていくとコード生成

Slide 14

Slide 14 text

JHipsterの機能 「アプリ生成完了後、出来ていること」 の洪水をお伝えします 質問は、 フロントエンド何使う？ DBは？など → アプリの基盤コードが生成→

Slide 15

Slide 15 text

15 アプリで使うエンティティや関連をインポート JDL(JHipster Domain Lanuage)定義を書く JHipster独自仕様ですが、そんなに特殊ではないです インポートすると アプリが一通り完成🚀 # エンティティ群のインポート $ jhipster jdl company.jdl JDL JHipsterでアプリ作成② コード

Slide 16

Slide 16 text

16 JHipsterで作成したアプリの実行 $ npm run services:up # DB等をDockerで起動 > docker compose -f src/main/docker/services.yml up --wait [+] Running 1/1 ✔ Container myapp-postgresql-1 Started $ ./mvnw # アプリケーション起動 ここからはJHipsterコマンドなし、普通のSpring Boot開発です。

Slide 17

Slide 17 text

17 17 … 起動完了！

Slide 18

Slide 18 text

18 生成したアプリ （ホーム画面）

Slide 19

Slide 19 text

JHipsterの機能 「コード生成完了後に出来ていること」 の洪水をお伝えします

Slide 20

Slide 20 text

エンティティをCRUD処理するSingle Page Applicationを作ります • 例) 「React/PostgreSQLで作成」の場合 • レイヤアーキテクチャの構造で、Entity, Resource, Service, Repository • React/ReduxとTypeScriptで、Model, Component, Reducer コード生成完了後に出来ていること① : SPAのWebアプリが一通りできている 20 REST JPA Frontend Backtend

Slide 21

Slide 21 text

21 生成したアプリ （一覧画面）

Slide 22

Slide 22 text

22 生成したアプリ （作成/編集画面）

Slide 23

Slide 23 text

23 読める… 読めるぞ…! OpenAPI/Swaggerでドキュメントも作ります

Slide 24

Slide 24 text

24 生成されたコードです。 これ見て思ったこと→

Slide 25

Slide 25 text

25 読める… 読めるぞ…!

Slide 26

Slide 26 text

ほとんどはJHipster独自の要素（例:ツール固有のアノテーション）が 無いクリーンなコードです。 つまり… JHipster開発に特別な知識は不要 Spring Boot/フロントエンド開発の知識があれば、これまでの開発経 験をいかんなく発揮できます。 加えて、コード成形: • ESLint/Prettier定義ファイルも生成し、コードを綺麗にして生成し ます。 • Huskyによる、git commit時のチェックも生成してくれます。 • EditorConfig設定も生成してくれます。 アプリ生成完了後に出来ていること② : 読めるコードが出力されている 26 EditorConfig Prettier ESLint

Slide 27

Slide 27 text

前述のコードスタイル定義に加え、 • Java/TypeScriptのビルド • Maven/gradle, npm, webpack • Dev/Prodプロファイル分けも準備 • クライアント・サーバのホットリロード • Browsersync, Spring-Devtools • VSCodeの仮想環境で開発 • Devcontainer • SonerQubeのコードレビュー環境 アプリ生成完了後に出来ていること③ : コーディング・ビルド環境もできている 27 $ docker compose -f src/main/docker/sonar.yml up -d $ ./mvnw -Pprod clean verify sonar:sonar - Dsonar.login=admin --Dsonar.password=xxx (コマンドの詳細は、 生成コードのREADME.md参照)

Slide 28

Slide 28 text

• クライアント側の単体・コンポーネントのテストケース(Jest) • サーバ側の単体・統合テストケース(JUnit)、レイヤの依存関係テストケース(ArchUnit) • 性能テスト環境とテストケース(Gatling) • E2Eテスト環境とテストケース(Cypress) アプリ生成完了後に出来ていること④ : テスト環境とテストケースもできている 28 $ npm test # フロントエンドテスト $ npm run backend:unit:test #バックエンドテスト $ ./mvnw gatling:test #性能テスト $ npm run e2e # E2Eテスト

Slide 29

Slide 29 text

コード生成時に、Faker.jsを使い、エンティティの属性に対応したフェイクデータを用意し、初回起動時に Liquibaseを使ってテスト用DBに登録するので、すぐ使えます。 アプリ生成完了後に出来ていること⑤ : フェイクデータもできている 30 Faker

Slide 30

Slide 30 text

• Spring Securityベースにユーザ・パスワード認証、ユーザ管理画面、パスワードリセットメールの仕組みを生成 • 「管理者」や「ユーザ」など、ロールベースの認可設定も準備 • 認証方式は、JWT/Session/OIDC・OAuth2に対応 • Oktaなどのサードパーティのプロバイダとの連携もできる • Keycloakのdocker composeファイルも用意しているので、ローカルですぐに検証可能 アプリ生成完了後に出来ていること⑥ : 認証/認可機能もできている 31 OIDC JWT/Session アプリ 組み込み

Slide 31

Slide 31 text

32 組み込みのログイン画面

Slide 32

Slide 32 text

33 組み込みのユーザ登録画面

Slide 33

Slide 33 text

34 組み込みのユーザ管理画面

Slide 34

Slide 34 text

• CICDパイプラインは、オプション的なコマンド「サブジェネレーター」で生成 アプリ生成完了後に出来ていること⑦ : デプロイ・CI/CDの準備もできている 35 $ jhipster ci-cd # コード生成 🚀 Welcome to the JHipster CI/CD Sub-Generator 🚀 ? What CI/CD pipeline do you want to generate? (Press to select, to toggle all, to invert selection, and to proceed) ❯◉ GitHub Actions ◯ Jenkins pipeline ◯ GitLab CI ◯ Azure Pipelines ◯ Travis CI ◯ CircleCI • DockerやKubernetesにデプロイするコンテナイメージをJibで作成 $ npm run java:docker # アプリのイメージ作成

Slide 35

Slide 35 text

Liquibaseのチェンジセットを生成 • コード生成時に、エンティティ情報を元に、DBのスキーマ構築と初期データ を投入するチェンジセットを生成 • 開発・運用が進み、エンティティを追加するなどのマイグレーション時、対応 するDBのチェンジセットのファイルを生成 • アプリ起動時、もしくは手動で、Liquibaseによりチェンジセットの実行 アプリ生成完了後に出来ていること⑧ : DB構築・マイグレの準備もできている 36 $ ./mvnw # アプリ起動時に反映 or $ ./mvnw liquibase:update #手動で反映

Slide 36

Slide 36 text

Micrometer等のメトリクスを可視化する組み込みのダッシュボードが用意されて るほか、Prometheus/Grafana などサードパーティの連動も準備できています。 アプリ生成完了後に出来ていること⑨ : 運用監視の準備もできている 37 $ docker compose -f src/main/docker/monitoring.yml up –d # Monitering開始 [+] Running 2/2 ✔ Container myapp-grafana-1 Started 0.1s ✔ Container myapp-prometheus-1 Started 0.1s

Slide 37

Slide 37 text

38 読める… 読めるぞ…! 組み込みのダッシュボード

Slide 38

Slide 38 text

JHipsterの機能拡張 まだ足りない…○○の機能がほしい… 良かろう…ならば…

Slide 39

Slide 39 text

JHipsterには、”Blueprint” という、生成するコードをカスタマイズできる 仕組みがあります。 • JHipsterはもともと 、”Yeoman” という「スキャフォールディング（足場 づくり）ツール」を使っています • Blueprintも同じ仕組みを使い、ツールを作成し、実行することで、以下 のカスタマイズが可能です。 1. コード生成プロセスそのものを上書き 2. 生成したコードに手を加える 拡張機能 Blueprintとは？① 40 Kotlin & アノテーション挿入

Slide 40

Slide 40 text

JHipsterが公式に出しているBlueprintがあります。Java関連だと以下 • GraalVMのネイティブビルド（私も少しばかり貢献中😊） • Micronaut / Quakus / Kotlin • Jooq その他、異なるテクノロジースタックで、フロントエンド/バックエンドを作成できます。 • フロントエンド: Svelte, Ionic, React Native • バックエンド: Node.js, Dotnet, Golang 公式以外に、サードパーティ製のBlueprintもマーケットプレイスに登録されています。 もちろん自作も可能。 Blueprintのラインナップ 41

Slide 41

Slide 41 text

エンタープライズシステム 開発とJHipster

Slide 42

Slide 42 text

JHipsterの目指すところ 47 実践で役立つシステムを開発するための基盤を目指しています。 (逆に言うと、HelloWorld的なコードを出すためのものではない、ということです) https://www.jhipster.tech より引用: “ 私たちのゴールは、完成されたモダンなWebアプリケーションやマイクロサービスのアー キテクチャを構成し、以下を統合することです： • 優れたテストカバレッジがなされた、高性能で堅牢なサーバサイドのスタック • … → エンタープライズシステム開発に使えるのでは？

Slide 43

Slide 43 text

「エンタープライズシステム ≒ 比較的大規模な企業の業務を担う情報システム」を開発するに 必要な要素は、なんでしょうか？（注：ここではソフトウェアの範囲） • 堅牢であること • コードの品質を高める仕組みがあること • 理解が容易であること • テストがしやすいこと • 安定し信頼できる実績があること • 規模大のリスクに対応できること • 分業がしやすいこと • チーム統制が取れていること • 維持可能であること • 技術スタックのコミュニティ人口が多いこと • 開発のみならず運用も考慮した仕組みをもっていること • 将来的変化に対応できる仕組みをもっていること エンタープライズシステムの開発で必要な要素 48

Slide 44

Slide 44 text

JHipsterの開発 = Java/Spring Boot + よく使われる技術スタックの開発 そのため、特長もそのままに、さらに良いことが加わります。 • 堅牢であること • 実績があり安定した Spring Boot と現場でよく使われる技術スタックで構成 • 独自色が少なくスタンダードなコードスタイルの足場を生成 • テスト環境やテストケース生成など、品質を重視したコード生成 • 規模大のリスクに対応できること • ボイラープレートコードによるコードの統制Local Blueprint によりさらに加速 • 完全に動くアプリケーションをリファレンスとして参照できる、いわゆる「動く開発標準」が手元に • マイクロサービスにも一応対応。でも、モジュラーモノリス（Spring Modulith）にも対応できそう！ • 維持可能であること • メジャーで息の長い技術スタックの選定 • マイグレーションなど、リリース後の維持管理も考慮 エンプラ開発とJHipster、合います！ 49

Slide 45

Slide 45 text

おわりに

Slide 46

Slide 46 text

• 長期的には「生成AI」で置き換わるかも • でも、Best Practiceを集めた、Java界の良質なボイラープレートがある ことはメリット。今後も維持し続けたい • 日本での実績が多くあって欲しい • 興味のある・実績を持つ方と一緒に盛り上げていきたい。何よりも現場の 生きた経験をコードに反映させることが一番良いこと 今後のJHipsterについて思うところ 58

Slide 47

Slide 47 text

Thank you! JHipsterで 爆速かつ堅牢な エンタープライズ Spring Boot 3 開発を実現する 株式会社アルファシステムズ 鏡味 秀行 https://github.com/hide212131