Corredor

ウェブ、プログラミングの勉強メモ。

Vue 3・Vite を触ってみる

Vue 3.0 が RC (Release Candidate) になったらしいので触ってみる。

Vue のバージョン紛らわしい

Angular は各サービスと CLI のバージョンが揃えられているが、Vue の場合は本体と Vue CLI のバージョンがバラバラである。本稿執筆時点だと

  • Vue CLI:v4.4.6
  • この Vue CLI からインストールされる Vue 本体:v2.6.11

という感じ。今回試すのは Vue 本体が v3.0 になるよーという話。

Vue CLI ではなく Vite を使う

上述の公式アナウンスのページを見てみると、コレまで使ってきた Vue CLI (@vue/cli) ではなく、Vue.js の作者が作った Vite (ヴィート) というツールを使用する方法が紹介されていた。

どちらかというとコチラの方が楽しみなので、やってみる。

検証環境

今回検証した環境は次のとおり。

  • MacOS Catalina
  • Node.js vt12.16.1
  • npm v6.13.4

プロジェクト雛形を用意する

まずは、公式アナウンスの記載に従って npm init vite-app を叩いてみよう。

$ npm init vite-app practice-vue-3
npx: 7個のパッケージを1.166秒でインストールしました。
Scaffolding project in /Users/Neos21/practice-vue-3...

Done. Now run:

  cd practice-vue-3
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

# npm init vite-app コマンドによりディレクトリが作成される
$ cd ./practice-vue-3/

npm init vite-app ってどういうコマンドなの?と思って調べてみると、npm init は特定の雛形プロジェクトを作れるオプションを用意しているようだ。

$ npm init foo と叩くと、内部的には $ npx create-foo というコマンドが実行されていて、create-foo パッケージにより雛形が作成されるという仕組みらしい。

コレを使えば npx create-react-app とせずに npm init react-app と叩いても同じ結果が得られるらしい。この npm init の仕様に合わせるために create- が接頭辞になっていたのか…!

というワケで、Vite に関しても create-vite-app という npm パッケージが別に公開されていた。コレを使ってるのね。

雛形を確認してみる

どんなファイルが用意されたのか確認してみる。

$ cd ./practice-vue-3/
$ tree
.
├── index.html
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

4 directories, 8 files

index.html がプロジェクトルートにある。それ以外は Vue v2 系と大して変わらないかな。

package.json の中身はこんな感じ。依存パッケージ少ない!

{
  "name": "practice-vue-3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-rc.1"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.1",
    "@vue/compiler-sfc": "^3.0.0-rc.1"
  }
}

npm install してみて実際にインストールされたバージョンは次のとおり。

$ npm install

$ npm list --depth=0
practice-vue-3@0.0.0 /Users/Neo/practice-vue-3
├── @vue/compiler-sfc@3.0.0-rc.2
├── vite@1.0.0-rc.1
└── vue@3.0.0-rc.2

実際に動かしてみる

まずは雛形をそのまま動かしてみる。

$ npm run dev

http://localhost:3000/ で開発サーバが開く。適当に src/ 配下のファイルを編集してみたりして、動作することを確認。

Vite は Rollup をベースにしていて、TypeScript のトランスパイルに爆速で知られる esbuild を使っていて、.vue のような SFC (Single File Component) に対応していて、HMR (Hot Module Replacement) が出来て、とかなんとか、とりあえずイマドキのチョッパヤなビルドツールってことらしい。

確かにそのとおりで、ファイルを編集してから開発サーバのプレビューが更新されるまでが爆速だ。コレは素敵。

SCSS を使ってみる

src/index.css を見ると、素の CSS なことに気付いた。また、各コンポーネント内にも style 要素がなく、SCSS 対応はデフォルトではしていないようだった。

というワケで試しに SCSS 化してみる。

# css ファイルを scss にリネーム
$ mv src/index.css src/index.scss

$ vi main.js

main.js 内にある import './index.css' の行を import './index.scss' と変更したところ、npm run dev していたコンソールに

Error: Cannot find module 'sass' from '/Users/Neo/practice-vue-3'

なるエラーが表示された。そこで一度 npm run dev を終了し、sass をインストールしてみた。

$ npm install -D sass

そしたら $ npm run dev してもちゃんと SCSS が解釈されるようになった。

コンポーネントファイル内で次のように書いても、ちゃんと SCSS がトランスパイルされることを確認した。

  • src/components/HelloWorld.vue など
<!-- ↓ lang 属性を指定する。scoped によるスコープも、Vue v2 と同様に作れた -->
<style lang="scss scoped>
p {
  code {
    color: #00f;
  }
}
</style>

依存パッケージに sass (node-sass ではなく dart-sass ですな) を入れてやれば、Vite はちゃんと SCSS を解釈できるようだ。

TypeScript でコーディングしてみる

続いて、素の JavaScript で書かれているところを TypeScript にしてみる。

  • src/App.vue
<template>
  <!-- テキトーに data を参照する要素を配置してみる -->
  <p>{{ test }}</p>
</template>

<!-- ↓ lang 属性を付ける -->
<script lang="ts">
import HelloWorld from './components/HelloWorld.vue';

// 型定義をしてみる
const test: string = 'TEST';

export default {
  name: 'App',
  components: { HelloWorld },
  data: () => ({ test })
}

こんな感じのコードにしてみたところ、何の追加パッケージも要らずにトランスパイルされた。Vite の裏で esbuild がうまいことトランスパイルしてくれている様子。

なお、そのままだと型チェックが効かないので、

const test: number = 'My String';

のようなおかしなコードを書いてもとりあえず動いてしまう (バグる)。

