はじめに

こんにちは、@aucfan-engineer 3号です。
中の人が昨日と違うので、３号と呼んでください。。
１号（昨日の人）の近くに座ってはいるものの、Kotlinなど書くことはなく、違う言語を話しつつ働いています。

ですが、この記事を書く今日だけは、１号のチームの配属された新人という設定で、昨日、彼が残してくれた手順書（記事）に従い、環境構築から行なってみます。

そう。これで私もKotlinエンジニア！

※実際に１号のチームに配属されると、手順書に従った環境構築から始まります。

新人もしくは１号流のプロジェクト未経験者としてチームにアサインされると、稼働しているプロジェクト（場合によっては体験用のプロジェクトの場合もある）にアサインされ、実際に動くコードに触れながら、Kotlinプロジェクトの構成を理解し、ちょっとした機能の追加や改修、場合によってはテストの追加に挑戦し、１号や他の先輩のレビューを受けながら学んで行きます。

環境

ちなみに今回の作業環境は、iOSアプリ作成用の普段は眠っているサブ機の Macbook Pro の OS　を最新環境にしてから利用。Launchpad　からターミナルを起動し、その上で作業。確認は Chrome　を利用しました。

早速

記事を頭から読み始めます。

・・・なんとなく分かったような気分になりつつ、斜め読みで手を動かすところへ。
なんと新人らしい振る舞い。

さっさと Spring Boot プロジェクトの作成 まで進みます。

~/work $ unzip ~/Downloads/spring-boot-vue-app.zip
Archive:  /Users/aucfan-engineer/Downloads/spring-boot-vue-app.zip
   creating: spring-boot-vue-app/
  inflating: spring-boot-vue-app/.gitignore  
   creating: spring-boot-vue-app/src/
   creating: spring-boot-vue-app/src/main/
   creating: spring-boot-vue-app/src/main/kotlin/
   creating: spring-boot-vue-app/src/main/kotlin/io/
   creating: spring-boot-vue-app/src/main/kotlin/io/aucfan/
   creating: spring-boot-vue-app/src/main/kotlin/io/aucfan/sample/
   creating: spring-boot-vue-app/src/main/kotlin/io/aucfan/sample/spring/
   creating: spring-boot-vue-app/src/main/kotlin/io/aucfan/sample/spring/boot/
   creating: spring-boot-vue-app/src/main/kotlin/io/aucfan/sample/spring/boot/vue/
  inflating: spring-boot-vue-app/src/main/kotlin/io/aucfan/sample/spring/boot/vue/SpringBootVueAppApplication.kt  
   creating: spring-boot-vue-app/src/main/resources/
  inflating: spring-boot-vue-app/src/main/resources/application.properties  
   creating: spring-boot-vue-app/src/test/
   creating: spring-boot-vue-app/src/test/kotlin/
   creating: spring-boot-vue-app/src/test/kotlin/io/
   creating: spring-boot-vue-app/src/test/kotlin/io/aucfan/
   creating: spring-boot-vue-app/src/test/kotlin/io/aucfan/sample/
   creating: spring-boot-vue-app/src/test/kotlin/io/aucfan/sample/spring/
   creating: spring-boot-vue-app/src/test/kotlin/io/aucfan/sample/spring/boot/
   creating: spring-boot-vue-app/src/test/kotlin/io/aucfan/sample/spring/boot/vue/
  inflating: spring-boot-vue-app/src/test/kotlin/io/aucfan/sample/spring/boot/vue/SpringBootVueAppApplicationTests.kt  
  inflating: spring-boot-vue-app/settings.gradle.kts  
  inflating: spring-boot-vue-app/gradlew  
  inflating: spring-boot-vue-app/build.gradle.kts  
  inflating: spring-boot-vue-app/HELP.md  
   creating: spring-boot-vue-app/gradle/
   creating: spring-boot-vue-app/gradle/wrapper/
  inflating: spring-boot-vue-app/gradle/wrapper/gradle-wrapper.properties  
  inflating: spring-boot-vue-app/gradle/wrapper/gradle-wrapper.jar  
  inflating: spring-boot-vue-app/gradlew.bat

・・・って、URLクリックして画像に合わせてラジオボタンを触ってダウンロードしたファイルを展開しただけなので、なんか画面が流れたけど、まだ何もしてない感を持ちつつ次 Spring Boot プロジェクトのサブプロジェクト化 へ。

~/work/spring-boot-vue-app $ mkdir web-flux-server
~/work/spring-boot-vue-app $ mv src web-flux-server
~/work/spring-boot-vue-app $ vim settings.gradle.kts 
~/work/spring-boot-vue-app $ vim build.gradle.kts web-flux-server/build.gradle.kts
2 files to edit

記事のブロックをコピーしつつ、開いたファイルの中身に入れていくだけなので、手元のターミナルはこんな地味な感じ。
そしてそのまま次 Vue.js サブプロジェクトの追加 へ。

~/work/spring-boot-vue-app $ vim settings.gradle.kts 
~/work/spring-boot-vue-app $ vim build.gradle.kts 
~/work/spring-boot-vue-app $ mkdir web-vue2-ui
~/work/spring-boot-vue-app $ vim web-vue2-ui/build.gradle.kts

