おじさん。Vue-Cliを触る。

2020年1月29日 21:25

Vue-Cliを触りながら気になったところを上げていきます。
色々なサイトを参考しながら適当にまとめます。
そろそろコード書けよと言われそうですが。。。。
「Shut the fuck up and write some code」

１．Vue-Cliとは

vue-cliとは https://cli.vuejs.org/　にありました。
Vue CLIは、迅速なVue.js開発のためのフルシステム。
これだけあればVue開発できるよってことですね。

２．Vue-cliって何が入っているんだろう。

Vueプロジェクトを作ってみます。

npm install -g @vue/cli　　　　　　# Vue-Cliをインストール
vue create sample-vue-project    # プロジェクト作成

３．デフォルトかマニュアルか尋ねてきた。

マニュアルを選んでみます。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
 Manually select features

４．なんか知らない言葉がいっぱい出てきた。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

５．とりあえず全部選んでみる。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
(*) Unit Testing
>(*) E2E Testing

６．Babelってなんだ？

https://babeljs.io/docs/en/　に「Babel is a JavaScript compiler。」って書いてある。
ES6で書きたいけど対応してないからES5でも動くようにってことかな？
ES6の対応を見ると、早くIE11亡くなってくれって思います。
https://kangax.github.io/compat-table/es6/

７．TypeScriptってなんだ？

静的型付き、クラスを使用できるなどJavaScriptの欠点を補完する言語だそうです。
https://docs.microsoft.com/ja-jp/archive/msdn-magazine/2015/january/typescript-understanding-typescript
TypeScript を「JavaScript の糖衣構文」って書いてあるけど、
「糖衣」って？
１薬剤を服用しやすくするために外側に施した、糖分を含む被膜。「糖衣錠」
２チョコレートやゼリーなどの表面を覆う、砂糖でつくった硬い被膜。「糖衣菓子」
よくわからない。。。

８．Progressive Web App (PWA) Supportってなんだ？

ごにょごにょするとモバイル向けWebサイトをスマートフォン向けアプリのように使える機能ってことね。

９．Vuexってなんだ？

https://vuex.vuejs.org/ja/
Vuex は Vue.js アプリケーションのための状態管理パターン + ライブラリ
「Vue.js + Vuexでデータが循環する全体像を図解してみた」がわかりやすかった。
https://qiita.com/m_mitsuhide/items/f16d988ec491b7800ace　

１０．進めてみよう。

いっぱい選んだけど良いかと聞かれるけど「良いよ」と答えます。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? (Y/n)

１１．TypeScriptとともにBabelを使用する？

自動検出されたポリフィルにBabelとTypeScriptを使用するか確認されます。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes

１２． polyfillsってなんですか？

ポリフィルは、機能をサポートしないWebブラウザーで機能を実装するコードです。ほとんどの場合、HTML5 Web標準を実装するJavaScriptライブラリを指します。だそうです。

１３．Vue Routerのヒストリーモードを使用？。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

14.VVue Routerのヒストリーモードって？

vue-routerにはhashモードとhistoryモードがあるらしいので目的に応じて選択するようです。
https://router.vuejs.org/ja/essentials/history-mode.html

１５．CSS pre-processorってなんですか？

CSSをゴリゴリ書くのは大変だからCSSメタ言語で書いてコンパイルするってことかな。

Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
 Sass/SCSS (with node-sass)
 Less
 Stylus

CSS プリプロセッサに何を使うか？
「Dart Sassは、Googleが開発するDartというプログラミング言語で作成された、Sassのコンパイラです。」だそうです。
「Sass/SCSS (with dart-sass)」を選んでみます。

１６．linter / formatterを選びなさい。

色々ググったら「 ESLint + Prettier」を選択しようかなと。。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier
 TSLint (deprecated)

https://eslint.org/　　ESLint　　　コードルール警察ですね。
https://prettier.io/　　Prettier　　なんかいい具合にコードをきれいにしてくれるようだ。

１７．linter / formatterをいつ動かすか決めなさい。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit (requires Git)

今回は、<a>を入力して両方チェックします。
これでセーブ、コミットするたびに注意されるのかな？

１８．ユニットテストはどれ使うか選びなさい。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: (Use arrow keys)
 Mocha + Chai
> Jest

今回は「Jest」を選んでおきます。
ユニットテストってなんですか？は次回以降
TDDについても調べないといけないし。。。
Vue.js公式には　https://vue-test-utils.vuejs.org/ja/　ってのがある。

１９．E2Eテストツールを選びなさい

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
 Nightwatch (WebDriver-based)

「E2E(End to End)テストとは、ユーザーの視点から実際にwebブラウザを通して一通りの処理をテスト」だそうです。
これも次回以降だなぁ。。。

「Cypress」
https://www.cypress.io/　　
ブラウザーで実行されるすべてのものに対する高速で簡単で信頼性の高いテストツールのようです。

「Nightwatch」
https://nightwatchjs.org/
Nightwatchを使用すると、優先CSSセレクターモデルを使用してページ上の要素を特定し、自動化されたエンドツーエンドテストを非常に簡単に作成できます。だそうです。

２０．Configファイルどこにする？

別ファイルとしておきます。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
 In package.json

２１．プリセットとして保存する？

「ｙ」とすると次回も一つ一つ選ばなくてもプリセットとして次回選択肢になります。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save, Lint
and fix on commit (requires Git)
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

２２．プリセット名何にする？

プリセット名を入力。

 Vue CLI v4.1.2
Failed to check for updates
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save, Lint
and fix on commit (requires Git)
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as:

２３．なんか設定ファイルがいっぱいできたけど？

.browserslistrc
.eslintrc.js
.gitignore
babel.config.js
cypress.json
jest.config.js
package-lock.json
package.json
tsconfig.json

.browserslistrc
ターゲットブラウザやNode.jsのバージョンをシェアするための設定を記載。
https://www.npmjs.com/package/browserslist

.eslintrc.js
EsLintのルールや設定を書きます。
https://eslint.org/

.gitignore
無視する（Gitのトラッキングの対象外とする）ファイル or ディレクトリの指定ですね。

babel.config.js
Babelの設定ファイル
https://babeljs.io/docs/en/configuration

cypress.json
cypressの設定ファイル
https://docs.cypress.io/api/cypress-api/config.html#Syntax

jest.config.js
Jestの設定ファイル
https://jestjs.io/docs/ja/configuration

package.json
npm パッケージのバージョン管理
https://docs.npmjs.com/files/package.json

package-lock.json
package-lock.jsonはnode_modules配下やpackage.jsonに変更があった際に自動で作成・変更されるファイル
https://docs.npmjs.com/files/package-locks

tsconfig.json
TypeScriptに関する設定
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

今回は以上です。
Vue-Cliについてでした。
手軽に開発できるけど奥が深い。
調べれば調べるほどドキュメント量が増えていきます。
TDDも気になるし。。

次回は、コード書くかな？
今回の設定ではやる事いっぱいなのでもう少しシンプルに。。。

サポートして頂くと頑張るかもしれません。