[[JHIPSTER一覧]]
*目次 [#zc4d56ef]
#contents
[[JHIPSTER JDL]]
* JHIPSTERとは、 [#v6981c80]
spring bootのscaffoldをするツールです。vueとはangularとか選べます。
内部でyoemanをつかって、生成しているのですが、
その時に使うコマンドラインは、cmd.exeやgit for windowsや、cygwinではだめです。
https://cmder.net/
をつかってください。(日本語のファイル名、表示できるけど、カーソル移動がまだ、だめなので、ファイル名はアルファベットでやりましょう。PowerShellためしてみるか)
yoemanの公式ページで、しっかりと、指定されてました。
cmdは、yoemanのインタラクティブなやりとりで、文字化けや色が適切に表示されません。
git for windows や cygwinでは、矢印キーでの選択ができないのです。
というか、microsoftは、このcmderを、windowsのデフォルトのターミナルにすべきです。
** 本家 [#na91159e]
https://www.jhipster.tech/
** 書籍 [#eed9fd46]
*** THE JHIPSTER MINI-BOOK [#aaa6aedc]
https://corneliu.cl/docs/jHipster-5.pdf
*** Full Stack Development with JHipster [#q3720804]
https://www.oreilly.com/library/view/full-stack-development/9781788476317/
** JHIPSTERの目標 [#b59e03d0]
- 完全で最新のWebアプリケーションまたはマイクロサービスアーキテクチャをあなたに代わって生成することです。
- Spring Bootによるサーバーサイドの高性能で堅牢なJavaスタック
- Angular、React、Bootstrapを搭載した、洗練されたモダンでモバイル初のフロントエンド
- JHipster Registry、Netflix OSS、Elastic StackおよびDockerを使用した堅牢なマイクロサービスアーキテクチャ
- Yeoman、Webpack、Maven / Gradleを使ってアプリケーションを構築するための強力なワークフロー
** ためしてみる [#q8a2659e]
JHipster Quick Start の訳です。
*** 試してみた結果の結論 [#a5432428]
試してみた結果、2019/08/01の時点では、追加機能の面からいうと、下記のサイトを
みるかぎり、JHIPSTER6よりも、JHIPSTER5のほうが、充実しているし、機能を追加しやすくする、jhipster-moduleは、jhipster6に、対応できていない。(hipsterでは、getConfigに置き換わっている)。まあ、そのうちなおるとおもう。
https://www.jhipster.tech/modules/marketplace/#/list
ちょっと、枯れた技術のJHIPSTER5を選択するのが、いろいろ、なやまされなくていいかもしれない。
JHIPSTER6からは、jhipster-moduleのかわりに、bule-printという機能が、主力になってくるのだろう。今は、過渡期なので、対応してる機能がすくないだけなんだと思う。
以下は、そんなことも、しらずに、インストールしていったときに、書いた文章になります。
*** JHipsterをインストールする [#ee94119c]
npm install -g generator-jhipster
バージョンを指定してインストールすることもできるから、もし、変なバグがはいっているバージョンが最新だったら、それで回避しよう。
*** JHipsterをアップデートする [#x04a9249]
一旦削除して、インストールしたらいい。
npm uninstall -g generator-jhipster
npm install -g generator-jhipster
*** 新しいディレクトリを作成してそこに行く [#p919b41c]
mkdir myApp && cd myApp
*** JHipsterを実行して画面の指示に従います [#zb5a9989]
ここで、
https://cmder.net/
または、PowerShell
をつかわないと、windowsでは、正しくインタラクティブしてくれない。
jhipster
ここでwindows10ではエラーがでる。ps1ファイルが実行できないように設定されているからだ。
PowerShell Get-ExecutionPolicy
で確認
PowerShell Set-ExecutionPolicy RemoteSigned
すると、下記のような質問がでてくる。
? Which *type* of application would you like to create?
> Monolithic application (recommended for simple projects)
Microservice application
Microservice gateway
JHipster UAA server (for microservice OAuth2 authentication)
これは、yoemanを使っているためだ
（あと、だれか、このしょっぱなの、英語の質問メニュー、日本語対応してくれたらうれしいです。お願いします。）
成功すると、次のメッセージが表示されるだろう。
Server application generated successfully.
Run your Spring Boot application:
./mvnw (mvnw if using Windows Command Prompt)
Client application generated successfully.
Start your Webpack development server with:
npm start
> my-app@0.0.0 cleanup C:\jhip\myApp
> rimraf target/classes/static/ target/classes/aot
INFO! Congratulations, JHipster execution is complete!
しまった、デフォルト設定だと、gradleではなく、mavenをつかうようになっていた。
それに、vue.jsは、選択肢にはなかった。
もう一回、やってみる。次は、vue.jsはJHIPSTER5で登場したブループリントが
インストールされてなくてはならないので、次のコマンドで、ブループリント使えるようにする。
npm i -g generator-jhipster-vuejs
そんでもって、下記のコマンドでためしてみる。
jhipster --blueprint vuejs
今度は、gradle使うようにした、フロントエンドは、vueしか選べないようになっていた。
ここで、gitに登録しておこう。後で、エンティティにフィールド追加しようとか、
いろいろ、こまごま変更しようとして、やらかしたときに、復活できるようにしておこう。
git init
git add . --all
git commit -m 'first commit'
とかでいいだろうな。
さてと、ここで、サーバを
./gradlew
で起動させて、
フロントエンドを
npm start
で起動させると、ホーム画面が生成された。
すごい量のコードがビルドされていく、自前で、組んでいたら、２か月ぐらいの作業量だろうか。
で、さっきのコマンドラインでの、インタラクティブな、英語攻めの設定は、
.yo-rc.json
というファイルにまとめられているという。
これだけをコピーして、もう一回、myAppフォルダをごっそりして、この.yo-rc.jsonファイルだけあれば、復元できるか実験してみる。
やってみたこと
.yo-rc.jsonをバックアップしておく
myAppフォルダを空っぽにする
.yo-rc.jsonファイルだけ戻す
jhipster --blueprint vuejs
さあ、これで、質問攻めにあわなくてすむだろう。。。。
*** JDL Studioを使用してエンティティをモデル化 [#te3b447b]
サンプルサイト
https://github.com/jhipster/jdl-samples
サンプルとして、下記のサイトのコードを
https://www.jhipster.tech/jdl-studio/
jhipster-jdl.jh
として、ダウンロードしてください。
*** であなたのエンティティを生成する [#u0525727]
jhipster import-jdl jhipster-jdl.jh
** 自動生成されたサンプル [#e9e2322b]
*** 自動生成されたAngularサンプル [#f7eb3204]
https://github.com/jhipster/jhipster-sample-app
*** 自動生成されたReactサンプル [#pc8c4f52]
https://github.com/jhipster/jhipster-sample-app-react
*** 自動生成されたVueサンプル [#r2a85d6d]
https://github.com/jhipster/jhipster-sample-app-vuejs
*** 自動生成されたKotlinサンプル [#ra738fee]
https://github.com/jhipster/jhipster-sample-app-kotlin
*** 自動生成された.NETサンプル [#k52f1bb7]
https://github.com/jhipster/jhipster-net-sample-app-template
** Windowsにいれるには [#m16edda8]
公式ドキュメントには、書いてないところを書き足してみます。
まあ、公式にWindowsでの、入れ方が書いてないということは、ねぇ。Macユーザがつくってるんでしょうね。
*** gradle つかいたいよね [#s607f8cf]
https://github.com/gradle/gradle-completion
*** sdkmanいるかわかんないけど、いれとく [#k68077f2]
https://sdkman.io/install
*** でもそのまえに、gowいれないと、zipコマンドとかつかえないよ。 [#x0a89bd3]
https://github.com/bmatzelle/gow/releases
** ひさしぶりに、JHIPSTERやってみる。 [#hb550fd4]
VUEも対応するように、なってる。時代の波に乗っていこうとするツールの開発者が感じられる。
気に入ったよ。おれも、ついていこう。
というわけで、インストールしてみる。ちなみに、いまこの記事を書いているバージョンは、6.1.2が最新だ。
進化がはやい。
さて、どこから、手をつけよう。ちょっと、どんなさいとがあるのかしらべてみた。
* JHIPSTERから、VUEプロジェクトを生成する方法を紹介しているサイト [#y9ae231e]
** ブラウザ上で使いながら、学べそうなサイト [#f95d742c]
https://www.jhipster.tech/using-vue/
** JHipster-vuejs [#e02fe8c4]
https://github.com/jhipster/jhipster-vuejs
簡単な手順が書いてある、概念的な説明は乏しい感じがする。
** Using Vue [#kff7387c]
本家サイトの紹介ページ
一番信頼できると思う。
** Creating a modern Web app using Vue.js and Spring Boot with JHipster [#tf8557cf]
わかりやすそうな、サイト
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
** generator-jhipster-vuejs [#ofa3f8d8]
npmのプロジェクト
https://www.npmjs.com/package/generator-jhipster-vuejs
** インド人が、英語でしゃべっている、解説動画 [#sda0c4d9]
https://www.youtube.com/watch?v=Cbtdvp6e36Q
ナマステ、よくわからないが、BGMがわりに、聞いておこう。
上記の、わかりやすそうな、解説サイトを、Googleで翻訳したのを手直して貼ってみる。
* Vue.jsとSpring Bootを使用してJHipsterで最新のWebアプリケーションを作成する [#y87a822b]
*** 訳者注 [#x15eab19]
以下の記事は、テオレブランさんが、 2019年2月21日 に、
https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/
で紹介した記事の、英語が苦手な人が、翻訳してみたバージョンです。
画像を張るのは、このブログの仕組みでは大変なため、、元の英語のほうの記事をみてくださいね。
** 初めに [#rd0eb5d5]
Vue.jsはJavascriptフロントエンドの世界における新しいトレンドフレームワークであり、そのシンプルさによってWebアプリケーションをかなり速く構築することができます。
Vue.jsアプリケーションの構造は、ページを構築するためにコンポーネントとテンプレートを使用するという点でAngularアプリケーションと非常によく似ています。このビデオ
*** vue.js [#h2988cd2]
https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
は、特にAngularまたはReactを使用したことがない場合にVue.jsを使い始めるための優れた入門書です。
これは現在人気のあるフレームワークのサイズ比較（縮小）です（詳細はこちら）。
https://gist.github.com/Restuta/cda69e50a853aa64912d
| Name | Size |
| ------------------------ | ----- |
| Angular 2 | 566K |
| Ember 2.2.0 | 435K |
| React 0.14.5 + React DOM | 133K |
| React 16.2.0 + React DOM | 97K |
| Vue 2.4.2 | 58K |
| Inferno 1.2.2 | 48K |
| Preact 7.2.0 | 16K |
前にも述べたように、Vue.jsのシンプルさは非常に軽量で他のライブラリや既存のプロジェクトとの統合を容易にします。
一方、Vue.jsは適切なツールを使用して堅牢なシングルページアプリケーションを構築することができ、JHipsterはそれに最適です。
** JHipster の チュートリアル動画 [#ecb98c3c]
JHipsterに慣れていないのであれば、このビデオ
https://www.youtube.com/watch?v=-VQ_SVkaXbs
を見て、JHipsterで何ができるか、英語ですが、インストールから、わかりやすく解説されています。 （やはりmacユーザですね。）
* JHipsterブループリントを使ったVue.js [#jec57dd3]
https://www.jhipster.tech/modules/creating-a-blueprint/
デフォルトでは、JHipsterはフロントエンドフレームワークに対してAngularかReactのどちらかを選択するように求めます。青写真の概念はJHipsterバージョン5で導入されました、そして、目標はあなたがあなた自身のサブジェネレータを使わせることによってJHipsterの機能性を拡張することです。ブループリントを作成して使用する方法に関する詳細情報は、ドキュメント
https://www.jhipster.tech/modules/creating-a-blueprint/
にあります。
** インストール [#dd84ee75]
フロントエンドの生成には、公式のVue.jsブループリントが使用されています。ブループリントリポジトリ
https://github.com/jhipster/jhipster-vuejs
のインストール手順に従うことができます。私がこのブログ記事を書いた時点でブループリントはまだ開発中だったので、あなたはいくつかの問題に遭遇するかもしれません。あなたが部分が間違った方法でされたと思うならば、それらを報告して、プル要求を提出してください。
** アプリケーション生成 [#cd758235]
まず新しいフォルダを作成し、vuejsブループリントを付けてJHipsterを実行しましょう。
mkdir vuejs-app
cd vuejs-app
jhipster --blueprint vuejs
質問ごとにデフォルトの回答を選択できます。ブループリントが正しくインストールされていれば、次のメッセージが表示されます。
Using blueprint generator-jhipster-vuejs for client subgenerator
? Which *Framework* would you like to use for the client? (Use arrow keys)
> Vue.js
この.yo-rc.jsonは、この記事で参照したのと同じアプリケーションを生成したい場合に使用できます。ファイルはアプリケーションディレクトリに置かれ、それから実行jhipster -d --blueprint vuejsすることはどんな質問もせずにアプリケーションを生成するでしょう。
** エンティティ生成 [#icd656d9]
アプリケーションを起動する前に、3つのエンティティを含む単純なJDLを使用していくつかのエンティティを生成しましょう。このコンテンツを含むentities.jdlアプリケーションのルートフォルダに名前の付いたファイルを作成するだけです。次に、Vue.jsブループリントを使用してコマンドを実行してエンティティを生成します。jhipster import-jdl entities.jdl
./mvnwコマンドを実行してアプリケーションを起動し、http：// localhost：8080 /＃/にアクセスして、すべてが正常に機能していることを確認できます。ログインすると、「エンティティ」メニューには以下の3つのエンティティが表示されます。
** Vue.js構造の詳細について [#p851f021]
Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp/appであり、構造はAngularと非常によく似ています。npm startコードを変更したときにライブコンパイル/リロードの利点を享受するために、端末でコマンドを実行することをお勧めします。AngularやReactと同様に、webpackはTypeScriptコードをJavaScriptにコンパイルしてアプリケーションをパッケージ化するために使用されます。
** 設定 [#sb54a3a7]
*** コア [#pace90cd]
Vueのインスタンスは、ファイル内に作成されたsrc/main/webapp/app/main.ts、と私は見てお勧めsrc/main/webapp/app/shared/config/config.tsにも。
どちらのファイルも複数のものを構成します。
- 国際化
- ルーター
- Vuex（アプリケーションの状態を保存するために使用されます）
- サービス（カスタムサービスを追加する必要があります。それらを挿入することができます）
** 国際化 [#fb266add]
Vue.jsアプリケーションはすでにさまざまな言語で動作するように設定されており、翻訳を含むフォルダはにありますsrc/main/webapp/i18n。この方法$t()は、ユーザーの言語に基づいてテキストを表示するために使用できます。
テンプレート内：
<h1 class="display-4" v-text="$t('home.title')">Welcome, Java Hipster!</h1>
コンポーネント内（名前パラメータを使用できます）
// "A Operation is updated with identifier {{ param }}"
const message = this.$t('blogpostApp.operation.updated', { param: param.id });
** ルート [#gbf04913]
Reactと同様に、すべてのルートは1つのファイルに集中化されていますsrc/main/webapp/app/router/index.ts。JHipsterは自動的にエンティティのルートを生成します。
カスタムルートはコメントの後に追加する必要が// jhipster-needle-add-entity-to-router - JHipster will add entities to the router hereあります。これにより、他のエンティティが生成されたときに問題が発生しないようにします。
このフィールドmetaはユーザーの権限をチェックするために使用され、他の変数を渡すために使用することができます。
// This route will only allow users with the "ROLE_ADMIN" authority
{
path: '/admin/user-management',
name: 'JhiUser',
component: JhiUserManagementComponent,
meta: { authorities: ['ROLE_ADMIN'] }
}
** エンティティページ [#s8dddd30]
*** 構造 [#e13f35d4]
フォルダsrc/main/webapp/app/shared/modelにはAngularのモデルなどが含まれています。.vueアプリケーションの「ページ」ごとにテンプレートに関連付けられたコンポーネントがあります。
新しいページを作成するときはカスタムサービス/コンポーネント/テンプレートを作成することをお勧めします。そのため、エンティティを再生成するときに競合を解決する必要はありません。
** 検証 [#x868a833]
検証はvuelidateライブラリを使って行われ、使い方は簡単です。エンティティOperationは、カスタム検証がvuelidateを使用してどのように行われるかを理解するための良い例です。OperationUpdateあなたは以下を参照することができ、コンポーネントは検証オプションが含まれています。
const validations: any = {
operation: {
date: {
required
},
description: {},
amount: {
required,
numeric
}
}
};
@Component({
validations
})
export default class OperationUpdate extends Vue {
...
}
このファイルoperation-update.vueは検証ルールを使用してカスタム検証メッセージを表示/非表示にします。
<input type="number" class="form-control" name="amount" id="operation-amount"
:class="{'valid': !$v.operation.amount.$invalid, 'invalid': $v.operation.amount.$invalid }" v-model="$v.operation.amount.$model" required/>
<div v-if="$v.operation.amount.$anyDirty && $v.operation.amount.$invalid">
<small class="form-text text-danger" v-if="!$v.operation.amount.required" v-text="$t('entity.validation.required')">
This field is required.
</small>
<small class="form-text text-danger" v-if="!$v.operation.amount.number" v-text="$t('entity.validation.number')">
This field should be a number.
</small>
</div>
重要なオブジェクトは$ vです。これは検証されたフィールドのステータスを取得するために使用できます。
* 結論 [#k4f59b8b]
Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な時間は非常に短いです。それはAngular / Reactの優れた代替手段であり、それらのフレームワークの経験があると役立ちます。他のフレームワークページとの比較は、Vue.jsがアプリケーションに適しているかどうかを判断するのに役立ちます。
JHipsterは、最新のWebアプリケーションを完成させるために必要なものすべてを提供し、ごく短時間で運用に移すことができます。それに加えて、バックエンドはSpring Bootによる高性能で堅牢なJavaスタックとして構築されています。
