見出し画像

Quarkusによる開発者の生産性向上: ③Dev UIを使ってアプリケーションの設定や管理を直感的におこなう

Fusayuki Minamoto



はじめに

この記事は、Quarkus in Actionのサンプルアプリケーションを使ってQuarkusの機能を紹介するシリーズの7回目です。今回はDev UIを紹介します。Dev UIは、Dev Mode (開発モード) で利用できる、アプリケーション設定や、エクステンション管理のためのWebインタフェースです。

本記事に登場するQuarkus CLIのインストール方法や実行環境、quarkus-in-actionサンプルアプリケーションについては以下の記事をご覧ください。

Dev UIを起動する

Dev UIを起動するには、まず、アプリケーションをDev Modeで起動しておきます。quarkus-in-actionサンプルプログラムのディレクトリを以下のコマンドを実行しておいてください。

$ quarkus dev
<略>
Listening for transport dt_socket at address: 5005
__  ____  __  _____   ___  __ ____  ______ 
 --/ __ \/ / / / _ | / _ \/ //_/ / / / __/ 
 -/ /_/ / /_/ / __ |/ , _/ ,< / /_/ /\ \   
--\___\_\____/_/ |_/_/|_/_/|_|\____/___/   
2025-02-10 18:59:52,365 INFO  [io.quarkus] (Quarkus Main Thread) quarkus-in-action 1.0.0-SNAPSHOT on JVM (powered by Quarkus 3.18.2) started in 1.136s. Listening on: http://localhost:8080

2025-02-10 18:59:52,368 INFO  [io.quarkus] (Quarkus Main Thread) Profile dev activated. Live Coding activated.
2025-02-10 18:59:52,368 INFO  [io.quarkus] (Quarkus Main Thread) Installed features: [cdi, rest, smallrye-context-propagation, vertx]

--
Tests paused
Press [e] to edit command line args (currently ''), [r] to resume testing, [o] Toggle test output, [:] for the terminal, [h] for more options>

Dev Modeを起動するとコマンド入力行が最後に表示されます。そこで [d] を押すとデフォルトのWebブラウザーが開いて、次のようなUI画面が表示されます。これが Dev UIの画面です。Webブラウザーでhttp://localhost:8080/q/dev-ui/を指定しても同じ画面が開きます。

Dev UI

Dev UI画面の全体像を見てみましょう。左側にはメニューがあり、その右側にはメニューの選択項目に応じた内容が表示されます。画面の下部にはQuarkusのサーバーログが表示されています。

また、画面右上のディスプレイの形をしたアイコンをクリックすると、表示をダークモードにすることもできます（アイコンが三日月の形状に変化しています）。

ダークモード

Extensionsパネル

Dev UIの左側のメニューは初期状態でExtensionsが選択されています。このとき、右側にはアプリケーションに含まれるエクステンションのカードが表示されています。ArCというカードは、Quarkusコア機能に含まれるCDI (Contexts and Dependency Injection; 依存性注入) のためのエクステンションです。さらに、その右隣にRESTというカードが表示されています。今回使用しているquarkus-in-actionアプリケーションではアプリケーション作成時にRESTエクステンションを指定したので、それが表示されています。

カードの内部にはさらに、エクステンション固有の情報にアクセスするためのボタンが表示されています。以下のイメージは、Dev UIのArcとRESTのカードを拡大した様子を示しています。

ArcとRESTエクステンション

カードの上にマウスカーソルを置くと右上にドキュメントのアイコンが表示されます。

RESTカード

RESTカードの右上のドキュメントアイコンをクリックするとQuarkus RESTのガイドにジャンプします。

RESTのガイド

ArCカードのBeanを表示する

ArCカードの [Beans] ボタンすると、このアプリケーション内のCDI Beanのリストが表示されます。

CDI Beansのリスト

RESTカードのEndpointsを表示する

RESTカードの [Endpoints] ボタンすると、このアプリケーション内のRESTエンドポイントのリストが表示されます。quarkus-in-actionアプリケーションには/helloというエンドポイントが実装されています。

REST Endpointsのリスト

この/helloのエンドポイントはリンクになっていて、クリックすると、以下のようにWebブラウザーに/helloの戻り値の文字列が表示されます。

/helloの実行結果

Configurationパネル

application.propertiesのリスト表示

Dev UIの左側にある2番めのConfigurationでは、application.propertiesの内容を表示・編集できます。ここでは実際にapplication.propertiesには書かれていない組み込みのプロパティの値も表示されています。

Configurationパネル

画面上部の Filter においてプロパティ名の一部を入力することで、表示されるプロパティを絞り込むことができます。たとえば、Filterでquarkus.log.consoleまで入力すると次のようになります。

quarkus.log.consoleプロパティ

application.propertiesの修正

ここでquarkus.log.console.darkenプロパティを使った値の修正の例を示します。このプロパティをマウスでクリックすると、そのプロパティの説明が表示されます。この値は、ターミナル上のログの文字の暗さの度合いを指定します。値は 0 に設定されていますのでターミナルの文字は明るいです。

quarkus.log.console.darken

quarkus.log.console.darkenの値を0から1に変更してEnterキーを叩くと、そのプロパティがapplication.propertiesのファイルに追加されます。

application.propertiesへの修正結果の反映

Dev Modeでアプリケーションを動かしているので、application.propertiesの変更はすぐに反映されます。見づらいですが、下のスクショの上半分がquarkus.log.console.darken=0のときのログの文字の明るさですが、下半分がquarkus.log.console.darken=1にしたために文字の色が暗くなっています。

quarkus.log.console.darken=1の効果

まとめ

この記事ではDev UIについて概要を説明しました。Dev UIを使うとコマンドを叩かなくともアプリケーションの設定や管理をWebインタフェースで直感的にできました。Dev UIには、以下のような開発時に便利な機能が含まれていました。

  • Dev UIはDev Mode上で [d] コマンドで起動します。

  • Dev UIではエクステンションごとに固有のUI機能を提供します。

  • Dev UIではエクステンションごとにガイドへのリンクが貼られています。

  • Dev UIではapplication.propertiesを表示・編集ができます。

エクステンションのプロパティ設定を変更したいときに、該当するQuarkusガイドをWeb上で調べると思いますので、エクステンションカードからドキュメントへジャンプできるのは地味に便利です。

プロパティを変更するときには、エディタを起動しなくともDev UI上の操作で変更ができます。このプロパティの変更は、Dev Modeで実行しているのですぐにアプリケーションに反映されます。こうした一連の流れにより開発がすごくスムーズに進むと思います。

それに、エクステンション固有のUI機能は非常に魅力的です。アプリケーション含まれている複数のエクステンションのUI機能がDev UIの一つの画面に集約されているので、複数のツールをバラバラに起動する必要がなく、効率的に調査やトラブルシューティングに使えるでしょう。

この記事ではRESTエクステンションのUIの例を紹介しましたが、もうすこし複雑なエクステンションの方がメリットが伝わりやすいかもしれません。たとえば、Apache Kafka Clientエクステンションを使うとDev UI上に次のようなカードが表示されます。

Kafkaエクステンションカード

Topicsボタンを押せば、Topicのリストが表示され、特定のTopicをクリックするとTopic内のメッセージを確認することができます。これって便利だと思いませんか？

Topicの内容表示

次回は Dev Services の紹介をする予定です。Dev Servicesとは、開発やテスト時に必要な（データベースやKeycloakのような）サービスのことであり、コンテナーとして自動的に起動されます。Dev UIからDev Services設定情報にアクセスすることもできますので、引き続きDev UIが登場することになります。


いいなと思ったら応援しよう！