タイトでキュートなHipがSterなBootとAngularでScaffold

ほげ駆動の発表資料です。

Transcript

1. ,*KR鯽5VGT鰛 鱣鱈鱬鰘 鱑鲉鯮鱬鰛 5ECHHQNF #PIWNCT鰘 $QQV鰙
2. 鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵獑
3. Who are U?
4. ׯײ׭؃׵猳 鱣鱈鱬鰘 鱑鲉鯮鱬鰛
5. What is JHipster?
6. JHipster is JHipster is a Yeoman generator Spring Boot + AngularJS モダン Web アプリケーションを素早く作れることを⽬的 オープンソース YeomanはモダンWebアプリケーションを提供するScaffoldツール すべてGitHubで開ൃ https://github.com/jhipster/generator-jhipster
7. ,*KRUVGT鰟㕡苏 Client-side Server-side
8. %NKGPVUKFG
9. %NKGPVUKFG IE9以上とモダンBrowserをサポートします。
10. %NKGPVUKFG CSSフレームワークであるBootstrapを⽤いてレスポンシブなWebデザインを ࣮現できます。
11. %NKGPVUKFG Google製JavaScriptフレームワーク。 フルスタックな機能を⽤いたSPA(Single Page Application)が構築できます。
12. %NKGPVUKFG ウェブサーバーとウェブブラウザとの間の૒⽅向通信の技術規格。 ૒⽅向通信が低コストで࣮現可能です。
13. %NKGPVUKFG Twitter製のフロントエンド⽤パッケージ管理ツールです。 JavaScript,CSS,HTMLなどを依存ؔ係を含めて管理してくれます。
14. %NKGPVUKFG Node.jsをベースとしたビルドシステムです。 さまざまな作業を⾃動化可能となります。 ストリーミングビルドシステムと⾔われ、ファイルのॲ理をストリームで ⾏います。
15. %NKGPVUKFG Sass (Syntactically Awesome Stylesheets）。 スタイルシート⾔語でCSSを簡略にコーディング出དྷます。
16. %NKGPVUKFG BrowserSyncはWeb開ൃをサポートするローカルサーバーです。 HTMLなどのファイルをม更すると⾃動でブラウザをリロードしてくれるので、 インタラクティブな開ൃが可能となります。
17. %NKGPVUKFG Karmaはテストフレームワークと組み合わせて࣮ブラウザ上でテストを⾏えます。
18. %NKGPVUKFG ProtractorはSelenium WebDriverJSベースのフレームワークです。 E2E（End to End）テストをサポートします。
19. 5GTXGTUKFG
20. 5GTXGTUKFG Spring プロジェクトが提供する༷ʑなライブラリやフレームワークを ⼿早く使えるフレームワークです。 Spring Securityなどの協⼒なプロダクトを活⽤することで、素早く安全な Webアプリケーションを開ൃできます。
21. 5GTXGTUKFG Netflix OSSはマイクロサービスを࣮現するOSS製品です。 Eureka（中間レイヤのサーバのロードバランスと障害復چ）やZuul（動的なルー ティング、モニタリング、障害耐性、セキュリティなどの役割をもつサービス） などがあります。
22. 5GTXGTUKFG Gradle / Mavenは、Javaのデファクトスタンダードなビルドツールです。 JHipsterではどちらのビルドツールを使うかを選୒できます。
23. 5GTXGTUKFG HibernateはJavaのO/Rマッパーフレームワークです。 JPAやSpring Data JPAの࣮૷として⽤いられています。
24. 5GTXGTUKFG LiquibaseはDBリファクタリングツールです。 DB のม更を XML ファイル（ChangeLog）で管理し、異なる DB 製品であって も、同じ XML ファイルのม更で反映することができます。
25. 5GTXGTUKFG MySQL、PostgreSQ、Oracleなどのデータベース製品をサポートします。 この他、MariaDBもサポートしています。
26. 5GTXGTUKFG MongoDBはNoSQLと呼ばれるドキュメント指向データベースです。
27. 5GTXGTUKFG Cassandraは、Facebook，Twitter，Diggなどの有名Webサービスが導⼊したこ とで注⽬を集めているFacebook 製NoSQLデータベースです。 Apacheに寄贈され，Apacheトッププロジェクトに昇格しました。
28. 5GTXGTUKFG EHCacheはキャッシュ機能を提供する Java ライブラリです。 HibernateのL2キャッシュで⽤いられます。
29. 5GTXGTUKFG Hazelcastは、オープンソースのインメモリデータグリッドソフトウェアです。 ノード間でのインメモリのデータ共有、ঢ়態更新を管理します。 HibernateのL2キャッシュやHTTPセッションをクラスタ化する際に⽤いられます。
30. 5GTXGTUKFG ElasticSearchは全⽂ݕ索システムです。 Luceneという全⽂ݕ索エンジンを利⽤しており、REST-APIを提供しています。
31. 5GTXGTUKFG Thymeleafは、Javaのテンプレートエンジンライブラリです。 ナチュラルテンプレーティングというコンセプトに持っており、 ੩的にブラウザでの表⽰が可能です。デザイナとの共同作業に便利です。
32. 5GTXGTUKFG GatlingはScala製の負荷テスト⽀援ツールです。
33. 5GTXGTUKFG CucumberはE2E（End to End）のテストツールです。
34. How to install
35. ローカルインストール Vagrantでのインストール Docker でのインストール JHipsterはローカルインストールの他、VagrantやDocerを使ったインストール が可能です
36. ローカルインストール Vagrantでのインストール Docker でのインストール 今回は、ローカルインストールを紹介します
37. Java8をOracleのWebサイトからインストール ! ビルドツールはMavenかGradleを選୒可能 ※こららはWrapperで⾃動的にインストールされるので、⽤意しなくてもOK ! git-scm.com からGitをインストール ! ! Node.jsのWebサイトからNode.jsをインストール ! ! ⼀ॹにインストールされるnpmを使⽤して JHipsterに必要なnpmパッケージをインストール ローカルインストール
38. ! $ npm install -g yo ! ! ! $ npm install -g bower ! ! ! $ npm install -g gulp ! ! ! $ npm install -g generator-jhipster :FPNBOͷΠϯετʔϧ #PXFSͷΠϯετʔϧ (VMQͷΠϯετʔϧ +)JQ4UFSͷΠϯετʔϧ ローカルインストール
39. How to create app
40.  上記コマンドを࣮⾏すると、JHipsterのアプリケーション作成が始まります。 ! $mkdir hogeHipster ! $ cd hogeHipster ! $ yo jhipster *QYVQETGCVGCRR
41.  ██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ ! 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なアプリケーションもしくは マイクロサービスアプリケーションを選୒できます。
42. JHipsterを⽤いると、上記例のようなマイクロサービスアプリケーション構成を ⼿ܰに構築できます。
43. 上記の⾚࿮がjhipster-generatorで作成可能です。
44.  ? (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なアプリケーションを選୒します。
45.  ? (2/16) What is the base name of your application? (hogeHipster) *QYVQETGCVGCRR アプリケーション名を⼊⼒します。 現在のディレクトリ名がデフォルトのアプリケーション名として表⽰されます。
46.  ? (3/16) What is your default Java package name? (com.mycompany.myapp) *QYVQETGCVGCRR javaのパッケージ名を⼊⼒します。
47.  ? (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を⽤いた認ূ⽅式が選୒できます。 これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。
48.  ? (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も選୒可能です。
49.  ? (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ドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。
50.  ? (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はデータをディスクに保存する場合と インメモリで動作する場合のどちらかを選୒できます。
51.  ? (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を⽤いた 複਺ノードでのキャッシュ⽅式も選୒可能です。
52.  ? (9/16) Do you want to use a search engine in your application? No ❯ Yes, with ElasticSearch *QYVQETGCVGCRR 全⽂ݕ索エンジンであるElasticSearchを使⽤するかどうかを選୒します。 ElasticSearchを選୒すると、Spring Data ElasticSearchを⽤いた設定が ⾏われます。開ൃモードでは、組ࠐみのElasticSearchが⽤いられます。
53.  ? (10/16) Do you want to use clustered HTTP sessions? (Use arrow keys) ❯ No Yes, with HazelCast *QYVQETGCVGCRR HTTP SessionをHazelCastを⽤いたクラスタ構成にするかどうかを選୒します。
54.  ? (11/16) Do you want to use WebSockets? No ❯ Yes, with Spring Websocket *QYVQETGCVGCRR Spring Websocketを⽤いるかどうかを選୒します。
55.  ? (12/16) Would you like to use Maven or Gradle for building the backend? Maven ❯ Gradle *QYVQETGCVGCRR ビルドツールにMavenかGradleを選୒します。
56.  ? (13/16) Would you like to use the LibSass stylesheet preprocessor for your CSS? (y/N) *QYVQETGCVGCRR Sassをサポートするかどうかを選୒します。
57.  ? (14/16) Would you like to enable internationalization support? (Y/n) *QYVQETGCVGCRR ࠃ際化をサポートするかを選୒します。
58.  ? Please choose the native language of the application? Hindi Hungarian Italian ❯ Japanese Korean Marathi Polish (Move up and down to reveal more choices) *QYVQETGCVGCRR ࠃ際化を選୒した場合、ネイティブランゲージを選୒します。
59.  ? Please choose additional languages to install ◯ Czech ◯ Danish ◯ Dutch ❯◉ English ◯ French ◯ Galician ◯ German (Move up and down to reveal more choices) *QYVQETGCVGCRR 他にサポートするネイティブランゲージを選୒します。
60.  ? (15/16) Which testing frameworks would you like to use? (Press <space> to select) ❯◉ Gatling ◯ Cucumber ◯ Protractor *QYVQETGCVGCRR ⽤いたいテストフレームワークを選୒します。
61.  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 minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead! npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm npm WARN deprecated graceful-fs@3.0.8: 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 minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated graceful-fs@1.2.3: 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 minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue fetchMetadata → 304 ▌ ╢████████████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░░░░░░░░╟ ! *QYVQETGCVGCRR 全ての選୒が終ると、インストールが始まります。
62.  *QYVQETGCVGCRR ! $ git init ! $ git add . ! $ git commit -m "first install jhipster” ! $ git tag install インストールが終ったら、gitで管理しましょう。 適切な.gitignoreファイルが⽤意されているので便利です。
63. How to run
64.  ! $ ./gradlew bootrun 上記コマンドを࣮⾏すると、8080ポートでWebアプリケーションが起動します。 *QYVQTWP
65.  ! $ ./gulp 上記コマンドを࣮⾏すると、9000ポートでBrowsersyncが起動します。 これにより、࣮⾏したままը⾯の修正がインタラクティブに⾏えます。 *QYVQTWP
66. gulpコマンドを࣮⾏すると、ブラウザが⾃動起動してը⾯が表⽰されます。
67. アカウント - 認ূを選୒してログインします。 adminとuserのアカウントがデフォルトで⽤意されています。 初期パスワードはアカウント名と同じです。
68. adminアカウントでログインすると、エンティティや管理がナビゲーションタブ に表⽰されます。
69. ⾔語タブで⾔語表⽰を切り替えることができます。
70. adminでログインすると、アプリケーションを管理するҝの༷ʑな機能が ⽤意されています。例えば管理 - メトリクスを選୒すると、JVMのঢ়態や HTTPリクエスト਺などを確認することができます。
71. 管理 - ヘルスチェックを選୒すると、データベースやディスクスペースのঢ়態を 確認することができます。
72. 管理 - 設定を選୒すると、Spring configurationやsystemEnvironmentなど、 各種アプリケーション環境設定を表⽰できます。
73. 管理 - APIを選୒すると、Swagger UIによるWebAPIのドキュメント を表⽰できます。
74. 管理 - データベースを選୒すると、接ଓしているデータベースの管理ը⾯を 表⽰できます。
75. データベースにログインすることで、データベースの಺容を確認できます。
76. create entity
77. JHipsterを⽤いて、上のようなEntityとそれを編集するCRUDը⾯を⽣成します。
78.  ! $ yo jhipster:entity author 上記コマンドを࣮⾏して、Author Entityを⽣成します。 ETGCVGGPVKV[
79.  ? Do you want to add a field to your entity? (Y/n) ETGCVGGPVKV[ フィールドを追加するかどうかを聞かれますので、Yesを選୒します。
80.  ? What is the name of your field? name ETGCVGGPVKV[ フィールド名を⼊⼒します。
81.  ? 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[ フィールドの型を選୒します。
82.  ? Do you want to add validation rules to your field? (y/N) Y ETGCVGGPVKV[ フィールドのバリデーションルールを追加するかどうかを選୒します。
83.  ? Which validation rules do you want to add? ◉ Required ❯◯ Minimum length ◉ Maximum length ◯ Regular expression pattern ETGCVGGPVKV[ 必須⼊⼒、最⼩/最⼤⾧や正規表現によるチェックを選୒できます。 ここでは、必須⼊⼒と最⼤⾧を選୒します。
84.  ? What is the maximum length of your field? (20) 100 ETGCVGGPVKV[ 最⼤⾧の⾧さを⼊⼒します。
85.  ================= Author ================= Fields name (String) required maxlength='100' ETGCVGGPVKV[ 選୒·⼊⼒した಺容が表⽰されます。
86.  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フィールドを追加します。
87.  ? Do you want to add a relationship to another entity? No ETGCVGGPVKV[ リレーションを追加するかどうかを選୒します。 ここではNoを選୒します。
88.  ? 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を選୒します。
89.  ? 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クラスの作成を選୒します。
90.  ? 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 ディレクティブ
91.  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[
92.  ETGCVGGPVKV[ ! $ yo jhipster:entity book 同༷に、Book Entityを⽣成します。
93.  ================= 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を選୒します。
94.  ? What is the name of the other entity? author ETGCVGGPVKV[ どのEntityとのリレーションを⽣成するかを聞かれるので、 authorを⼊⼒します。
95.  ? What is the name of the relationship? (author) ETGCVGGPVKV[ リレーション名を聞かれるので、ここではデフォルトのauthorとします。
96.  ? 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」を選୒します。
97.  ? When you display this relationship with AngularJS, which field from 'author' do you want to use? (id) name ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰させることにします。
98.  ? Do you want to add any validation rules to this relationship? (y/N) y ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰することにします。
99.  ? Which validation rules do you want to add? ❯◉ Required ETGCVGGPVKV[ リレーションにバリデーションルールを追加します。 ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、 Requiredを選୒します。
100.  ================= 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を⽣成します。
101. ログインすると、エンティティにAuthorとBookが追加されています。
102. エンティティ-Bookを選୒すると、CRUDը⾯が表⽰できます。
103. エンティティ-Bookの表⽰ը⾯。
104. エンティティ-Bookの編集ը⾯。
105. エンティティ-Bookの削除確認ダイアログ。
106. material design
107.  ! $ bower install bootstrap-material-design --save bootstrap-material-designインストールすることで、簡୯にը⾯を Materialデザインにม更できます。 OCVGTKCNFGUKIP
108.  Index.htmlを修正 ! <script> $.material.init(); </script> インストール後、index.htmlに上記಺容を追加してください。 OCVGTKCNFGUKIP
109.  ! $ gulp build ! $ ./gradlew bootrun ը⾯を再ビルドし、再起動します。 OCVGTKCNFGUKIP
110. ը⾯がmaterialデザインになりました！
111. まとめ
112. 鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵猳猳 Ͱ ƅ˜ƅ Ͱ  JHipSterで⽤いているツールの勉ڧをしたり、出⼒されたソースコードで 勉ڧすると、モダンなWeb開ൃに役⽴つと思いますよ！