はじめまして!YOUTRUSTのエンジニアのなろ(YOUTRUST/Twitter)です。
2022年7月1日にYOUTRUSTに入社しました。
この記事では、typoをなくす理由と方法を紹介します。
なぜtypoがいけないのか?
主な理由は3つあります。
1. バグの原因になる
存在しない変数を参照したり、変更を加える対象を間違えたりなど、意図しない動作の原因になります。
単純なミスですが、それ故に気づきにくいです。
バグを生まないために、typoはなくした方が良いです。
2. レビュアーの負担が増える
レビューでは、コードの読みやすさや、変更のしやすさや、テストのしやすさや、パフォーマンス的な効率について重点的に議論をしたいです。
typoが含まれないコードというのは「当たり前」の品質になります。
「当たり前」を満たせていないプルリクエストを見たときに、レビュアーはレビューイに対して不安を感じます。typoの場合だと「エディタの設定をしていない?」「自分のコードを見直していない?」「キーの打ち間違えが多いなら存在しない変数を参照してたりしないか?」などです。
不安を感じたレビュアーは、レビューをする際に意識する対象が増えてしまいます。
レビュアーの負担を減らし、重点的に議論したい内容に集中するために、typoはなくした方が良いです。
3. 修正コストが大きくなる
typoを含むコードを参照するごとにtypoが複製されます。
既存のコードを参考にしたり、変数を参照したり、APIのレスポンスを参照したり、ファイルを参照したりなどです。
気づいたらtypoが多くなり、修正の影響範囲も大きくなってしまいます。
修正に時間をかけないために、typoはなくした方が良いです。
typoをなくす方法
100%正確にタイピングをすることは不可能なので、typoを検知して修正することが重要です。
この記事では、3つのタイミングで検知する方法を紹介します。
1. 実装のタイミング
エディタの機能で検知します。
typoがある箇所に下線を引いたりなど、目立つようにしてくれるものが多いです。
目立つので実装中に気づくことができ、修正できます。
Visual Studio Codeだと「Code Spell Checker」がおすすめです。
2. コミットのタイミング
Git Hooksの機能で検知をします。
コミットの際に変更差分にtypoが含まれているかを確認し、含まれている場合はコミットを失敗させる仕組みになります。
コミットの際に気づくことができ、修正できます。
typoを含まないコードだけを、コミットできるようになります。
前職で記事を書いているので、こちらを参照してください。
3. プルリクエストのタイミング
GitHub Actionsの機能で検知をします。
プルリクエストの変更ファイルにtypoが含まれているかを確認し、含まれている場合はジョブを失敗させる仕組みになります。
プルリクエストの作成とプッシュの際に気づくことができ、修正できます。
typoを含まないプルリクエストだけを、マージできるようになります。
typoの検知には「2. コミットのタイミング」と同じくcrate-ci/typos
を利用しています。
実際に利用している.github/workflows/ci.yml
を記載します。
name: CI on: push: branches: - master pull_request: jobs: spell-check: name: Spell check runs-on: ubuntu-18.04 if: ${{ github.event_name == 'pull_request' }} steps: - uses: actions/checkout@v2 with: fetch-depth: 0 - name: Set git config core.quotepath run: git config --local core.quotepath false - name: Get diff files id: diff run: | diff=$(git diff --name-only --diff-filter=AM origin/${{ github.event.pull_request.base.ref }} HEAD | xargs -I{} echo "./{}") files=$(echo -n $diff | tr '\n' ' ') echo "::set-output name=files::$files" - name: Typos uses: crate-ci/typos@v1.8.1 if: ${{ steps.diff.outputs.files != '' }} with: files: ${{ steps.diff.outputs.files }} config: ./typos.toml
まとめ
typoをなくす理由と方法を紹介しました。
typoは紹介した方法で簡単になくすことができます。
ぜひ取り組んでみてください🙌
最後に宣伝
YOUTRUSTではWebエンジニアの方を引き続き募集しています!興味のある方は、ぜひ応募して見てください!(まずはカジュアル面談からでももちろん歓迎です!)