第48回 zen codingの便利な機能を活用した効率的なコーディング術｜コーディング代行ならコーディングファクトリー

コーディングをより効率的行うDreamweaverのプラグイン、「zen cording」は有名ですが、今回はあまり使われてない？ zen cordingの活用すべきテクニックをご紹介します。なお、今回紹介する機能を任意のキーボードショートカットに割り当てることでさらに効率的になります。

図1[コマンド]>[Zen Coding]を展開したイメージです。

これはそれぞれ、
Inward → 子タグの選択
Outwoard →　親タグの選択

という機能です。

例）下記のようなタグの場合、「テキスト」という文言内にカーソルを置いた時の選択範囲です。

Inward

上の状態からOutwoardを実行すると・・・

という選択範囲になります。

これを活用することで素早く意図した範囲を選択することができます。

図2

これは選択範囲をタグで囲むことができる機能です。

例）下記の選択範囲の時に実行するした場合

まず図2のようなダイアログがでます。そこに囲みたいタグを入力し、OKを押すと・・・

このようにspanをaタグで囲うことができます。
先述のInwardと組み合わせることでさらに便利に使うことができます。

これはそれぞれ、
Previous → 前の編集領域にカーソルを移動
Next → 次のの編集領域にカーソルを移動

という機能です。
編集領域とはタグとタグの間や「"" 」(空のダブルクォーテーションの間) 等です。
例えば「alt=""」のように空のaltに素早くカーソルを移動することができ、スピードアップが可能になります。

これはタグの中にカーソルを入れたときに実行すると、その開始タグと終了タグのみを削除してくれる機能です。
例）下記タグの場合

spanタグ内にカーソルを置いた状態で使うと・・・

Spanタグのみきれいに削除してくれます。
修正や組み方の変更などに使えるので、知っておくと便利です。

コーディングメソドロジー第48回 zen codingの便利な機能を活用した効率的なコーディング術