同様に設定ファイルをいじり、、
と思ってたらコマンドを実行して

~/work/spring-boot-vue-app $ ./gradlew :web-vue2-ui:yarn  
Downloading https://services.gradle.org/distributions/gradle-7.3.1-bin.zip
...........10%...........20%...........30%...........40%...........50%...........60%...........70%...........80%...........90%...........100%

Welcome to Gradle 7.3.1!

Here are the highlights of this release:
 - Easily declare new test suites in Java projects
 - Support for Java 17
 - Support for Scala 3

For more details see https://docs.gradle.org/7.3.1/release-notes.html

Starting a Gradle Daemon (subsequent builds will be faster)

> Task :web-vue2-ui:yarnSetup

> yarn@1.22.17 preinstall /Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/.cache/yarn/yarn-v1.22.17/lib/node_modules/yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

/Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/.cache/yarn/yarn-v1.22.17/bin/yarnpkg -> /Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/.cache/yarn/yarn-v1.22.17/lib/node_modules/yarn/bin/yarn.js
/Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/.cache/yarn/yarn-v1.22.17/bin/yarn -> /Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/.cache/yarn/yarn-v1.22.17/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.22.17
added 1 package in 0.788s

> Task :web-vue2-ui:yarn
yarn install v1.22.17
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 0.04s.

BUILD SUCCESSFUL in 1m 38s
3 actionable tasks: 3 executed

ちょっとだけ画面が動いた感が出て楽しい。。。

まぁ、

yarn コマンドを素振りしておきます。

とか言っておいて動くんかい、と心の中で突っ込んでしまったのは秘密。。

まぁ、その後も画面は流れに流れるのですが。

~/work/spring-boot-vue-app/web-vue2-ui $ .cache/yarn/yarn-v1.22.17/bin/yarn init
yarn init v1.22.17
question name (web-vue2-ui): spring-boot-vue-app-ui
question version (1.0.0): 0.0.1
question description: Spring Boot + Vue application
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 96.04s.
~/work/spring-boot-vue-app/web-vue2-ui $ .cache/yarn/yarn-v1.22.17/bin/yarn add @vue/cli 
yarn add v1.22.17
[1/4] 🔍  Resolving packages...

(中略)


