本当の「学び」を創り出す /「教育研修ファシリテーター」を読んだ

「教育研修ファシリテーター」を読んだ．どのように学びのある教育研修を創り出すのか？という講師のためのノウハウ本ではあるけど，サブタイトルに「組織・人材開発を促進する」と書いてある通り，チームビルディングをしたり，メンバーに何かを伝える場面が多い人にも役立つ本だった．例えば，エンジニアリングマネージャー，スクラムマスターなどのポジションを担当する人にもオススメできる．僕自身は技術講師（本書の表現だとファシリテーター）をしているので，実務経験だけでは学べないような，教育研修のノウハウとマインドセットを学ぶために読んだ．

教育研修ファシリテーター: 組織・人材開発を促進する

前提

本書では，従来の研修と比較をするために，同じような意味で使われる言葉を明確に表現している．今回の記事も，本書の言葉通りに書いているので，前提として整理しておく．特に「受講者」という表現はよく使っているので，今後は意識的に「参加者」と表現しようと思う（とは言え，組織的に表現が決まっている場合もあると思う）．

• インストラクター（講師）
  • 「教える」ことを目的とした研修を進める人
  • 教えられる側を「受講者」と呼ぶ
• ファシリテーター（教育研修ファシリテーター）
  • 「学び合い」を促進する人
  • 教えられる側を「参加者」と呼ぶ

「3つのスタイル」と「9つの学習法」

従来の研修と比較して，ファシリテーターは「3つのスタイル」と「9つの学習法」を組み合わせるべきと書いてあった．参加して印象に残る研修は，講義だけじゃなく，ディスカッションがあったり，フィードバックがあったりするので，こういう分類があったんだなと理解できた．

• レクチャー（講義）
  • 聴く
  • 見る
  • 考える
• ワークショップ（協働）
  • 話し合う
  • 体験する
  • 創作する
• リフレクション（省察）
  • 分かち合う
  • 内省する
  • 深め合う

研修の構成要素

研修の構成要素として，3つの要素が紹介されていた．

• チーム
• プログラム
• ファシリテーター

特に参加者と場をコントロールするための「チーム」は参考になった．まずは参加者の属性（部署，役職など）と研修に参加した経緯などをヒアリングすることにより，期待値を調整することができる．また，参加者の年代によって価値観，スピード感が異なるので，話すスピードを調整したり，比喩を使うにしても時代を意識したり，カジュアルな言葉を使うかどうかを意識したりする必要がある．本書を読んでいて「ファシリテーターのプレゼンテーションにも TPO があるんだな」と気付けたところに学びがあった．

他には，場をコントロールするために，部屋のレイアウトにもこだわると書いてあった．特にレイアウト変更のときには参加者にも手伝ってもらうことで，その単純作業がキッカケになり，チームビルディングに繋がるというのは知れて良かった．あと，研修センターに行くとよく飴などお菓子が置いてあるのも，場をコントロールするためだったんだとわかった．

• レクチャー（講義）
  • スクール型
  • シアター（劇場）型
• ワークショップ（協働）
  • アイランド（島）型
  • ラウンドテーブル型
• リフレクション（省察）
  • サークル型
  • バズ型

予定調和にならないように

本書を読んでいると，繰り返し「予定調和にならないように」という表現が出てくる．インストラクターは「予定調和（落語）」で，ファシリテーターは「ライブ（大喜利）」という比喩も出てくる．予定調和という意味は，ただテキストの通りに進めるということだけではなく，例えば，ブレストなどのワークショップをしたときに，チームごとの独自性のあるアイデアを活かさず，事前に用意したテンプレートでフィードバックをすることも予定調和と書かれていた．e-Learning では体験できない学びを創り出すためにも，ライブ感を届けられるようなファシリテーターになりたい．僕の大好きな本「Fearless Change」から引用すると「テーラーメイド」とも言えるかな．

Fearless Change アジャイルに効く アイデアを組織に広めるための48のパターン

ワークショップ手法

本書では，ところどころにワークショップ手法の紹介が入っている．体験したことがあるものも多かったけど，実施する背景だったり，コツなども整理されているので，実施する側として，改めて考え直すことができた．

