Coding

コーディング Tips(2015-10月号)

いつまで続けれるか分かりませんが、月間でコーディングのTipsをアップしたいと思います。

今月はJadeに関するTipsです。

実際のコーディング現場でよくあるシチュエーションを想定した自分Tipsをご紹介

HTMLやURLを渡されて、これと同じようにコーディングしてと頼まれた時

Headをそのまま出力

メタ情報やヘッドの情報をいちいちJadeに変換するより、先頭に「|」を付けてそのまま出力させています。
(そのまま出力すると閉じタグは出力されないので注意が必要)

jade

|<!DOCTYPE html><html lang="ja">
|<head>
| <title>coffee break designs. </title>
| <meta charset="UTF-8">
| <meta name="viewport" content="width=device-width, initial-scale=1">
|</head>

やたら同じような構造が多い!

for文やeachを使う

通常のコーディングの場合HTMLの次にCSSを作成するので、CSS作成中にHTMLの構造を変更することが良くあります。
単発の要素なら良いのですが、何度も同じ構造で繰り返す要素の場合、差し替えが大変です。

複雑じゃない要素の場合なるべくjadeのforやeachを使っています。

jade

- list = []
- list.push({h:"//coffee-break-designs.com",a:"alt"})
- list.push({h:"//coffee-break-designs.com",a:"alt"})
- list.push({h:"//coffee-break-designs.com",a:"alt"})
- each o, i in list
 li
   a(href="#{o.h}")
     img(src="img/#{i - 1}" alt="#{o.a}")

飛び飛びで同じ要素の場合はincludeを使う

jade

h4 なんちゃら
li.item 
 a(href="hoge.html") アイテム1
h5 なんちゃらなんちゃら
li.item
  a(href="foo.html") アイテム2

こういう場合はincludeを使って、HTML修正にも迅速に対応出来るようにしています。

jade

h4 なんちゃら
- item = {h:"hoge.html",t:"アイテム1"}
include assets/Item
- item = {h:"foo.html",t:"アイテム2"}
h5 なんちゃらなんちゃら
include assets/Item

上記の方法を使用する数の境目は大体5,6個同じ構造の要素がある場合に使用しています。
それ以下の場合そのままJadeを書いたほうが早い気がします。

Leave a Reply

最初のコメントを頂けますか?

更新通知を受け取る »
avatar
wpDiscuz