[Java]JHipsterでscaffoldをやってみる

#Java

#JHipster

t.honda

2017.03.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

少し前に私の席の周りで「Javaで(Webアプリの)Scaffoldができたらいいね」的な話になった事がありました。色々なやり方があるとは思いますが、今回はJHipsterというフレームワークでこれをやってみようと思います。

JHipsterとは

公式ページには

JHipster is a Yeoman generator, used to create a Spring Boot + Angular project.

JHipster

とあり、サーバ側をSpring Boot、クライアント側をAngularJSで作成するフレームワークと言えると思います。

環境構築

JHipsterを実行するための環境を構築する手順です。Installing JHipsterを参考に以下のように行いました。

前提条件

実行環境はMacで、Java・node.js・npmをインストール済みという前提です。またnode.js・npmについては最新版を使用しました(node.jsが古いとプロジェクト作成時にエラーとなりました)。

1.Yeomanのインストール

以下のコマンドを実行します。

npm install -g yo

2.JHipsterのインストール

以下のコマンドを実行します。

npm install -g generator-jhipster

3.Yarnのインストール

以下のコマンドを実行します。

npm install -g yarn

プロジェクトの作成

JHipsterを使いプロジェクトを作成する手順です。Creating an applicationを参考に以下のように行いました。

mkdir jhipster-sample-blog
cd jhipster-sample-blog
yo jhipster

ここまで実行するとターミナルに以下のように表示され、プロジェクトを作成するためのウィザードが開始されます。

$ yo jhipster
 
        ██╗ ██╗   ██╗ ████████╗ ███████╗   ██████╗ ████████╗ ████████╗ ███████╗
        ██║ ██║   ██║ ╚══██╔══╝ ██╔═══██╗ ██╔════╝ ╚══██╔══╝ ██╔═════╝ ██╔═══██╗
        ██║ ████████║    ██║    ███████╔╝ ╚█████╗     ██║    ██████╗   ███████╔╝
  ██╗   ██║ ██╔═══██║    ██║    ██╔════╝   ╚═══██╗    ██║    ██╔═══╝   ██╔══██║
  ╚██████╔╝ ██║   ██║ ████████╗ ██║       ██████╔╝    ██║    ████████╗ ██║  ╚██╗
   ╚═════╝  ╚═╝   ╚═╝ ╚═══════╝ ╚═╝       ╚═════╝     ╚═╝    ╚═══════╝ ╚═╝   ╚═╝

                            https://jhipster.github.io

Welcome to the JHipster Generator v4.0.7
Documentation for creating an application: https://jhipster.github.io/creating-an-app/
Application files will be generated in folder: /Users/hondatetsuyuki/D/Java/jhipster-sample-blog
 ______________________________________________________________________________

  JHipster update available: 4.0.8 (current: 4.0.7)

  Run yarn global upgrade generator-jhipster to update.

 ______________________________________________________________________________

? (1/15) Which *type* of application would you like to create? (Use arrow keys)

ウィザードには以下のように選択、入力しました。

? (1/15) Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? (2/15) What is the base name of your application? jhipsterSampleBlog
? (3/15) Would you like to install other generators from the JHipster Marketplace? No
? (4/15) What is your default Java package name? org.jhipster
? (5/15) Which *type* of authentication would you like to use? JWT authentication (stateless, with a token)
? (6/15) Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
? (7/15) Which *production* database would you like to use? MySQL
? (8/15) Which *development* database would you like to use? H2 with disk-based persistence
? (9/15) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
? (10/15) Would you like to use Maven or Gradle for building the backend? Gradle
? (11/15) Which other technologies would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
? (12/15) Which *Framework* would you like to use for the client? [BETA] Angular 2.x
? (13/15) Would you like to use the LibSass stylesheet preprocessor for your CSS? Yes
? (14/15) Would you like to enable internationalization support? Yes
? Please choose the native language of the application? English
? Please choose additional languages to install Japanese
? (15/15) Besides JUnit and Karma, which testing frameworks would you like to use? Gatling, Protractor

プロジェクトの実行

作成したプロジェクトを実行してみます。Gradleプロジェクトとして作成したのでEclipseなどのIDEにインポートし、src/main/java/org/jhipster/JhipsterSampleBlogApp.javaを起動します。起動したらブラウザよりにアクセスして以下の画面が表示されることを確認します。

jhipster-scaffold-1

右上の「Account」-「Sign in」を選択し、Username・Passwordともデフォルトで用意されている「admin」を入力してサインインしてみます。

jhipster-scaffold-2

「admin」でサインインすると「Administration」メニューが表示され、「Metrics」や「Database」など管理用メニューが表示されるので、見てみて下さい。

Scaffoldの実行

Scaffoldを実行してみます。JDL-Studioを使うとScaffoldするEntityをビジュアルで見ながら作成できます。JDL-Studioの画面に以下の様なテキストをコピーしてください。

entity Article {
	title String required,
	content TextBlob required,
	date ZonedDateTime required
}

relationship ManyToOne {
    Article{user(login)} to User
}

右側に表示されるEntityの図を見れば分かるかと思いますが、「Article」というEntityを定義しています。このEntityは「User」Entityと紐づくようにしています(「User」Entityはデフォルトで作成されるサインインで使用するユーザを保持するものです)。

右上の「Download text file of this JDL」ボタンを押下し、ダウンロードした「jhipster-jdl.jh」ファイルをプロジェクトのフォルダ内に保存します。ターミナルにて以下のコマンドを実行します。

yo jhipster:import-jdl jhipster-jdl.jh

「? Overwrite src/main/resources/config/liquibase/master.xml? (Ynaxdh) 」と聞かれたら「a」を入力します。完了したらIDEより再起動してみます。

ブラウザよりにアクセスしてみると、「Entities」メニューの下に「Article」が表示されます。

jhipster-scaffold-3

「Article」を押下すると画面が遷移するので、右上の「Create a new Article」を押下すると、「Article」を登録するためのダイアログが表示されます。適当な値を入力して「Save」を押下します。この時「Date」欄には「Feb 2, 2017, 7:17:17 AM」のような形式でないと登録できないようです。(※)
※追記。「Date」欄には「yyyy/MM/dd HH:mm:ss」形式でも入力できました。

jhipster-scaffold-4

登録され、一覧に表示されました。

jhipster-scaffold-5

データベースも確認してみます。メニューより「Administration」-「Database」を選択すると、H2 Consoleのログイン画面が表示されます。「Connect」を押下してコンソールを表示します。

コンソールの左側にテーブルの一覧が表示されますが、その中にScaffoldで作成した「Article」テーブルがあることを確認します。「SELECT * FROM ARTICLE」を発行し、画面から登録したデータが存在することを確認します。

jhipster-scaffold-6

まとめ

JHipsterを使用してプロジェクトの作成〜Scaffoldによるデータ登録処理の作成までを行ってみました。JDL-StudioによるEntityの定義をそのままScaffoldできるところなど、求めていた機能に近い物を持っているフレームワークのように感じました。さらに触ってみて、分かった事があれば記事にしていきたいと思います。