• 参加者チェック
• 自己紹介
• クイズ
• グループ分け
• バズ
• ペアインタビュー
• グループ討議
• ディベート
• 親和図法
• ダイアログ
• ロールプレイング
• 研修ゲーム
• 体験学習ゲーム
• ケーススタディ
• 言葉づくり
• フレームワーク
• 作品づくり
• 演劇
• チェックイン／アウト
• フリップ
• プレゼンテーション
• バザール
• セルフチェック
• 振り返り
• フィードバック
• フィッシュボウル

今回はすぐに使えそうなワークショップを2個紹介したいと思う．

バズ

隣同士など，少人数で軽く話をするワークショップで，全員の前だと話にくいけど，少人数なら話せるという心理的安全性を重視したものになっている．自己紹介でも良いし，ミニディスカッションでも良いし，様々な場面で使える．複数日の研修なら，バズの組み合わせを変えたり，人数を徐々に増やしたりするのも良いと思う．

チェックイン／アウト

「今の気持ちはどう？」という質問に気軽に答えるというワークショップで，自己紹介とセットで実施しても良さそうだった．研修に対する意気込みを伝えても良いし，もっと身近な例で「朝，満員電車が大変でー」というような体験を話しても良いと思う．参加者の笑いを誘う自己紹介をする人は，チェックインが上手なんだと思う．また，チェックアウトも忘れずに実施することが重要と書いてあった．ポイントは「気軽に今の気持ちを伝える」という点かなと思う．

フィードバック

本書の後半に「フィードバックの4原則」が出てくる．自分のことは自分で気付きにくいので，フィードバックをもらうことは大切だけど，最低限のグラウンドルールを守らないと雰囲気が悪くなってしまう．

• 両者が一致した建設的な目的のためにおこなう
• 相手の態度・行動についてのみ伝える
• 自分の観察・印象・判断のみを伝える
• 具体的かつ明確に描写する

「建設的な目的」と書いてあるけど，個人的にフィードバックで大切だと思っているのは，良い点だけではなく悪い点も伝えてあげることなので，だからこそ攻撃的にならないように注意したいところ．そして，ファシリテーターとしては「今はフィードバックの時間ですよ」という雰囲気を作り，参加者同士で深め合ってもらえるようにしたいと思う．やはり「深め合ってもらう」ために場を促進するのがファシリテーターの役割なので，ファシリテーターがドヤ顔でフィードバックしてしまうことも気を付ける必要がある．本書にも「一言多いファシリテーターは要注意」と書いてあり，読んでいて「ウッ」となった．

まとめ

• 教育研修のノウハウとマインドセットを学ぶことができた
  • 今回まとめたところ以外にもたくさん良いところがあり，1度読んだだけなのに付箋とマーカーだらけになった
• 教育研修の場だけでなく，スクラムマスターなど，開発現場でも応用できるノウハウもたくさんあった
• ファシリテーターとしての実務経験を繰り返しながら，定期的に読み直したい
  • 本当の「学び」を創り出せるファシリテーターになりたい

教育研修ファシリテーター: 組織・人材開発を促進する

Vuex でショッピングカートを実装できる無料コース「Vuex for Everyone」を受講した

Vue School の無料コース「Vuex for Everyone」を受講した．Vue.js 初心者でも受講できるレベルになっているし，今まで Vue.js を書いたことはあるけど，Vuex はまだ使ったことがないという人にもオススメできる．進め方にもよるけど，写経するとしても2,3時間あれば終わる．

Vuex for Everyone

今回受講した「Vuex for Everyone」の題材は「shopping-cart」で，ステップバイステップに実装を進めていく．動作確認をしながら，機能を追加したり，リファクタリングをしたりする．

vueschool.io

動画を見るとわかるけど，とにかく実装スピードが早いので，写経する場合は何度も戻して見直す必要がある．ただ困ったときは Vue School の GitHub にセッションごとにコミットされているので，それを活用すればオッケー．

github.com

セッション一覧

• Introduction
  • Meet Vuex ⏲ 2:46
  • Create a new project with vue-cli ⏲ 3:45
  • Install and use Vuex ⏲ 1:57
• Vuex Options
  • Vuex Mutations ⏲ 3:22
  • Vuex Getters ⏲ 1:57
  • Vuex Actions ⏲ 4:25
  • Store Access from all Components ⏲ 0:53
