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

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

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

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

VisualStatioCode

Visual Stadio Code: Code editing.Redefined.

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

目次

emmetの使い方

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

emmet

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ー> 基本機能ー> ユーザースニペットに進みます。

UserSnippet

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

python.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と打つとすぐに呼び出せます。

SampleSnippet
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>"
    },
}

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

まとめ

今回は効率よくコードを書くための方法であるemmetとsnippetについて紹介しましたが、これらが使えるだけで作業量低下による学習効率UPであったり、モチベーションの維持にも繋がります。

特にemmetは最初は慣れが必要かもしれませんが、ぜひ使いこなせるように練習してみてください。

本気でプログラミングを身につけるならCodeShip

CodeShipは業界内で唯一「無償延長保証制度」によるスキル修得を保証しているプログラミングスクールです。
独学での挫折や未経験からでも、スタートアップベンチャーや日系・外資の大手WEB系企業まで幅広くエンジニアを輩出する教育実績を残しています。

勉強目的ごとに用意された6つの学習コース&オリジナルのポートフォリオ開発実戦経験豊富な現役エンジニアキャリアコンサルタントがあなたの「開発スキル修得」と「キャリアプランニング」をサポートします

さらに、期間内であれば選択した以外のコースのカリキュラムを受講可能。
同じ値段で、頑張った分だけ勉強できる「勉強し放題」はCodeShipだけ。

まずはご自身のプログラミング学習やキャリアプランについて、無料個別相談会にてお気軽にご相談ください。


おすすめ記事