マルチカーソルで、VSCodeのスニペットをもっと便利に。

## ある日の弊社
社長「お〜い、やめ太郎」

ワイ「なんでっか、社長？」

社長「今度作るショッピングサイトの件なんやけど」
社長「**ドラッグ＆ドロップ**機能を実装することになったから」
社長「それをやめ太郎にお願いしたいんや」
社長「やめ太郎、やったことあるか？」

ワイ「どどど**ドラッグ！？**」
ワイ「あるわけないやないですか・・・！」
ワイ「**そんなもの**販売して万が一・・・」

ハスケル子「やめ太郎さん、**違いますよ**」
ハスケル子「**ドラッグ＆ドロップ**でしょ」
ハスケル子「マウスで掴んで移動させるやつです」

ワイ「ああ、そっちか」

社長「やめ太郎、できるか？」

ワイ「もちろんですわ」
ワイ「前職でも**ドラッグやってました**から、余裕ですわ」

社長「よ、よろしく頼むわ」

## レッツJavaScript
ワイ「確か**ドラッグ＆ドロップ**を実装するときは」
ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして」
ワイ「その座標の数値を元に、DIV要素なり画像なりを移動させてやればええんや」

ワイ「せやからまずは、こうやな」

```javascript
// 「マウスが動くたびに実行したい関数」を作成。
const func = (e) => {
  // マウスの横座標・縦座標を取得。
  const yoko = e.pageX;
  const tate = e.pageY;

  // それをコンソールに表示。
  console.log(yoko);
  console.log(tate);
};

// ユーザがマウスを動かすたびにfunc関数が実行されるように登録。
window.addEventListener('mousemove', func);

```

ワイ「これでconsoleを見てみよか」
ワイ「ちゃんとマウスの座標を取得できとるかな」

<img width="286" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/c32d3c4d-2b16-8c1c-9c52-19424d2a2275.png">

ワイ「おお、できとるできとる」

## しかし、なんか分かりづらい
ワイ「どれが**縦座標**でどれが**横座標**の数値なのか分からんな・・・」
ワイ「アカン、この案件、**ギブアップ**や・・・」

ハスケル子「（**もうギブアップ！？**）」
ハスケル子「こ、こうすればどうですか？」

```javascript
  console.log('yoko:', yoko);
  console.log('tate:', tate);
```

ハスケル子「これでconsoleを見てみると」

<img width="286" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/09511de1-7487-0d8f-b282-b5c433d99b7f.png">

ハスケル子「ほら」

ワイ「おお、見やすいな」
ワイ「変数名も一緒に出力するんやな」

## 引数2つ渡せるんやね
ワイ「ていうか、`console.log()`って**引数2つ渡せる**んやね」

ハスケル子「はい」
ハスケル子「というか**何個でも渡せますよ**」

ワイ「そ、そうなんか・・・！」
ワイ「知らなんだわ」
ワイ「今まで・・・」

```javascript
console.log('yoko: ' + yoko);
```

ワイ「↑こんな感じで**文字列として連結して**出力しとったわ」

ハスケル子「あるあるですね」

## でも、ちょっと面倒くさい
ワイ「でも、ちょっと・・・」

```javascript:javascript.json
  console.log('yoko:', yoko);
```

ワイ「↑これをタイピングすんのが面倒やなぁ。。。」

ハスケル子「じゃあ、いい**スニペット**ありますよ」

ワイ「**巣にペット！？**」
ワイ「せっかく飼った**ペット**を、**巣に帰して**しまうん・・・？」

ハスケル子「まず、VSCodeの画面左下の歯車マークをクリックして」

ワイ「（完全スルーやん・・・）」

ハスケル子「**ユーザースニペット**を選択します」

<img width="333" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/a4c8a804-ff6b-b08f-f264-6a532a6adf61.png" width="400"> 

ハスケル子「すると言語一覧が表示されるので」
ハスケル子「**`javascript.json`**`(JavaScript)`ってやつを選択します」
ハスケル子「あとはJSON形式で書けばいいだけなので」

```json:javascript.json
{
  "コンソールログのやつ": {
    "prefix": "cl",
    "body": "console.log('${1:xxx}:', ${1:xxx});",
    "description": "コンソールログをいい感じにするやつ"
  }
}
```

ハスケル子「↑こうですね」
ハスケル子「スニペットの名前は何でもいいので、**"コンソールログのやつ"**にして」
ハスケル子「**description**（説明書き）も適当に、**"コンソールログをいい感じにするやつ"**にしておきましょう」
ハスケル子「**`"prefix": "cl"`**っていうのは」

> **`cl`**って打ったらワードを**展開**してくれや！

ハスケル子「って意味です」

ハスケル子「で、その**展開してほしいワード**を**body**に書くんです」
ハスケル子「もし**複数行**のスニペットを作りたい場合は**body**を配列として書きます」

```json:javascript.json
{
  "コンソールログのやつ": {
    "prefix": "cl",
    "body": "console.log('${1:xxx}:', ${1:xxx});",
    "description": "コンソールログをいい感じにするやつ"
  },
  "複数行のスニペット": {
    "prefix": "multi",
    "body": [
      "1行目",
      "2行目",
      "3行目",
    ]
  }
}
```

ハスケル子「↑こうですね」
ハスケル子「**description**は無くても動きます」

## それで、何が便利なん？
ワイ「なるほどな〜」
ワイ「ほんで、このスニペット何が便利なん？」

ハスケル子「スニペットの**body**の中に、`${1:xxx}`と書くことで」
ハスケル子「スニペット展開後の**デフォルトカーソル位置**を指定してるんですけど」
ハスケル子「それを**マルチカーソル**にしてるところがちょっと便利ですよ」
ハスケル子「見ててくださいね・・・！」

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/9957094e-3dec-003f-2e7a-2ec0ad1e2654.gif)


ハスケル子「まず、`yoko`という変数名を選択して、コピーします」
ハスケル子「そして`console.log()`したい場所にカーソルを移動して」
ハスケル「`cl`とタイプして`Tabキー`を押します」
ハスケル子「するとスニペットが展開されるうえに、2箇所の`xxx`が選択されている状態になるので」
ハスケル子「あとは、さっきコピーした`yoko`をペーストするだけです」

ワイ「おお・・・」
ワイ「ええやん・・・！」

ワイ「何度も`console.log('yoko:', yoko);`って打つの」
ワイ「**地味に嫌**やもんな・・・」

## そして夕方
ワイ「ハスケル子ちゃん」
ワイ「今日も便利なものを教えてくれてありがとうやで」

ハスケル子「どういたしまして」

ワイ「あー、でも」
ワイ「今日も新しいこといっぱい覚えたから、疲れたわぁ・・・」

ハスケル子「楽しいけど疲れますよね」
ハスケル子「無理しすぎると体に毒だから、今日はもう上がったらいいんじゃないですか」

ワイ「でも、まだ定時まで1時間以上あるし・・・」

ハスケル子「やめ太郎さん」
ハスケル子「**今日8時間働くこと**と」
ハスケル子「**この先何年も健康に働くこと**」
ハスケル子「どっちが大事ですか・・・？」

ワイ「ハ・・・ハスケル子ちゃん・・・」

ハスケル子「今日は上がってください」

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/1ce32327-14a1-c7b6-dcb0-6e323e827c8a.png" width="400">

ワイ「おおきにやで・・・ハスケル子ちゃん・・・！！！」

社長「（**インターン**なのに勝手に社員を帰らさんといて・・・）」

**〜おしまい〜**