• Shopping Cart Features
  • Add products to the cart ⏲ 5:08
  • Vuex Mutation History and Vue Devtools ⏲ 2:46
  • Cart items and total ⏲ 4:32
  • Checkout ⏲ 3:49
• Advanced Vuex Options
  • Dynamic Vuex Getters ⏲ 2:31
  • Vuex Map Helpers ⏲ 8:04
  • Split Vuex Store in Multiple Files ⏲ 1:11
  • Vuex Modules ⏲ 7:23
  • Namespaced Vuex Modules ⏲ 6:27

（受講画面例）

Meet Vuex

• Vuex とは何か？
• なぜ Vuex が必要なのか？

Create a new project with vue-cli

Vue School のボイラープレートから「shopping-cart」プロジェクトを作成する．

$ npm install -g vue-cli
$ npm install -g yarn

$ vue init vueschool/webpack-template shopping-cart

? Project name shopping-cart
? Project description A Vue.js project
? Author kakakakakku <y.yoshida22@gmail.com>
? Vue build runtime
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "shopping-cart".

   To get started:

     cd shopping-cart
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

$ cd shopping-cart
$ yarn
$ yarn dev

次に Vuex の GitHub にあるサンプルを参考に，ProductList コンポーネントを実装する．API 部分はモックになっている．

const _products = [
    {"id": 1, "title": "iPad 4 Mini", "price": 500.01, "inventory": 2},
    {"id": 2, "title": "H&M T-Shirt White", "price": 10.99, "inventory": 10},
    {"id": 3, "title": "Charli XCX - Sucker CD", "price": 19.99, "inventory": 5}
  ]

この時点で，3商品を表示することができる．

（実装画面）

Install and use Vuex

ここで Vuex をインストールする．

$ yarn add vuex

そして，新しく store/index.js を作成する．ここで，さっそく Vuex で重要なコンセプトが出てくる．

• state
• getters
• actions
• mutations

Vuex Mutations

ここでは，実際に mutations を実装する．ハンドラ関数の第一引数として state を指定し，追加でペイロードとして products を指定している．

// shopping-cart/src/store/index.js
mutations: {
  setProducts (state, products) {
    // update products
    state.products = products
  }
}

Vuex Getters

getters の実装はシンプルで，ストアからフィルタして取得できる．実際にモックの1商品の在庫を0にして，動作確認をした．

// shopping-cart/src/store/index.js
getters: { // = computed properties
  availableProducts (state, getters) {
    return state.products.filter(product => product.inventory > 0)
  }
}

（実装画面）

Vuex Actions

この時点だと，まだコンポーネントから直接 Ajax で API を呼び出しているので，ベストプラクティスではなく，actions を使って解決するとのことだった．最初は，そのまま mutations をコミットすれば良いのではないかと思っていたけど，mutations は同期，actions は非同期なので，ここでは actions を使って，mutations をコミットする必要性を学べた．そして，API を呼び出しているときのローディング画像もここで実装した．

// shopping-cart/src/store/index.js
actions: { // = methods
  fetchProducts ({commit}) {
    return new Promise((resolve, reject) => {
      // make the call
      // call setProducts mutation
      shop.getProducts(products => {
        commit('setProducts', products)
        resolve()
      })
    })
  }
},

actions を呼び出すときは .dispatch を使う．そして actions の中で Promise を実装しているので，ここでは .then で受けて，ローディング画像を消している．

// shopping-cart/src/components/ProductList.vue
created () {
  this.loading = true
  store.dispatch('fetchProducts')
    .then(() => this.loading = false)
}

（実装画面）

Store Access from all Components

全てのコンポーネントで store を import しなくても良いように，ルートコンポーネントに注入し，各コンポーネントでは this.$store で参照できるようにした．

// shopping-cart/src/main.js
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

Add products to the cart

次に商品をカートに入れられるようにストアにカートを実装した．ここまでの理解もあったので actions と mutations の実装も問題なかった．

（実装画面）

Vuex Mutation History and Vue Devtools

Chrome 拡張を使って Vuex の状態を確認した．状態を Time Travel して戻すことができるのは，デバッグするときに便利そうだった．

（実装画面）

Cart items and total

Vuex の GitHub から Filters 用の currency.js をコピーして，カートの実装を追加した．これで，カートの中に何が何個入っていて，総額も確認できるようになった．

（実装画面）

Checkout