```
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi@15.1.1: Switch to 'npm install joi'
warning @vue/cli > @vue/cli-shared-utils > request > har-validator@5.1.5: this library is no longer supported
warning @vue/cli > @vue/cli-shared-utils > request > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/topo > @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-ui > apollo-server-express > graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
warning @vue/cli > @vue/cli-ui > apollo-server-express > graphql-tools > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details.
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details
warning @vue/cli > @vue/cli-ui > apollo-server-express > apollo-server-core > graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 595 new dependencies.
info Direct dependencies
└─ @vue/cli@4.5.15
info All dependencies
├─ @akryum/winattr@3.0.0
├─ @apollo/protobufjs@1.2.2
├─ @apollographql/graphql-upload-8-fork@8.1.3
├─ @babel/compat-data@7.16.4
├─ @babel/core@7.16.0
├─ @babel/helper-builder-binary-assignment-operator-visitor@7.16.0
├─ @babel/helper-compilation-targets@7.16.3
├─ @babel/helper-explode-assignable-expression@7.16.0
├─ @babel/helper-get-function-arity@7.16.0
├─ @babel/helper-module-imports@7.16.0
├─ @babel/helper-remap-async-to-generator@7.16.4
├─ @babel/helper-wrap-function@7.16.0
├─ @babel/helpers@7.16.3
├─ @babel/highlight@7.16.0
├─ @babel/parser@7.16.4
├─ @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.16.2
├─ @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.16.0
├─ @babel/plugin-proposal-async-generator-functions@7.16.4
├─ @babel/plugin-proposal-class-properties@7.16.0
├─ @babel/plugin-proposal-class-static-block@7.16.0
├─ @babel/plugin-proposal-dynamic-import@7.16.0
├─ @babel/plugin-proposal-export-namespace-from@7.16.0
├─ @babel/plugin-proposal-json-strings@7.16.0
├─ @babel/plugin-proposal-logical-assignment-operators@7.16.0
├─ @babel/plugin-proposal-nullish-coalescing-operator@7.16.0
├─ @babel/plugin-proposal-numeric-separator@7.16.0
├─ @babel/plugin-proposal-object-rest-spread@7.16.0
├─ @babel/plugin-proposal-optional-catch-binding@7.16.0
├─ @babel/plugin-proposal-private-methods@7.16.0
├─ @babel/plugin-proposal-private-property-in-object@7.16.0
├─ @babel/plugin-proposal-unicode-property-regex@7.16.0
├─ @babel/plugin-syntax-class-properties@7.12.13
├─ @babel/plugin-syntax-flow@7.16.0
├─ @babel/plugin-syntax-top-level-await@7.14.5
├─ @babel/plugin-syntax-typescript@7.16.0
├─ @babel/plugin-transform-arrow-functions@7.16.0
├─ @babel/plugin-transform-async-to-generator@7.16.0
├─ @babel/plugin-transform-block-scoped-functions@7.16.0
├─ @babel/plugin-transform-block-scoping@7.16.0
├─ @babel/plugin-transform-classes@7.16.0
├─ @babel/plugin-transform-computed-properties@7.16.0
├─ @babel/plugin-transform-destructuring@7.16.0
├─ @babel/plugin-transform-dotall-regex@7.16.0
├─ @babel/plugin-transform-duplicate-keys@7.16.0
├─ @babel/plugin-transform-exponentiation-operator@7.16.0
├─ @babel/plugin-transform-flow-strip-types@7.16.0
├─ @babel/plugin-transform-for-of@7.16.0
├─ @babel/plugin-transform-function-name@7.16.0
├─ @babel/plugin-transform-literals@7.16.0
├─ @babel/plugin-transform-member-expression-literals@7.16.0
├─ @babel/plugin-transform-modules-amd@7.16.0
├─ @babel/plugin-transform-modules-commonjs@7.16.0
├─ @babel/plugin-transform-modules-systemjs@7.16.0
├─ @babel/plugin-transform-modules-umd@7.16.0
├─ @babel/plugin-transform-named-capturing-groups-regex@7.16.0
├─ @babel/plugin-transform-new-target@7.16.0
├─ @babel/plugin-transform-object-super@7.16.0
├─ @babel/plugin-transform-parameters@7.16.3
├─ @babel/plugin-transform-property-literals@7.16.0
├─ @babel/plugin-transform-regenerator@7.16.0
├─ @babel/plugin-transform-reserved-words@7.16.0
├─ @babel/plugin-transform-shorthand-properties@7.16.0
├─ @babel/plugin-transform-spread@7.16.0
├─ @babel/plugin-transform-sticky-regex@7.16.0
├─ @babel/plugin-transform-template-literals@7.16.0
├─ @babel/plugin-transform-typeof-symbol@7.16.0
├─ @babel/plugin-transform-typescript@7.16.1
├─ @babel/plugin-transform-unicode-escapes@7.16.0
├─ @babel/plugin-transform-unicode-regex@7.16.0
├─ @babel/preset-env@7.16.4
├─ @babel/preset-flow@7.16.0
├─ @babel/preset-modules@0.1.5
├─ @babel/preset-typescript@7.16.0
├─ @babel/register@7.16.0
├─ @babel/runtime@7.16.3
├─ @hapi/address@2.1.4
├─ @hapi/bourne@1.3.2
├─ @hapi/hoek@8.5.1
├─ @hapi/joi@15.1.1
├─ @hapi/topo@3.1.6
├─ @josephg/resolvable@1.0.1
├─ @mrmlnc/readdir-enhanced@2.2.1
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @protobufjs/aspromise@1.1.2
├─ @protobufjs/base64@1.1.2
├─ @protobufjs/codegen@2.0.4
├─ @protobufjs/eventemitter@1.1.0
├─ @protobufjs/fetch@1.1.0
├─ @protobufjs/float@1.0.2
├─ @protobufjs/path@1.1.2
├─ @protobufjs/pool@1.1.0
├─ @protobufjs/utf8@1.1.0
├─ @sindresorhus/is@0.7.0
├─ @types/accepts@1.3.5
├─ @types/body-parser@1.19.0
├─ @types/content-disposition@0.5.4
├─ @types/cookies@0.7.7
├─ @types/cors@2.8.10
├─ @types/ejs@2.7.0
├─ @types/express-serve-static-core@4.17.26
├─ @types/fs-capacitor@2.0.0
├─ @types/glob@7.2.0
├─ @types/http-assert@1.5.3
├─ @types/http-errors@1.8.1
├─ @types/inquirer@6.5.0
├─ @types/jscodeshift@0.7.2
├─ @types/koa-compose@3.2.5
├─ @types/long@4.0.1
├─ @types/mime@1.3.2
├─ @types/minimatch@3.0.5
├─ @types/normalize-package-data@2.4.1
├─ @types/range-parser@1.2.4
├─ @types/serve-static@1.13.10
├─ @types/through@0.0.30
├─ @types/ws@7.4.7
├─ @vue/cli-ui-addon-webpack@4.5.15
├─ @vue/cli-ui-addon-widgets@4.5.15
├─ @vue/cli-ui@4.5.15
├─ @vue/cli@4.5.15
├─ @vue/compiler-core@3.2.23
├─ @vue/compiler-dom@3.2.23
├─ @wry/equality@0.1.11
├─ accepts@1.3.7
├─ aggregate-error@3.1.0
├─ ajv@6.12.6
├─ ansi-align@3.0.1
├─ ansi-escapes@4.3.2
├─ ansi-regex@5.0.1
├─ ansi-styles@4.3.0
├─ apollo-cache-control@0.14.0
├─ apollo-datasource@0.9.0
├─ apollo-graphql@0.9.5
├─ apollo-link@1.2.14
├─ apollo-server-core@2.25.3
├─ apollo-server-errors@2.5.0
├─ apollo-server-express@2.25.3
├─ apollo-tracing@0.15.0
├─ apollo-utilities@1.3.4
├─ archive-type@4.0.0
├─ argparse@1.0.10
├─ arr-flatten@1.1.0
├─ array-flatten@1.1.1
├─ array-union@1.0.2
├─ array-uniq@1.0.3
├─ asn1@0.2.6
├─ assign-symbols@1.0.0
├─ async-retry@1.3.3
├─ async@2.6.3
├─ asynckit@0.4.0
├─ atob@2.1.2
├─ aws-sign2@0.7.0
├─ aws4@1.11.0
├─ babel-core@7.0.0-bridge.0
├─ babel-plugin-polyfill-corejs2@0.3.0
├─ babel-plugin-polyfill-corejs3@0.4.0
├─ babel-plugin-polyfill-regenerator@0.3.0
├─ backo2@1.0.2
├─ balanced-match@1.0.2
├─ base@0.11.2
├─ base64-js@1.5.1
├─ bcrypt-pbkdf@1.0.2
├─ bl@1.2.3
├─ body-parser@1.19.0
├─ boxen@4.2.0
├─ brace-expansion@1.1.11
├─ braces@2.3.2
├─ browserslist@4.18.1
├─ buffer-alloc-unsafe@1.1.0
├─ buffer-alloc@1.2.0
├─ buffer-crc32@0.2.13
├─ buffer-fill@1.0.0
├─ buffer@5.7.1
├─ builtins@1.0.3
├─ busboy@0.3.1
├─ cache-base@1.0.1
├─ cacheable-request@2.1.4
├─ call-me-maybe@1.0.1
├─ camelcase@5.3.1
├─ caniuse-lite@1.0.30001284
├─ caseless@0.12.0
├─ caw@2.0.1
├─ chalk@2.4.2
├─ chardet@0.7.0
├─ class-utils@0.3.6
├─ clean-stack@2.2.0
├─ cli-boxes@2.2.1
├─ cli-cursor@3.1.0
├─ cli-spinners@2.6.1
├─ cli-width@3.0.0
├─ cliui@7.0.4
├─ clone-deep@4.0.1
├─ clone-response@1.0.2
├─ clone@2.1.2
├─ cmd-shim@3.0.3
├─ collection-visit@1.0.0
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ colors@1.4.0
├─ combined-stream@1.0.8
├─ commander@2.20.3
├─ commondir@1.0.1
├─ concat-map@0.0.1
├─ config-chain@1.1.13
├─ content-disposition@0.5.3
├─ convert-source-map@1.8.0
├─ cookie-signature@1.0.6
├─ cookie@0.4.0
├─ copy-descriptor@0.1.1
├─ core-js-compat@3.19.2
├─ core-js-pure@3.19.2
├─ core-util-is@1.0.2
├─ cors@2.8.5
├─ cross-spawn@6.0.5
├─ cssfilter@0.0.10
├─ csv-parser@1.12.1
├─ dashdash@1.14.1
├─ debug@2.6.9
├─ decompress-response@3.3.0
├─ decompress-tar@4.1.1
├─ decompress-tarbz2@4.1.1
├─ decompress-targz@4.1.1
├─ decompress-unzip@4.0.1
├─ decompress@4.2.1
├─ defaults@1.0.3
├─ delayed-stream@1.0.0
├─ deprecated-decorator@0.1.6
├─ destroy@1.0.4
├─ dicer@0.3.0
├─ dir-glob@2.2.2
├─ download-git-repo@3.0.2
├─ download@7.1.0
├─ duplexer3@0.1.4
├─ easy-stack@1.0.1
├─ ecc-jsbn@0.1.2
├─ ee-first@1.1.1
├─ ejs@2.7.4
├─ electron-to-chromium@1.4.10
├─ emoji-regex@8.0.0
├─ end-of-stream@1.4.4
├─ entities@2.2.0
├─ envinfo@7.8.1
├─ error-ex@1.3.2
├─ es-abstract@1.19.1
├─ es-to-primitive@1.2.1
├─ estree-walker@2.0.2
├─ esutils@2.0.3
├─ event-pubsub@4.3.0
├─ eventemitter3@3.1.2
├─ exec-sh@0.2.2
├─ expand-brackets@2.1.4
├─ expand-tilde@2.0.2
├─ express-history-api-fallback@2.2.1
├─ ext-list@2.2.2
├─ ext-name@5.0.0
├─ extend@3.0.2
├─ external-editor@3.1.0
├─ extglob@2.0.4
├─ extsprintf@1.3.0
├─ fast-deep-equal@3.1.3
├─ fast-glob@2.2.7
├─ fastq@1.13.0
├─ fd-slicer@1.1.0
├─ figures@3.2.0
├─ filename-reserved-regex@2.0.0
├─ filenamify@2.1.0
├─ fill-range@4.0.0
├─ finalhandler@1.1.2
├─ find-cache-dir@2.1.0
├─ find-up@3.0.0
├─ fkill@6.2.0
├─ flow-parser@0.166.1
├─ for-each@0.3.3
├─ for-in@1.0.2
├─ forever-agent@0.6.1
├─ form-data@2.3.3
├─ forwarded@0.2.0
├─ fs-capacitor@2.0.4
├─ fs-constants@1.0.0
├─ fs-exists-sync@0.1.0
├─ fs.realpath@1.0.0
├─ fswin@2.17.1227
├─ generate-function@1.1.0
├─ generate-object-property@1.2.0
├─ gensync@1.0.0-beta.2
├─ get-caller-file@2.0.5
├─ get-proxy@2.1.0
├─ get-stream@3.0.0
├─ get-symbol-description@1.0.0
├─ get-value@2.0.6
├─ getpass@0.1.7
├─ git-clone@0.1.0
├─ git-config-path@1.0.1
├─ glob-parent@3.1.0
├─ glob-to-regexp@0.3.0
├─ global-dirs@0.1.1
├─ got@8.3.2
├─ graceful-fs@4.2.8
├─ graphql-extensions@0.15.0
├─ graphql-subscriptions@1.2.1
├─ graphql-tag@2.12.6
├─ graphql-type-json@0.3.2
├─ graphql@14.7.0
├─ growly@1.3.0
├─ har-schema@2.0.0
├─ har-validator@5.1.5
├─ has-flag@4.0.0
├─ has-symbol-support-x@1.4.2
├─ has-to-string-tag-x@1.4.1
├─ has-value@1.0.0
├─ homedir-polyfill@1.0.3
├─ hosted-git-info@2.8.9
├─ http-cache-semantics@3.8.1
├─ http-signature@1.2.0
├─ human-signals@1.1.1
├─ ieee754@1.2.1
├─ ignore@4.0.6
├─ import-global@0.1.0
├─ imurmurhash@0.1.4
├─ indent-string@4.0.0
├─ inflight@1.0.6
├─ inquirer@7.3.3
├─ internal-slot@1.0.3
├─ into-stream@3.1.0
├─ ipaddr.js@1.9.1
├─ is-accessor-descriptor@1.0.0
├─ is-arrayish@0.2.1
├─ is-bigint@1.0.4
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.4
├─ is-core-module@2.8.0
├─ is-data-descriptor@1.0.0
├─ is-date-object@1.0.5
├─ is-descriptor@1.0.2
├─ is-docker@2.2.1
├─ is-extglob@2.1.1
├─ is-fullwidth-code-point@3.0.0
├─ is-glob@4.0.3
├─ is-natural-number@4.0.1
├─ is-negative-zero@2.0.1
├─ is-number-object@1.0.6
├─ is-object@1.0.2
├─ is-plain-object@2.0.4
├─ is-promise@2.2.2
├─ is-property@1.0.2
├─ is-regex@1.1.4
├─ is-retry-allowed@1.2.0
├─ is-shared-array-buffer@1.0.1
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-typedarray@1.0.0
├─ is-weakref@1.0.1
├─ is-windows@1.0.2
├─ is-wsl@1.1.0
├─ isarray@1.0.0
├─ isbinaryfile@4.0.8
├─ isstream@0.1.2
├─ iterall@1.3.0
├─ js-message@1.0.7
├─ js-queue@2.0.2
├─ js-tokens@4.0.0
├─ js-yaml@3.14.1
├─ jscodeshift@0.11.0
├─ jsesc@2.5.2
├─ json-buffer@3.0.0
├─ json-parse-even-better-errors@2.3.1
├─ json-schema-traverse@0.4.1
├─ json-schema@0.4.0
├─ json-stringify-safe@5.0.1
├─ json5@2.2.0
├─ jsonfile@4.0.0
├─ jsprim@1.4.2
├─ keyv@3.0.0
├─ launch-editor@2.2.1
├─ leven@3.1.0
├─ lines-and-columns@1.2.4
├─ locate-path@3.0.0
├─ lodash.clonedeep@4.5.0
├─ lodash.debounce@4.0.8
├─ lodash.merge@4.6.2
├─ lodash.sortby@4.7.0
├─ lodash@4.17.21
├─ log-symbols@2.2.0
├─ loglevel@1.8.0
├─ long@4.0.0
├─ lowdb@1.0.0
├─ make-dir@1.3.0
├─ map-visit@1.0.0
├─ media-typer@0.3.0
├─ merge-descriptors@1.0.1
├─ merge-stream@2.0.0
├─ merge@1.2.1
├─ methods@1.1.2
├─ mime-db@1.51.0
├─ mime@1.6.0
├─ mimic-fn@2.1.0
├─ minimatch@3.0.4
├─ mixin-deep@1.3.2
├─ mkdirp@0.5.5
├─ ms@2.0.0
├─ mute-stream@0.0.8
├─ nanoid@2.1.11
├─ nanomatch@1.2.13
├─ ndjson@1.5.0
├─ neat-csv@2.1.0
├─ negotiator@0.6.2
├─ neo-async@2.6.2
├─ nice-try@1.0.5
├─ node-dir@0.1.17
├─ node-fetch@2.6.6
├─ node-modules-regexp@1.0.0
├─ node-notifier@9.0.1
├─ node-releases@2.0.1
├─ normalize-package-data@2.5.0
├─ normalize-url@2.0.1
├─ npm-conf@1.1.3
├─ oauth-sign@0.9.0
├─ object-assign@4.1.1
├─ object-copy@0.1.0
├─ object-inspect@1.11.0
├─ object-path@0.11.8
├─ object.assign@4.1.2
├─ object.getownpropertydescriptors@2.1.3
├─ once@1.4.0
├─ open@6.4.0
├─ ora@3.4.0
├─ os-tmpdir@1.0.2
├─ p-cancelable@0.4.1
├─ p-event@2.3.1
├─ p-is-promise@1.1.0
├─ p-limit@2.3.0
├─ p-locate@3.0.0
├─ p-try@2.2.0
├─ parse-git-config@2.0.3
├─ parse-json@5.2.0
├─ parse-passwd@1.0.0
├─ pascalcase@0.1.1
├─ path-dirname@1.0.2
├─ path-exists@3.0.0
├─ path-is-absolute@1.0.1
├─ path-key@2.0.1
├─ path-parse@1.0.7
├─ path-to-regexp@0.1.7
├─ path-type@3.0.0
├─ pend@1.2.0
├─ performance-now@2.1.0
├─ picocolors@1.0.0
├─ picomatch@2.3.0
├─ pid-from-port@1.1.3
├─ pinkie-promise@2.0.1
├─ pinkie@2.0.4
├─ pirates@4.0.1
├─ pkg-dir@3.0.0
├─ portfinder@1.0.28
├─ posix-character-classes@0.1.1
├─ prismjs@1.25.0
├─ private@0.1.8
├─ process-exists@3.1.0
├─ process-nextick-args@2.0.1
├─ proto-list@1.2.4
├─ proxy-addr@2.0.7
├─ ps-list@4.1.0
├─ pseudomap@1.0.2
├─ psl@1.8.0
├─ punycode@2.1.1
├─ query-string@5.1.1
├─ queue-microtask@1.2.3
├─ raw-body@2.4.0
├─ read-pkg@5.2.0
├─ readable-stream@2.3.7
├─ recast@0.18.10
├─ regenerate-unicode-properties@9.0.0
├─ regenerator-runtime@0.13.9
├─ regenerator-transform@0.14.5
├─ regexpu-core@4.8.0
├─ regjsgen@0.5.2
├─ regjsparser@0.7.0
├─ repeat-element@1.1.4
├─ request@2.88.2
├─ require-directory@2.1.1
├─ resolve-url@0.2.1
├─ resolve@1.20.0
├─ responselike@1.0.2
├─ restore-cursor@3.1.0
├─ ret@0.1.15
├─ retry@0.13.1
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ rss-parser@3.12.0
├─ run-async@2.4.1
├─ run-parallel@1.2.0
├─ rxjs@6.6.7
├─ safe-buffer@5.1.2
├─ safer-buffer@2.1.2
├─ sax@1.2.4
├─ sec@1.0.0
├─ seek-bzip@1.0.6
├─ semver@6.3.0
├─ serve-static@1.14.1
├─ set-value@2.0.1
├─ shallow-clone@3.0.1
├─ shebang-regex@1.0.0
├─ shell-quote@1.7.3
├─ shellwords@0.1.1
├─ side-channel@1.0.4
├─ snapdragon-node@2.1.1
├─ snapdragon-util@3.0.1
├─ sort-keys-length@1.0.1
├─ sort-keys@1.1.2
├─ source-map-resolve@0.5.3
├─ source-map-support@0.5.21
├─ source-map-url@0.4.1
├─ source-map@0.6.1
├─ spdx-correct@3.1.1
├─ spdx-exceptions@2.3.0
├─ split-string@3.1.0
├─ split2@2.2.0
├─ sprintf-js@1.0.3
├─ sshpk@1.16.1
├─ static-extend@0.1.2
├─ steno@0.4.4
├─ streamsearch@0.1.2
├─ strict-uri-encode@1.1.0
├─ string_decoder@1.1.1
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ strip-dirs@2.1.0
├─ strip-final-newline@2.0.0
├─ strip-outer@1.0.1
├─ symbol-observable@1.2.0
├─ tar-stream@1.6.2
├─ taskkill@3.1.0
├─ tasklist@3.1.1
├─ temp@0.8.4
├─ term-size@2.2.1
├─ through@2.3.8
├─ timed-out@4.0.1
├─ tmp@0.0.33
├─ to-buffer@1.1.1
├─ to-fast-properties@2.0.0
├─ to-object-path@0.3.0
├─ to-regex-range@2.1.1
├─ tough-cookie@2.5.0
├─ tr46@0.0.3
├─ trim-repeated@1.0.0
├─ tweetnacl@0.14.5
├─ type-fest@0.8.1
├─ type-is@1.6.18
├─ typescript@4.1.6
├─ unbox-primitive@1.0.1
├─ unbzip2-stream@1.4.3
├─ unicode-canonical-property-names-ecmascript@2.0.0
├─ unicode-match-property-ecmascript@2.0.0
├─ unicode-match-property-value-ecmascript@2.0.0
├─ unicode-property-aliases-ecmascript@2.0.0
├─ union-value@1.0.1
├─ universalify@0.1.2
├─ unpipe@1.0.0
├─ unset-value@1.0.0
├─ uri-js@4.4.1
├─ urix@0.1.0
├─ url-parse-lax@3.0.0
├─ use@3.1.1
├─ util-deprecate@1.0.2
├─ util.promisify@1.1.1
├─ utils-merge@1.0.1
├─ uuid@3.4.0
├─ validate-npm-package-license@3.0.4
├─ validate-npm-package-name@3.0.0
├─ vary@1.1.2
├─ verror@1.10.0
├─ vue-codemod@0.0.5
├─ vue@2.6.14
├─ watch@1.0.2
├─ wcwidth@1.0.1
├─ webidl-conversions@3.0.1
├─ whatwg-url@5.0.0
├─ which-boxed-primitive@1.0.2
├─ widest-line@3.1.0
├─ wrap-ansi@7.0.0
├─ write-file-atomic@2.4.3
├─ ws@7.5.6
├─ xml2js@0.4.23
├─ xmlbuilder@11.0.1
├─ xss@1.0.10
├─ xtend@4.0.2
├─ y18n@5.0.8
├─ yallist@4.0.0
├─ yaml-front-matter@3.4.1
├─ yargs-parser@20.2.9
├─ yargs@16.2.0
├─ yauzl@2.10.0
├─ zen-observable-ts@0.8.21
└─ zen-observable@0.8.15
✨  Done in 31.63s.
```

