JHIPSTER一覧

目次

blueprintとは

一言でいうと、JHIPSTER用のレイヤー単位での、ジェネレータ差し替え機構。かな。

デフォルトだと、テーブルの管理画面を迅速に作るぐらいしかできないし、利用者のプロジェクトのお作法用に、カスタマイズっているとおもうんだよね。

内部で使っているのは、yeomanの機能。

直訳すると、青写真なんだけど、yeomanでいうところの、generator-generator

で、JHIPSTER5までは、moduleという概念だったんだけど、次の点が改善されていると思う。

レイヤーとは、たとえば、サーバとか、クライアントとか、エンティティ等である。

JHIPSTER6ぐらいから使われだした、JHIPSTER用のテンプレート生成テンプレート

翻訳元のサイト

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

いっておきますが、英語は得意ではありません。そして、意訳が多分にふくまれております。あしからず。

基本的に、グーグル翻訳をペタペタはってます。

blueprintを作成する

JHipsterブループリントは、

yeomanのジェネレータの合成機能

https://yeoman.io/authoring/composability.html

をつかっています。

特定のJHipsterサブジェネレータから構成され、そのサブジェネレータの機能を拡張するYeomanジェネレータです。ブループリントは、サブジェネレータの定義済みゲッタをオーバーライドし、独自のテンプレートと機能を提供することができます。

JHipsterの青写真は、JHipsterのマーケットプレイス

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

にjhipster-blueprintラベルとともに記載されています。

これにより、JHipsterの特定の部分、たとえばクライアント側のテンプレートのみをオーバーライドできるサードパーティ製のブループリントを作成できます。

blueprintの使い方

もし、<blueprint name>という、blueprintが使えるようになっている前提ですが、

ブループリントを実行するには、下記のコマンドを実行します。

jhipster --blueprint <blueprint name>

もうちょっと、詳しく説明すると、

blueprintは、npmで、管理されているyeoman製のjhipsterモジュールみたいなものです、

自分でも何言っているのかわかんなくなりそうですが、言いたいことは、

使う準備として、使いたいものをしらべて、npm installしないとだめということです。

たとえば、使いたいものが、generator-jhipster-vuejs という名前だとすると、

npm i -g generator-jhipster-vuejs

とします、i は、installの意味、-g は、いろいろなユーザで使えるように指定する意味だったとおもいます。

で、<blueprint name>が、vuejsだったとすると、

jhipster --blueprint vuejs

とやるわけです。

Kotolinコードを生成するblueprint

JHipster Kotlinのblueprintは、同等のKotlinコードとサーバーサイドJavaコードのほとんどを置き換えます。

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

JHIPSTERのBLUEPRINT使用例

クライアントのサブジェネレータであるbuleプリントを上書きする例

https://github.com/hipster-labs/generator-jhipster-sample-blueprint

blueprintの初期スケルトンの作成方法

JHipsterブループリントジェネレータを使用してブループリントを初期化できます。

JHipsterブループリントジェネレータを使用するには、以下のコマンドを実行します。

なお、このドキュメント書いているのは、以下のバージョンの時点での記事です。

generator-jhipster-blueprint@0.0.9

(バージョンが0.1にすらなっていないという。。。アルファ版相当?)

npm install -g generator-jhipster-blueprint

mkdir my-blueprint && cd my-blueprint
# リポジトリ作成
git init

# 最初のコミット
git commit --allow-empty -m "first commit"

Windowsをつかっている方への注意事項:yoコマンドは、PowerShell?から起動しないと、インタラクティブが正しく機能しないから注意しましょう。

yo jhipster-blueprint

質問に答えながら上書きしたいサブジェネレータを選択してください。

質問される事項

? What is the base name of your module? helloworld
? Give a description of your module
? Which sub-generators do you want to override? entity
? What is your GitHub username? khayashi4337
? Who are you? Firstname Lastname Hayashi Kuniyuki
? Your email? khayashi4337@gmail.com
? Your home page url?
? Do you want to add a license? Apache License 2.0

entityをえらんでみた結果例

[ 'entity' ]
   create package.json
   create .editorconfig
   create .eslintignore
   create .eslintrc.json
   create .prettierrc
   create .prettirignore
   create .gitattributes
   create .gitignore
   create .travis.yml
   create LICENSE
   create README.md
   create generators\entity\index.js
   create test\entity.spec.js

##### USAGE #####
To begin to work:
- launch: yarn install or npm install
- link: yarn link or npm link
- link JHipster: yarn link generator-jhipster or npm link generator-jhipster
- test your module in a JHipster project:
    - create a new directory and go into it
    - link the blueprint: yarn link generator-jhipster-helloworld or npm link  generator-jhipster-helloworld
    - launch JHipster with flags: jhipster --blueprint helloworld
- then, come back here, and begin to code!

でてきたUSAGEの意訳

##### 使い方 #####
ほかのプロジェクトで使うための準備

 以下のコマンドを実行:

  npm install
  npm link
  npm link generator-jhipster
 2.テンプレートを修正してください。
 3.いざ、テンプレート生成

あなたのプロジェクトに、ディレクトりを移動させます。

      npm link  generator-jhipster-helloworld

コードが上書きされるので、そのまえに、いったんgitで、コミットしてあることを確認します。

      git status
      jhipster --blueprint helloworld

コードが上書きされていることを確認しましょう。

      git diff  

JHipsterブループリントの基本事項

JHipsterのblueprintは:

下記に上げるような他のジェネレータ同様に、Yeomanのルールに従っています。

http://yeoman.io/generators/

なので、yoコマンドをつかってインストールしたり、更新したりできます。

