これは、WordCamp Tokyo 2017で行ったセッション『組み合わせで簡単!WP REST APIとGitHubでつくる、よりよいメディア運営のワークフロー』のフォロー記事です。
セッション中はこういうことができるよ! という説明に止まってしまったので、具体的にチャレンジするための手順を説明します。
セッション中では複数のトピックを同時に取り扱いましたが、それぞれが色々な手順の元に動いています。あまりソフトウェア開発の経験がない方でもチャレンジできるように、それぞれの手順を細かく説明していきますので、ご自身のレベルに応じて適宜読み飛ばしてください。
textlintって?
textlintとは、自然言語用のLintツールです。ルールセットをインストールすることで、ルールに沿って文章の解析をしてくれます。textlintそのものに言語的な縛りはなく、その言語のルールセットさえ作ってしまえば、英語に限らず日本語も解析できます。
textlint/textlint: The pluggable natural language linter for text and markdown.
製作者のazu氏による紹介ページはこちらです。
textlintで日本語の文章をチェックする | Web Scratch
この記事で取り扱う内容
この記事のゴールは次の2つです。
- CLIでtextlintを使う
- atomでtextlintを使う
また、macOS環境を前提としています。windows環境では、CLIで使用するコマンドが異なるため、本記事の全ての内容が当てはまらない場合がありますので、あらかじめご了承ください。
Node.jsが使える環境をつくろう
textlintはNode.jsで動くので、Node.jsのインストールから行います。すでにインストールされている方はこの作業を行う必要はありません。
公式ページからダウンロード&インストールする
Node.jsのWebページにアクセスします。
バージョンは4.0.0以上であれば動作するので、推奨版と最新版、どちらでも大丈夫です。ここでは後ほど使用するnpx
というパッケージがv8.2.0
以上で標準組み込みされているので、最新版をインストールします。 (それ以外のバージョンを使用したいという場合もnpx
を使用することができます。詳しくは使用する時に説明します)
ページ下部のダウンロード用のリンクからパッケージをダウンロードします。ダウンロードが完了したら、インストーラに従ってインストールしましょう。
コマンドをテストする
Node.jsをはじめとした、CLIで動くツールが正しくインストールされているかは、実際にコマンドを実行して確認します。ここからはターミナルでの作業です。
ターミナルを起動する
ターミナルの起動はSpotlightが便利です。⌘キーとSpaceキーを押すとSpotlightが起動し、検索用のフォームが出現するので、そこに「ターミナル」または「terminal.app」のように入力しましょう。入力途中でもターミナルをサジェストされるので、起動します。
nodeコマンドを実行する
ターミナルが起動したら、Node.jsを動かしてみます。
node
コマンドに-v
というオプションをつけて実行すると、Node.jsのバージョンが出力されます。次のコマンドを実行しましょう。
node -v
正しくインストールされている場合、v8.2.0
のように、現在インストールされているバージョンが表示されます。
作業用ディレクトリを作成しよう
引き続きターミナルでの作業を行います。
まずは作業フォルダを作りましょう。今回はホームディレクトリの直下に「textlint-sample」というディレクトリを作り、その中で作業することにします。
ホームディレクトリへ移動する
まずはホームディレクトリへ移動しましょう。
cd
コマンドを実行することで、ホームディレクトリへ移動できます。
cd
移動が完了したことは、ターミナル上のユーザー名をみればわかります。
nayucolony-mbp:~ nayucolony:
のように、自身のコンピュータ名に続いて~
という記号が出力されていたらホームディレクトリにいるということです。もし別のフォルダにいる場合はそのディレクトリが表示されます。例えばホームディレクトリ直下のmusic
ディレクトリにいる場合は次のように出力されます。
nayucolony-mbp:~/music nayucolony:
作業用ディレクトリをつくる
次に、作業用ディレクトリを作ります。Finderから作成してもよいですが、ここではmkdir
コマンドを実行して作成します。mkdir
コマンドはディレクトリを作成するコマンドです。作成したいディレクトリ名を入力して実行しましょう。
mkdir textlint-sample
実行したら、作成できたかどうか確認しましょう。Finder上で確認する場合は⌘ + shift + h
でホームディレクトリを表示できます。もしくはターミナル上でls
コマンドを実行しましょう。ls
コマンドはディレクトリのリストを出力するコマンドです。
ls
出力された中に、先ほど作ったtextlint-sample
があったらOKです。
作業用ディレクトリへ移動する
現在はホームディレクトリで作業しているので、今作った作業ディレクトリへ移動します。先ほどのcd
コマンドに移動したいディレクトリ名をつけることで移動できます。
cd textlint-sample
実行したら、先ほど確認したように、今いるディレクトリが出力されていることを確認します。
nayucolony-mbp:~/textlint-sample nayucolony:
作業用ディレクトリ内でnpmを使おう
textlintやそのルールセットは全て、npmというNode.jsのパッケージ管理システムを使用します。npmではpackage.json
という、使用するパッケージの情報などをまとめたカタログのようなファイルを作成し、それを元に管理していきます。これには規定のフォーマットがありますが、コマンドを使用するとすぐに作れます。
package.jsonをつくる
初期設定用のコマンドnpm init
を実行します。いくつか設定項目があり、一つずつ対話するように答えながら作成していくのですが、ここでは全ての質問にyesで答えるオプションの-y
を使用します。yesで答えた場合、その項目の内容は初期値になります。ここれは全てyesで差し支えありません。次のコマンドを実行します。
npm init -y
package.json
が作業用ディレクトリの直下に作られていることを確認しましょう。Finderでもls
でも構いません。
これで、npmを使う準備ができました。
textlintをインストールしよう
textlintをインストールします。
インストールにはnpm install
コマンドを使います。短縮してnpm i
でも動きますし、なんとnpm isntall
と打ち間違えても同様の動きをします。パッケージをインストールするには、続けてパッケージ名を入力すればOKです。
その際--save-dev
オプションをつけて実行することで、package.json
に情報を書き込めます。もし何もオプションをつけなかった場合、インストールはされるもののpackage.json
に情報は書き込まれません。このファイルは他の作業者とも共有でき、まったく同じパッケージをワンコマンドで全てインストールできるなど、携帯性の高いファイルですので、オプションを使って書き込むようにしましょう。
npm install textlint --save-dev
これで、textlintがインストールされました。
textlintを動かす
では、textlintを動かしてみましょう。
textlintはあくまで作業用フォルダに存在するだけですので、PC全体にインストールされているnode
コマンドは違い、いちいちプログラムファイルの場所を指定して実行する必要があります。作業用フォルダを起点にすると./node_modules/textlint/bin/textlint.js/
のようになりますが、さすがにこれは面倒です。
そこで便利なのがnpx
コマンドです。このコマンドにパッケージ名を渡すことで、いちいちプログラムファイルの場所をたどって参照しなくても起動できます。
npx
コマンドはお使いのNode.jsのバージョンがv8.2.0
以上ならば標準で組み込まれているのでインストールは不要ですが、それ以下の場合はパッケージとしてインストールが必要です。
npm install
コマンドでインストールしましょう。--save-dev
も忘れずに。
npm install npx --save-dev
npxがインストールできたら、npx
コマンドをつかってtextlintを動かしましょう
npx textlint
色々とオプションや使い方が表示されたら成功です。
ルールセットを設定しよう
textlintはそれ単体で文章のチェックができるわけではなく、ルールセットをインストールして初めて解析ができます。これらもnpmを使用してインストールできます。
下記のページにtextlintで使用するルールセットのパッケージ名とその概要がまとまっています。気になったものはどんどん入れて強めに縛りつつ、不要に感じたものを外していくと自分にあったものが作れます。
Collection of textlint rule · textlint/textlint Wiki
また、あらかじめいくつかのルールセットが設定されたプリセットパッケージもあります。
ルールセットをインストールする
今回は日本語向けのプリセットを使います。
textlint-ja/textlint-rule-preset-japanese: textlint rule preset for Japanese.
コマンドを実行してインストールしましょう。
npm install textlint-rule-preset-japanese --save-dev
ルールを有効化する
パッケージをインストールするだけでは、ルールは適用されません。実際に有効化するための設定ファイルを作る必要があります。
作業用ディレクトリ直下に.textlintrc
という名前のファイルを作ります。rc
はrule config
で、ルールに関する設定を行うためのファイルです。これもpackage.json
のように特定のフォーマットが存在しますが、textlint
の機能を使用して簡単に作成できます。--init
オプションをつけて実行しましょう。
npx textlint --init
作られたファイルは次のようになっています。
{
"filters": {},
"rules": {
"preset-japanese": true
}
}
自動でインストールされたルールセットを羅列してくれます。無効にする場合はtrue
をfalse
に書き換えます。
.textlintrcの注意点
注意すべきはファイル名で、頭に.
がついています。
これをつけることで隠しファイルとして扱われます。ソフトウェア開発などで設定ファイルはしばしば隠しファイルとして扱われます。
atomなどのテキストエディタでは検出されますが、Finder上でみている場合、環境によっては.textlintrc
ファイルが表示されない場合があります(隠しファイルですので当たり前といえば当たり前ですね)。表示に切り替えるためのコマンドは⌘ + shift + .
です。
lintをかけてみよう
設定が完了したので、実際にtextlintを使ってみましょう。
まずは、作業用ディレクトリ直下に適当な文章を書きます。ここでは、sample.md
という名前で作ります。文章はなんでもいいですが、エラーを出したいので意図的に組み込まれたルールに反する書き方をしてみましょう。
一文の読点の数が多いと、冗長で読みにくい文章となるため、読点の数を、一定数以下にする、ルールです。
今日は早朝から出発したが、定刻には間に合わなかったが、無事会場に到着した。
かな漢字変換により漢字が多用される傾向がある。しかし漢字の多用が読みにくさをもたらす側面は否定できない。しかし、平仮名が多い文は間延びした印象を与える恐れもある。
ダメな文章が書けたら、textlintをかけます。先ほどの起動コマンドに、ファイルを渡して実行します。
npx textlint ./sample.md
すると、このようなお怒りが出力されます。必要に応じて適宜修正しましょう。
1:43 error 一つの文で"、"を3つ以上使用しています preset-japanese/max-ten
3:12 error 文中に逆接の接続助詞 "が" が二回以上使われています。 preset-japanese/no-doubled-conjunctive-particle-ga
5:20 error 一文に二回以上利用されている助詞 "が" がみつかりました。 preset-japanese/no-doubled-joshi
5:53 error 同じ接続詞が連続して使われています。 preset-japanese/no-doubled-conjunction
✖ 4 problems (4 errors, 0 warnings)
atomで使ってみよう
セッション中のデモではatom上でリアルタイムに指摘されているものをお見せしました。ここではその方法を紹介します。
linterパッケージと、そのプラグインであるlinter-textlintをインストールします。
インストールが完了したら、先ほどの作業用ディレクトリをatomで開いてみましょう。先ほど作成した.textlintrc
とnode_modules
内のルールセットパッケージをもとに指摘してくれます。
これで、保存するたびにlintがかかります。
終わりに
textlintは便利なツールですが、あくまで辞書との照らし合わせによる言葉や文章のチェックにすぎません。正しい文章がかけたとしても、人によってコンテンツの受け取り方が異なることは言うまでもありませんし、情報の信憑性についても書き手自身が気をつけなければなりません。全てを過信するのではなく、しっかりと人の目で読むことも怠らないようにしましょう。
セッション内では、他にも
- Node.jsを使ってWP REST APIで投稿する
- circleCIを使った継続的インテグレーションの構築
などの話題を扱いました。
これらについても、追ってフォロー記事を書いていきますので、お楽しみに。
フロントエンドエンジニア積極採用中
株式会社トゥーアールでは現在フロントエンドエンジニア積極的に採用中です!
興味がある人は採用ページをチェック!!