,*KR鯽5VGT鰛 鱣鱈鱬鰘 鱑鲉鯮鱬鰛 5ECHHQNF #PIWNCT鰘 $QQV鰙

鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵獑

Who are U?

ׯײ׭؃׵猳 鱣鱈鱬鰘 鱑鲉鯮鱬鰛

What is JHipster?

JHipster is JHipster is a Yeoman generator Spring Boot + AngularJS モダン Web アプリケーションを素早く作れることを⽬的 オープンソース YeomanはモダンWebアプリケーションを提供するScaffoldツール すべてGitHubで開ൃ https://github.com/jhipster/generator-jhipster

,*KRUVGT鰟㕡苏 Client-side Server-side

%NKGPVUKFG

%NKGPVUKFG IE9以上とモダンBrowserをサポートします。

%NKGPVUKFG CSSフレームワークであるBootstrapを⽤いてレスポンシブなWebデザインを ࣮現できます。

%NKGPVUKFG Google製JavaScriptフレームワーク。 フルスタックな機能を⽤いたSPA(Single Page Application)が構築できます。

%NKGPVUKFG ウェブサーバーとウェブブラウザとの間の૒⽅向通信の技術規格。 ૒⽅向通信が低コストで࣮現可能です。

%NKGPVUKFG Twitter製のフロントエンド⽤パッケージ管理ツールです。 JavaScript,CSS,HTMLなどを依存ؔ係を含めて管理してくれます。

%NKGPVUKFG Node.jsをベースとしたビルドシステムです。 さまざまな作業を⾃動化可能となります。 ストリーミングビルドシステムと⾔われ、ファイルのॲ理をストリームで ⾏います。

