Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

閉じタグを超えた先に僕が見た景色とは

2,118 views

Published on

第21回Creators MeetUpで話したJadeの話です。

Published in: Internet

閉じタグを超えた先に僕が見た景色とは

  1. 1. 閉じタグを超えた先に 僕が見た景色とは
  2. 2. #{自己紹介} • むゆう @anticyborg • フリーランスのIT僧侶 • 元Web制作会社ディレクター • フロントエンドエンジニア • フリーランス2年目 • パパ6年目
  3. 3. #{今日話すこと} • 僕がどれだけ閉じタグを嫌ってるか • Jadeの基本的な使い方 • 自動化 • おまけ
  4. 4. 「divが1個多いです。 削除してください」
  5. 5. どれがどの 閉じdivだ!
  6. 6. 滅びれ!!
  7. 7. #{3大ヤバいやつ} • インデントがない • 修正に修正を重ねた秘伝のhtmlファイル • すでに正しくない閉じタグのコメントアウト
  8. 8. こんなのにんげんの やることじゃない
  9. 9. #{jade}
  10. 10. #{before} <!DOCTYPE html> <html lang="ja"> <head> <title>page title</title> </head> <body> <h1>page title</h1> <p>jade is a terse and simple templating language.</p> </body> </html>
  11. 11. #{after} doctype html html(lang="ja") head title page title body h1 page title p jade is a terse and simple templating language.
  12. 12. なんという ことでしょう
  13. 13. #{Jadeとは} • javascript製テンプレートエンジン • Node.js製Webアプリフレームワークに使われてる • 静的htmlジェネレータとしても強力
  14. 14. #{Jadeの書き方} 1. タグ名[スペース]タグ内の文字列 2. クラス名は「.」、ID名は「#」で表現 • cssと一緒だね 3. 属性は()内に記述 • (href="#", target="_blank") 4. タグの入れ子構造をインデントで表現
  15. 15. 見える! 見えるぞ!
  16. 16. #{variable} index.jade -var usr = {fName: "無憂", lName: "藤田", age = 33}; h2 name p #{usr.lName} #{usr.fName} h2 age p #{usr.age}歳
  17. 17. #{variable} index.html <h2>name</h2> <p>藤田 無憂</p> <h2>age</h2> <p>33歳</p>
  18. 18. #{comments} jade //- jade comment(htmlには表示されない) // html comment html <!-- html comment -->
  19. 19. #{conditionals} index.jade - var phone = "iPhone6"; if phone === "iPhone6 Plus" p でっけ!! else p このケータイは快適に使える
  20. 20. #{iteration} - var phone = ["iphone6 plus", "iphone6", "iphone5s"]; ul - each val, index in phone li #{index + 1}. #{val} ↓ <ul> <li>1. iphone6 plus</li> <li>2. iphone6</li> <li>3. iphone5s</li> </ul>
  21. 21. #{include} index.jade doctype html html include ./inc/_head body h1 My Site p this is my site sample.
  22. 22. #{include} ./inc/_head.jade head title my site link(rel="stylesheet" href="/css/style.css") script(src='/js/app.js')
  23. 23. #{include} index.html <!doctype html> <html> <head> <title>my Site</title> <link rel="stylesheet" href="/css/style.css"> <script src='/js/app.js'></script> </head> <body> <h1>my Site</h1> <p>this is my site sample.</p> </body> </html>
  24. 24. #{extend} index.jade extend _layout block pageBody p this page is use _layout.jade
  25. 25. #{extend} _layout.jade doctype html html(lang="ja") head title page title body .header h1 site name .body block pageBody .footer p copyright muyuu
  26. 26. #{includeイメージ}
  27. 27. #{extendイメージ}
  28. 28. #{mixin} mixin作成 mixin dottedList(arr) ul.dottedList - each val, index in arr li.dottedList__item #{val}
  29. 29. #{mixin} mixin使用 - var phone = ["iphone6 plus", "iphone6", "iphone5s"]; +dottedList(phone) html <ul class="dottedList"> <li class="dottedList__item">iphone6 plus</li> <li class="dottedList__item">iphone6</li> <li class="dottedList__item">iphone5s</li> </ul>
  30. 30. how to use
  31. 31. #{install node.js}
  32. 32. #{install jade} $ npm install jade --global
  33. 33. #{jade compile} $ cd project/directory/ $ jade -P index.jade
  34. 34. めんどくさい
  35. 35. Gulp is 救世主
  36. 36. #{install gulp} $ npm install gulp --g
  37. 37. #{install gulp} $ cd /project/dir/ $ npm install --save-dev gulp
  38. 38. #{install gulp plugins} $ npm i --D gulp-jade gulp-watch gulp-connect
  39. 39. #{make gulpfile} gulp = require "gulp" jade = require "gulp-jade" connect = require "gulp-connect" gulp.task "connect", -> connect.server root: "./" port: 3000 gulp.task "html", -> gulp.src ["src/**/*.jade", "!src/**/_*.jade"] .pipe jade pretty: true .pipe gulp.dest "" gulp.task "watch", -> gulp.watch "src/**/*.jade", ["html"] gulp.task "default", -> gulp.start "connect", "watch"
  40. 40. #{run} $ gulp • ローカルサーバが立ち上がる • jadeファイルの監視開始 • jadeファイルが更新されたらhtmlをビルド
  41. 41. おまけ
  42. 42. #{共通テキスト} _layout.jade block texts html head title #{title} | site name
  43. 43. #{共通テキスト} index.jade extend _layout block texts - var title = "トップページ"
  44. 44. #{データだけまとめる} _news.jade - var news = []; - new[0] = {date: "2014/10/18", title: "第21回CMUに参加した"} - new[1] = {date: "2014/10/17", title: "第21回CMUのスライド作るよ"} - new[2] = {date: "2014/10/16", title: "第21回CMUのスライドが作れないorz"}
  45. 45. #{データだけまとめる} news/index.jade include _news.jade ul.news - each val, index in news li .date #{val.date} h3 #{val.title}
  46. 46. #{データだけまとめる} index.jade include _news.jade ul.news - each val, index in news li .date #{val.date} h3 #{val.title}
  47. 47. #{全部先に読み込む} _layout.jade include _news.jade include _mixin.jade doctype html html head ~
  48. 48. #{多段extend} _layout.jade doctype html html(lang="ja") head title #{title} test pate body .header h1 test page .content block page .footer p copyright muyuu.
  49. 49. #{多段extend} _oneColumn.jade @extend _layout block page .content block content
  50. 50. #{多段extend} _twoColumn.jade @extend _layout block page .row .col8 .main block main .col4 .sub block sub
  51. 51. #{多段extend} index.jade @extend _oneColumn block content p top page
  52. 52. #{多段extend} ./news/index.jade @extend _twoColumn block main p news page block sub ul.sidebarList ~
  53. 53. Jade 無双

×