非エンジニアが文章校正のためにVSCodeとtextlintを導入するまでの記録
今年は文章校正の環境を整えられなかったことが大きな課題でした。いままで、秀丸のハイライト……はMacに乗り換えたのでお別れしたり、miを使って表記ルールを入れ込む……は用語統一を登録するので精一杯で実用的にはならなかったりといった具合で、なかなか「これ！」という校正・校閲環境に持って行けていませんでした。
そんなとき見つけたのがtextlintというもの。ATOKのような文章チェックをしてくれるものとイメージしてもらえたらよいかなと思います。
Markdown などのテキストファイルを特定のルールにしたがってチェックするツールです。
ルールは作者の azu さんを始め、多くのルールが公開されています。
（textlintとVSCodeで始める文章校正）
で、textlintはVSCodeというエディタで動かせます。VSCode（Visual Studio Code）は、マイクロソフトが提供しているエディタです。
textlint+VSCodeを導入すると、こんな感じでチェックが入り、下部にメッセージが表示されます。
ちなみに私の技術レベルは、htmlは読めるが書けず、JavaScriptはサッパリ、という感じです。 なので、「textlint VSCode」でググって出てくるエンジニア向けの解説をいくつか拝見しながら、やっとこさ導入に漕ぎつけました。 エンジニア向けの解説だと私にとっては前提となるレベルが高く、あれもわからん、これもわからんと芋づる式に調べて実践してるうちにNode.jsでハローワールドかまして「あっこれは違う」と引き返したりもしましたが、おかげでかなり勉強になりました。
というわけで、本記事は私がtextlintをVSCodeで使えるようになるまでの記録です。内容・手順は念のため友人のエンジニアにチェックをお願いしてOKをもらいました（紫くんありがとう！）ので、この手順を参考にしていただければみなさんも導入できるはず。
ただ、いかんせん私は専門家ではありませんので、技術的な疑問は後述の「リファレンス」でご紹介している記事等を参照ください。そんな感じですいませんが、だれかの役に立てば幸いです。
ちなみに、textlintを使うためには原稿をmd（Markdown）形式で作成する必要があります。Markdown記法は覚えるとかなり便利ですので、これを機会に覚えてみましょう！
私のマシン環境
- macOS Catalina 10.15.7
入れたいものたち
- Node.js
- npm（Node.jsと一緒に入ってます）
- textlint
- VSCode
⚠ターミナルを使います
ターミナルは、Macだと「アプリケーション＞ユーティリティ」の中にあります。文字を打つだけで操作ができるやつです。 初めて使う方も多いと思いますし、PCの大事な部分を壊してしまいそうな怖さを感じるかもしれません……が、適当に打ち込んだコマンドでなにかが壊れることはそうそうないですよ！ というのと、今回はコピペのみで進めていただけますのでご安心を。ぜひチャレンジしてみてください！
また、ターミナルを極力使用せずに導入する方法もあります。が、私は後述する理由（今後、Node.jsを使用したプロジェクトに関わる可能性があること）から今回の手順を踏んでいます。そういった心配がなさそうな方は、今回の私の手順ほどはターミナルを使わない「VS Codeにtextlintを導入して文章を校正する」の手順を参照いただくといいのではと思います。
リファレンス🙏
今回ガン見させていただいた記事たちです。まことにありがとうございます。
- textlintで日本語の文章をチェックする
- textlint と VS Code で始める文章校正
- 記事を書くときのおすすめエディタ
※「VSCode + textlint の使い方」というセクションで紹介されています - VS Codeにtextlintを導入して文章を校正する
- MacにNode.jsをインストール
では、始めていきましょう。
1. Homebrewをインストールする
Homebrewはパッケージマネージャというもので、今回この中のnodebrewを使います。nodebrewなしでもNode.jsは動くのですが、Node.jsはバージョンアップが盛んで「古いバージョンなら動いたのに……」ってことが起こるんだそうで。
nodebrewを使うと、プロジェクトごとにNode.jsのバージョンを指定できるので安心だよということでした。
私の場合、開発はしないもののサイト制作のからみで動作検証などを行うことはあるため、nodebrewを入れておいたほうがあとあと安心かなぁと思ったので、入れました。
というわけで、下記にアクセスします。
ページ内、インストールのセクションに「このコードをコピペしてね」と書かれていますので、ひとまずコピーします。
ターミナルを開き、ペーストしてReturn（Enter）します。
パスワードを求められたら入れて（画面が反応しないけど負けずに）Return。
文字が増えました。これらをインストールするよと言ってます。 「Press RETURN to continue or any other key to abort」ということなので、ふたたびReturn。しばらく待ちます。
文末に「Receiving objects : 100％（中略）done.」と表示されたら、インストール完了です。
2. nodebrewをインストールする
引き続きターミナルです。以下をコピペしてReturn。
brew install nodebrew入りました。ビールが表示されました。
3. Node.jsをインストールする
Qiitaの「MacにNode.jsをインストール」を参考にしましたので、こちらも見ながら進めてみてください。
引き続きターミナルです。 Node.jsはバージョンがたくさん出ていますが、どのバージョンを入れるか選択せねばなりません。今回は推奨版（2020年12月22日現在、v14.15.3）を入れました。
ターミナルに下記をコピペしてReturn。
nodebrew install-binary stable私はここで「Warning」と表示されてしまいました。ビビった。でも大丈夫。
参照記事に対処法がしっかり載っていたので、同じようにWarningされた方は焦らず以下をコピペしてReturn。それから再び上を実行してみてください。
mkdir -p ~/.nodebrew/src「Installed successfully」と出ればOKです。インストールされました。
そして、インストールされたnodeの有効化が必要ということなので、さきほどの記事の「インストールされたnodeを有効化」以降を見ながら進めてください（一度ターミナルを終了して開き直す手順をお忘れなく！）。
Node.jsとnpmが入ったかを確認してみましょう。 まずはNode.js。ターミナルに以下コピペしてReturn。
node -vv14.15.3と表示されました。あってるね！ 続いてnpm。
npm -v6.14.9と表示されました。なるほどね！
4. VSCodeをインストールする
下記にアクセスします。
マシン環境に合わせてインストール。
Zipを展開すると、ダウンロードフォルダに青いアイコンの「Visual Studio Code」がデン！ と置かれるので、あらあら、ここにいては危ないよ。こっちにお行き……とアプリケーションに移動してやりましょう。
4. 文章校正の場所としてフォルダを作る
textlintを入れる前に、textlintの置き場所を用意します。
また、この置き場所には校正の対象になる文書も置かれます。「このフォルダ（ディレクトリ）以下にあるMarkdownファイルは校正してくださいね」ということですね。
私はとりあえず「edit」というフォルダを作成しました。
5. textlintをインストールする
ふたたび、ターミナルです。
まずは、さきほど作成したフォルダ（ディレクトリ）に移動します。パスを入力しないとなんですが、特にMacってパスわかりにくいですよね。でも大丈夫！
「cd （半角スペース）」まで打ち込んだら、Finderから該当フォルダをドラッグ＆ドロップすると、パスが表示されます。
cd （ここにフォルダをドラッグ＆ドロップ）そしてReturn。すると、マシン名の後にフォルダ名が出るようになります。これで、移動できたことがわかります。
（マシン名） （フォルダ名） ~ %ではいよいよ、textlintと日本語ルール（技術文書向けのルールプリセットと、JTF日本語標準スタイルガイド（翻訳用））を入れましょう。
下記をコピペしてReturn。
npm install --save-dev textlint textlint-rule-preset-ja-technical-writing textlint-rule-preset-jtf-styleFinderでさきほどの「edit」フォルダを見てみると、以下のフォルダとファイルが追加されているはずです。「node_modules」フォルダには、textlintのルールも格納されています。
node_modules/
package-lock.json
package.json
6. textlintのルールを追加する
textlintには、5でインストールしたもの以外にもいろいろな方が作成・公開したルールがいくつもあります。ありがたいことです……🙏
ルールのリストを参照して、利用したいものを選択しましょう。
GitHubのtextlintプロジェクトのWikiにリストがあります。入れたいもののルール名をメモしてください。
選んだルールを入れていきます。
ターミナルは開いていますか？ 現在地はさきほど設定したフォルダになっているでしょうか？ なっていない場合はcd （ここにフォルダをドラッグ＆ドロップ）して必ず移動しましょう。
移動できたら、以下の要領でルールを追加します。複数ある場合は、半角アキを入れて続けて入力できます。
npm install （ルール名1） （ルール名2）7. VSCodeでtextlintを実行する
VSCodeの拡張機能を追加します。下記ページからVSCode-textlintをインストール。
VSCodeを立ち上げます。すでに立ち上げていた場合は再起動します。
8. Markdownで文書を作ってみる
では何かテキストを書いて、textlintが作動しているか確認してみましょう。
ここで注意したいのは、まずVSCode上でtextlintが入っているフォルダを開くこと。ついファイル単体を直接開きたくなってしまいますが、それだとtextlintが作動してくれないのです。
今回ですと「edit」フォルダを開くのが正解です。これ毎回忘れて「アレ？ 動かない」ってなりがちなので気をつけましょう。
では、「File＞New File」から新規作成し、なにか書いてみます。動作確認なので、あえて間違いっぽい文章を書いてみましょう。
書いたら、手順5で作成したフォルダ以下に.md形式で保存します。
私はtextlint関連のファイルと区別するため、「docs」フォルダを作成し、そこにファイルを置くことにしました。
保存ができたら、VSCodeのウィンドウ下部にtextlintのパネルが表示されました！ 指摘されてるされてる。ふふふ。
以上で、VSCode＋textlintの導入がひとまず完了しました！
使ううちにルールを増やしたり、チューニングしたり、独自のルールを作成したりももちろん可能です。 ルールのチューニングに関しては、各ルールのReadme.mdを「node_modules」フォルダの該当ルール内またはGitHubの該当プロジェクトから確認してみてください。
今年はここまでで落ち着きそうですが、ゆくゆくは共同編集の環境も整えたいので、GitHubとのつなぎこみも目論んでいます。できるといいなぁ。