こうした型チェックはどうしたらいいのかというと、ビルド時にやるんじゃなくて、IDE で開発中に検知しろってことみたい。確かにね。

tsconfig.json とかを置いて制御もできるっぽいが今回は割愛。

class 構文で書きたいなーと思っていたが、Vue v2 系で class 構文を実現していたサードパーティライブラリの開発が万全ではない。

なんだろ、Vue は class 構文避けるよね…?と思ったら、Vue 3 ではそもそも Class Component 自体がリジェクトされてるので、非推奨っぽい。

よー分からんけど、以下を見るに「複数の書き方が出来るのは混乱する」「TypeScript の型を厳格化するのが大変」とかそんな理由っぽい。まぁ色んな書き方できちゃうのは好かんし、class 構文を使わない方が型チェックが厳格にできるのであれば、それでもいいかなー。

プロダクションビルド

$ npm run dev による開発ビルドではなく、ちゃんと本番ビルドするには、

$ npm run build

を叩く。コチラもイイカンジ。何も考えなくて良いのが使いやすい。

以上

とにかく Vite のビルド速度が速くて驚いた。Vue 3 の正式リリース楽しみ。

Angular CLI インストール時に統計情報の質問を出さないようにする (GitHub Actions でも対応)

Angular CLI を新規にインストールしたりビルドしたりする時に、次のような質問が出てくることがある。

$ npm install

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. (y/N) 

匿名で利用状況を収集しても良いか?という質問で、yn で答えるワケだが、GitHub Actions のような CI ツールの中でこうしたプロンプトが表示されて処理が中断されては困る。

ということで回避方法を探してみると、

export NG_CLI_ANALYTICS=ci

このような環境変数を設定すれば良いことが分かった。

GitHub Actions であれば、npm installnpm run build のタイミングでこの環境変数を仕込んでおけば安心だろう。

name: Deploy To GitHub Pages
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install
        env :
          # ↓ Angular CLI が統計情報に関する質問を出さないようにする
          NG_CLI_ANALYTICS: ci
        run : npm install
      - name: Build To dist/ Directory
        env :
          # ↓ 念のためビルド時にも指定する
          NG_CLI_ANALYTICS: ci
        run : npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          # GITHUB_TOKEN Secret は自動的に用意されるので、自前で Secret を用意する必要はない
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

Angular 製のアプリを GitHub Pages にデプロイする際の Workflow は上のような感じ。環境変数に関する指定部分さえ取り除けば、Angular 以外の SPA でも同様にビルド・デプロイできる汎用的な Workflow であろう。

Angular超入門

Angular超入門

Ctrl + D でターミナルを閉じないようにする

通常の「ターミナル」で作業している時とか、docker exec でシェルに入っている時とかに Ctrl + D を押下すると、シェルからログアウトされてしまう。

Ctrl + D は EOF (End of File)、ファイルの終わりを示す特殊文字で、標準入力の終了を示すことから、シェルのログアウト、ターミナルの終了、といった挙動に繋がっている。

Ctrl + C などとの押し間違いでターミナルが落ちてしまうと辛いので、次の環境変数を設定しておくことで回避できるようになる。

export IGNOREEOF=10

コレにより、Ctrl + D を10回押してもログアウトはされず、11回目の押下でようやくログアウトとなる。

$ set -p ignoreeof

というコマンドでも良いようだが、Mac のターミナルではコレは効かなかった。とりあえず環境変数 IGNOREEOF が楽そうなので、入れておくとしよう。

GitHub リポジトリのコード行数を計測する方法3つ

GitHub リポジトリのコード行数を簡単に見たいなと思い、やり方を調べてみた。

Chrome 拡張機能「GitHub Gloc」を使う

Chrome 拡張機能の「GitHub Gloc」を使うと、GitHub のリポジトリページにコード行数がバッジ表示されるようになる。

とてもお手軽だが、難点があって、コメントや空行も含んだ全てのテキストの行数しか分からないのである。

GitHub API + jq 芸のワンライナーで調べる

上述の GitHub Gloc のソースコードを覗いてみると、/stats/code_frequency という GitHub API をコールしているのを発見。

どうも対象リポジトリの追加・削除行数が取得できる API らしい。GitHub Gloc はコレを Reduce で集計することでコード行数を取得していた。

というワケで、jq を使ってワンライナーを作ってみる。

$ curl -sS https://api.github.com/repos/【ユーザ名】/【リポジトリ名】/stats/code_frequency | jq 'reduce .[] as $row (0; . + $row[1] + $row[2])'

# 例えば以下のように
$ curl -sS https://api.github.com/repos/Neos21/neos-normalize/stats/code_frequency | jq 'reduce .[] as $row (0; . + $row[1] + $row[2])'
1355

コチラも当然ながら、全てのテキストファイルの、空行などを含んだ行数になっている。

cloc を使用する

空行やコメント行を除いた、純粋な「コード行」を知りたい場合は、やはり git clone してみるしかない。cloc というツールを組み合わせるとそこら辺もよく分かる。

# cloc は Homebrew などでインストールできる
$ brew install cloc

次のようなスクリプトを用意し、cloc-git といった名前で実行権限を付けておく。

#!/usr/bin/env bash

git clone --depth 1 "$1" temp-linecount-repo && \
  printf "('temp-linecount-repo' will be deleted automatically)\n\n\n" && \
  cloc temp-linecount-repo && \
  rm -rf temp-linecount-repo

そしたら次のように叩く。

$ cloc-git https://github.com/Neos21/neos-normalize.git

ソフトウェア品質知識体系ガイド -SQuBOK Guide-(第2版)

ソフトウェア品質知識体系ガイド -SQuBOK Guide-(第2版)

  • 発売日: 2014/11/29
  • メディア: 単行本(ソフトカバー)