🔍

タイポ発見ツールtyposをGitHub Actionsで導入してみた

に公開
GitHub Actions
typos
tech

自己紹介

はじめまして、はると申します。
駆け出しエンジニアとして働き始めて約2ヶ月が経過しました🐣

概要

CI/CDの知識がない駆け出しエンジニアが、タイポ発見ツールのtyposをGitHub Actionsで設定してみました。

環境

  • PC内にhomebrewはすでにインストール済み
  • ローカル環境・Dockerなし
  • Ruby3.2.2、Rails7.0.8

typosのインストール

下記コマンドを実行し、ローカルPC内にtyposをインストールします。

ターミナル
brew install typos-cli

これで、アプリ内のディレクトリで

typos

と実行すると、タイポを発見してくれるようになりました。

実行例😱

沢山タイポが見つかりました…

ターミナル
MBP hokkaido_travel % typos
error: `seach` should be `search`
  --> ./app/javascript/forgot_spotname.js:3:9
  |
3 |   const seachButton = document.getElementById('search-btn')
  |         ^^^^^
  |
error: `seach` should be `search`
  --> ./app/javascript/forgot_spotname.js:5:3
  |
5 |   seachButton.addEventListener('click', function(event) {
  |   ^^^^^

GitHub Actionsでプルリクのタイポチェックをする

では、これをGitHub Actionsに設定し、プルリクエストを作成するたびにタイポをチェックしてくれるようにします。

GitHub Actionsとは

リポジトリ内のイベント（プッシュなどの処理）によってトリガーされたときに実行される処理をあらかじめ設定しておき、自動で実行してくれるようにします。
今回のタイポチェックツールの他にも、自動でRSpecを実行するなど、さまざまな用途で使用されます。

実装方法

  1. WebブラウザでGitHubのリポジトリページにアクセスします。
    Actionsタブを開き、Set up a workflow yourself →をクリックします。

  2. ファイル名をtypos.yml、内容は下記のように入力し、コミットします。ファイルが作成できたらOKです。

    typos.yml
    name: GitHub Action
on: [pull_request]

jobs:
  run:
    name: Spell Check with Typos
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Actions Repository
        uses: actions/checkout@v3

      - name: Run Typos
        uses: crate-ci/typos@master

  3. ローカル環境で、git pull origin mainしておきます。
    ※ 1 と 2 の手順は、ローカル上でファイル作成して push でもOKです。

  4. ローカル環境、アプリのディレクトリ内で下記コマンドを実行します。

    ターミナル
    アプリ名 % touch .typos.toml

  5. 作成したファイル内を編集します。

    .typos.toml
    # スペルチェックを無効にするフォルダやファイルの設定
[files]
extend-exclude = [
  "*.svg",
  "node_modules",
  "vendor/**/*",
  "**/*.min.js",
  "logs/**/*",
  "*.png",
  "*.jpg",
  "*.gif",
  "*.ico",
  "*.exe",
  "build/**/*",
  "dist/**/*"
]
ignore-hidden = true # 隠しファイルを無視
ignore-vcs = true    # バージョン管理システムのファイルを無視

# 一般設定
[default]
check-filename = true  # ファイル名のスペルチェックを有効
check-file = true      # ファイル内容のスペルチェックを有効
locale = "en-us"       # 英語のロケールをアメリカ英語に指定

# もし他にも設定したい場合は、下記のように設定できます。
# プロジェクト内で使用される独自の技術用語や、英国英語のスペルなど、default.extend-wordsで設定すると、タイポとして扱われなくなります。
[default.extend-words]
colour = "color"              # 「colour」という単語を検知して「color」に直すようにエラーを出すようにする設定
initialise = "initialize"     # 「initialise」という単語を検知して「initialize」に直すようにエラーを出すようにする設定
analogue = "analog"           # 「analogue」という単語を検知して「analog」に直すようにエラーを出すようにする設定
rememberable = "rememberable" # 左右を同じにすることで、「rememberable」という単語はスペルミスとして扱われないように除外できる

# など、自由にカスタマイズできます。

    他にも細かく設定したい方は公式ドキュメントのtypos/docs/reference.mdを参照ください。

  6. 作成できたら、add・commit・pushします。

  7. 試しに、わざとタイポしてプルリクエストを作成し、引っ掛かるかどうか確認してみます。
    プルリクエスト内で、GitHub Actionsが実行されタイポが検知されたことが確認できます。

    　　
    Detailsを開くと、どのファイルの何行目でタイポしているかが確認できます。
    これで、プルリクを作成するたびに、タイポがないか確認できるようになりました🎉

まとめ

ふんわり自動でテスト実行してくれるもの？くらいの理解だったGitHub Actionsを実際に触ってみて、少し理解が深まりました。
このような便利なツールを、タイポの対策などさまざまな用途で活用していけるように、これからも勉強していきます💻🔰

参考記事

Discussion