みなさんこんにちは、ALH開発事業部のREIYAです。
今回はスニペットについてお話していきます。

みんな大好きVSCodeだけでなく、多くのエディタに備わっている or 追加できる機能です。
こういうやつです。(以下はvimでのスクショ)

スニペットとは

あらかじめ作っておいたコードを、瞬時に呼び出せる

というもの。しかしただのコピペではなく、いろいろカスタムできて柔軟なので、むっちゃ便利。
今回は、用途に合わせてスニペットを充実させておいて、爆速コーディングしようという話。

どんなものがいい？

毎回書くけどほぼ同じようなものを作りましょう。
あとは肌に合ったものを作れば良い。だいたい最初は`for`や`if`を作りますね。
当たり前ですが言語ごとに設定ファイルを分けれます。

あとものによって、jsonで書いたり、独自の書き方があったりします。
VSCodeはjsonです。
例えばこんなもの。

VSCode-javascript.json

"おなまえ": {
  "prefix": "for",
  "body": [
      "for (i=$1; i<$2; 略)"
  ]
},
...

詳しい書き方等はこちらを参照されたし。

また、vimでは神スニペットプラグインでる`SirVer/ultisnips`があります。

設定はこんな感じです。

また、いちいち自分で用意するの面倒な人向けに、あらかじめだいたいのスニペットを作りまくっておいてくれてるレポもあります。

説明と作り方

こちらの記事にとても詳しく説明されていますのでご覧ください。

展開後に自由に値決めたいタブストップ、デフォルト値、ミラー。
これらが便利にしてくれていますが、注意もあります。トリガがかぶったりするパターンです。
例えば
vim

snippet test "テスト" biwA
let ${1:v} = 0;
endsnippet

snippet test2 "テスト2" biwA
let ${1:v2} = 0;
endsnippet

こんな2つのスニペットを作ったとして、`test`と入力すれば展開されますが
`biwA`の`A`はAutoのAですので、`test2`は一生呼ばれません。
それどころか、展開後に`let v = `の`v`のタブストップに`test`と入力すると、またそこで展開されてしまい事故ります。

よって、`よく使う短い単語`をトリガにすべきではありません。
または、Autoで展開されないように設定すべきです。

こんなのがいい例
vim

# iでint変数を宣言するスニペット(Autoで展開せず、入力補完で選択したら展開)
snippet i "int変数" biw
int ${1:val} = ${2:0};
endsnippet

# if文(Autoで展開)
snippet if "if文" biwA
if (${1:condition}) {
    ${2:statement}
}
endsnippet

他にも、もっとまとめてしまおうという作り方もあります。
vim

snippet vv "整数を受け取り、連番の配列に対してチェーン操作" biwA
${1:val} = ${2:input_integer};
[...Array($1)].map((_,i)=>i${3+0})
    .map(v => v${4:do_something})
    .filter(v => v${5:condition})
    .forEach((v, i) => ${5:some})
endsnippet

が、まぁここまでやり過ぎると逆に使いにくかったりしますので、状況とお好みで使い分けるとよし。
基本的には最小単位を作っておいた上で、ある程度まとまったものが欲しくなったら作ると良い。

あるといいもの

1️⃣他の言語ならあるのに。。。系

例えばJavaのstreamではIntStreamやdistinct
終端操作にsumがありますが、JSにはありません。
javascript

snippet intstream "sequence num array" biwA
;[...Array(${1:length})].map((_,i)=>i+1)
endsnippet

snippet distinct "distinct" biwA
${1:uq}=[...new Set(${2:array})]
endsnippet

snippet sum "reduce sum" biwA
reduce((x,y)=>x+y)
endsnippet

2️⃣ライブラリチックなもの系

書くのがめんどいけど必要な関数や、sortどっちだっけ？となる場合など
javascript

// 2点間の距離
snippet distance "calc distance" biw
D=(p1,p2)=>Math.sqrt((p1[0]-p2[0])**2+(p1[1]-p2[1])**2)
endsnippet

snippet sorta "ASC sort" biwA
sort((x,y)=>x-y)
endsnippet

snippet sortd "DESC sort" biwA
sort((x,y)=>y-x)
endsnippet

3️⃣テンプレート系

そもそも新規ファイル作成時に作ってあって欲しい系のもの。
テンプレートを作るプラグインも別で存在するが、スニペットでも再現可能
javascript

snippet xxx "Template" biwA
import * as name from "";

(($, $$) => {
    // TODO wip
    ${1:some}
}, ($, $$))
endsnippet

最後に

私はよくJavaを開発業務で使いますが、毎回`.filter(v => )`と書いていたりしたのでスニペット化しました。
けど、つくったのが昔すぎてどんな展開してくれるか忘れて怖くて使わなくなったりしたので説明はしっかり書いておきましょう。

ALHについて知る

↓ ↓ ↓　採用サイトはこちら　↓ ↓ ↓ 

↓ ↓ ↓　コーポレートサイトはこちら　↓ ↓ ↓

↓ ↓ ↓　もっとALHについて知りたい？　↓ ↓ ↓