code-log

フロントエンドの話題中心です。

Vim + textlintで良質なブログ記事を書こう!

こんにちはかみむらです。現在、技術ブロガーのカックさん(@kakakakakku)からブログメンタリングを受けています。ブログメンタリングの詳細は、カックさんの素晴らしい記事があるので一読してください。

kakakakakku.hatenablog.com



ブログメンタリングでは、ブログ記事を書き終える-> 記事をレビューしてもらう流れがあります。そこでよく指摘されたのが、用語の間違い表記ゆれです。

実際に私が指摘された例がこちらです。

用語が正確ではない

○ Cloud Functions
☓ cloud functions

これは他のブログでもよく見られます。大文字であるべき場所が、小文字になってしまっているケースです。javascriptも正確にはJavaScriptです。

表記ゆれ

フォルダ
フォルダー

微妙な表記ゆれですが、全体で単語が統一されていないと、違和感のある文章になってしまいます。

以上の2つを指摘されました。私はブログ記事を書き終わった後、2度セルフレビューします。しかし、ブログ記事の文章量が膨大になるほど、チェック漏れが発生していました。人間の目視だけでは限界がありますよね。そこで、日本語の文章をLintでチェックできるtextlintの導入を試みました。

textlintとはMarkdownファイルを対象に、日本語の文法チェックを行ってくれるツールです。プログラミングをやってる人ならLintはごく身近な言葉かもしれませんね。textlintを使えば、よくある文法の間違いや、表記ゆれを防ぐことができます。ブログを書く人や、本を執筆する人にとっては、必須のツールであると言えます。

今回は私が愛用してるエディターVimとtextlintを使って、良質なブログ記事を書く設定をしていきます。

github.com

前提

Neovimを使う前提で話を進めていきます。

Vimに導入

まずはALEを導入します。これは非同期でコードを解析して、Lintのチェックをすることができます。
github.com

私はdein.vimでインストールしました。

dein.toml

[[plugins]]
 repo = 'w0rp/ale'

そして、Vimの設定ファイルに追加していきます。私はinit.vimに追加しました。Markdownにtextlintを指定してあげます。

init.vim

let g:ale_linters = {
 \  'markdown': ['textlint']
 \}

textlintの導入

次にtextlintを導入していきます。まずはプロジェクトのフォルダを作成していきましょう。

$ mkdir my-textlint
$ cd my-text
$ yarn init -y

textlintを使うための、各パッケージをインストールしていきます。少し多いですが一つずつ説明していきます。

$ yarn add -D textlint textlint-rule-max-ten textlint-rule-no-mix-dearu-desumasu textlint-rule-prh textlint-rule-ja-no-mixed-period

textlint-rule-max-ten - 一文に利用できるの制限
textlint-rule-no-mix-dearu-desumasu - 敬体(ですます調)と常体(である調)のチェック
textlint-rule-prh - 表記ゆれのチェック
textlint-rule-ja-no-mixed-period - 文末の句点記号(。)の統一

その他にも、文章を校正するための多くのライブラリがあります。

github.com

prhの導入

prhを使うための、設定ファイルを作成します。拡張子はyaml形式です。ここでは自分が指摘された例を上げて設定していきます。

textlint-rule-prhに詳しい設定内容はこちらを一読してください。

github.com

prh.yaml

version: 1
rules:
  - expected: フォルダ
    pattern:
      - フォルダー

  - expected: Cloud Functions
    pattern:
      - cloud functions

設定ファイルの全体像

こちらが設定ファイルの全体像です。prhは外部のyamlファイルを読み込んでいます。

.textlintrc

{
    "rules": {
      "max-ten": {
        "max" : 3
      },
      "prh": {
        "rulePaths": [
          "./prh.yaml"
        ]
      },
      "no-mix-dearu-desumasu": true,
      "ja-no-mixed-period": true
    }
}

textlintでチェックするMarkdownファイルを作成してみましょう。内容はprhで設定した用語末尾の句点記号(。)がチェック対象になります。

text.md

こんにちは。
こんにちは.

Cloud Functions
フォルダ

MarkdownファイルをVimのエディターで開いてみましょう。ALEがtextlintを検知して、表記ゆれ句点記号(。)のチェックがされています。

f:id:kamimura-dev:20191229145448p:plain

そして、npm scriptsにtextlintを実行するためのコマンドを追加します。ここではlintでlinterを実行させることができます。そして、lint:fixで、修正することができます。

 "scripts": {
    "lint": "textlint ./*.md",
    "lint:fix": "textlint --fix ./*.md"
  }

それではチェックしてみましょう。

$ yarn lint

f:id:kamimura-dev:20191229145632p:plain

そして、lint:fixのコマンドを打つと、修正されます。

$ yarn lint:fix

f:id:kamimura-dev:20191229145731p:plain

huskyでコミット時に自動レビュー

一通り導入が終わりました。自分はこれに加えて、Gitでブログ記事のバージョン管理をしています。Gitで管理することによって、diffで差分が見られたり、過去のコミットログに戻ることも簡単です。そして、Gitのコミット時にnpm Scriptsを実行させるライブラリhuskyを使って、自動レビューする環境を作成してみましょう。

huskyの記事はこちらも一読してください。
code-log.hatenablog.com

同一のプロジェクトにhuskyをインストールします。

$ yarn add -D husky

そして、package.jsonに追加していきます。

package.json

  "husky": {
    "hooks": {
      "pre-commit": "yarn lint"
    }
  }

これでgit commit時にyarn lintを実行することができます。

最後に

今回はVimにtextlintの設定をしました。自分が指摘されていた、用語の間違いや表記ゆれは、ほかの技術ブログでもよく見られます。正確ではないブログは信頼性を失うことに繋がるので、textlintを使って良質なブログを書きましょうね!!