%NKGPVUKFG Sass (Syntactically Awesome Stylesheets）。 スタイルシート⾔語でCSSを簡略にコーディング出དྷます。

%NKGPVUKFG BrowserSyncはWeb開ൃをサポートするローカルサーバーです。 HTMLなどのファイルをม更すると⾃動でブラウザをリロードしてくれるので、 インタラクティブな開ൃが可能となります。

%NKGPVUKFG Karmaはテストフレームワークと組み合わせて࣮ブラウザ上でテストを⾏えます。

%NKGPVUKFG ProtractorはSelenium WebDriverJSベースのフレームワークです。 E2E（End to End）テストをサポートします。

5GTXGTUKFG

5GTXGTUKFG Spring プロジェクトが提供する༷ʑなライブラリやフレームワークを ⼿早く使えるフレームワークです。 Spring Securityなどの協⼒なプロダクトを活⽤することで、素早く安全な Webアプリケーションを開ൃできます。

5GTXGTUKFG Netflix OSSはマイクロサービスを࣮現するOSS製品です。 Eureka（中間レイヤのサーバのロードバランスと障害復چ）やZuul（動的なルー ティング、モニタリング、障害耐性、セキュリティなどの役割をもつサービス） などがあります。

5GTXGTUKFG Gradle / Mavenは、Javaのデファクトスタンダードなビルドツールです。 JHipsterではどちらのビルドツールを使うかを選୒できます。

5GTXGTUKFG HibernateはJavaのO/Rマッパーフレームワークです。 JPAやSpring Data JPAの࣮૷として⽤いられています。

5GTXGTUKFG LiquibaseはDBリファクタリングツールです。 DB のม更を XML ファイル（ChangeLog）で管理し、異なる DB 製品であって も、同じ XML ファイルのม更で反映することができます。

5GTXGTUKFG MySQL、PostgreSQ、Oracleなどのデータベース製品をサポートします。 この他、MariaDBもサポートしています。

5GTXGTUKFG MongoDBはNoSQLと呼ばれるドキュメント指向データベースです。

5GTXGTUKFG Cassandraは、Facebook，Twitter，Diggなどの有名Webサービスが導⼊したこ とで注⽬を集めているFacebook 製NoSQLデータベースです。 Apacheに寄贈され，Apacheトッププロジェクトに昇格しました。

5GTXGTUKFG EHCacheはキャッシュ機能を提供する Java ライブラリです。 HibernateのL2キャッシュで⽤いられます。

5GTXGTUKFG Hazelcastは、オープンソースのインメモリデータグリッドソフトウェアです。 ノード間でのインメモリのデータ共有、ঢ়態更新を管理します。 HibernateのL2キャッシュやHTTPセッションをクラスタ化する際に⽤いられます。

5GTXGTUKFG ElasticSearchは全⽂ݕ索システムです。 Luceneという全⽂ݕ索エンジンを利⽤しており、REST-APIを提供しています。

5GTXGTUKFG Thymeleafは、Javaのテンプレートエンジンライブラリです。 ナチュラルテンプレーティングというコンセプトに持っており、 ੩的にブラウザでの表⽰が可能です。デザイナとの共同作業に便利です。

5GTXGTUKFG GatlingはScala製の負荷テスト⽀援ツールです。

5GTXGTUKFG CucumberはE2E（End to End）のテストツールです。

How to install

ローカルインストール Vagrantでのインストール Docker でのインストール JHipsterはローカルインストールの他、VagrantやDocerを使ったインストール が可能です

ローカルインストール Vagrantでのインストール Docker でのインストール 今回は、ローカルインストールを紹介します

Java8をOracleのWebサイトからインストール ! ビルドツールはMavenかGradleを選୒可能 ※こららはWrapperで⾃動的にインストールされるので、⽤意しなくてもOK ! git-scm.com からGitをインストール ! ! Node.jsのWebサイトからNode.jsをインストール ! ! ⼀ॹにインストールされるnpmを使⽤して JHipsterに必要なnpmパッケージをインストール ローカルインストール

! $ npm install -g yo ! ! ! $ npm install -g bower ! ! ! $ npm install -g gulp ! ! ! $ npm install -g generator-jhipster :FPNBOͷΠϯετʔϧ #PXFSͷΠϯετʔϧ (VMQͷΠϯετʔϧ +)JQ4UFSͷΠϯετʔϧ ローカルインストール

How to create app

上記コマンドを࣮⾏すると、JHipsterのアプリケーション作成が始まります。 ! $mkdir hogeHipster ! $ cd hogeHipster ! $ yo jhipster *QYVQETGCVGCRR

██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ ! http://jhipster.github.io ! Welcome to the JHipster Generator v3.4.1 Application files will be generated in folder: /Users/s_kozake/IdeaProjects/hogeHipster ______________________________________________________________________________ ! JHipster update available: 3.4.2 (current: 3.4.1) Run npm install -g generator-jhipster to update. ______________________________________________________________________________ ! ? (1/16) Which *type* of application would you like to create? (Use arrow keys) ❯ Monolithic application (recommended for simple projects) Microservice application Microservice gateway [BETA] JHipster UAA server (for microservice OAuth2 authentication) *QYVQETGCVGCRR JHipsterではMonolithicなアプリケーションもしくは マイクロサービスアプリケーションを選୒できます。

JHipsterを⽤いると、上記例のようなマイクロサービスアプリケーション構成を ⼿ܰに構築できます。

上記の⾚࿮がjhipster-generatorで作成可能です。

? (1/16) Which *type* of application would you like to create? (Use arrow keys) ❯ Monolithic application (recommended for simple projects) Microservice application Microservice gateway [BETA] JHipster UAA server (for microservice OAuth2 authentication) *QYVQETGCVGCRR 作成するアプリケションタイプを選୒します。 ここではMonolithicなアプリケーションを選୒します。

? (2/16) What is the base name of your application? (hogeHipster) *QYVQETGCVGCRR アプリケーション名を⼊⼒します。 現在のディレクトリ名がデフォルトのアプリケーション名として表⽰されます。

? (3/16) What is your default Java package name? (com.mycompany.myapp) *QYVQETGCVGCRR javaのパッケージ名を⼊⼒します。

? (4/16) Which *type* of authentication would you like to use? HTTP Session Authentication (stateful, default Spring Security mechanism) ❯ OAuth2 Authentication (stateless, with an OAuth2 server implementation) JWT authentication (stateless, with a token) *QYVQETGCVGCRR 認ূ⽅式にHTTP Sessionを⽤いたैདྷのWebアプリケーション認ূ⽅式の他、 OAuth2やJWTを⽤いた認ূ⽅式が選୒できます。 これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。

? (5/16) Which *type* of database would you like to use? (Use arrow keys) ❯ SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle) MongoDB *QYVQETGCVGCRR データベースを選୒します。 RDBMSの他、NoSQLであるMongoDBも選୒可能です。

? (6/16) Which *production* database would you like to use? ❯ MySQL MariaDB PostgreSQL Oracle - Warning! The Oracle JDBC driver (ojdbc) is not bundled because it is not Open Source. Please follow our documentation to install it manually. *QYVQETGCVGCRR プロダクトで使⽤するデータベースの種類を選୒します。 Oracleを選୒した場合、JDBCドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。

