大阪node学園八時限目 「コーディングのためのjade」
TRANSCRIPT
大阪Node学園八時限目
node.jsみちしるべ
コーディングのための jade
2013/10/26
スライド内のリンクはクリックできます
リンクは ですこの色
もくじ
1. Q2. 自己紹介
3. jadeとは
4. jadeのシンタックス
5. jadeのロジック
6. jadeのコンパイル
7. Q?
Q
初めに質問です
次のい れかに当てはまりますか？
htmlの閉じタグを書くのがめんどくさい
既存のhtmlの一部だけを変えて新しいページを作りたい
expressのチュートリアルでいきなりjadeが出てきて面食らった
を読んで混乱したブログの過去記事(2012/3)
もしどれかに当てはまったらこのスライドが 役に
立ちます｡
自己紹介
渡辺俊輔
フリーランスWebエンジニア
大阪Node学園主催
Blog :
趣味は読書と英語と瞑想
最近ジョギングを始めようかと思っています
質問､訂正などありましたら下記からどう
A Node in Nodes
google+ 大阪node学園
twitter@[email protected]
jadeとは
htmlプリプロセッサ jadeタグの記述を楽にする
htmlにロジックを持ち込める
expressのデフェルトテンプレートエンジン
このスライドもjadeとlessで作りました
jadeは二部構成
シンタックスとロジックの二つからできている
htmlを楽に書くだけならシンタックスを理解するだけで良い
htmlの構造化をしたり､Webアプリで使ったりするにはロジックも必要
jadeを使うとhtmlを効率良く書ける
jadeのシンタックス
基本ルール
HTMLタグを < > 無しで書く
閉じタグの代わりにインデントで親子関係を表す
CSSと同様にidとclassを書ける
タグを書か にclassやidだけを書くとdivタグになる
例
jade
↓
html
!!!
html
head
title タイトル
body
h1 ヘッ 1
.class_name#id_name divタグ
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
<h1>ヘッ 1</h1>
<div id="id_name" class="class_name">divタグ</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
インデントの数
インデントの数は2でも3でも4でもいい
一つのファイルで使うインデントの数は統一すること
インデントの数が揃っていないと思わ バグの原因になる
コメントの書き方
コメントはjavascriptと同じ先頭にスラッシュ2つです｡
//の後にインデントすると以降すべてコメントになります｡
jade
↓
html
//コメント
//
コメント
コメント
コメント
1
2
3
4
5
<!--コメント-->
<!--
コメント
コメント
コメント-->
1
2
3
4
5
属性の書き方
属性は()にいれ､カンマで区切って書きます
jade
↓
html
script(src="/js/jquery.js", type="text/javascript")
link(href="/css/style.css", rel="stylesheet")
a(href="/", target="_blank") トップページ
1
2
3
<script src="/js/jquery.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet">
<a href="/" target="_blank">トップページ</a>
1
2
3
タグ内のテキスト
テキストはタグと同じ行に書くか､改行してインデントをつける
jade
↓
html
p テキスト
p
複数行テキスト
複数行テキスト
1
2
3
4
<p>テキスト</p>
<p>
複数行テキスト
複数行テキスト
</p>
1
2
3
4
5
.(ドット) と |(バー)タグの直後に.(ドット)をつけると､タグ内のテキストがjadeで処理されなくなる
同様に､改行したテキストの先頭に |(バー) を書くと､その行のテキストがjadeで
処理されなくなる
jade
↓
html
p.
span このspan タグに ません
p
に span このspan タグに ません
span こち タグに ます
1
2
3
4
5
<p>span このspan タグに ません</p>
<p>span このspan タグに ません
<span>こち タグに ます</span>
</p>
1
2
3
4
テキストの先頭が英文字の場合
タグと解釈されて表示上消えてしまう
←このように
対策その一
タグの後で改行しない
jade
対策そのニ
タグにドットをつける
jade
script style codeの3つのタグはドットが必要
div hoge ←このように1
div.
hoge ←このように
1
2
doctypeの指定の仕方
doctype か !!! で!!! 5 と !!! は同じhtml5のDoctypeを出力する
!!! の後にdoctypeを指定することも出来る
!!! strict!!! transitonal
など
インデント Rules
エラー回避にドットとバー
idとclassはcssと同じ
属性はカンマで区切る
jadeのロジック
変数と変数の展開
jade内で変数を宣言するには､変数名 = 値と書く
明示的に - var 変数名 = 値 というふうにも書ける
変数を展開するにはタグの直後に ＝(イコール) をつける か #{変数名} とする
jade
↓
html
#{変数名} の代わりに !{変数名} とすると､変数の値がエスクープされ に出力
される
gru = 'a great villain'
- var minion = 'banana'
p= gru
p minion is a #{minion}
1
2
3
4
<p>a great villan</p>
<p>minion is a apple</p>
1
2
構造化の三機能
htmlのパーツ化､再利用に使える機能
extendhtmlの必要な部分だけを書き換えて再利用する
mixin再利用可能なhtmlのパーツを作る
include別のファイルを読み込む
extend元になるjadeと､それを元にして作るjadeの二つが必要
block がポイント
元になるファイル base.jadejade
!!!
html
body
#menu
block menu
p no menu
#main
block main
p no content
1
2
3
4
5
6
7
8
9
extend新しいファイル extended.jade
jade
↓
html
extends base1
<!DOCTYPE html>
<html>
<body>
<div id="menu">
<p>no menu</p>
</div>
<div id="main">
<p>no content</p>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
extendblock を使って元のファイルの内容を上書きする
新しいファイル extended.jadejade
↓
html
extends base
block menu
ul
li top
block main
h1 Main contents
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
<div id="menu">
<ul>
<li>top</li>
</ul>
</div>
<div id="main">
<h1>Main contents</h1>
</div>
1
2
3
4
5
6
7
8
9
10
11
extend画像の上にレイヤを重 て必要部分だけ書き換えるイメージ
block の他に､ append と prepend というのもあり
append 元のblockの最後に付け足す
prepend 元のblockの先頭に挿入する
mixin再利用可能なパーツを作る
mixinの宣言は mixin 名前
mixinの呼び出しは +名前
jade
↓
html
mixin fruits
ul
li apple
li banana
li citrus
html
body
+fruits
1
2
3
4
5
6
7
8
<html>
<body>
<ul>
<li>apple</li>
<li>banana</li>
<li>citrus</li>
</ul>
1
2
3
4
5
6
7
mixinmixin
include別のファイルの内容をそのまま読み込む
いわゆるpartialmixinのファイルを読み込むのにも
読み込むファイル mixins.jadejade
読み込むファイル partial.jadejade
mixin fruits
ul
li apple
li banana
li citrus
1
2
3
4
5
h2 a little snippet1
include読み込み先のファイル
ファイル名は拡張子を省いて指定する
jade
↓
html
include mixins
!!!
html
body
+fruits
include partial
1
2
3
4
5
6
<html>
<body>
<ul>
<li>apple</li>
<li>banana</li>
<li>citrus</li>
</ul>
<h2>a little snippet</h2>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
jadeのロジック機能を使うとhtmlで出来なかった
ことが色々出来る
webアプリを作る上では､変数､条件文､繰り返し､
extendは必須
mixinは再利用できるパーツを作り貯めるとどんど
ん便利になる
jadeのコンパイル
jadeのインストール
npm install -g jade1
jadeのコンパイル
index.html というファイルが出力される
出力ファイル名は指定しなくても良い
jade index.jade1
prettyオプション
デフェルトでは生成されたhtmlの改行は全て無くなる
pretty オプションをつけるとインデントされたhtmlが出力される
jade --pretty index.jade1
自動コンパイル
変更を監視して自動コンパイルしたい場合は watch オプションが使える
jade --watch index.jade1
jade + less + reveal.js でスライド作りも楽々
webアプリの場合はサーバでコンパイルする
Q?
宣伝
半年ほど前に本を書きました
HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド(DESIGN & WEB TECHNOLOGY)