JHIPSTER一覧

目次

JHIPSTER JDL

JHIPSTERとは、

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のデフォルトのターミナルにすべきです。

本家

https://www.jhipster.tech/

書籍

THE JHIPSTER MINI-BOOK

https://corneliu.cl/docs/jHipster-5.pdf

Full Stack Development with JHipster

https://www.oreilly.com/library/view/full-stack-development/9781788476317/

JHIPSTERの目標

ためしてみる

JHipster Quick Start の訳です。

試してみた結果の結論

試してみた結果、2019/08/01の時点では、追加機能の面からいうと、下記のサイトを

みるかぎり、JHIPSTER6よりも、JHIPSTER5のほうが、充実しているし、機能を追加しやすくする、jhipster-moduleは、jhipster6に、対応できていない。(hipsterでは、getConfigに置き換わっている)。まあ、そのうちなおるとおもう。

https://www.jhipster.tech/modules/marketplace/#/list

ちょっと、枯れた技術のJHIPSTER5を選択するのが、いろいろ、なやまされなくていいかもしれない。

JHIPSTER6からは、jhipster-moduleのかわりに、bule-printという機能が、主力になってくるのだろう。今は、過渡期なので、対応してる機能がすくないだけなんだと思う。

以下は、そんなことも、しらずに、インストールしていったときに、書いた文章になります。

JHipsterをインストールする

npm install -g generator-jhipster

新しいディレクトリを作成してそこに行く

mkdir myApp && cd myApp

JHipsterを実行して画面の指示に従います

ここで、

https://cmder.net/

または、PowerShell?

をつかわないと、windowsでは、正しくインタラクティブしてくれない。

jhipster

すると、下記のような質問がでてくる。

? 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

で起動させると、ホーム画面が生成された。

すごい量のコードがビルドされていく、自前で、組んでいたら、2か月ぐらいの作業量だろうか。

で、さっきのコマンドラインでの、インタラクティブな、英語攻めの設定は、

.yo-rc.json

というファイルにまとめられているという。

これだけをコピーして、もう一回、myAppフォルダをごっそりして、この.yo-rc.jsonファイルだけあれば、復元できるか実験してみる。

やってみたこと

.yo-rc.jsonをバックアップしておく
myAppフォルダを空っぽにする
.yo-rc.jsonファイルだけ戻す
jhipster --blueprint vuejs

さあ、これで、質問攻めにあわなくてすむだろうか。。。。

JDL Studioを使用してエンティティをモデル化

jhipster-jdl.jh

できた、上記のファイルをダウンロードしてください。

であなたのエンティティを生成する

jhipster import-jdl jhipster-jdl.jh

自動生成されたサンプル

自動生成されたAngularサンプル

https://github.com/jhipster/jhipster-sample-app

自動生成されたReactサンプル

https://github.com/jhipster/jhipster-sample-app-react

自動生成されたVueサンプル

https://github.com/jhipster/jhipster-sample-app-vuejs

自動生成されたKotlinサンプル

https://github.com/jhipster/jhipster-sample-app-kotlin

自動生成された.NETサンプル

https://github.com/jhipster/jhipster-net-sample-app-template

Windowsにいれるには

公式ドキュメントには、書いてないところを書き足してみます。

まあ、公式にWindowsでの、入れ方が書いてないということは、ねぇ。Macユーザがつくってるんでしょうね。

gradle つかいたいよね

https://github.com/gradle/gradle-completion

sdkmanいるかわかんないけど、いれとく

https://sdkman.io/install

でもそのまえに、gowいれないと、zipコマンドとかつかえないよ。

https://github.com/bmatzelle/gow/releases

ひさしぶりに、JHIPSTERやってみる。

VUEも対応するように、なってる。時代の波に乗っていこうとするツールの開発者が感じられる。

気に入ったよ。おれも、ついていこう。

というわけで、インストールしてみる。ちなみに、いまこの記事を書いているバージョンは、6.1.2が最新だ。

進化がはやい。

さて、どこから、手をつけよう。ちょっと、どんなさいとがあるのかしらべてみた。

JHIPSTERから、VUEプロジェクトを生成する方法を紹介しているサイト

ブラウザ上で使いながら、学べそうなサイト

https://www.jhipster.tech/using-vue/

JHipster-vuejs

https://github.com/jhipster/jhipster-vuejs

簡単な手順が書いてある、概念的な説明は乏しい感じがする。

Using Vue

本家サイトの紹介ページ

一番信頼できると思う。

Creating a modern Web app using Vue.js and Spring Boot with JHipster

わかりやすそうな、サイト

https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/

generator-jhipster-vuejs

npmのプロジェクト

https://www.npmjs.com/package/generator-jhipster-vuejs

インド人が、英語でしゃべっている、解説動画

https://www.youtube.com/watch?v=Cbtdvp6e36Q

ナマステ、よくわからないが、BGMがわりに、聞いておこう。

上記の、わかりやすそうな、解説サイトを、Googleで翻訳したのを手直して貼ってみる。

Vue.jsとSpring Bootを使用してJHipsterで最新のWebアプリケーションを作成する

訳者注

以下の記事は、テオレブランさんが、 2019年2月21日 に、

https://blog.ippon.tech/creating-a-modern-web-app-using-vuejs-and-spring-boot-with-jhipster/

