快適なMarkdown編集環境

## はじめに
これは、[DMM.com #1 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/dmm) の15日目の記事で、担当は @daichiiiです。

普段はフロントエンド開発をしていて、`Nuxt.js` や `AWS` を扱っています。

先日の記事は、 @mesh1nekoさんの [ブラウザの自動操作で手軽さを追求したらAWS LambdaとPhantomJSの組み合わせにたどり着いた](https://qiita.com/mesh1neko/items/a1a38f38c216baf5e284) でした。

[DMM.com #2 Advent Calendar](https://qiita.com/advent-calendar/2017/dmm2) もぜひご覧になってください。

### このAdvent Calendarについて
最近、社内の資料作成やLTネタ、記事執筆などに `Markdown` を活用しています。
快適なローカル編集環境を整備したので、紹介させてください。

## tl;dr
- **`Markdwon` を書くのはAtomが良い**
    - おすすめパッケージは、 `document-outline`, `markdown-scroll-sync`,  `linter-textlint`
- **文章の校正は `textlint` にまかせる**

## 目次
- なぜAtomなのか
    - 必要最低限なパッケージの紹介
        - `document-outline`
        - `markdown-scroll-sync`
- 文章の校正をする
    - `textlint` をインストールする
    - 校正のルール
        - この記事で使われている校正ルール
        - 校正ルールのインストール
        - 校正ルールの設定
- まとめ

## なぜAtomなのか
`Markdown Preview` を支援する周辺パッケージが非常に優秀です。

以前から「Atom自体重すぎて使い物にならない」なんて声がありましたが、最近のメジャーアップデートによりかなり改善しています。

必要なパッケージだけ導入すれば軽快に動作し、`Markdown` 編集作業をより快適にしてくれるはずです。
今回は、 Atomで `Markdown` を書いていく際に必要最低限のパッケージを紹介します。

### 必要最低限なパッケージの紹介
`Markdown` の文章整形や、入力支援など行うパッケージは紹介しません。
慣れてくれば導入も必要ないでしょうし、お好みの物を使ってください。

#### `document-outline`
[document-outline](https://atom.io/packages/document-outline)

見出しをツリー状に表示するパッケージです。

私は、文章構造全体を把握しながら編集・翻訳作業をすることが多いので、
アウトライン周りが整備されると文章がとたんに書きやすくなるのでとても捗ります。

#### `markdown-scroll-sync`
[markdown-scroll-sync](https://atom.io/packages/markdown-scroll-sync)

`Markdown Preview` とエディタ部分のスクロールを同期させます。

![markdown-scroll-sync1.gif](https://qiita-image-store.s3.amazonaws.com/0/136512/242a8cbf-88de-c634-ea05-ac6e72f49c03.gif)

私は `Markdown Preview` を確認しながら、作業をすることが多いので重宝しています。
画像を挿入している場合に、同期がずれてしまうことなどありますが特段気にならないレベル。

## 文章の校正をする
私は `Markdown` での文章校正に、`textlint` を使用しています。
ここからは、Atomで `textlint` の設定方法をご紹介していきます。

### `textlint` をインストールする
`node.js` の実行環境がある前提で書いていきます。
なければよしなにインストールしてください。

ちなみに、`textlint` の最低動作環境は下記です。

 - Node.js 4.0.0 +
 - npm 2.0.0 +

プロジェクトのディレクトリ上で `textlint` をインストールします。
もし、`package.json` がなければ `npm init` してください。

```
$ npm init -yes
```

```
$ npm install -D textlint
```

さらに、 Atomの [linter-textlint](https://atom.io/packages/linter-textlint) を `apm` またはSettings → Installからインストールします。

```
$ apm install linter-textlint
```

インストールできました。よかったですね。

### 校正のルール
校正のルールがないと何もLintされません。
以下は、インストールと設定の説明です。

#### この記事で使われている校正ルール

この記事で使われている、校正ルールは下記になります。

* [textlint-rule-max-ten](https://github.com/textlint-ja/textlint-rule-max-ten)
    * 一文に利用できる`、`の数を制限するtextlintルール
* [textlint-rule-no-mix-dearu-desumasu](https://github.com/textlint-ja/textlint-rule-no-mix-dearu-desumasu)
    * 敬体（ですます調）と常体（である調）の混在をチェックするtextlintルール
* [textlint-rule-preset-ja-technical-writing](https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing)
    * 技術文書向けのtextlintルール
* [textlint-rule-preset-jtf-style](https://github.com/textlint-ja/textlint-rule-preset-JTF-style)
    * [JTF日本語標準スタイルガイド（翻訳用）](https://www.jtf.jp/jp/style_guide/styleguide_top.html)が適用されているルール

細かいルールのことは、各リポジトリを参照してください。
[textlint-ja community](https://github.com/textlint-ja)には他のルールもありますので、ぜひチェックしてみてください。


#### 校正ルールのインストール

前項のルールをインストールします。

```
# 校正ルールのインストール
$ npm install -D textlint-rule-max-ten textlint-rule-no-mix-dearu-desumasu textlint-rule-preset-ja-technical-writing textlint-rule-preset-jtf-style
```
インストールできました。よかったですね。

プロジェクトのリポジトリの `package.json` はこんな感じになってるはず。

```json:package.json
{
  ...
  "devDependencies": {
    "textlint": "^9.1.1",
    "textlint-rule-max-ten": "^2.0.3",
    "textlint-rule-no-mix-dearu-desumasu": "^3.0.3",
    "textlint-rule-preset-ja-technical-writing": "^2.0.0",
    "textlint-rule-preset-jtf-style": "^2.3.1"
  }
}
```

#### 校正ルールの設定

プロジェクトのディレクトリに、`.textlintrc` ファイルを作ります。
これは `textlint` の設定ファイルで、このファイルに適用する校正ルールを記述していきます。（[fileformat](https://github.com/textlint/textlint#textlintrc)）

```json:.textlintrc
{
    "rules": {
        "max-ten": {
            "max": 3
        },
        "preset-jtf-style": true,
        "no-mix-dearu-desumasu": true,
        "preset-ja-technical-writing": true
    }
}
```
これで、`Markdown` を書いていく環境が整いました。

さらに、`.yml`ファイルでオリジナルの辞書登録など拡張できるのですが、ローカルの編集環境なのでそこまでしてません。

元気があれば、その部分を加筆します。

## まとめ
Atomパッケージは `Markdown Preview` を支援することに特化したものが多く、快適な環境ができました。

Qiitaで記事を書く場合など捗るので、ぜひ皆さん思い思い校正ルールの環境を整備してみてください。

明日は、 @mt0mさんのE2Eテストについてです。