? (7/16) Which *development* database would you like to use? (Use arrow keys) ❯ H2 with disk-based persistence H2 with in-memory persistence MySQL ! *QYVQETGCVGCRR 開ൃで使⽤するデータベースの種類を選୒します。 H2かMYSQLが選୒でき、H2はデータをディスクに保存する場合と インメモリで動作する場合のどちらかを選୒できます。

? (8/16) Do you want to use Hibernate 2nd level cache? ❯ No Yes, with ehcache (local cache, for a single node) Yes, with HazelCast (distributed cache, for multiple nodes) *QYVQETGCVGCRR Hibernate 2ndレベルキャッシュを⽤いるかどうかを選୒します。 ehcacheを⽤いたローカルキャッシュ⽅式もしくはHazelCastを⽤いた 複਺ノードでのキャッシュ⽅式も選୒可能です。

? (9/16) Do you want to use a search engine in your application? No ❯ Yes, with ElasticSearch *QYVQETGCVGCRR 全⽂ݕ索エンジンであるElasticSearchを使⽤するかどうかを選୒します。 ElasticSearchを選୒すると、Spring Data ElasticSearchを⽤いた設定が ⾏われます。開ൃモードでは、組ࠐみのElasticSearchが⽤いられます。

? (10/16) Do you want to use clustered HTTP sessions? (Use arrow keys) ❯ No Yes, with HazelCast *QYVQETGCVGCRR HTTP SessionをHazelCastを⽤いたクラスタ構成にするかどうかを選୒します。

? (11/16) Do you want to use WebSockets? No ❯ Yes, with Spring Websocket *QYVQETGCVGCRR Spring Websocketを⽤いるかどうかを選୒します。

? (12/16) Would you like to use Maven or Gradle for building the backend? Maven ❯ Gradle *QYVQETGCVGCRR ビルドツールにMavenかGradleを選୒します。

? (13/16) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N) *QYVQETGCVGCRR Sassをサポートするかどうかを選୒します。

? (14/16) Would you like to enable internationalization support? (Y/n) *QYVQETGCVGCRR ࠃ際化をサポートするかを選୒します。

? Please choose the native language of the application? Hindi Hungarian Italian ❯ Japanese Korean Marathi Polish (Move up and down to reveal more choices) *QYVQETGCVGCRR ࠃ際化を選୒した場合、ネイティブランゲージを選୒します。

? Please choose additional languages to install ◯ Czech ◯ Danish ◯ Dutch ❯◉ English ◯ French ◯ Galician ◯ German (Move up and down to reveal more choices) *QYVQETGCVGCRR 他にサポートするネイティブランゲージを選୒します。

? (15/16) Which testing frameworks would you like to use? (Press to select) ❯◉ Gatling ◯ Cucumber ◯ Protractor *QYVQETGCVGCRR ⽤いたいテストフレームワークを選୒します。

Installing languages: ja, en create bower.json create package.json create README.md create .gitignore : create src/main/webapp/i18n/en/global.json create src/main/webapp/i18n/en/health.json create src/main/resources/i18n/messages_en.properties ! ! I'm all done. Running npm install & bower install for you to install the required dependencies. If this fails, try running the command yourself. ! ! npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated [email protected]: cross-spawn no longer requires a build toolchain, use it instead! npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue fetchMetadata → 304 ▌ ╢████████████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░░░░░░░░╟ ! *QYVQETGCVGCRR 全ての選୒が終ると、インストールが始まります。

*QYVQETGCVGCRR ! $ git init ! $ git add . ! $ git commit -m "first install jhipster” ! $ git tag install インストールが終ったら、gitで管理しましょう。 適切な.gitignoreファイルが⽤意されているので便利です。

How to run

! $ ./gradlew bootrun 上記コマンドを࣮⾏すると、8080ポートでWebアプリケーションが起動します。 *QYVQTWP

! $ ./gulp 上記コマンドを࣮⾏すると、9000ポートでBrowsersyncが起動します。 これにより、࣮⾏したままը⾯の修正がインタラクティブに⾏えます。 *QYVQTWP

gulpコマンドを࣮⾏すると、ブラウザが⾃動起動してը⾯が表⽰されます。

アカウント - 認ূを選୒してログインします。 adminとuserのアカウントがデフォルトで⽤意されています。 初期パスワードはアカウント名と同じです。

adminアカウントでログインすると、エンティティや管理がナビゲーションタブ に表⽰されます。

