この記事は <a href="https://qiita.com/advent-calendar/2021/yamap-engginers" target="_blank">YAMAP エンジニア Advent Calendar 2021</a> の14日目の記事です。
<h2 id="経緯">経緯</h2>
ある時、チーム内のコードレビューをしていてスペルミスの指摘が目立つようになってきました。
スペルミスのチェックは人がやるより機械がやった方が早いということで、CIでスペルチェックを自動化してコードレビューで自動でスペルミスを指摘する仕組みを導入してみたので、導入方法とその後の効果をまとめました。
この記事で書いているコードは全て <a href="https://github.com/t-yng/ci-spell-check-sample" target="_blank">t-yng/ci-spell-check-sample</a> に置いてあります。
<h2 id="導入手段の検討">導入手段の検討</h2>
<h3 id="既存のGithub Actions">既存のGithub Actions</h3>
マーケットプレイスの GitHub Actions をリポジトリに導入するパターン。 
いくつか試したが期待する結果が得られなかったので、後述する GitHub Actions を自作する形式にした。
<ul>
<li><a href="https://typoci.com/" target="_blank">Typo CI</a>
<ul>
<li>Github Actions でリポジトリにスペルチェックを導入可能</li>
<li>調査段階では Github が 404 になっていたので詳細は調べてない</li>
<li>執筆時点(2021/12/13 時点）で確認したら参照可能になっていた</li>
</ul>
</li>
<li><a href="https://github.com/marketplace/actions/check-spelling" target="_blank">Check spelling</a>
<ul>
<li>調査時点では β版 の状態だった</li>
</ul>
</li>
<li><a href="https://github.com/marketplace/actions/misspell-fixer-action" target="_blank">misspell-fixer-action</a>
<ul>
<li>Developers.ioで<a href="https://dev.classmethod.jp/articles/spellcheck-on-actions/" target="_blank">オススメ記事</a>があった</li>
</ul>
</li>
</ul>
<h3 id="スペルチェックのライブラリを GitHub Actions に組み込む">スペルチェックのライブラリを GitHub Actions に組み込む</h3>
自前でスクリプトを書いて Github Actions を構築するパターン。 
<a href="https://github.com/streetsidesoftware/cspell" target="_blank">cspell</a> を GitHub Actions に組み込みCIを構築することにしました。
<ul>
<li>
<a href="https://github.com/client9/misspell" target="_blank">misspell</a>
<ul>
<li>試してみたが期待したようにスペルミスを判定してくれなかった</li>
<li>ライブラリとして JavaScript などの言語はサポート外に見えた</li>
</ul>
</li>
<li>
<a href="https://github.com/vlajos/misspell-fixer" target="_blank">misspell-fixer</a>
<ul>
<li>↑で挙げた misspell-fixer-action で利用されているライブラリ</li>
<li>環境構築が面倒そうだったので試してない</li>
</ul>
</li>
<li>
<a href="https://github.com/streetsidesoftware/cspell" target="_blank">cspell</a>
<ul>
<li>VSCode の拡張で圧倒的な人気を誇る <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank">Code Spell Checker 
</a> で利用されているライブラリ</li>
<li>cliがあり手軽に実行できるのとVSCodeの拡張として使われている実績がある</li>
<li>prismjs などのライブラリ名や固有名詞がスペルミスとして扱われる点だけがデメリット 
(単語辞書を作成すればスキップは可能）</li>
</ul>
</li>
</ul>
<h2 id="CIの構築">CIの構築</h2>
<h3 id="cspellの導入とnpmスクリプトの作成">cspellの導入とnpmスクリプトの作成</h3>
cspell のインストール
<pre class="language-shell"><code class="language-shell">$ yarn add -D cspell
</code></pre>
cspellの設定ファイル(.cspell.json)を作成
<pre class="language-json"><code class="language-json">// .cspell.json
{
 "version": "0.2",
 "language": "en",
 "words": [], // 固有名詞などチェックをスキップしたい単語を登録する
 "dictionaries": [
 "softwareTerms", 
 "misc",
 "companies",
 "typescript", 
 "node", 
 "html", 
 "css", 
 "fonts", 
 "filetypes", 
 "npm"
 ],
 "ignorePaths": [
 "**/node_modules/**",
 "**/.git/**",
 "**/.vscode/**",
 "**/.next/**",
 "**/__generated__/**",
 "**/package.json",
 "**/yarn-error.log",
 "**/yarn.lock"
 ]
}
</code></pre>
npmスクリプトの作成
<pre class="language-json"><code class="language-json">{
 "scripts": {
 "spell-check": "cspell lint -c .cspell.json --show-suggestions"
 }
}
</code></pre>
適当にタイポがあるコードを作って実行してみる。 
スペルチェックが正常に動作して代替の単語の提案してくれる部分ができた。
<pre class="language-javascript"><code class="language-javascript">// src/index.js
const heloo = (name) => console.log(`hello, ${name}`);
</code></pre>
<pre class="language-shell"><code class="language-shell">$ yarn spell-check
1/1 ./src/index.js 597.00ms X
/Users/tomohiro/workspace/examples/ci-spell-check/src/index.js:1:7 - Unknown word (heloo) Suggestions: [helot, helio, hello, Helot, holo]
</code></pre>
<h3 id="GitHub Actions の実装">GitHub Actions の実装</h3>
スペルチェックを実行するスクリプトは作れたので、あとは GitHub Actions でスクリプトを実行するだけです。 
<code>.github/workflows/spell-check.yaml</code> を作成してプッシュしたタイミングでスペルチェックが走るようにします。
<pre class="language-yaml"><code class="language-yaml"># .github/workflows/spell-check.yaml
name: review-on-push

on: push

jobs:
 spell-check:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2

 - uses: actions/setup-node@v1
 with:
 node-version: '16.x'

 - name: Install Dependencies
 run: yarn install
 env:
 NODE_AUTH_TOKEN: ${{ secrets.AUTH_TOKEN_FOR_GITHUB_PKG }}

 - name: execute spell-check
 run: yarn spell-check
</code></pre>
<h3 id="Reviewdog でPRにコメントする">Reviewdog でPRにコメントする</h3>
今の状態はどこのコードでスペルミスが発生しているのか分かりにくい状態なので Reviewdog でPRにコメントします。 
さらに cspell はスペルミスが見つかった時にエラーとしてスクリプトが終了するので Reviewdog を通すことでCIがエラーとなるのを防ぐこともできます。
<pre class="language-yaml"><code class="language-yaml"># .github/workflows/spell-check.yaml
- uses: reviewdog/action-setup@v1
- run: reviewdog -version

(省略)

- name: execute spell-check
 env:
 REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 run: |
 yarn spell-check \
 | reviewdog -level=warning -efm="%f:%l:%c - %m" -reporter=github-pr-review
</code></pre>
これでスペルミスがあった時に Reviewdog がPRに自動でコメントしてくれます。
<img src="/images/posts/spell-check-ci/spell-check-reviewdog.png" alt="Reviewdogのコメント" width="1844" height="794" />
<h3 id="修正差分に対してのみスペルチェックを実行する">修正差分に対してのみスペルチェックを実行する</h3>
リポジトリが肥大化していくとスペルチェックの対象コードが膨大になりスペルチェックの実行に時間がかかるので、修正差分だけを対象としてスペルチェックを実行するようにします。
<pre class="language-yaml"><code class="language-yaml">- uses: actions/checkout@v2
 with:
 fetch-depth: 0 # 差分取得のために全てのブランチを取得する

(省略)

- name: execute spell-check
 env:
 REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 run: |
 git diff remotes/origin/$GITHUB_BASE_REF --name-only \ 
 | yarn spell-check \
 | reviewdog -level=warning -efm="%f:%l:%c - %m" -reporter=github-pr-review
</code></pre>
<h2 id="導入後の結果">導入後の結果</h2>
導入後はPRでスペルミスが自動で見つかり一定の効果を得ることができました。
しかし、デメリットでも書いたようにライブラリ名や固有名詞がスペルミスとして判定されてしまい、スペルミスでない単語もコメントで指摘されてしまっていました。この指摘が非常にノイズとなりコードレビューがやりづらくなってしまったので、結局CIは廃止する流れになりました。:smiling_face_with_tear:
<h2 id="結局どうしたか？">結局どうしたか？</h2>
最終的には個々人の開発エディタにプラグインとしてスペルチェックの拡張を導入して、開発中にスペルチェックに気づけるようにする形で落ち着き、結果としてコードレビューでスペルミスを指摘することはほぼ無くなりました！
正直言うと最初からこの方法で良いとも思っていたのですが、個々人の開発環境に依存する解決策はできれば避けたく個人的にやってみたかったという理由でCIを導入を試していました。
CIは廃止する流れになりましたが、チームの問題への意識が高まって結果としてスペルミスの問題を解消されたので良かったです。

この記事はYAMAP エンジニア Advent Calendar 2021の14日目の記事です。ある時、チーム内のコードレビューをしていてスペルミスの指摘が目立つようになってきました。スペルミスのチェックは人がやるより機械がやった方が早いということで、CIでスペルチェックを自動化してコードレビューで自動でスペルミスを指摘する仕組みを導入してみたので、導入方法とその後の効果をまとめました。

CIでスペルチェックを自動化してみたけど最終的にやめた話

神奈川の田舎で働いてるフロントエンドエンジニアのブログ