console.logって打つの面倒だよねって話



## この記事の対象者

エディタ: IntelliJ(2023.3.4 Ultimate Edition)

- TypeScript・JavaScript以外の言語も触ったことがある人
- console.log()をタイピングしているつもりがついうっかりprint()とか書いちゃう人
- そもそもconsole.logってタイピングが長いと思っている人

console.logとか出すんじゃなくてデバッグすればよくね？ってツッコミが来そうですが、
コーディング初心者なんです、慈悲をください〜🔰

# 結論

IntelliJのスニペット機能、 Live Templatesに好きな形で登録して幸せになろう！
スニペットの一例↓(細かい設定は後述)

```typescript
console.log("🚀====$FILENAME$: L: $NO$ ====🚀")
console.log("$VARIABLES$: ", $VARIABLES$)
$END$
```

## 設定方法

1. IntelliJのエディタを開く
2. `Cmd + ,` で設定画面を開く(macの場合)
3. 左側のサイドバーからEditor > Live Templates を選択
4. main画面内からJavaScriptを探して>マークをクリックし、トグルリストを開く
5. logが最初から登録されているのでクリック
6. 好きな形に改造する
7. Apply > OK の順にクリックして完成

1~3まで進むとこんな画面。

![Settings画面](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F2611dcde-4246-4a8f-9fee-b6f1eaedfa2d%2FUntitled.png?table=block&id=f355d3b3-b765-4781-b465-b5624b7ef4d4&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1960&userId=&cache=v2)

4のトグルを開くをすると…

![トグルを開いたSettings画面](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F33a2a656-0e92-453e-aba0-85183b1e7c64%2FUntitled.png?table=block&id=9d995dbf-0192-4c8e-adfa-7a70966d17d1&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1960&userId=&cache=v2)

大体こんな感じになっていると思われます。

5. 下にスクロールするとlog が見つかると思います

![logが表示されている画面](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F08aa4369-948e-460f-91af-859f3fd80a09%2FUntitled.png?table=block&id=7220936a-8e8e-4d2e-b3a3-8d1c209bec8c&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1960&userId=&cache=v2)

6. 下の`Template text`に例えば、

```typescript
console.log("🚀====$FILENAME$: L: $NO$ ====🚀")
console.log("$VARIABLES$: ", $VARIABLES$)
$END$
```

を記述してください。

![入力例](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2Fee9e72a5-3099-45db-ba3a-6a8b727d9b8d%2FUntitled.png?table=block&id=d8d48151-6330-40bd-8c6f-89eee1356260&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1690&userId=&cache=v2)

次に`Edit Variables…`のボタンをクリックしてください。

こんな画面になります。

![Edit Template Variablesの画面](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2Fd3c9a2c4-082b-491b-a103-bef85607780d%2FUntitled.png?table=block&id=5a9d18d5-2389-4eca-bbe9-ecc86d7dbcda&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1690&userId=&cache=v2)

まず`FILENAME`の`Expression`の枠をクリックし、右側の下向き矢印ボタンを押してください。

![Expressionクリック時](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F3d574abe-3c20-40c4-8b54-bb7413f5dd18%2FUntitled.png?table=block&id=be2cfb5b-c65a-4c63-93c3-b149e8983e6e&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1690&userId=&cache=v2)

このリストの中から、
`fileName()`を探して選択してください。
次に、`NO`の`Expression`も`lineNumber()`があるので選択してください。
ここまで設定するとこのような画面になります。

![Expression設定後](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2Fd583b572-b84b-4eab-9de5-308938c65ff2%2FUntitled.png?table=block&id=1b2215cd-b202-469c-88ce-69a1efa3925a&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1690&userId=&cache=v2)

今設定した、`FILENAME`, `NO`は、自動取得したタイミングで入力済みになっていて欲しいので、
一番右側の`Skip if defi…`のところにチェックを入れてください。

![checked](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F10194540-e743-4142-a800-02df55c65aec%2FUntitled.png?table=block&id=c77cd92f-6ac1-485e-899b-479b1106a0c5&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1690&userId=&cache=v2)

7. OKを押したら、後はApply > OK で設定完了です

---

## 使い方・補足

呼び出すときは、`Abbreviation`で指定した名称から呼び出すことが出来ます。
今回の設定では、log のままなので、log > Tabで呼び出せるはずです。

![サジェスト画面](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F3306d8d7-46f0-449d-9d7d-89e9971dd449%2FUntitled.png?table=block&id=040feda5-0ba7-479d-82c9-c2abe848fe85&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1200&userId=&cache=v2)

呼び出すと、

ファイル名と行数が自動的に取得されて入力されます。

![選択後](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F840e2804-fe1d-468b-903b-57c810e04767%2FUntitled.png?table=block&id=87f759f5-9303-41b8-b9de-45cfc41b4078&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1200&userId=&cache=v2)

(何回か使用している感じだと行数の取得たまにバグって違う数字出すこともあるかも…)

何個かのファイルまたがって同時に動かしたり、

何箇所も`console.log` を出したりしたときに、
どれがどのログか分からなくならないように、行数も出してあげたほうが便利じゃないかな？と勝手に思っています。

で、上のスクショ内でカーソルがあたっている`$VARIABLES$`の部分ですが、
試しに`Test`と入力すると、
同じ`$VARIABLES$`で指定しているもう一箇所の場所にも同時に同じ文字が入力されます(べんり〜)。

![同時に入力されている状態](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2Fea1efffc-df52-47eb-883d-a50eb843570b%2FUntitled.png?table=block&id=6cd629f2-a644-4a34-b4ed-8cf0e5d02d71&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1200&userId=&cache=v2)

決定したければEnterを押すと、`$END$`で指定した場所にカーソルが移動してくれます。

![Enterで決定後のカーソル位置](https://bitter-snowdrop-03e.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fc1a7fda7-198a-466a-8dd2-0bad57d3f317%2F788c9ff0-bb29-46fa-bf9a-fa2b665bc15c%2FUntitled.png?table=block&id=33fd074a-a960-4c0c-b2fe-29d0ddb2cba7&spaceId=c1a7fda7-198a-466a-8dd2-0bad57d3f317&width=1200&userId=&cache=v2)

色々使いこなしたらもっと楽にコーディングできると思うので、
是非いろいろ試してみてください。

これ登録するとマジ便利！っていうスニペットがあったら是非教えて下さいm(_ _)m

最後に、
何で🚀の絵文字入ってるの？って思った人がいると思うのでムダに白状しておくと、
VSCodeで行数含めてconsole.logをパっと出してくれる拡張機能を使っていた人がいて、
その拡張機能が🚀の絵文字をインサートしていたのでそれに倣って設定してみました。

横道にそれてしまったのでこのへんで。

皆様、良きスニペットライフを！