Dreamweaverのスニペットを使ってコーディング効率UPを目指す

Dreamweaverのスニペットを使ってコーディング効率UPを目指す

Web制作を効率化するうえで効果的な対策の1つに、コーディングの効率化があります。決まったパターンの書き方や過去に使ったことのある書き方などを、必要なときにすぐ再利用できたらそれだけで何分も節約することができます。

例えば前に紹介したEmmet(旧Zen-Cording)。効率化にはとても有効で、使い方を覚えてしまえばコードがスラスラかけてしまうとても便利なツールです。タグや属性を補完したり、親要素と子要素を一度に書き出したりできますが、これはあらかじめ定義された形式のタグを呼び出して使うものです。これから紹介するツールは、Dreamweaverを使っているなら使わないともったいないくらい便利な機能、「スニペット」です。

Dreamweaverのスニペットとは?

先ほど書いたとおり、Emmetはあらかじめ定義された形式のタグを呼び出します。例えば、aタグの場合は標準で以下のようになります。

これはこれで、めちゃくちゃ便利です。ですが、class名やid名などは毎回入力する必要があります。もしここにonclickを入れたり、もっと複数行に渡るオリジナル形式のタグを呼び出したいとなると、かなり面倒なことになります。

そこでDreamweaverのスニペット。これは、1行でも複数行でも好きなコードを保存しておき、必要なときにいつでも呼び出すことができる機能です。例えばmetaのパターンとか、CSSのハックとか、2カラムのパーツとか、過去に苦労して書いたコードを再利用したいときなど、スニペットを使えば過去にどこで使ったか探す必要がなくなります。

スニペットの使い方

まずDreamweaverで、登録したいコードを入力します。そして、その部分を範囲選択して「新規スニペットの作成」をクリックします。
スニペットの新規登録
※ バージョンやOSなどにより名称が異なる場合があります。

次に名前や必要なら説明などを入力して登録します。
名前などを設定して登録

すると、このようにスニペットが登録されています。
スニペット登録完了

使うときは、挿入したい位置でスニペットの一覧から選んでダブルクリックすればOKです。
なお、あらかじめ多くのスニペットが登録されていますので、これらも活用していきたいですね。

ツールは使い分けて効率UP

テキストを保存して、必要なときにエディタなどへ貼り付けることができるソフトウェアはたくさんありますが、Dreamweaverのスニペットはコードに直接埋め込むことができるので使い勝手がとても良いです。

Emmetとスニペット。どちらも作業効率をUPさせるうえでとても有効なツールです。どちらかだけというよりも、状況に応じて使い分けることがweb制作において最も効率的と言えると思います。

ちなみにDreamweaverは高機能なwebオーサリングソフトです。気付かずシンプルにコードを書くだけで終わるのはとてももったいなく、スニペットのように便利な機能がたくさんあるので、他にも探してみてはいかがでしょうか。