コンサルロケッツ STATION

みなさん。こんにちは。
ロケッツ4号機です。

  
  

コーダーにとって「エディタ」は仕事の相棒であり、パートナー。
みなさんも自分好みのエディタを使用されているかと思いますが、自分はここ2〜3年「Atom(アトム)」を愛用しています。

  
  

そこで今回!Atom の「スニペット」機能を使って爆速コーディングを実現する方法をご紹介します。
※DreamweaverやSublime Textにも同様の機能がありますので、それらのエディタをご使用の方は各自のスニペットを編集してください。

  
  

▼目次

スニペットとは?
便利なスニペット一覧
さいごに

  
  

■スニペットとは?

コーディング作業において、同じようなコードを書くシーンが多々あるかと思います。
たとえば「コメントアウト」やCSSの「メディアクエリ(media query)」、さらにはJSなどの代入式・・・。
こういった「繰り返し書く機会のある」コードを、いちいち書かずに呼び出す機能を「スニペット」と呼びます。

  
  

スニペットとは「断片」「端切れ」という意味の言葉らしいですが、コードの断片をスニペットとして登録しておくことで、
次回からのコーディングをより効率的に短縮して行うことができるのです。

  

※Atomではメニューバーから「スニペット」を選択するとsnippets.csonファイルが開きますので、そちらのファイルを編集してください。

  
  

百聞は一見にしかず。
実際にスニペットを使用しているシーンがこちら。

  
  

  
  

いかがですか?
このように、自分がよく使用するコードを辞書登録機能のようにして呼び出すことができるのです。

  
  

ではつぎに例として、自分が個人的にスニペット登録しているコードの一部をご紹介します。

  
  

■便利なスニペット一覧

では、自分が実際に登録しているスニペットをいくつかご紹介します。

  
  


HTML編

  

見出し(コメントアウト/HTML版)

  
  

jQuery

  
  

ulリスト

  
  

jQueryプラグイン(ex.Slick.js)

※よく使用するjQueryプラグインの標準コードを登録しておくと便利

  
  


CSS編

  

見出し(コメントアウト/CSS版)

  
  

メディアクエリ

  
  

clearCSS

  
  

IE10以上に適用

※こういった、忘れやすいコードを登録しておくといちいち探さなくて済む

  
  


JavaScript編

  

即時関数(jQuery)

  
  

即時関数02(jQuery)

※別バージョンの即時関数も登録しておくと、いざというときに便利

  
  

.scroll()

※scrollの他にもonやready、eachなど自分のやりやすいデフォルトの形で登録しておくと便利

  
  

userAgent

こういった、パッと書けない&出てこないコードを登録しておけるのがスニペットの良さ

  
  

■さいごに

いかがでしたか?
エディタの「スニペット」機能を活用することで、同じコードを繰り返し書く必要がなくなり、コーディングの効率化に繋げることができます。

  

とくにありがちなのは、JSプラグイン設置時のコードがわからず公式サイトを参照してしまい、無駄な時間を費やしてしまうシーンですが、いちどスニペットに登録しておけば一発でコードを書くことができるようになります(プラグインの仕様が時折変更することがありますので、その際は随時確認するようにしてください)。

  

それでは、今年も残りわずか。良きコーディングライフをお楽しみください。

  
  

コンサルロケッツのクライアント一部実績

  • 小樽洋菓子舗ルタオ
  • 三輪山本
  • 榮太樓商事
  • エーモン工業社
  • シーガル
  • Puravida-プラヴィダ
  • 三恵
  • リープライズ-SALLY PRIZE-
  • 神戸ぐりる工房
  • アンティークそっくり市場
  • トランスレーション
  • イーチャンス
  • スイーツファクトリー スリーズ
  • 男のおかず屋
  • ウェップス
  • おはりばこ
  • CRASH
  • dot store
ページの上へギュイーンと!