# はじめに

Markdownで書いた内容をtextlintでチェックして校正。そしてGitHubにPRとしてあげたときにGitHub Actions + reviewdogでレビューコメントを残すという機構をつくってみました。
このブログはVuePressで立ち上げているので、↓みたいなフローになります。

  1. Markdownファイルで記事を書く
  2. GitHubにMarkdownファイルをpush
  3. GitHub Actionsでtextlintが動作
  4. reviewdogでルールに引っかかった内容をレビューコメント

TIP

記事執筆時点でのversionです。

  • textLint: v11.7.6
  • yarn: v1.22.4
  • vuepress: v1.3.1

# textlint

Markdownファイルなどのプレーンテキストに対して、設定した任意のルールにしたがってチェックをしてくれるツールです。ルールはGitHubで複数公開されており、さまざまなルールをひとまとめにしたpresetも存在してます。
textlint Rule一覧

# textlintのセットアップ

前回の記事でつくった環境が手元にあるとして進めます。

まずはtextlintと今回利用するtextlint ruleを2つインストールします。

yarn add -D textlint textlint-rule-preset-ja-technical-writing textlint-rule-preset-jtf-style
1

今回導入したtextlint ruleは↓の2つです。

  • textlint-rule-preset-jtf-style
    • JTF日本語標準スタイルガイドという和訳時に利用されるガイドラインをtextlintで利用できるようルール化したもの
    • 単位の表記チェックや、括弧の表記、句点が正しく全角で使われているかなどチェックしてくれる
  • textlint-rule-preset-ja-technical-writing
    • 技術文書向けのルールがまとめられているもの
    • デフォルトだと結構厳し目にルールがつけられている
    • 1文の長さが100文字以下、ら抜き言葉を使用しない、弱い日本語表現を使用しないなど

textlintの設定を記述するために、ルートディレクトリに.textlintrcファイルを作成します。

{
  "filters": {},
  "rules": {
    "preset-ja-technical-writing": true,
    "preset-jtf-style": true,
  }
}
1
2
3
4
5
6
7

TIP

presetの一部ルールを除外したいときは、↓のような形で記述すれば外せます。

{
  "filters": {},
  "rules": {
    "preset-ja-technical-writing": {
      "sentence-length": {
        "max": 90,
      },
    },
    "preset-jtf-style": true,
  }
}
1
2
3
4
5
6
7
8
9
10
11

# localでのtextlint実行

↓のコマンドにてlocalで実行できます。

yarn textlint [filename]
1

VS Codeを利用している場合は、エディター上にtextlintのルールに引っかかった内容を表示してくれる拡張があるので、そういった拡張を入れるのも便利です。
私はVS Codeにはテキスト校正くんを入れて利用しています。(ICS MEDIAさんいつもありがとうございます。)

# reviewdog

コードレビューの補助をしてくれるツールです。
linterの実行結果をreviewdogに渡すことで、GitHub Pull Requestのdiffに警告内容を表示してくれます。
reviewdogの作者は日本人の方で、作成に至った経緯をブログで公開してます。
Reviewdogを飼ってコードレビューや開発を改善しませんか

今回はreviewdogとGitHub Actionsを組み合わせて自動校正環境を構築します。

# GitHub Actions

GitHubが提供しているCI/CDツールです。
GitHubとの連携が非常に簡単で、1か月あたり2000分の枠を無料で利用できます。個人で利用する分には、無料枠で大体収まるでしょう。

# workflowファイルの準備

.github/workflows/textlint.ymlを作成して↓の内容を記述します。
やっていることは↓の通りです。

  • actions/setup-node@v1でNode.jsが利用できるにセットアップ
  • yarn installでnode packageをインストール
  • tsuyoshicho/action-textlint@v1でtextlint - reviewdogを実行

という感じです。

name: textlint
on:
  pull_request:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: use Node.js
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - name: install dependencies
      run: yarn install
    - name: textlint reviewdog
      uses: tsuyoshicho/action-textlint@v1
      with:
        github_token: ${{ secrets.github_token }}
        reporter: github-pr-review
        textlint_flags: "blog/_posts/**"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

TIP

GitHub Actionsではgithub_tokenという名前で自動的にTokenを生成します。workflowファイル内ではsecrets.github_tokenで参照できます。
このTokenの詳細については↓のページで確認できます。
https://docs.github.com/ja/actions/configuring-and-managing-workflows/authenticating-with-the-github_token

# workflowの実行

↑で作成したworkflowファイルがある状態でrepositoryにpushすると、GitHub Actionsが自動的に起動します。

何かtextlintのルールに引っかかる文章が存在する場合はPull Requestにこんな感じでreviewdogからレビューコメントが届きます。

image

  • PR駆動でブログ執筆
  • textlintでの自動校正
  • reviewdogによる校正箇所の可視化
  • あとreviewdogの犬がかわいい

とかなり素敵な感じになりました。

# おわりに

VuePressでブログを立ち上げたときから実現したかったtextlintでの自動校正環境がつくれました。
まだtextlintのルールを2種類しか入れておらず、presetの細かい内容も調整できていないので、そのあたり調整していきたいです。
一部Markdown特有の記法に対して、textlintが誤検知してしまうことがあるので、そのあたりも調整します。

ブログを書くのはSNSへの投稿と違い、ハードルを高く感じることが多いのですが、自動校正環境をつくれたことでだいぶ気楽に書けるだろうと期待してます💪🐶