人気ブログランキング | 話題のタグを見る

Zen Coding でまとめて展開する。

Zen Coding では + 演算子を使うと複数の要素をまとめて展開できる。(下の例は HTML BOX Z で Ctrl+E で実際に展開できる。)例えば、前回のタプを作るプログラム例では、

html:5>(ul#tabbox>li#tab$.tab*5>a)+div#line

を展開すると、HTML部分を一気に展開できる。

スタイルシートについても、head タグ以下で

style

を展開した後、style タグ以下に、

#tabbox {

を入力して改行した後

list:n

を展開するのは、普通の手順だが、

.tab {

を入力して改行した後、

bgc+w+h+fl:l+ml

を展開すると、複数の CSS の要素を一気に作成できる。仕上げは、

#line {

を入力して改行した後、

bgc+w:a+h+cl:b

を展開する。それぞれの要素のパラメータの値を調整して HTML BOX の実行ボタンをクリックするとタブの出来上がりだ。

Zen Coding を使ってわかったことは、HTML や CSS のコーディングはやりたいことを実現するために10倍のキー入力が必要だったということだ。Zen Coding のおかげで冗長な情報をカットして、やりたいことに集中することができる。このような省略形をパーサで解析して展開する方法は、HTMLのみならず様々なプログラム言語のコーディングでも使えるアイディアだろう。

これを見ても、プロプラムの開発におけるパーサの重要性は明白だ。パーサの知識に熟知し、あらゆる場面でパーサを利用していくことが、言語設計のみならず一般的なプログラム開発の上でも重要な技術となっていくのではないだろうか。

Zen Coding のもう一つの利点は、新しい言語を覚えなくても良いということだ。タグやセレクタの知識があればすぐにでも Zen Coding を使ってプログラムを書くことができる。他のプラグインのように独自の文法を覚える必要もない。このことが Zen Coding の使いやすさにつながっているのではないだろうか。このような習得への壁の低さは、多人数でプログラムを開発するときに重要な利点となるだろう。

Zen Coding の存在はプログラムの開発効率の向上について新しい視点を与えてくれているのではないかという気がする。

Zen Coding はたくさんの省略形を覚えないといけないが、次のリンクに一覧表があるので参照しながら作業ができる。



by tnomura9 | 2016-01-07 23:50 | JavaScript | Comments(0)
<< HTML edit E Zen Coding でタブを作る >>