次は，購入できるようにチェックアウトボタンを実装した．実際にチェックアウトはできないので，ボイラープレートに入っている実装で，ランダムで成功したり，失敗したりするようになっている．

buyProducts (products, cb, errorCb) {
  setTimeout(() => {
    // simulate random checkout failure.
    (Math.random() > 0.5 || navigator.userAgent.indexOf('PhantomJS') > -1)
      ? cb()
      : errorCb()
  }, 100)
}

actions から，成功時の mutations と 失敗時の mutations を送っている．

// shopping-cart/src/store/index.js
checkout ({state, commit}) {
  shop.buyProducts(
    state.cart,
    () => {
      commit('emptyCart')
      commit('setCheckoutStatus', 'success')
    },
    () => {
      commit('setCheckoutStatus', 'fail')
    }
  )
}

Dynamic Vuex Getters

在庫がないときに商品名が消えてしまうのは微妙なので，Add to cart ボタンを disable にする実装をした．

（実装画面）

Vuex Map Helpers

ここからは，Vuex のお作法でリファクタリングをしていく．まずは Map Helpers で state / getters / actions の宣言をシンプルにするために mapState / mapGetters / mapActions を宣言し，スプレッド演算子とともに，その中に呼び出し名を宣言できる．

// shopping-cart/src/components/ProductList.vue
computed: {
  ...mapState({
    products: state => state.products
  }),
  ...mapGetters({
    productIsInStock: 'productIsInStock'
  })
}

Split Vuex Store in Multiple Files

次は store/index.js の肥大化を防ぐために，actions だけを store/actions.js に切り出した．ただし，ここでは切り出せることを学ぶだけで，実際には次に出てくる Vuex Modules で書き直すことになる．

Vuex Modules

モジュールも Vuex のコンポーネントで，ストアごとに切り出していくようなイメージになる．今回は store/modules/cart.js と store/modules/products.js に切り出した．モジュールごとに state / getters / mutations / actions を持っているので，わかりやすいし，テストコードも書きやすそう．結果的に store/index.js に実装はなくなり，とにかく薄くなった．

// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
import actions from './actions'
import cart from './modules/cart'
import products from './modules/products'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cart,
    products
  },

  state: { // = data
  },

  getters: { // = computed properties
  },

  actions,

  mutations: {
  }
})

Namespaced Vuex Modules

最後は namespaced で，モジュールで namespaced: true を指定することにより，コンポーネント側で mapActions に名前空間を指定できるようになる．メソッド名にストア名を含めて冗長になっている場合など，シンプルに書けるようになる．

まとめ

• Vue School の無料コース「Vuex for Everyone」を受講した
• ショッピングカートを実装しながら，Vuex の基礎を学べた
• 動画だと理解できなかった部分などは公式ドキュメント（日本語）を参考にした

vuex.vuejs.org

写経した GitHub リポジトリ

github.com

他にもある Vue School の無料コース

過去に受講した Firebase Realtime Database の無料コースも，Firebase Authentication の無料コースも良かった．

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

コピペのためのコマンドラインツール clipboard を試した

Mac / Windows / Linux など，クロスプラットフォームで，コピペができるツールを探していて，Go で書かれた clipboard を試した．clipboard をインストールすると gocopy コマンドと gopaste コマンドが使えるようになる．

github.com

Mac / Linux

サンプルファイルを用意して，簡単に動いた．

$ cat sample.txt | gocopy
$ gopaste
1
12
123
1234
12345

ただし，Linux の場合は以下のエラーが出るため，事前にパッケージをインストールしておく必要がある．README にも Requirements として書いてあった．

panic: No clipboard utilities available. Please install xsel or xclip.

ディストリビューションによって違うと思うけど，今回は Amazon Linux で試した．

$ sudo yum install xsel --enablerepo epel
$ sudo yum install xclip --enablerepo epel

Windows

あまり Windows に慣れていないけど，手元にある Windows 10 環境でも動かすことができた．

$ type .\sample.txt | .\gocopy.exe
$ .\gopaste.exe
1
12
123
1234
12345

コピペ対象

README にも書いてある通り，コピペ対象はテキストのみだった．png / gif など，画像もコピペできると良いんだけど，画像にも対応したライブラリはあるのだろうか？

まとめ

