Introduction of JHipster

Purpose Who A U Background What Why Tech Getting Start Inside Learn More Agenda JHipster4

Background What Why Tech Getting Start Inside Who are You? ࣗݾ঺հ Purpose JHipster4 Learn More

Who A U ࣗݾ঺հ ,CXC 鰄鰇鰂鰈鱄鯵鰒 0COG 5[UVGO#TEJKVGEV ,QD $GNQPI 5MKNN Ⰸ蘭

Who A U աڈҊ݅1 ㄔ䱉5GTXGT ⫛ㅚ5GTXGT

Who A U աڈҊ݅2 ⫛ㅚ5GTXGT RAC 赙剏蒕諢 5GTXGT 鱴鱧鱥5GTXGT ㄔ䱉5GTXGT

Who A U աڈҊ݅3 ,510QP*662 鱴鱧鱥5GTXGT ㄔ䱉5GTXGT 鱊鱋鱺5GTXGT &$5GTXGT 0#5 ⫛ㅚ5GTXGT

UGVVKPIDWKNFTWP TGUQNXG FGRNQ[ OKITCVG )GVDWKNF RWDNKUJ RWNNRWUJ ։ൃ؀ڥ Who A U

ίϛϡχέʔγϣϯ νϟοτ νέοτ؅ཧ ϝʔϧ Who A U

What Why Tech Getting Start Inside Learn More Background എܠ Purpose Who A U JHipster4

獱↛↛↛↛↛↛↛獱 獐ֺ䵢䐗鰟┘㢑ֺ獎 玔;@;@;@;@;@;玔 Background

Background ɾ౷Ұੑͷ͋Δ࢖͍΍͍͢ϢʔβΠϯλϑΣεͰ͋Δ͜ͱ ɾϞόΠϧ୺຤͔Βͷར༻΋ՄೳͰ͋Δ͜ͱ ɾཉ͍͠৘ใʹ௚઀ΞΫηεͰ͖Δը໘ߏ੒Ͱ͋Δ͜ͱ 䰿鰠峡鰔鰗鯵鰼 ⃫峹茒⇗鱃䅡鰐鰊鰪鯾鰑鰙 ඼࣭ཁ݅

Background ɾϞόΠϧ୺຤͔Βར༻͔ΒFlex͸ީิ֎ɻ ɾPC୺຤Ͱͷૢ࡞ੑΛߟ͑ΔͱɺSPA͕๬·͍͠ɻ ɾνʔϜͷٕज़εΩϧͱͯ͠αʔό͸αΠυ͸Java ɾϑϩϯταΠυͷεΩϧ͕ෆ଍͍ͯ͠ΔͷͰɺ ɹҰࣜἧͬͨF/WΛ༻͍͍ͨ Spring Boot + Angular …? JHipster!!! OG

झࢫ OG ␤$QUU ,*KRUVGT恦鯹鯹禮鰉鰵鱄 䰟⑦鰘▪㈘飍鰈鰗鰵猳 鲂鱜鰘獑 鱀鰻鰙鲂鱜鰘 ∼某貴族にて∼ Background

本来なら やらないですが :-P くっそめんどいし

鍗ャ鰟ׅⰨ惂鰟哋鎠憫巼劳׆ Background

Background 窸桴 䵛桴 ⇓桴

獅鰕鰟桴鰘ѹ⋳䥥㓱桘猳 Background 窸桴 䵛桴 ⇓桴

Who A U Background What Why Tech Getting Start Inside Learn More Purpose झࢫ JHipster4

JHipsterというOSSプロダクトの紹介資料です。 Purpose झࢫ 質問は都度受け付けます！ ൃ表途中にもൃ⾔してください。 わいわいやりましょう∼ ご利⽤は計ը的に :-P

Who A U Background Tech Getting Start Inside Learn More What’s JHipster? JHipsterͱ͸ Purpose Why JHipster4

What JHipster is JHipster is a Yeoman generator Spring Boot + Angular モダン Web アプリケーションを素早く作れることを⽬的 オープンソース YeomanはモダンWebアプリケーションを提供するScaffoldツール すべてGitHubで開ൃ。Apache 2.0-licensed。 16⼈の開ൃ者と280⼈のコントリビュータ https://github.com/jhipster/generator-jhipster

What History 2013年10にJulien Duboisによって開始されました。 最初の公式リリース(version 0.3.1) が2013年12⽉7⽇。 それ以དྷ、115ものリリースがされています！

What Scaffold Tool is 「scaffold（スキャフォールド）」は「⾜場」という意味です。 「⾜場」という名の通り、アプリケーションのひな形となるソースコードを⾃動⽣成します。

Who A U Background What Tech Getting Start Inside Learn More Why JHipster? JHipsterͷར఺ Purpose JHipster4

Why #PIWNCT 5RTKPI$QQV Spring Boot と Angular は、 素晴らしいフルスタックフレームワークです。

Why #PIWNCT 5RTKPI$QQV ですが、とても⼤きなフレームワークです。 習得コストも⼤きいです。

Why JHipsterを⽤いることで すばやくWebアプリケーションの 雛形を作ることができます！ 素晴らしいサンプルはプロジェクトにとって⾮常に有ޮです。

Why これがJHipsterで⽣成されたWebアプリケーションのը⾯です。

Why 認ূや認可の仕組みが最初から⽤意されています。 オプションによりSocialログインも⽤意されます。

Why i18n(Internationalization)も⽤意されており、 ⾔語タブにより表⽰⾔語を切り替えることが可能です。

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

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

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

Why 管理 - ログを選୒すると、ログ設定の確認やม更ができます。

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

全てが最初からWeb Applicationに⽤意！！ Why

,*KRUVGT鰘ѹ⋳䥥㓱▀猳 Why

Who A U Background What Getting Start Inside Learn More Technologies JHipsterͷٕज़ Purpose Why JHipster4

Client-side Server-side JHipster's Tech Tech

Client-Side Tech Tech

Client-Side Tech IE9以上とモダンBrowserをサポートします。

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

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

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

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

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

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

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

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

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

Server-Side Tech

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

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

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

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

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

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

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

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

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

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

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

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

Server-Side Tech GatlingはScala製の負荷テスト⽀援ツールです。

Server-Side Tech CucumberはE2E（End to End）のテストツールです。

Who A U Background What Learn More JHipster 4.0 for Angular2 Purpose Why Tech Getting Start Inside

JHipster4 is #PIWNCT,5 #PIWNCT $QQV5VTCR $QQV5VTCR "AngularJS"は、Angular 1.xを意味します。 "Angular"は、Angular 2以降を指す名前です。 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4

「Angular 2 Migration」より引⽤ http://www.slideshare.net/WilliamMarq/angular-2-migration-jhipster-meetup-6 JHipster4 䛟⨉ #PIWNCT4QWVGT鱃㚂䠉

Angular2への取り組み 鰄鰄鯼鰺鰠 ⎶鰟鱥鯮鲄鰟嵒鰑鰹猳

Angular2 UIϥΠϒϥϦ ■リリースࡁ ■リリース前 ■ng2-bootstrap ■ng-lightning ■Prime NG ■Semantic UI ■Vaadin ■ Wijimo ■ OnsenUI(モバイルઐ⽤) ■Angular Material2(slpha.10) ■Fuel-UI(prerelease 0.3.9) ■Kendo UI for Angular2(beta、2017年5⽉リリース予定) ■ng-bootstrap(slpha.13) 「Angular2 によるモダンWeb開ൃ(p.25)」より引⽤ 2TKOG(CEG鰘竑痓鰛2TKOG6GM鯽㚱≼鰊鰼鲍鱈鱺鲍鲎 屬鰐䧏鰟啐鰆鰵鱡鯮鱝鰟屬蒌鰈鰆鱃勤㑏鰈 鰄鰒鰺鱃㚂䠉Ⅹ⹻

UIϥΠϒϥϦ 1SJNF/(6MUJNB Materialデザインを採⽤したスタイル。 テーマ切り替えも可能で、モダンなUIを構築可能。 Angular2

UIϥΠϒϥϦ 1SJNF/(0NFHB Bootstrapライクなデザインを採⽤したスタイル。 Materialデザインに⽐べて、動作がܰいように感じている。 Angular2

UIϥΠϒϥϦ PrimeNGのDataTableは技術ݕূの結果、要求仕༷に耐えれないことが判明。 Gridは複ࡶ性の⾼いライブラリのため、࣮績を重視してag-gridを採⽤。 Angular2

Who A U Background What Inside Learn More Getting Start ͸͡ΊͯΈΑ͏ʂ Purpose Why Tech JHipster4

How to install

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

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

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

$ npm install -g yo $ npm install -g bower $ npm install -g gulp $ npm install -g generator-jhipster :FPNBOͷΠϯετʔϧ #PXFSͷΠϯετʔϧ (VMQͷΠϯετʔϧ +)JQ4UFSͷΠϯετʔϧ Getting Start Local Install

How to create app

上記コマンドを࣮⾏すると、JHipsterのアプリケーション作成が始まります。 $mkdir hogeHipster $ cd hogeHipster $ yo jhipster Getting Start How To Create App

██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ http://jhipster.github.io Welcome to the JHipster Generator v3.12.2 Documentation for creating an application: https://jhipster.github.io/creating-an-app/ Application files will be generated in folder: /Users/s_kozake/develop/jhipster-apps/ hogeHipster ? (1/14) 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) JHipsterではMonolithicなアプリケーションもしくは マイクロサービスアプリケーションを選୒できます。 Getting Start How To Create App

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

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

How To Create App Getting Start ? (1/14) 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) 作成するアプリケションタイプを選୒します。 ここではMonolithicなアプリケーションを選୒します。

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

How To Create App Getting Start ? (3/14) Would you like to install other generators from the JHipster Market Place? (y/N) 他のgeneratorはJHipsterマーケットプレスからインストールするかどうかを 選୒できます。

How To Create App Getting Start ? (3/14) What is your default Java package name? (com.mycompany.myapp) javaのパッケージ名を⼊⼒します。

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

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

How To Create App Getting Start ? (6/14) Which *production* database would you like to use? (Use arrow keys) ❯ 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. Microsoft SQL Server プロダクトで使⽤するデータベースの種類を選୒します。 Oracleを選୒した場合、JDBCドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。

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

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

How To Create App Getting Start ? (9/14) Would you like to use Maven or Gradle for building the backend? (Use arrow keys) ❯ Maven Gradle ビルドツールにMavenかGradleを選୒します。

How To Create App Getting Start ? (10/14) Which other technologies would you like to use? (Press to select, to toggle all, to inverse selection) ❯◯ Social login (Google, Facebook, Twitter) ◯ Search engine using ElasticSearch ◯ Clustered HTTP sessions using Hazelcast ◯ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka オプションとして導⼊する技術を選୒できます。

How To Create App Getting Start ? (10/14) Which other technologies would you like to use? ❯◉ Social login (Google, Facebook, Twitter) ◯ Search engine using ElasticSearch ◯ Clustered HTTP sessions using Hazelcast ◯ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka Social loginを選୒すると、GoogleやFacebook、Twitterなどの認ূ機能 と連携したログイン機能が提供されます。

How To Create App Getting Start ? (10/14) Which other technologies would you like to use? ◯ Social login (Google, Facebook, Twitter) ❯◉ Search engine using ElasticSearch ◯ Clustered HTTP sessions using Hazelcast ◯ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka 全⽂ݕ索エンジンであるElasticSearchを選୒すると、 Spring Data ElasticSearchを⽤いた設定が⾏われます。 開ൃモードでは、組ࠐみのElasticSearchが⽤いられます。

How To Create App Getting Start ? (10/14) Which other technologies would you like to use? ◯ Social login (Google, Facebook, Twitter) ◯ Search engine using ElasticSearch ❯◉ Clustered HTTP sessions using Hazelcast ◯ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka HTTP SessionをHazelCastを⽤いたクラスタ構成にするかどうかを選୒できま す。

How To Create App Getting Start ? (10/14) Which other technologies would you like to use? ◯ Social login (Google, Facebook, Twitter) ◯ Search engine using ElasticSearch ◯ Clustered HTTP sessions using Hazelcast ❯◉ WebSockets using Spring Websocket ◯ [BETA] Asynchronous messages using Apache Kafka Spring Websocketを⽤いるかどうかを選୒できます。

How To Create App Getting Start ? (11/14) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N) Sassをサポートするかどうかを選୒します。

How To Create App Getting Start ? (12/14) Would you like to enable internationalization support? (Y/n) ࠃ際化をサポートするかを選୒します。

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

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

How To Create App Getting Start ? (13/14) Which testing frameworks would you like to use? (Press to select, to toggle all, to inverse selection) ❯◉ Gatling ◯ Cucumber ◯ Protractor ⽤いたいテストフレームワークを選୒します。

How To Create App Getting Start Installing languages: ja, en create bower.json create package.json create README.md create .gitignore create .gitattributes create .editorconfig : : 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. : Getting Start 全ての選୒が終ると、インストールが始まります。

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

How to run

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

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

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

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

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

開ൃモードで起動した場合は、管理 - データベースが選୒できます。 これを選୒すると、接ଓしているデータベースの管理ը⾯を表⽰できます。 Getting Start

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

create entity

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

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

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

Getting Start Create entity ? What is the name of your field? name フィールド名を⼊⼒します。

Getting Start Create entity ? 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) フィールドの型を選୒します。

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

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

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

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

Getting Start Create entity 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 同༷に、birthDateフィールドを追加します。

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

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

Getting Start Create entity ? 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 RESTコントローラからRepositoryを直接呼び出す⽅式かビジネスロジックを書く ҝのServiceクラスを作成するかどうかを選୒します。 ここでは、Serviceクラスの作成を選୒します。

Getting Start Create entity ? Do you want pagination on your entity? No ❯ Yes, with a simple pager Yes, with pagination links Yes, with infinite scroll ը⾯のページング⽅式を選୒します。 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 Getting Start

$ yo jhipster:entity book 同༷に、Book Entityを⽣成します。 Getting Start Create entity

Getting Start Create 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 Author Entityの時と同༷に、フィールドを追加します。 Author Entityとのリレーションを作成するので、 リレーションを追加するかどうかでYesを選୒します。

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

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

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

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

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

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

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

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

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

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

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

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

Who A U Background What Learn More Inside the app ΞϓϦέʔγϣϯߏ੒ Purpose Why Tech Getting Start JHipster4

Inside srcディレクトリにサーバーサイドやフロントサイ ドのJava、JavaScriptが格納されています。

Inside buildディレクトリにビルドの成果物が格納されま す。

Inside targetディレクトリには、H2データベースのファ イルやElasticSearchのファイルなど、୯ମ環境で 動作する際に必要なデータが格納されます。

Inside このファイルに、インストール時に選୒した಺容 が定義されています。

Inside Gitの設定が最初から⽤意されています。 .gitignoreは、Gitで管理しないリソー スを定義す るものです。

Inside ビルドツールにGradleを選୒した場合、Gradleの ビルドタスクが定義されます。

Inside Gradleラッパーが⽤意されているため、開ൃ者は Gradleを⾃端末に⽤意しなくてもGradleを⽤いた 開ൃが可能です。

Inside Gulpタスクが定義されています。

Inside package.json にNPMの定義がされています。 NPMでインストールしたライブラリは、 「node_modules」に格納されています。

Inside Bowerの定義です。 .bowerrcには、Bowerでインストールしたライブ ラリの配置ディレクトリの定義がされています。 bower.jsonには、依存するするライブラリ定義が されています。

Inside Eclipseのプロジェクト定義が最初から⽤意されて います。 ですので、インストール後、すぐにEclipseで開ൃ を開始できます。

Inside EditorConfigは、開ൃ者がさまざまなエディタと IDE間で⼀貫したコーディングスタイルを定義し、 維持するためのものです。 コーディングスタイルやファイルのエンコーディ ング形式などを定義します。 editorconfig.org

Inside ESLintの設定です。 ESLint は JavaScript のための੩的ݕূツールで す。コードを࣮⾏する前に明らかなバグを⾒つけ たり、括弧やスペースの使い⽅などのスタイルを 統⼀したりするのに役⽴ちます。

Inside TravisCIによるビルド定義が⽤意されています。

Inside Jenkinsのビルド定義が⽤意されています。 これにより、Jenkinsのジョブが簡୯に作成できま す。

Inside src ├── main │ ├── docker····················dockerؔ係のリソース │ ├── java························サーバーサイドのJavaソース │ ├── resources················各種リソースファイル │ │ ├── config···············SpringBootの設定ファイル │ │ │ └── liquibase·····liquibaseの定義ファイルとchangelog │ │ ├── i18n··················ࠃ際化ରԠの場合のリソース定義 │ │ ├── mails·················メールテンプレート定義 │ │ └── templates··········エラーը⾯のテンプレート定義 │ └── webapp··················フロントサイドのJavaScriptソースなど └── test·······························テストソース

Who A U Background What Learn More ֶशͷखҾ͖ Purpose Why Tech Getting Start Inside JHipster4

Learn More ɹBOOK □ The JHipster Mini-Book 2.0 □［改訂新版］Spring⼊⾨ □ Spring徹底⼊⾨ □ AngularJS　アプリケーションプログラミング □ Rangle's Angular 2 Training Book □ Gradle徹底⼊⾨

Learn More ɹSITE □ JHipster https://jhipster.github.io/ □ Angular https://angular.io/ □ Tour of Heroes with Angular-CLI(⽇本語༁) https://github.com/ng-japan/ng2-hands-on-seed/blob/master/ courses/tutorial/README.md □ terasoluna.org http://terasolunaorg.github.io/guideline/

Who A U Background What Summary ·ͱΊ Purpose Why Tech Getting Start Inside Learn More JHipster4

,*KRUVGT鰘ѹ⋳䥥㓱桘猳 Summary