💺 ⛹️ 🕰️ ジェイドスターターチュートリアル ☂️ 🔒 🌙

Jadeは、Node.js用のJavaScriptで記述されたHTMLプリプロセッサおよびテンプレートエンジンです。簡単に言えば、Jadeは、まったく新しい方法でマークアップを記述できるツールであり、通常のHTMLよりも多くの利点があります。

たとえば、次のHTMLコードを見てください。

<div> <h1>Ocean's Eleven</h1> <ul> <li>Comedy</li> <li>Thriller</li> </ul> <p>Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.</p> </div>

したがって、このマークアップはJade形式で表示されます。

 div h1 Ocean's Eleven ul li Comedy li Thriller p. Danny Ocean and his eleven accomplices plan to rob three Las Vegas casinos simultaneously.

2番目のオプションはより短く、よりエレガントに見えます。しかし、ジェイドは単なるマークアップではありません。 Jadeには、モジュール化された再利用可能な（再利用可能な）コードを作成できる、非常に便利な機能がいくつかあります。しかし、深く掘り下げる前に、基本を確認しましょう。

基本

Jadeの3つの重要な機能を強調します。

シンプルなタグ
タグに属性を追加します。
テキストのブロック。

記事を読みながら以下のコード例を試してみたい場合は、 CodePenを使用してHTMLのプリプロセッサとしてJadeを選択するか、公式のJade Webサイトでオンラインコンパイラを使用できます。

属性

もちろんこれはすべて良いことですが、タグに属性を追加する方法はありますか？実際には非常に簡単です。

最初の例に戻って、いくつかのクラスと特定の絵のポスターを追加しましょう。

 div(class="movie-card", id="oceans-11") h1(class="movie-title") Ocean's 11 img(src="/img/oceans-11.png", class="movie-poster") ul(class="genre-list") li Comedy li Thriller

なんて素晴らしいことでしょう？

 <div class="movie-card" id="oceans-11"> <h1 class="movie-title">Ocean's 11</h1> <img src="/img/oceans-11.png" class="movie-poster"> <ul class="genre-list"> <li>Comedy</li> <li>Thriller</li> </ul> </div>

CodePenでこの例を見る

しかし、なぜそこで停止するのですか？ Jadeは、識別子とクラスの特別な省略形を提供します。これにより、使い慣れた表記法を使用してマークアップがさらに簡素化されます。

 div.movie-card#oceans-11 h1.movie-title Ocean's 11 img.movie-poster(src="/img/oceans-11.png") ul.genre-list li Comedy li Thriller

CodePenでこの例を見る

ご覧のとおり、JadeはCSSセレクターを作成するときに使用する構文と同様の構文を使用します。

テキストブロック

この状況を想像してみましょう：<p>タグがあり、かなり大量のテキストを追加したい場合。しかし、Jadeは各行の最初の単語を新しいHTMLタグとして扱うため、停止します。

最初の例では、段落タグの後に記述のないドットが既にあることに気づくかもしれません。タグの後にピリオドを追加すると、このタグ内のすべてがテキストであることがJadeコンパイラーに明確になります。

 div p How are you? p. I'm fine thank you. And you? I heard you fell into a lake? That's rather unfortunate. I hate it when my shoes get wet.

CodePenでこの例を見る

わかりやすくするために、この例で<p>タグの後にドットを挿入しなかった場合、コンパイルされたHTMLの内部に開いている<i>タグがあり、行の先頭のフレーズ「I'm」が壊れます。

便利な機能

基本を理解したので、マークアップをよりスマートにするいくつかの本当に便利な機能を見てみましょう。それらの中には：

JavaScript
サイクル
補間;
ミックスイン。

JadeのJavaScript

JadeはJavaScriptで実装されているため、JadeでJavaScriptを使用するのは非常に簡単です。以下に例を示します。

 - var x = 5; div ul - for (var i=1; i<=x; i++) { li Hello - }

ここで何をしましたか？！行をハイフンで始めて、JadeコンパイラーにJavaScriptを使用したいことを伝えました。このコードをHTMLでコンパイルすると、次のようになります。

 <div> <ul> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> <li>Hello</li> </ul> </div>

CodePenでこの例を見る

コードが出力ストリームに直接含まれてはならない場合、ハイフンを使用します。 JavaScriptを使用してJadeで何かを出力する場合は、 =を使用します。上記のコードを微調整して、リスト内のアイテムの番号付けを示しましょう。

 - var x = 5; div ul - for (var i=1; i<=x; i++) { li= i + ". Hello" - }

出来上がり、番号付けがあります：

 <div> <ul> <li>1. Hello</li> <li>2. Hello</li> <li>3. Hello</li> <li>4. Hello</li> <li>5. Hello</li> </ul> </div>

CodePenでこの例を見る

もちろん、この場合、番号付きリストの方がはるかに適切ですが、そのアイデアをキャッチしましたか？詳細については、ドキュメントを参照してください。

サイクル

Jadeは優れた構文を使用してループを記述するため、JavaScriptに頼る必要はありません。ループ内の配列の要素を見てみましょう。

 - var droids = ["R2D2", "C3PO", "BB8"]; div h1 Famous Droids from Star Wars for name in droids div.card h2= name

そして、これは次のようにコンパイルされます：

 <div> <h1>Famous Droids from Star Wars</h1> <div class="card"> <h2>R2D2</h2> </div> <div class="card"> <h2>C3PO</h2> </div> <div class="card"> <h2>BB8</h2> </div> </div>

CodePenでこの例を見る

whileループを使用するだけでなく、配列のオブジェクト間を移動できます。詳細については、ドキュメントを参照してください。