• クロスプラットフォームで，コピペができる clipboard を試した
• 実装を読むと，例えば Mac だと pbcopy と pbpaste を実行していた

ドットインストールで「textlint 入門」を受講した

textlint はドキュメント用の Lint ツールで，日本語にも対応しているので，簡単に文法や typo などを検出できる．

textlint.github.io

ドットインストールのレッスン一覧を眺めていたら textlint のレッスンがあり，気になったので，受講してみた．

• https://dotinstall.com/lessons/basic_textlint

Lesson 1

Node.js をインストールした（というか既に入っていた）．今回試した Mac の環境は以下の通り．

$ node -v
v10.8.0
$ npm -v
6.2.0

Lesson 2

npm で新規プロジェクトを作成し，textlint を実行できるようにした．今回は v11.0.0 になった．

$ npm init -y
$ npm install --save-dev textlint
$ ./node_modules/.bin/textlint -v
v11.0.0

Lesson 3

、 の個数をチェックできる textlint-rule-max-ten をインストールした．

$ npm install --save-dev textlint-rule-max-ten

次に設定ファイルとなる .textlintrc を作成し，textlint-rule-max-ten を有効にしている．

{
  "rules": {
    "max-ten": true
  }
}

github.com

Lesson 4

実際に textlint を実行し，エラーが出ることを確認した．

$ ./node_modules/.bin/textlint docs/sample.md

/Users/kakakakakku/github/sandbox-dotinstall-textlint/docs/sample.md
  1:11  error  一つの文で"、"を3つ以上使用しています  max-ten

✖ 1 problem (1 error, 0 warnings)

Lesson 5

次に .textlintrc を変更し，デフォルトの閾値「3個」を「2個」に変更した．

{
  "rules": {
    "max-ten": {
      "max": 2
    }
  }
}

実際にエラーの閾値を変更できた．

$ ./node_modules/.bin/textlint docs/sample.md

/Users/kakakakakku/github/sandbox-dotinstall-textlint/docs/sample.md
  1:8  error  一つの文で"、"を2つ以上使用しています  max-ten

✖ 1 problem (1 error, 0 warnings)

Lesson 6

実際に日本語の文章をチェックするときは複数のルールを組み合わせたプリセットを使うと良い．今回は textlint-rule-preset-japanese をインストールし，「助詞の個数」や「ら抜き言葉」などをチェックできるようにした．

$ npm i -D textlint-rule-preset-japanese

$ ./node_modules/.bin/textlint docs/sample.md

/Users/kakakakakku/github/sandbox-dotinstall-textlint/docs/sample.md
  1:11  error  一文に二回以上利用されている助詞 "で" がみつかりました。  preset-japanese/no-doubled-joshi
  1:20  error  ら抜き言葉を使用しています。                              preset-japanese/no-dropping-the-ra

✖ 2 problems (2 errors, 0 warnings)

また，以下のようにプリセットの中で一部のルールを無効化することもできる．

{
  "rules": {
    "preset-japanese": {
      "no-dropping-the-ra": false
    }
  }
}

github.com

Lesson 7

次に文章中の表記揺れをチェックする textlint-rule-prh をインストールした．

$ npm i -D textlint-rule-prh

.textlintrc は以下のように書く．

{
  "rules": {
    "preset-japanese": {
      "no-dropping-the-ra": false
    },
    "prh": {
      "rulePaths": [
        "rules/dotinstall.yml"
      ]
    }
  }
}

Lesson 8

rules/dotinstall.yml を以下のように書くと javascript という小文字の表記揺れをチェックすることができる．

version: 1

rules:
  - pattern: javascript
    expected: JavaScript

実際に表記揺れのエラーが出た．

$ ./node_modules/.bin/textlint docs/sample.md

/Users/kakakakakku/github/sandbox-dotinstall-textlint/docs/sample.md
  1:1  ✓ error  javascript => JavaScript  prh

✖ 1 problem (1 error, 0 warnings)
✓ 1 fixable problem.
Try to run: $ textlint --fix [file]

github.com

Lesson 9

さらに rules/dotinstall.yml を拡張し，複数の表記揺れを定義した．

version: 1

rules:
  - pattern:
      - javascript
      - java script
    expected: JavaScript

正規表現で書くこともできるので，表記揺れのパターンが多いときは助かる．

version: 1

