快適なMarkdown編集環境

はじめに

これは、DMM.com #1 Advent Calendar 2017 の15日目の記事で、担当は @daichiiiです。

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

先日の記事は、 @mesh1nekoさんの ブラウザの自動操作で手軽さを追求したらAWS LambdaとPhantomJSの組み合わせにたどり着いた でした。

DMM.com #2 Advent Calendar もぜひご覧になってください。

この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

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

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

markdown-scroll-sync

markdown-scroll-sync

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

私は 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 を apm またはSettings → Installからインストールします。

$ apm install linter-textlint

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

校正のルール

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

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

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

• textlint-rule-max-ten
  • 一文に利用できる、の数を制限するtextlintルール
• textlint-rule-no-mix-dearu-desumasu
  • 敬体（ですます調）と常体（である調）の混在をチェックするtextlintルール
• textlint-rule-preset-ja-technical-writing
  • 技術文書向けのtextlintルール
• textlint-rule-preset-jtf-style
  • JTF日本語標準スタイルガイド（翻訳用）が適用されているルール

細かいルールのことは、各リポジトリを参照してください。
textlint-ja communityには他のルールもありますので、ぜひチェックしてみてください。

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

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

# 校正ルールのインストール
$ 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 はこんな感じになってるはず。

{
  ...
  "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）

{
    "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テストについてです。