補間

この方法でテキストとJavaScriptを組み合わせる

p = "こんにちは、" + profileName + "。お元気ですか？"

あなたの目を先延ばしにし始めるかもしれません。 Jadeには、この問題に対するよりエレガントなソリューションはありませんか？ベット？

 - var profileName = "Danny Ocean"; div p Hi there, #{profileName}. How are you doing?

CodePenでこの例を見る

もっと正確ではないですか？

ミックスイン

ミックスインは関数のようなもので、入力としてパラメーターを受け取り、対応するマークアップを生成します。ミックスインは、 mixinキーワードを使用して発表されます。

 mixin thumbnail(imageName, caption) div.thumbnail img(src="/img/#{imageName}.jpg") h4.image-caption= caption

ミックスインがアナウンスされた後、 +記号で呼び出すことができます。

 +thumbnail("oceans-eleven", "Danny Ocean makes an elevator pitch.") +thumbnail("pirates", "Introducing Captain Jack Sparrow!")

コンパイルされるもの：

 <div class="thumbnail"> <img src="/img/oceans-eleven.jpg"> <h4 class="image-caption"> Danny Ocean makes an elevator pitch. </h4> </div> <div class="thumbnail"> <img src="/img/pirates.jpg"> <h4 class="image-caption"> Introducing Captain Jack Sparrow! </h4> </div>

すべてをまとめる

1つの例で学んだことをすべて収集しましょう。フィルムの配列があり、各オブジェクトには、フィルムの名前、キャスト（サブ配列）、評価、ジャンル、IMDBページへのリンク、および画像（映画のポスターとして使用される）へのパスが含まれているとします。配列は次のようになります。

 - var movieList = [ { title: "Ocean's Eleven", cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"], genres: ["Comedy", "Thriller"], posterImage: "/img/oceans-eleven", imdbURL: "http://www.imdb.com/title/tt0240772/", rating: 7 } // etc... ];

10の映画があり、それぞれに素敵なマークアップを作成したいと考えています。当初、映画のIMDBページへのリンクの使用は提供していませんでした。フィルムの評価が5を超える場合は、親指を上げたアイコン、それ以外の場合は親指を下げたアイコンを付けます。上記の便利なJade関数をすべて使用して、次のタスクを実行するこのモジュラーコードを記述します。

ムービーカードと呼ばれるミックスインを作成する
- 配列を反復処理し、キャストを取り消します。
- 配列を反復処理し、ジャンルを表示します。
- 映画の評価を確認し、対応するアイコンを割り当てます。
一連の映画をスクラップし、ミックスインを使用してマークアップを作成します

そして、ミックスインを作成します。

 mixin movie-card(movie) div.movie-card h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre

このコードでは多くのことが起こっていますが、すでに理解しているので、理解していただけると思います。ここで、必要なのは、このミックスインをループで呼び出すことだけです。

 for movie in movieList +movie-card(movie)

それだけです！クールじゃないですか？！最終的なコードは次のとおりです。

 - var movieList = [ { title: "Ocean's Eleven", cast: ["Julia Roberts", "George Clooney", "Brad Pitt", "Andy Garcia"], genres: ["Comedy", "Thriller"], posterImage: "/img/oceans-eleven", imdbURL: "http://www.imdb.com/title/tt0240772/", rating: 9.2 }, { title: "Pirates of the Caribbean", cast: ["Johnny Depp", "Keira Knightley", "Orlando Bloom"], genres: ["Adventure", "Comedy"], posterImage: "/img/pirates-caribbean", imdbURL: "http://www.imdb.com/title/tt0325980/", rating: 9.7 } ]; mixin movie-card(movie) div.movie-card h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre for movie in movieList +movie-card(movie)

そのため、コードはコンパイル後に処理されます。

 <div class="movie-card"> <h2 class="movie-title">Ocean's Eleven</h2> <img src="/img/oceans-eleven" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Julia Roberts</li> <li>George Clooney</li> <li>Brad Pitt</li> <li>Andy Garcia</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Comedy</li> <li>Thriller</li> </ul> </div> <div class="movie-card"> <h2 class="movie-title">Pirates of the Carribean</h2> <img src="/img/pirates-caribbean" class="movie-poster"/> <h3>Cast</h3> <ul class="cast"> <li>Johnny Depp</li> <li>Keira Knightley</li> <li>Orlando Bloom</li> </ul> <div class="rating"> <img src="img/thumbs-up"/> </div> <ul class="genre"> <li>Adventure</li> <li>Comedy</li> </ul> </div>

しかし、ちょっと待ってください！しかし、名前をクリックして映画のIMDBページに移動する機能が必要になったらどうしますか？ 1行追加するだけです

a（href = movie.imdbURL）

ミックスインに。

 mixin movie-card(movie) div.movie-card a(href=movie.imdbURL) h2.movie-title= movie.title img.movie-poster(src=movie.posterImage) h3 Cast ul.cast each actor in movie.cast li= actor div.rating if movie.rating > 5 img(src="img/thumbs-up") else img(src="img/thumbs-down") ul.genre each genre in movie.genres li= genre

CodePenでこの例を見る

おわりに

今日、Jadeプリプロセッサの完全な無知から、その助けを借りて、美しいモジュラーマークアップを作成することになりました。 Jadeでできることはこれだけではありませんが、この記事があなたの好奇心に触れ、もっと知りたいと願っています。

重要な注意：既にご存じの方もいるかもしれませんが、ジェイドはパグに改名されました。将来、Jadeに関する記事では、新しいタイトル「Pug」または「Pug.js」が使用されます。

ジェイドスターターチュートリアル

基本

タグ

属性