More Related Content
Viewers also liked
大阪Node学園八時限目 「コーディングのためのjade」
- 3. もくじ 1. Q 2. 自己紹介 3. jadeとは 4. jadeのシンタックス 5. jadeのロジック 6. jadeのコンパイル 7. Q?
- 4. Q
- 7. 自己紹介 渡辺俊輔 フリーランスWebエンジニア Blog : A Node in Nodes 大阪Node学園主催 趣味は読書と英語と瞑想 最近ジョギングを始めようかと思っています google+ 大阪node学園 質問､訂正などありましたら下記からどう twitter@craftgear craftgear@gmail.com
- 8. jadeとは
- 10. jadeは二部構成 htmlを楽に書くだけならシンタックスを理解するだけで良い シンタックスとロジックの二つからできている htmlの構造化をしたり､Webアプリで使ったりするにはロジックも必要
- 12. jadeのシンタックス
- 13. 基本ルール HTMLタグを < > 無しで書く 閉じタグの代わりにインデントで親子関係を表す CSSと同様にidとclassを書ける タグを書か にclassやidだけを書くとdivタグになる
- 14. 例 jade 1 !!! 2 html head 3 title タイトル 4 body 5 h1 ヘッ 1 6 .class_name#id_name divタグ 7 html ↓ 1 <!DOCTYPE html> 2 <html> <head> 3 <title>タイトル</title> 4 </head> 5 <body> 6 <h1>ヘッ 1</h1> 7 <div id="id_name" class="class_name">divタグ</div> 8 </body> 9 10 </html>
- 17. 属性の書き方 jade 属性は()にいれ､カンマで区切って書きます 1 script(src="/js/jquery.js", type="text/javascript") 2 link(href="/css/style.css", rel="stylesheet") 3 a(href="/", target="_blank") トップページ html ↓ 1 <script src="/js/jquery.js" type="text/javascript"></script> 2 <link href="/css/style.css" rel="stylesheet"> 3 <a href="/" target="_blank">トップページ</a>
- 18. タグ内のテキスト jade テキストはタグと同じ行に書くか､改行してインデントをつける 1 p 2 p 3 4 テキスト 複数行テキスト 複数行テキスト html ↓ 1 <p>テキスト</p> 2 <p> 複数行テキスト 3 複数行テキスト 4 5 </p>
- 19. .(ドット) と |(バー) 同様に､改行したテキストの先頭に |(バー) を書くと､その行のテキストがjadeで 処理されなくなる タグの直後に.(ドット)をつけると､タグ内のテキストがjadeで処理されなくなる jade 1 p. span このspan タグに ません 2 3 p に span このspan タグに ません 4 span こち タグに ます 5 html ↓ 1 <p>span このspan タグに 2 <p>span このspan タグに <span>こち タグに 3 4 </p> ません</p> ません ます</span>
- 20. テキストの先頭が英文字の場合 タグと解釈されて表示上消えてしまう ←このように 対策その一 jade タグの後で改行しない 1 div hoge ←このように 対策そのニ jade タグにドットをつける 1 div. hoge ←このように 2 script style codeの3つのタグはドットが必要
- 21. doctypeの指定の仕方 doctype か !!! で !!! 5 と !!! は同じhtml5のDoctypeを出力する !!! の後にdoctypeを指定することも出来る !!! strict !!! transitonal など
- 23. jadeのロジック
- 24. 変数と変数の展開 jade内で変数を宣言するには､変数名 = 値と書く 明示的に - var 変数名 = 値 というふうにも書ける 変数を展開するにはタグの直後に ＝(イコール) をつける か #{変数名} とする jade 1 2 3 4 gru = 'a great villain' - var minion = 'banana' p= gru p minion is a #{minion} html ↓ 1 <p>a great villan</p> 2 <p>minion is a apple</p> #{変数名} の代わりに !{変数名} とすると､変数の値がエスクープされ に出力 される
- 29. extend block がポイント 元になるjadeと､それを元にして作るjadeの二つが必要 元になるファイル base.jade jade 1 !!! 2 html body 3 #menu 4 block 5 p 6 #main 7 block 8 p 9 menu no menu main no content
- 30. extend 新しいファイル extended.jade jade 1 extends base html ↓ 1 <!DOCTYPE html> 2 <html> <body> 3 <div id="menu"> 4 <p>no menu</p> 5 </div> 6 <div id="main"> 7 <p>no content</p> 8 </div> 9 </body> 10 11 </html>
- 31. extend block を使って元のファイルの内容を上書きする 新しいファイル extended.jade jade 1 extends base 2 block menu ul 3 li top 4 5 block main h1 Main contents 6 html ↓ 1 <!DOCTYPE html> 2 <html> <body> 3 <div id="menu"> 4 <ul> 5 <li>top</li> 6 </ul> 7 </div> 8 <div id="main"> 9 <h1>Main contents</h1> 10 </div> 11
- 32. extend 画像の上にレイヤを重 て必要部分だけ書き換えるイメージ block の他に､ append と prepend というのもあり append 元のblockの最後に付け足す prepend 元のblockの先頭に挿入する
- 33. mixin mixinの宣言は mixin 名前 再利用可能なパーツを作る mixinの呼び出しは +名前 jade 1 mixin fruits ul 2 li apple 3 li banana 4 li citrus 5 6 html body 7 +fruits 8 html ↓ 1 <html> <body> 2 <ul> 3 <li>apple</li> 4 <li>banana</li> 5 <li>citrus</li> 6 </ul> 7
- 34. mixin mixin
- 35. include 別のファイルの内容をそのまま読み込む mixinのファイルを読み込むのにも いわゆるpartial 読み込むファイル mixins.jade jade 1 mixin fruits ul 2 li apple 3 li banana 4 li citrus 5 読み込むファイル partial.jade jade 1 h2 a little snippet
- 36. include 読み込み先のファイル jade ファイル名は拡張子を省いて指定する 1 include mixins 2 !!! 3 html body 4 +fruits 5 include partial 6 html ↓ 1 <html> <body> 2 <ul> 3 <li>apple</li> 4 <li>banana</li> 5 <li>citrus</li> 6 </ul> 7 <h2>a little snippet</h2> 8 </body> 9 10 </html>
- 38. jadeのコンパイル
- 39. jadeのインストール 1 npm install -g jade
- 40. jadeのコンパイル 1 jade index.jade index.html というファイルが出力される 出力ファイル名は指定しなくても良い
- 41. prettyオプション pretty オプションをつけるとインデントされたhtmlが出力される デフェルトでは生成されたhtmlの改行は全て無くなる 1 jade --pretty index.jade
- 42. 自動コンパイル 変更を監視して自動コンパイルしたい場合は watch オプションが使える 1 jade --watch index.jade
- 43. jade + less + reveal.js でスライド作りも楽々 webアプリの場合はサーバでコンパイルする
- 44. Q?
- 45. Thank you! photo by Lance Johnson from flickr
- 46. 宣伝 HTML5とJavaScriptによるiPhone/Android両対応アプリ開発ガイド (DESIGN & WEB TECHNOLOGY) 半年ほど前に本を書きました