少し昔にJadeというJavascriptテンプレートエンジンが流行りました。
ある事情で使わなくなったので忘れていたのですが、ある案件で使用して
改めて、便利だなぁと思ったので使い方を書いておきます。
Jadeって?
JadeとはJST(JavaScript Templates)の一つで、HTMLを書くための軽量マークアップ言語です!
Hamlに影響を受けたJavaScriptテンプレートエンジンでもあります。
*Hamlも同じく軽量マークアップ言語
簡単にいってしまうとJadeはより楽にhtmlを書くテンプレートエンジン
インデントでネストや閉じタグを定義しファイル分割や再利用インクルード、変数、代入、継承なんかしましょう的なやつです。
あと、Jadeって名前がかっこいい
使用する前の準備
gulpを使用する場合
今回はgulp
で使用する場合の説明をします。
npmでインストールします。
$ npm install gulp-jade --save-dev
この記述でコンパイルできます。
var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade', function () {
gulp.src('src/jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./static/'))
});
で、実際どんな感じで書くの?
こんな感じで書きます。
doctype
html(lang="ja")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
meta(name="viewport", content="width=device-width, initial-scale=1")
meta(name="description", content="")
meta(name="keywords", content="")
meta(name="author", content="")
meta(property="og:title", content="タイトル")
meta(property="og:type", content="website")
meta(property="og:url", content="http://任意のURL")
meta(property="og:image", content="http://任意のURL/og_image.png")
meta(property="og:site_name", content="")
meta(property="og:description", content="")
meta(property="fb:app_id", content="任意のID")
title タイトル
link(rel='stylesheet', href="css/style.css")
body
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
そして、コンパイルしてできたhtmlはこんな感じ!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="http://任意のURL">
<meta property="og:image" content="http://任意のURL/og_image.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta property="fb:app_id" content="任意のID">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
これだけじゃ、あんまり行数が減ってなくて便利になったかわかりにくいですが
閉じタグながなくなりプロパティが()のなかにかけたり便利になりました。
普通のタグの記述について
下記のように書きます。
これは短くなって便利でしょう!
h1#ttl
h2.sub-ttile
div
p
script(src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
<body>
<h1 id="ttl"></h1>
<h2 class="sub-ttile"></h2>
<div>
<p></p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
よくチュートリアルで紹介されているやつでコンパイルされなかったやつ
!!!5
このやり方で昔は
<!DOCTYPE html>
</html>
と表示されていましたが
現在はエラーになってしまします。
なので現在は!!!5
は使用不可!
doctype 5
も同様にエラーになります
あとはインデントの付け方に気をつけましょう!
Jadeの記述方法
基本的な書きかた
普通の書き方基本的にはこの書き方で書きます。
タグの後に半角スペースを開けるとテキストが入力できます。
div
ul
li ナビ01
li ナビ02
li ナビ03
<div>
<ul>
<li>ナビ01</li>
<li>ナビ02</li>
<li>ナビ03</li>
</ul>
</div>
インデントは統一してください。
通常はスペース4こぶんだけど一箇所スペース2こぶんとかがあるとエラーが出ます。
あとはインデントでネストされるので気をつけること
インデントを使わずタグをネストさせる方法
一行でネスト構造や改行を行う場合は:
を使う
div: h1 :title
<div>
<h1>:title</h1>
</div>
テキスト複数行入力する、開業する場合|
もしくは.
を使う
p
| テキスト
| テキスト
| テキスト
p.
テキスト
テキスト
テキスト
<p>テキスト
テキスト
テキスト</p>
直接htmlを記述する
直にhtmlも書ける
div
p <a href="http://zoooooooom.jp/blog/">zoooooooom</a>
<div>
<p><a href="http://zoooooooom.jp/blog/">zoooooooom</a></p>
</div>
属性の記述
属性を書く場合(属性名="")
とする
また、属性を改行して書くこともできます。
属性同士の合会に,
入れていますがなくても問題ありません。半角スペース入れればOK!
a(href="http://zoooooooom.jp/blog/", target="_blank") zoooooooom ブログ
<a href="http://zoooooooom.jp/blog/" target="_blank">zoooooooom ブログ</a>
idとclassの書き方
div#id.class
<div id="id" class="class"></div>
タグすらも省略することができます。
そうすると<div>
タグにid
、class
が付与されてコンパイルされる。
#jade
.jade
<div id="jade">
<div class="jade"></div>
</div>
属性値をまるっと受け取る
class
属性のみ配列をそのまま受け取れる
あまり使いドコロがわからないけど・・・
- var classes = ['class1', 'class2', 'class3'];
div(class=classes)
div(data-class=classes)
<div class="class1 class2 class3"></div>
<div data-class='["class1","class2","class3"]'></div>
Javascriptで制御する
-
でJavascriptを書くことが可能です。
ul
- for (var i = 0; i < 3; i++) {
li list #{+ i}
- }
<ul>
<li>list 0</li>
<li>list 1</li>
<li>list 2</li>
</ul>
doctype
doctype html
doctype xml
doctype strict
<!DOCTYPE html>
<!DOCTYPE html>
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
コメントアウトの書き方
通常のコメントアウト
コメントには二種類あります
//
で出力ありのコメント//-
でhtmlに出力されないコメントが生成されます。
// コメントになる
//
コメントになる
コメントになる
//- 出力されないコメントアウト
<!-- コメントになる-->
<!--コメントになる
コメントになる-->
条件付きコメント
この機能は削除せれたみたい・・・
//if lt IE 8
IE8以下
<!--if lt IE 8IE8以下-->
では、直接書けるので書きましょう・・・
<!--[if lt IE 8]>IE8以下<![endif]-->
<!--[if lt IE 8]>IE8以下<![endif]-->
インクルード機能
include
記述でインクルードできます。
temp.jade
などの別ファイルをinclude temp
などで読み込む
tempだけの記述で.jade
は記述不要です。
かってにjade
ファイルと認識されます。
temp.jade
の中身
p
|テキスト
include include/temp
<p>テキスト</p>
htmlをそのまま挿入する事ができます。
その時は.html
をつけます。
include temp.html
やっぱり、このインクルード機能が便利です。
その他様々な機能がありますが、基本的な機能をご紹介しました。
これだけでもかなり記述速度がアップすると思います。