⾔語タブで⾔語表⽰を切り替えることができます。

adminでログインすると、アプリケーションを管理するҝの༷ʑな機能が ⽤意されています。例えば管理 - メトリクスを選୒すると、JVMのঢ়態や HTTPリクエスト਺などを確認することができます。

管理 - ヘルスチェックを選୒すると、データベースやディスクスペースのঢ়態を 確認することができます。

管理 - 設定を選୒すると、Spring configurationやsystemEnvironmentなど、 各種アプリケーション環境設定を表⽰できます。

管理 - APIを選୒すると、Swagger UIによるWebAPIのドキュメント を表⽰できます。

管理 - データベースを選୒すると、接ଓしているデータベースの管理ը⾯を 表⽰できます。

データベースにログインすることで、データベースの಺容を確認できます。

create entity

JHipsterを⽤いて、上のようなEntityとそれを編集するCRUDը⾯を⽣成します。

! $ yo jhipster:entity author 上記コマンドを࣮⾏して、Author Entityを⽣成します。 ETGCVGGPVKV[

? Do you want to add a field to your entity? (Y/n) ETGCVGGPVKV[ フィールドを追加するかどうかを聞かれますので、Yesを選୒します。

? What is the name of your field? name ETGCVGGPVKV[ フィールド名を⼊⼒します。

? What is the type of your field? (Use arrow keys) ❯ String Integer Long Float Double BigDecimal LocalDate (Move up and down to reveal more choices) ETGCVGGPVKV[ フィールドの型を選୒します。

? Do you want to add validation rules to your field? (y/N) Y ETGCVGGPVKV[ フィールドのバリデーションルールを追加するかどうかを選୒します。

? Which validation rules do you want to add? ◉ Required ❯◯ Minimum length ◉ Maximum length ◯ Regular expression pattern ETGCVGGPVKV[ 必須⼊⼒、最⼩/最⼤⾧や正規表現によるチェックを選୒できます。 ここでは、必須⼊⼒と最⼤⾧を選୒します。

? What is the maximum length of your field? (20) 100 ETGCVGGPVKV[ 最⼤⾧の⾧さを⼊⼒します。

================= Author ================= Fields name (String) required maxlength='100' ETGCVGGPVKV[ 選୒·⼊⼒した಺容が表⽰されます。

Generating field #2 ! ? Do you want to add a field to your entity? Yes ? What is the name of your field? birthDate ? What is the type of your field? LocalDate ? Do you want to add validation rules to your field? Yes ? Which validation rules do you want to add? Required ! ================= Author ================= Fields name (String) required maxlength='100' birthDate (LocalDate) required ! ETGCVGGPVKV[ 同༷に、birthDateフィールドを追加します。

? Do you want to add a relationship to another entity? No ETGCVGGPVKV[ リレーションを追加するかどうかを選୒します。 ここではNoを選୒します。

? Do you want to use a Data Transfer Object (DTO)? ❯ No, use the entity directly [BETA] Yes, generate a DTO with MapStruct ETGCVGGPVKV[ EntityのDTOを作成するかどうかを選୒できます。 ここでは、EntityをそのままDTOとして⽤いるのでNoを選୒します。

? Do you want to use separate service class for your business logic? No, the REST controller should use the repository directly ❯ Yes, generate a separate service class Yes, generate a separate service interface and implementation ETGCVGGPVKV[ RESTコントローラからRepositoryを直接呼び出す⽅式かビジネスロジックを書く ҝのServiceクラスを作成するかどうかを選୒します。 ここでは、Serviceクラスの作成を選୒します。

? Do you want pagination on your entity? No ❯ Yes, with a simple pager Yes, with pagination links Yes, with infinite scroll ETGCVGGPVKV[ ը⾯のページング⽅式を選୒します。 simple pager ： Bootstrap pagerベースのページング pagination links： Bootstrap pagination コンポーネント infinite scroll ： infinite scroll ディレクティブ

Everything is configured, generating the entity... ! create .jhipster/Author.json create src/main/java/team/hoge/hipster/domain/Author.java create src/main/java/team/hoge/hipster/repository/AuthorRepository.java create src/main/java/team/hoge/hipster/repository/search/AuthorSearchRepository.java create src/main/java/team/hoge/hipster/web/rest/AuthorResource.java create src/main/java/team/hoge/hipster/service/AuthorService.java create src/main/resources/config/liquibase/changelog/20160623225714_added_entity_Author.xml conflict src/main/resources/config/liquibase/master.xml ? Overwrite src/main/resources/config/liquibase/master.xml? overwrite force src/main/resources/config/liquibase/master.xml create src/main/webapp/app/entities/author/authors.html create src/main/webapp/app/entities/author/author-detail.html create src/main/webapp/app/entities/author/author-dialog.html create src/main/webapp/app/entities/author/author-delete-dialog.html conflict src/main/webapp/app/layouts/navbar/navbar.html ? Overwrite src/main/webapp/app/layouts/navbar/navbar.html? overwrite force src/main/webapp/app/layouts/navbar/navbar.html create src/main/webapp/app/entities/author/author.state.js create src/main/webapp/app/entities/author/author.controller.js create src/main/webapp/app/entities/author/author-dialog.controller.js create src/main/webapp/app/entities/author/author-delete-dialog.controller.js create src/main/webapp/app/entities/author/author-detail.controller.js create src/main/webapp/app/entities/author/author.service.js create src/main/webapp/app/entities/author/author.search.service.js create src/main/webapp/i18n/ja/author.json conflict src/main/webapp/i18n/ja/global.json ? Overwrite src/main/webapp/i18n/ja/global.json? overwrite force src/main/webapp/i18n/ja/global.json create src/main/webapp/i18n/en/author.json conflict src/main/webapp/i18n/en/global.json ? Overwrite src/main/webapp/i18n/en/global.json? overwrite force src/main/webapp/i18n/en/global.json create src/test/javascript/spec/app/entities/author/author-detail.controller.spec.js create src/test/java/team/hoge/hipster/web/rest/AuthorResourceIntTest.java create src/test/gatling/simulations/AuthorGatlingTest.scala ! Running gulp Inject to add javascript to index ETGCVGGPVKV[

ETGCVGGPVKV[ ! $ yo jhipster:entity book 同༷に、Book Entityを⽣成します。

================= Book ================= Fields title (String) required maxlength='100' description (String) maxlength='200' publicationDate (LocalDate) required price (BigDecimal) required ! ! Generating relationships to other entities ! ? Do you want to add a relationship to another entity? (Y/n) y ETGCVGGPVKV[ Author Entityの時と同༷に、フィールドを追加します。 Author Entityとのリレーションを作成するので、 リレーションを追加するかどうかでYesを選୒します。

? What is the name of the other entity? author ETGCVGGPVKV[ どのEntityとのリレーションを⽣成するかを聞かれるので、 authorを⼊⼒します。

? What is the name of the relationship? (author) ETGCVGGPVKV[ リレーション名を聞かれるので、ここではデフォルトのauthorとします。

? What is the type of the relationship? one-to-many ❯ many-to-one many-to-many one-to-one ETGCVGGPVKV[ リレーションのカーディナリティを選୒します。 Bookから⾒てAuthorは1つなので、「many-to-one」を選୒します。

? When you display this relationship with AngularJS, which field from 'author' do you want to use? (id) name ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰させることにします。

? Do you want to add any validation rules to this relationship? (y/N) y ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰することにします。

? Which validation rules do you want to add? ❯◉ Required ETGCVGGPVKV[ リレーションにバリデーションルールを追加します。 ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、 Requiredを選୒します。

================= Book ================= Fields title (String) required maxlength='100' description (String) maxlength='200' publicationDate (LocalDate) required price (BigDecimal) required ! Relationships author (Author) many-to-one required ETGCVGGPVKV[ 上記಺容でBook Entityを⽣成します。

ログインすると、エンティティにAuthorとBookが追加されています。

エンティティ-Bookを選୒すると、CRUDը⾯が表⽰できます。

エンティティ-Bookの表⽰ը⾯。

エンティティ-Bookの編集ը⾯。

エンティティ-Bookの削除確認ダイアログ。

material design

! $ bower install bootstrap-material-design --save bootstrap-material-designインストールすることで、簡୯にը⾯を Materialデザインにม更できます。 OCVGTKCNFGUKIP

Index.htmlを修正 ! $.material.init(); インストール後、index.htmlに上記಺容を追加してください。 OCVGTKCNFGUKIP

! $ gulp build ! $ ./gradlew bootrun ը⾯を再ビルドし、再起動します。 OCVGTKCNFGUKIP

ը⾯がmaterialデザインになりました！

まとめ

鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵猳猳 Ͱ ƅ˜ƅͰ JHipSterで⽤いているツールの勉ڧをしたり、出⼒されたソースコードで 勉ڧすると、モダンなWeb開ൃに役⽴つと思いますよ！