. 先頭は generator-jhipster-で始めてください。

yeoman-generator と jhipster-blueprint の2つのキーワードをもっている必要があります。

ブループリントは、次のサブジェネレーター(ジェネレーターフォルダーの下)のみを拡張できます。

generator-jhipsterをインポートする

JHipsterブループリントは、依存関係としてgenerator-jhipsterを持っている必要があり、それをオーバーライドするために適切なsubジェネレータをインポートする必要があります。

    const chalk = require('chalk');
    const ClientGenerator = require('generator-jhipster/generators/client');
    ...

    module.exports = class extends ClientGenerator {
        constructor(args, opts) {
            super(args, Object.assign({ fromBlueprint: true }, opts)); // 変数fromBlueprintは重要です

            const jhContext = this.jhipsterContext = this.options.jhipsterContext;

            if (!jhContext) {
                this.error(`これは、JHIPSTERのblueprintです。 利用方法は、右記のような書式です。 ${chalk.yellow('jhipster --blueprint helloworld')}`);
            }

            this.configOptions = jhContext.configOptions || {};
            // このサブジェネレータ用のセットアップオプションはJHipsterで再利用してます。
            jhContext.setupClientOptions(this, jhContext);
        }

        get initializing() {
            // 親クラスのメソッドを直接よびだすことで何もyeomanのフェースを上書きしません。
            return super._initializing();
        }

        // 同様に、サブジェネレータのほかのフェーズの記述を必要に応じて追加します。
    }

上記の例の ClientGenerator? のように、 アンダーバーで始まるメソッドは、親クラスで、再利用できます。

JHipsterのblueprintなどのサブジェネレータは、yeomanのフェーズで、どうするかの記述をします。

それぞれのyeomanのフェーズは、getterメソッドになっています。(get ではじまるやつ)

たとえば、get initializing を例にとってみます。

blueprintはフェーズでの処理を、オーバーライドすることで、カスタマイズすることができるのです。

yeomanのフェーズのカスタマイズ方法

1) なにもしない場合は、こちら

親クラスの初期化メソッドを呼び出しています。アンダーバーがついていますね。

2) フェーズを全部上書きする例, 自前の制御オンリーですね。

ブループリントから直接JHipsterの変数や関数にアクセスすることもできます。

利用可能な変数と関数

設定ファイル .yo-rc.json からの変数:

あなたはJHipster設定.yo-rc.jsonとあなたのblueprint設定の両方からなる設定にアクセスすることができます

グローバル変数 (ジェネレータ定数):

ジェネレータ定数で定数を使うことができます。

    const javaDir = `${jhipsterConstants.SERVER_MAIN_SRC_DIR + this.packageFolder}/`;
    const resourceDir = jhipsterConstants.SERVER_MAIN_RES_DIR;
    const webappDir = jhipsterConstants.CLIENT_MAIN_SRC_DIR;

関数:

あなたはgenerator-baseですべての関数を使うことができます:

   this.angularAppName = this.getAngularAppName(); // get the Angular application name.
   this.printJHipsterLogo(); // to print the JHipster logo

注意: generator-base.jsと内の変数generator-constants.jsはパブリックAPIの一部なので、semverのバージョン管理に従います。

しかしgenerator-base-private.js、utils.jsなどのような他のファイルはsemverのバージョン管理に従わず、マイナーバージョン間でメソッドシグネチャを壊すかもしれません。

blueprintの開発のお作法

blueprintの開発中に、以下の手順に注意してください。それらはとても重要です

JHipsterマーケットプレイスにblueprintを登録する

blueprintをJHipsterマーケットプレイスで入手できるようにするには、2つのキーワードが登録されてる必要があります。

公開されているnpm にあることを確認する必要がありますpackage.json。

しくったのを見つけた場合

JHipsterモジュールでもブループリントでもないエントリがマーケットプレイスに見つかった場合は、jhipster/jhipster.github に Pull Requestを送るという手段で、

modules-config.jsonファイルのblacklistedModulesセクションに追加することで、ブラックリストに追加できます。

いざ、使ってみる。

たとえば、git labとかで、マージリクエストがとおったら 、 次の仕事をすぐやるんじゃなく、ナレッジベースを追加する時間を

とれば、長期的には、仕事は楽になるんじゃないだろうか。

GitLab?は、差分が見やすい、何を修正しようとしたときに、どこのファイルが

修正になったのかが、見やすいようになっている。

自分は、この差分をもとに、テンプレートを作成したら、

いいんじゃないかと思う。

数式的に、いいかえると

(差分)=(テンプレート)+ (パラメータ)

と考えるわけです。

なので、式変形すると、

(差分)- (パラメータ) = (テンプレート)

なのです。

ここで、gitがデファクトスタンダードな現状から、

(差分)= (マージリクエストの差分表示)

なので、欲をいえば、GitLab?の差分表示画面に、(パラメータ)を渡すと、

(テンプレート)を生成してくれたらうれしいのですが、

そこは、手作業としておきましょうか。

なにが、メリットなのかというと

それは、横展開の、高速化でしょうか。

(似たような仕様書)= (パラメータ)x N

とかんがえるわけです。

(パラメータ)1つについて、(差分)を取りながら

開発をすすめていって、

ついでに、(テンプレート)をいくわけです。

そうすると、2個目の(パラメータ)以降は、テンプレートの恩恵が

得られるわけなのです。

おおまかな手順

1. git labで、マージリクエストの差分を得る

2. 差分から、パラメータ部分を変数に置き換える

3. blueprint用のテンプレートファイルを作成する

かなぁ

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-20 (火) 09:53:45 (93d)