タイピングが遅い人必見！EmmetとSnippetで簡単高速コーディング

皆さんはコードを書くときにコード補完機能を使っているでしょうか。
コード補完機能は言わずもがな、コードを素早く書くためには欠かすことができません。

今回はその中でも非常に便利な機能であるemmetとsnippetについて紹介します。
使えるようになって気持ちよくコーディングライフを送りましょう。

この記事ではIDEにVisual Stadio Codeを使って解説します。

Visual Stadio Code: Code editing.Redefined.

他のエディタやIDEを使っている方は今回説明する方法とは違ったり、使えない場合があります。
自分の使用しているものの公式ドキュメントを確認していただくようお願いします。

emmetの使い方

emmetとはHTMLをより効率よく書くための機能です。
プラグインであるため本来はインストールなどが必要ですが、VScodeではデフォルトで使用することができます。

Emmet — the essential toolkit for web-developers

これを使うことでネストの複雑なHTMLをたったの一行で書くことが可能です。

書き方は非常に簡単です。
例えば<header>の中に文章を入れて使いたい場合は以下のように記述します。

header>{this is header tag!!}

<header>this is header tag!!</header>

これで残りの<header>は省略できる上に{}の文章がコンテンツとして入ります。

また<div>タグを使いclassを定義する場合や固有のidを入れる場合は以下のように記述します。

.div-container
#id-container

<div class="div-container"></div>
<div id="id-container"></div>

要素は+で記述することでその後ろに同じDOMの階層で記述できます。
この辺はセレクタでの考え方と同じです。

また、同じものであれば*で量産できます。

ul>li*4>h1+p

<ul>
    <li>
        <h1></h1>
        <p></p>
    </li>
    <li>
        <h1></h1>
        <p></p>
    </li>
    <li>
        <h1></h1>
        <p></p>
    </li>
    <li>
        <h1></h1>
        <p></p>
    </li>
</ul>

同じ構造があれば$で通し番号を振る事ができます。

header>nav>ul>li*4>a>{Navigation$}

<header>
    <nav>
        <ul>
            <li><a href="">Navigation1</a></li>
            <li><a href="">Navigation2</a></li>
            <li><a href="">Navigation3</a></li>
            <li><a href="">Navigation4</a></li>
        </ul>
    </nav>
</header>

もう一度ひとつ上の階層に戻りたい場合もあるかもしれません。
その場合は^を使います。

div>h1+p^ul>li*4

<div>
    <h1></h1>
    <p></p>
</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

以上でだいたい主要なものは説明がつきました。
他の機能については別の記事で調べてみるといいでしょう。

頭の中でHTML構造がイメージできていれば、このように素早く書くことができることをご理解頂けたでしょうか。

snippetの使い方

続いてsnippetについて説明します。

snippetとは自分でカスタマイズすることのできるコード補完機能です。
この機能もVScodeでは使用することができます。

事前に自分のよく使うものを登録しておけば、いつも使うのに忘れてしまうコードをたったの数文字で呼び出すことが可能です。
この機能のおかげで、「あのコードってどうやって書くんだっけ？」ということから開放してくれます。

VScodeでPythonのスニペットを作成する方法を例に説明していきます。
VScodeのメニューからCodeー> 基本機能ー> ユーザースニペットに進みます。

検索画面が表示されるのでPythonと入力するとpython.jsonというjsonファイルが開けると思います。

ここに登録すれば再起動することなしにすぐに自前のスニペットを使用することができます。
ただし、使い方はそこに書かれている例のようにJson形式で書く必要があります。

{
"Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
}

これらの意味は以下のとおりです。

該当部分	説明
“Print to console”	snippetの名前
“prefix”	snippetを呼び出すときのワード
“body”	呼び出す内容、\$1、\$2で記入するカーソルを合わせる
“description”	snippetの説明

説明だけでは分かりづらいかもしれません。
試しに一つ登録してみましょう。
python.jsonに以下のように記述します。

{
"main": {
        "prefix": "main",
        "body": [
            "if __name__ == '__main__':",
            "    ${1:pass}"
        ],
        "description": "<Snipet description>"
    },
}

pythonファイルのmainと打つとすぐに呼び出せます。

if __name__ == '__main__':
    pass # この部分は${1:pass}と書いてあるので好きな文字を入力できます

非常に便利なのがご理解いただけでしょうか。
他にも例えば、競技プログラミングで忘れやすい標準入力を登録しておくと便利かもしれません。

{
    // atcoder
    "mapintinputsplit": {
        "prefix": "mpii",
        "body": [
            "map(int, input().split())"
        ],
        "description": "<Snipet description>"
    },
    "insplitforinrange": {
        "prefix": "ispfor",
        "body": [
            "[input().split() for _ in range(${1:n})]"
        ],
        "description": "<Snipet description>"
    },
}

このように自分好みにカスタマイズしてみてください。