# コードスニペットの管理方法や命名規則について

URL: https://webrandum.net/code-snippet/
公開日: 2022-04-25
更新日: 2022-04-25
カテゴリー: コーディング
タグ: Alfred, Dash, スニペット
出典: Webrandum（著者: サイトウ マサカズ）

## この記事の要約

- 先頭に「`js`」や「`html`」「`css`」などの接頭辞をつけて検索しやすくする

- 最後に「`;;`」や「`]\`」「`jj`」など接尾辞を付けて終了だと分かるようにする

- 単語の区切りは「`_`」か「`-`」かあらかじめ決めて統一する

このブログでは過去にスニペットに関して何度か取り上げてきました。

今回はスニペットの中でも、コーディング時に使用する「コードスニペット」にフォーカスして、自分なりのルールや使い方を改めて整理します。

## スニペットの種類

### テキストスニペット

「メールのテンプレート」「課題展開時に使う文章」など、ある程度決まったフォーマットをスニペットとして保存しておきつつ、必要に応じて呼び出して使います。

- 毎回考えたり、入力する時間が削減できる

- 手入力によるタイプミス・抜け漏れが減る

- 決まったフォーマットで来た方が受け取る側もラク

### コードスニペット

コーディングに必要なコードを保存しておきつつ、コーディング時に必要に応じて呼び出して使います。

- 毎回考えたり、入力する時間が削減できる

- 同じような内容を何度も手入力したり、前の内容を探して毎回コピペする手間と時間が減る

- スニペットアプリでの呼び出し方法さえ覚えていれば、その内容は覚えてなくてもよくなる

- ド忘れしたときも、断片的に覚えていれば呼び出せる Googleで検索し直すムダがなくなる

- 1度作り込んでテストもしたコードであれば、バグも生み出しにくい

### 短文の入力

おまけですが「単語登録」も入力を補助してくれる強力な機能です。

いまは[ATOK](https://webrandum.net/atok-word-registration/)を使っていて、ドンドン単語を登録していっているのと、ちょっとした短文レベルの入力であれば変換で出てくるようにしています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2020/02/eyecatch-22.jpg)日常の入力をもっとラクにするためのATOK 単語登録周りの設定https://webrandum.net/atok-word-registrationATOKに限らず、日々の入力をラクで正確にするためには単語登録が不可欠です。 サービス名や取引している会社名を正確に入力できる 信用につながる（あえて間違った表記を入力する理由がない） 正確な表記で変換されるように登録しておけば、表記のことを気にせずに本来伝えるべき「内容」に脳のリソースを割ける 略語を登録しておくことで、よく使う単語をすばやく入力できるこのように、単語登録にはコツコツと確実に積み重なっていくメリットがあります。今回はATOKの辞書登録に関する内容と、知っておくと良いポイント...](https://webrandum.net/atok-word-registration)

よく使う短文を組み合わせていって骨組みを作り、あとは状況に合わせて入力（会社名やサービス名も単語登録で間違いのないように変換）すると早く・キレイに文章が作れます。

## スニペットアプリの選定

自分の場合、コードスニペットは[Dash](https://webrandum.net/dash6/)を使用しています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2021/04/eyecatch-3.jpg)スニペットとしてもドキュメント検索としても使える「Dash 6」でコードや定型文を...https://webrandum.net/dash6スニペットとしてもドキュメント検索としても使えるMacユーザーにオススメのアプリ、「Dash」ですが、過去に記事にしたことがあります。ただ、時間も経ってメジャーアップデートもあったので、今回改めてまとめ直します。スニペットアプリは必須「スニペット（snippet）」は断片という意味があり、何度も再利用して繰り返し使うコードや定型文のことです。スニペット(英語: snippet)とは、「断片」という意味で、再利用可能なソースコード、マシンコード、またはテキストの小さな領域を表すプログラミング用語である。スニペット - Wik...](https://webrandum.net/dash6)

ちなみにテキストスニペットは[Alfred](https://webrandum.net/alfred4-snippets/)という風に使い分けています。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2019/06/eyecatch-17.jpg)Alfred 4でスニペットを作成して使用する方法https://webrandum.net/alfred4-snippets自分はDashというスニペットアプリを使っていたり、Keyboard Maestroでスニペットを展開するマクロを作っていたりもしますが、Alfredでもスニペットの作成は可能です。使い分けが難しいのですが、今回はAlfredのスニペット機能についてまとめてみます。スニペット機能の使い方スニペット機能は［環境設定］→［Features］→［Viewer Hotkey］で設定したキーを入力してスニペットの画面を出します（デフォルトでは何も設定されていません）。もしクリップボードの設定で「Show "All Snippets" at top of Clipboard History」に...](https://webrandum.net/alfred4-snippets)

Alfredはスニペットの追加がしやすく、クリップボード履歴でcommand + Sを押せば、すぐにスニペット登録画面が起ち上がります。

「そういえばこれ、何度もコピペしてるな」と気づいたタイミングですぐ登録ができます。

呼び出しに関してもAlfredは使い慣れていて使い勝手も良いです。

ただ、一方でコードハイライトに対応していなかったりなど、コードスニペットとしては万能ではありません。

そこで、コードスニペットに関してはドキュメント検索もできるDashに任せることにしました。

また、スニペット検索時にテキストスニペット用に接頭辞を付けたりするのが面倒ですし、そこからのカテゴリ分けも面倒です。

テキストはAlfredでコードはDashとしておけば、トリガー用のショートカットキーを押す時点でフィルタになるので便利です。

## コードスニペットのルール

Dash 5はいくつもスニペットを登録していくのがラクだったのですが、Dash 6からは一気に登録していくのが面倒なので最初は苦労しそうです。

（タグを選択して新規スニペット追加をすると、自動でタグも付いていた）

いっぱい登録したあとに修正するのは面倒なので、最初にある程度しっかりルールを決めておきましょう。

### 接頭辞

最初にどの言語なのか分かるように接頭辞を入れておくと、検索するときに絞り込みがしやすくなります。

- js_：JavaScript

- html_：HTML

- css_：CSS

- php_：PHP

### 接尾辞

接尾辞を入れておくと、スニペット入力の終了を明示的に表せます。

下記のような2つのスニペットを登録する場合、2つ目のスニペットは発火できなくなってしまいます。

「js_foreach」を発火させようとしても、js_forと途中まで入力したタイミングで「js_for」の方が発火してしまうからです。

1. 「js_for」
2. 「js_foreach」

接尾辞を入れておくとこのような問題が起こらなくなります。

1. 「js_for;;」
2. 「js_foreach;;」

「js_for」を発火させたい場合は入力後に「;;」を入力すれば発火しますし、「js_foreach」に干渉しません。

接尾辞はいろいろありますが、下記のポイントに注意して決めましょう

- 干渉しないような文字にする

- 2文字以上が理想（1文字だと意図しない発火の可能性がある）

- できればホームポジションからあまり動かさないで入力できる文字

一時期、US配列のenter上の「`]\`」にしていましたが、ホームポジションから離れているので現在は`;;`にしています。

他にもホームポジションで常に人差し指がある「`jj`」も候補でしたが、やはり文字より記号の方が分かりやすいです。

Dash公式のオススメは「````」みたいですが、チルダもUS配列の左上端なので「`;;`」にしました。

ホームポジションから動かさずに、右手薬指で入力します。

### 単語の区切り

単語の区切りは完全に好みですが「`-`（ハイフン）」か「`_`（アンダースコア）」で統一するようにしましょう。

ちなみに、ハイフンの場合はダブルクリックで単語が選択できますが、アンダースコアの場合はダブルクリックで全選択になるので、この辺りも考慮しておきましょう。

自分の場合は単語の区切りはアンダースコアの方が多いので、慣れているアンダースコアを使うようにしています。