で紹介した記事の、英語が苦手な人が、翻訳してみたバージョンです。

画像を張るのは、このブログの仕組みでは大変なため、、元の英語のほうの記事をみてくださいね。

初めに

Vue.jsはJavascriptフロントエンドの世界における新しいトレンドフレームワークであり、そのシンプルさによってWebアプリケーションをかなり速く構築することができます。

Vue.jsアプリケーションの構造は、ページを構築するためにコンポーネントとテンプレートを使用するという点でAngularアプリケーションと非常によく似ています。このビデオ

vue.js

https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/

は、特にAngularまたはReactを使用したことがない場合にVue.jsを使い始めるための優れた入門書です。

これは現在人気のあるフレームワークのサイズ比較(縮小)です(詳細はこちら)。

https://gist.github.com/Restuta/cda69e50a853aa64912d

NameSize
-----------------------------
Angular 2566K
Ember 2.2.0435K
React 0.14.5 + React DOM133K
React 16.2.0 + React DOM97K
Vue 2.4.258K
Inferno 1.2.248K
Preact 7.2.016K

前にも述べたように、Vue.jsのシンプルさは非常に軽量で他のライブラリや既存のプロジェクトとの統合を容易にします。

一方、Vue.jsは適切なツールを使用して堅牢なシングルページアプリケーションを構築することができ、JHipsterはそれに最適です。

JHipster の チュートリアル動画

JHipsterに慣れていないのであれば、このビデオ

https://www.youtube.com/watch?v=-VQ_SVkaXbs

を見て、JHipsterで何ができるか、英語ですが、インストールから、わかりやすく解説されています。 (やはりmacユーザですね。)

JHipsterブループリントを使ったVue.js

https://www.jhipster.tech/modules/creating-a-blueprint/

デフォルトでは、JHipsterはフロントエンドフレームワークに対してAngularかReactのどちらかを選択するように求めます。青写真の概念はJHipsterバージョン5で導入されました、そして、目標はあなたがあなた自身のサブジェネレータを使わせることによってJHipsterの機能性を拡張することです。ブループリントを作成して使用する方法に関する詳細情報は、ドキュメント

https://www.jhipster.tech/modules/creating-a-blueprint/

にあります。

インストール

フロントエンドの生成には、公式のVue.jsブループリントが使用されています。ブループリントリポジトリ

https://github.com/jhipster/jhipster-vuejs

のインストール手順に従うことができます。私がこのブログ記事を書いた時点でブループリントはまだ開発中だったので、あなたはいくつかの問題に遭遇するかもしれません。あなたが部分が間違った方法でされたと思うならば、それらを報告して、プル要求を提出してください。

アプリケーション生成

まず新しいフォルダを作成し、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することはどんな質問もせずにアプリケーションを生成するでしょう。

エンティティ生成

アプリケーションを起動する前に、3つのエンティティを含む単純なJDLを使用していくつかのエンティティを生成しましょう。このコンテンツを含むentities.jdlアプリケーションのルートフォルダに名前の付いたファイルを作成するだけです。次に、Vue.jsブループリントを使用してコマンドを実行してエンティティを生成します。jhipster import-jdl entities.jdl

./mvnwコマンドを実行してアプリケーションを起動し、http:// localhost:8080 /#/にアクセスして、すべてが正常に機能していることを確認できます。ログインすると、「エンティティ」メニューには以下の3つのエンティティが表示されます。

Vue.js構造の詳細について

Vue.jsアプリケーション全体を含むフォルダはsrc/main/webapp/appであり、構造はAngularと非常によく似ています。npm startコードを変更したときにライブコンパイル/リロードの利点を享受するために、端末でコマンドを実行することをお勧めします。AngularやReactと同様に、webpackはTypeScript?コードをJavaScript?にコンパイルしてアプリケーションをパッケージ化するために使用されます。

設定

コア

Vueのインスタンスは、ファイル内に作成されたsrc/main/webapp/app/main.ts、と私は見てお勧めsrc/main/webapp/app/shared/config/config.tsにも。

どちらのファイルも複数のものを構成します。

国際化

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 });

ルート

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'] }
}

エンティティページ

構造

フォルダsrc/main/webapp/app/shared/modelにはAngularのモデルなどが含まれています。.vueアプリケーションの「ページ」ごとにテンプレートに関連付けられたコンポーネントがあります。

新しいページを作成するときはカスタムサービス/コンポーネント/テンプレートを作成することをお勧めします。そのため、エンティティを再生成するときに競合を解決する必要はありません。

検証

検証は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です。これは検証されたフィールドのステータスを取得するために使用できます。

結論

Vue.jsはスムーズな学習曲線を持ち、生産的になるのに必要な時間は非常に短いです。それはAngular / Reactの優れた代替手段であり、それらのフレームワークの経験があると役立ちます。他のフレームワークページとの比較は、Vue.jsがアプリケーションに適しているかどうかを判断するのに役立ちます。

JHipsterは、最新のWebアプリケーションを完成させるために必要なものすべてを提供し、ごく短時間で運用に移すことができます。それに加えて、バックエンドはSpring Bootによる高性能で堅牢なJavaスタックとして構築されています。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-01 (木) 16:34:48 (131d)