Atomは、モダンなエディタに搭載されている機能はだいたい網羅している。便利な機能がいくつもあるのだが、なかでも魅力的なのはスニペットだ。

スニペットは登録した文字列の短縮入力のような機能で、同じコードを繰り返し書くケースなどで有効である。そして、Atomはこのスニペットの登録作業が非常に簡単だ。

スニペットとは?

スニペットを登録するには、まずメニューからスニペットを選択する。すると次のようなファイルが開く。これにスニペット設定を追加すればよい。

スニペットの編集

変更する前に、試しにスニペットを使ってみよう。

snipと入力すると、左画面のように候補ウィンドウが表示される。ここでタブを押すと右画面のようなCSON(CoffeeScript Object Notation)コードが展開される。これがスニペット機能だ。

snip[TAB]でテンプレートを展開可能

4ヶ所編集すると自分だけのスニペットを登録できる

コーディングでは、似たようなコードや、テンプレート的に同じコードを書くということが多い。よく使うものをスニペットに登録しておけば、入力の手間を省くことができるし、タイプミスも避けられる。

スニペットの編集方法

スニペットを登録するには、表示されるテンプレートの次の部分を変更すればより。

  • .source.js - セレクタ。スニペットを適用する対象(ファイルの種類)を指定する。*にしておくとすべてのファイルに適用される
  • Snippet Name - 登録するスニペットの名前
  • Sinppet Trigger - 短縮名
  • Hello World - 展開される文字列

改行を含む文字列を展開させる場合には、bodyで指定する対象を「”“”」で括って記述する。例えば次のようにすればよい。

複数行を展開するときはダブルクォーテーションを3つつなげたもので括る

このように書くと、gllistという文字列が「”“”」で括ったタグ付き文字列に展開されるようになる。

変更を確認する

上記ファイルを保存して別のファイルを開きglと文字列を入力すると、補完候補としてgllistが表示れる(左画面)。TABキーを押すと登録したスニペットが展開され右画面のように文字列が入力される。

登録した名前でTABキーを押す

登録したテキストが展開される

スニペットの展開にはインデントも加味されるので非常に便利だ。

スニペットに$1とか$2とかを含めてあるが、これは展開したスニペットのどこにカーソルキーを移動させるかを示している。

展開後、カーソルは$1に移動する。ここでTABキーを押すと今度は$2にカーソルが移動、さらにTABキーを押すと$3へ移動する。

ショートカットキーのカスタマイズ方法

Atomはショートカットキーのカスタマイズ機能も豊富だ。設定から「Keybindings」を選択すると設定されているショートカットキーの一覧が表示される。

ここで「your keymap file」のリンクをクリックすると設定ファイルが開くので、このファイルにショートカットキー設定を追加していく。

ショートカットキーの一覧でクリップボードにコピーするアイコンをクリックすると、その設定がコピーされるので、編集画面で貼り付けてそれを編集すればよいといった感じだ。

キーバインドの設定を自由に変更可能

変更内容をエディタに書き込んで行く

開発者の多くは、すでに手に馴染んだショートカットキーがあるだろう。エディタの変更が原因で、そうしたショートカットキーが変わるのはなかなかストレスになる。馴れたショートカットキーに設定し直した方が効率だ。

こんな感じでWeb技術をベースとして開発されているAtomでは、設定もWeb技術で使われるコードを使っている。WebサイトやWebアプリケーションの開発経験をお持ちの方であれば違和感なく使えると思う。