~/work/spring-boot-vue-app/web-vue2-ui $ ./node_modules/.bin/vue create spring-boot-vue-app-ui


Vue CLI v4.5.15
? Please pick a preset: Default ([Vue 2] babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v4.5.15
✨  Creating project in /Users/aucfan-engineer/work/spring-boot-vue-app/web-vue2-ui/spring-boot-vue-app-ui.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.19.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...



success Saved lockfile.
✨  Done in 30.33s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.19.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 7.85s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project spring-boot-vue-app-ui.
👉  Get started with the following commands:

 $ cd spring-boot-vue-app-ui
 $ yarn serve

~/work/spring-boot-vue-app/web-vue2-ui $ rm -rf node_modules package.json yarn.lock 
~/work/spring-boot-vue-app/web-vue2-ui $ mv spring-boot-vue-app-ui/* .
~/work/spring-boot-vue-app/web-vue2-ui $ mv spring-boot-vue-app-ui/.gitignore .
~/work/spring-boot-vue-app/web-vue2-ui $ rm -rf spring-boot-vue-app-ui
~/work/spring-boot-vue-app/web-vue2-ui $ vim .gitignore
~/work/spring-boot-vue-app/web-vue2-ui $ vim package.json

で。やっときた動作確認。
なんか、プログラムって動かすってなると、ちょっとワクワクしますよね。。

~/work/spring-boot-vue-app/web-vue2-ui $ .cache/yarn/yarn-v1.22.17/bin/yarn serve
yarn run v1.22.17
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2377ms                                                                                                                                                              23:23:58


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.3.11:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

コマンドを実行すると、動いた感。
もちろん、記載にある http://localhost:8080/ にアクセスすると、記事に記載通りのホームページが表示されます。
・・・印象のあるロゴすぎて、なんかデフォルトの何かが表示されてるというか、自分で何かした気になれなかったりしますが・・・

一旦、クリア。更に次 Spring Boot と Vue.js のサブプロジェクト間の連携 へ。
そんなに時間をかけずにきたはずなのに、気分はもうすっかり作業ゲー

^C
~/work/spring-boot-vue-app/web-vue2-ui $ cd ..
~/work/spring-boot-vue-app $ git init
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

を。初めてエラーメッセージに遭遇！！wktk
やっぱり、エラーが出ないと挑戦している気持ちになれない、何か曲がっているこの感じ。よいですね。

・・・まぁ、グーグル先生に質問して、正しいかは置いといてサクサク片しますが。

~/work/spring-boot-vue-app $ xcode-select --install
xcode-select: note: install requested for command line developer tools
~/work/spring-boot-vue-app $ git init                     
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>
Initialized empty Git repository in /Users/aucfan-engineer/work/spring-boot-vue-app/.git/

そして、黙々と進める、、進める、、

~/work/spring-boot-vue-app $ vim web-vue2-ui/package.json 
~/work/spring-boot-vue-app $ vim .gitignore
~/work/spring-boot-vue-app $ ./gradlew :web-vue2-ui:yarn_build 

> Task :web-vue2-ui:yarn_build
yarn run v1.22.17
$ vue-cli-service build --dest ../web-flux-server/src/main/resources/static/

-  Building for production...
 DONE  Compiled successfully in 4415ms23:33:45

  File                                      Size             Gzipped

  ../web-flux-server/src/main/resources/    93.69 KiB        33.62 KiB
  static/js/chunk-vendors.ed938911.js
  ../web-flux-server/src/main/resources/    4.58 KiB         1.63 KiB
  static/js/app.84f70641.js
  ../web-flux-server/src/main/resources/    0.33 KiB         0.23 KiB
  static/css/app.fb0c6e1c.css

  Images and other types of assets omitted.

 DONE  Build complete. The ../web-flux-server/src/main/resources/static directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
Done in 8.15s.

BUILD SUCCESSFUL in 9s
3 actionable tasks: 1 executed, 2 up-to-date
~/work/spring-boot-vue-app $ vim web-vue2-ui/build.gradle.kts 
~/work/spring-boot-vue-app $ vim web-flux-server/build.gradle.kts
~/work/spring-boot-vue-app $ vim web-flux-server/src/main/kotlin/io/aucfan/sample/spring/boot/vue/IndexHandler.kt
~/work/spring-boot-vue-app $ vim web-flux-server/src/main/kotlin/io/aucfan/sample/spring/boot/vue/IndexRouterConfiguration.kt

さぁ プロジェクトのビルドと実行 だ！

あとは、エンターキーを押すだけ、そんな気持ちでコマンドを入れる

~/work/spring-boot-vue-app $ ./gradlew clean build -x test

> Configure project :web-flux-server
e: /Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build.gradle.kts:30:16: Unresolved reference: ProcessResourceｖｖs
e: /Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build.gradle.kts:30:36: Type mismatch: inferred type is () -> Unit but Class<TypeVariable(S)!>! was expected
e: /Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build.gradle.kts:31:2: Unresolved reference: dependsOn

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build.gradle.kts' line: 30

* What went wrong:
Script compilation errors:

  Line 30: tasks.withType<ProcessResourceｖｖs> {
                          ^ Unresolved reference: ProcessResourceｖｖs

  Line 30: tasks.withType<ProcessResourceｖｖs> {
                                              ^ Type mismatch: inferred type is () -> Unit but Class<TypeVariable(S)!>! was expected

  Line 31:      dependsOn(":web-vue2-ui:yarn_build")
            ^ Unresolved reference: dependsOn

3 errors

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1s

・・・世の中、そんなに上手くいくわけがない。
誰もが最初は失敗するもんだと、まず心でそう呟いてみる。

そして落ち着いてから自分に問う。「どこを間違えた」

まぁ、エラーが出ていて。今回の場合、よく見ると、おかしなバランスの文字ががが・・・。

　Unresolved reference: ProcessResourceｖｖs

code の外だと更に違和感が増しているw
~~１号パイセン、寝惚けてミスってますよ！~~

早速修正して実行してみると。

~/work/spring-boot-vue-app $ ./gradlew clean build -x test                     

> Task :web-vue2-ui:yarn_install
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 9.59s.

> Task :web-vue2-ui:yarn_build
yarn run v1.22.17
$ vue-cli-service build --dest ../web-flux-server/src/main/resources/static/

-  Building for production...
 DONE  Compiled successfully in 1727ms0:20:59

  File                                      Size             Gzipped

  ../web-flux-server/src/main/resources/    93.69 KiB        33.62 KiB
  static/js/chunk-vendors.ed938911.js
  ../web-flux-server/src/main/resources/    4.58 KiB         1.63 KiB
  static/js/app.84f70641.js
  ../web-flux-server/src/main/resources/    0.33 KiB         0.23 KiB
  static/css/app.fb0c6e1c.css

  Images and other types of assets omitted.

 DONE  Build complete. The ../web-flux-server/src/main/resources/static directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
      
Done in 5.27s.

BUILD SUCCESSFUL in 40s
17 actionable tasks: 13 executed, 4 up-to-date

OK :)

~/work/spring-boot-vue-app $ cd web-flux-server/build/libs/                                                  
~/work/spring-boot-vue-app/web-flux-server/build/libs $ java -jar spring-boot-vue-app-web-flux-server-0.0.1-SNAPSHOT.jar 

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.5.7)

2021-12-04 00:28:12.649  INFO 3639 --- [           main] .a.s.s.b.v.SpringBootVueAppApplicationKt : Starting SpringBootVueAppApplicationKt using Java 13 on notaketatsuyanoMacBook-Pro.local with PID 3639 (/Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build/libs/spring-boot-vue-app-web-flux-server-0.0.1-SNAPSHOT.jar started by aufan-engineer in /Users/aufan-engineer/work/spring-boot-vue-app/web-flux-server/build/libs)
2021-12-04 00:28:12.651  INFO 3639 --- [           main] .a.s.s.b.v.SpringBootVueAppApplicationKt : No active profile set, falling back to default profiles: default
2021-12-04 00:28:14.144  INFO 3639 --- [           main] o.s.b.web.embedded.netty.NettyWebServer  : Netty started on port 8080
2021-12-04 00:28:14.154  INFO 3639 --- [           main] .a.s.s.b.v.SpringBootVueAppApplicationKt : Started SpringBootVueAppApplicationKt in 1.985 seconds (JVM running for 2.411)

そして、チュートリアルの終了！

・・・再び、先程の画面が表示される。
いや、当たり前ではあるんだけども、本当に、さっきと何の変化もない。
こんなに記事が長くなったのに、一体、何をしてたんだろう、という気持ちも（略

終わりに

昨日の記事にもちゃんと書いてあるのですが

　ここまでのプロジェクト構築では Spring Boot の WebFlux サーバーに何の Web API も実装されていません。ここから Web API を Kotlin で実装し、Vue.js から axios で利用するように開発を進めていくことになります。

結局、Kotlin　をまだ一行も書いてない事実！

１時間程度の白昼夢でも見てたかのような気分ではあったりしますが、
それくらいの時間をかけて手を動かしてみると、Kotlin　と Vue.js　を使った Webサイトの骨組みができあがります。

最近はいろんな記事も充実しており、検索して訪れる場所で、手軽な入門編がゴロゴロしています。
読むだけではなく、ちょっと手を動かしてみるだけで、一歩目を踏み出したことになってるはず。。