rules:
  - pattern: /java\s*script/i
    expected: JavaScript

また --fix オプションを使うと自動的に文章を修正することもできる．

Lesson 10

次は複数ファイルに対して textlint を実行するコマンドを試した．

$ ./node_modules/.bin/textlint docs/*.md

/Users/kakakakakku/github/sandbox-dotinstall-textlint/docs/sample.md
  1:13  ✓ error  Javascript => JavaScript  prh
  1:27  ✓ error  JAVAScript => JavaScript  prh

✖ 2 problems (2 errors, 0 warnings)
✓ 2 fixable problems.
Try to run: $ textlint --fix [file]

Lesson 11

Atom + textlint を試すレッスンだったけど，僕は Atom を使っていないので，スキップした．実はブログ記事を書くときに VS Code で textlint を使っているので，vscode-textlint で textlint を動かしたキャプチャを貼っておこうと思う．

marketplace.visualstudio.com

まとめ

• ドットインストールに textlint のレッスンが追加されていて素晴らしい
• textlint-rule-preset-japanese や textlint-rule-prh など，よく使うルールが紹介されていて良かった

試した内容は Lesson ごとに commit している．

github.com

CircleCI の Auto-cancel redundant builds が Workflows にも対応した

CircleCI には便利な Auto-cancel redundant builds があり，有効にしておくと，同じブランチに対して複数回ビルドがトリガーされた場合に，自動的に過去のビルドがキャンセルされる．繰り返し git push をして，さらに CI 時間が長いような場合には，無駄な待ち時間を減らせたり，ジョブの詰まりを減らせたりする．この機能は CircleCI 1.0 時代からあったけど，もしかしたらあまり知られていないかも？

Auto-cancel redundant builds with Workflows

ついにWorkflowsでAuto Cancelling Redundant Buildサポートされました(まだPreviewですが)🥳同じブランチで複数のジョブが走った場合、古いジョブを自動でキャンセルしてくれる機能です。これを使うとコミットが多いプロジェクトでもビルド使用量を節約することができます。https://t.co/Kig2713huJ

— CircleCI Japan (@CircleCIJapan) August 20, 2018

最近のリリースで Auto-cancel redundant builds を Workflows でも使えるようになった（とのこと）．一部注意点はあるものの，公式ドキュメントにも手順が載っていた．

• Auto Cancelling a Redundant Build
  • Steps to Enable Auto-Cancel for New Builds Triggered by Pushes to GitHub without Worklfows
  • Steps to Enable Auto-Cancel for Workflows Triggered by Pushes to GitHub or the API

circleci.com

試してみた

まず Auto-cancel redundant builds を無効にした状態で，単純に sleep するだけの CI ジョブを作成し，複数回ビルドをトリガーしてみた．すると，以下のように RUNNING が多く並んだ．こうなってしまうと，ジョブが詰まってしまうので，開発効率も下がってしまう．

次にプロジェクト設定を変更する．Auto-cancel redundant builds と Enable build processing (preview) を有効にした．

• Advanced Settings
  • Auto-cancel redundant builds
    • Off → On
  • Enable build processing (preview)
    • Off → On

この状態で，複数回ビルドをトリガーしてみた．すると，詰まっているビルドが自動的に CANCELED になった．便利！

注意点 : デフォルトブランチは対象外になる

公式ドキュメントに書いてある通り，デフォルトブランチは対象外になる．これは適切な挙動だと思っていて，特に master などは，リリースプロセスに使うため，必ずビルドをしてあげる必要がある．

Projects for which auto-cancel is enabled in the Advanced Settings will have workflows on non-default branches cancelled when a newer build is triggered on that same branch.

注意点 : キャンセルされて良いかを考える

公式ドキュメントに書いてある通り，Auto-cancel redundant builds を有効にする前にビルドのユースケースを考える必要がある．例えば lint 系だけではなく，デプロイもビルドで行っている場合など，自動キャンセルによって不整合などが起きないようになっている必要がありそう．

Notes: It is important to carefully consider the impact of enabling the auto-cancel feature, for example, if you have configured automated deployment jobs on non-default branches. Auto-cancelling workflows requires enabling the preview build processing feature.

まとめ

• CircleCI の Auto-cancel redundant builds は便利
• 最近のリリースで Workflows でも使えるようになった（とのこと）
• 実際に試してみた