A Jade Tutorial for Beginners

かなりきちんとした正しい？

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

ログイン後にコピー

codepen

でこの例を表示します

しかし、ここでは止まりません。 JadeはIDとクラスに特別な速記を提供し、おなじみの表記法を使用してマークアップをさらに簡素化します。

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セレクターを書くときに既によく知っている構文と同じ構文を使用しているため、クラスを見つけやすくなります。

テキストのブロック

段落タグがあり、その中に大きなブロックを配置するとしましょう。ジェイドは、すべての行の最初の単語をHTMLタグとして扱います。

この記事の最初のコード例で、罪のない期間に気づいたかもしれません。タグの後にピリオド（フルストップ）を追加すると、そのタグ内のすべてがテキストであり、ジェイドが各行の最初の単語をHTMLタグとして扱うのを停止することを示しています。

codepen

でこの例を表示します

そして、ポイントを家に帰るために、この例のPタグの後の期間を削除する場合、コンパイルされたHTMLは「I」という単語の「I'm」をオープニングタグとして扱います（これでケース、それはタグになります）。
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.
ログイン後にコピー
ログイン後にコピー

強力な機能

基本をカバーしたので、マークアップをより賢くする強力な機能を覗いてみましょう。このチュートリアルの残りの機能については、次の機能について説明します。

ループ

javascript

javascript
JadeはJavaScriptで実装されているため、JavaScriptをJavaScriptを使用するのは非常に簡単です。これが例です。

ここで何をしましたか？！ハイフンでラインを開始することで、JavaScriptの使用を開始したいと考えていることをJadeコンパイラに示します。上記のJadeコードをHTMLにコンパイルするときに得られるものは次のとおりです。

codepen

でこの例を表示します

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

ログイン後にコピー

コードが出力を直接追加しない場合、ハイフンを使用します。 JavaScriptを使用してJadeに何かを出力する場合は、=を使用します。上記のコードを調整して、シリアル番号を表示しましょう。

そしてヴォイラ、シリアル番号：

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

ログイン後にコピー

があります

codepen

でこの例を表示します

もちろん、この場合、順序付けられたリストの方がはるかに適していますが、ポイントが得られます。さて、XSSとHTMLが逃げるのが心配な場合は、詳細についてはドキュメントを読んでください。

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

ログイン後にコピー

ループ

Jadeは、JavaScriptに頼る必要がないように、優れたループ構文を提供します。配列の上にループしましょう：

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

ログイン後にコピー

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

codepen

でこの例を表示します

オブジェクトを反復し、ループ中に使用することもできます。詳細については、ドキュメントをご覧ください。

補間

このp = "こんにちは、" profilename "のようなテキストにJavaScriptをミックスするのは面倒になる可能性があります。お元気ですか？」ジェイドにはこれのためのエレガントなソリューションがありますか？あなたは賭けます。

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

ログイン後にコピー

codepen

でこの例を表示します

それはきちんとしていませんか？

ミックス

ミックスインは関数のようなものです。パラメーターを入力として使用し、マークアップを出力として与えます。ミキシンは、Mixinキーワードを使用して定義されています

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

ログイン後にコピー

混合物が定義されたら、構文で混合物を呼び出すことができます。

このようにhtmlを出力する

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.

ログイン後にコピー

すべてをまとめる

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

ログイン後にコピー

これまでに学んだことすべてをまとめましょう。映画のタイトル、キャスト（サブアレイ）、評価、ジャンル、IMDBページへのリンク、映画のポスターのイメージパスを含む、各アイテムが素晴らしい映画を持っているとしましょう。アレイはこのようなものになります（読みやすさのために追加された空白）：

10本の映画があり、それぞれに素敵な映画カードを作りたいと思っています。最初は、IMDBリンクを使用する予定はありません。映画が5を超えると評価されている場合、親指を立てます。そうでなければ、親指を立てます。 Jadeのすべての優れた機能を使用して、次のモジュラーコードを作成します。

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

ログイン後にコピー

ムービーカードのミックスイン

を作成します

キャストリストを繰り返し、俳優を表示します。ジャンルでも同じことを行います。
- 映画リストを繰り返し、ミックスインを使用して映画ごとに1枚のカードを作成します。
- それでは、最初にMixinを作成しましょう。

それだけです。それはエレガントですか、それとも何ですか？これが最終コードです。

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

ログイン後にコピー

そして、これがコンパイルされたhtml：

です

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

ログイン後にコピー

しかし、ちょっと待ってください。映画のタイトルをクリックすると、映画のIMDBページに移動したい場合はどうなりますか？ 1つのラインを追加できます：a（href = movie.imdburl）ミックスインに

codepen

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

ログイン後にコピー

でこの例を表示します

結論

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

ログイン後にコピー

私たちは、ジェイドについて何も知らないことから、美しいモジュラームービーカードの構築に行きました。 Jadeにはもっとたくさんありますが、物事をシンプルに保つためにいくつかの概念を光沢がありました。ですから、このチュートリアルがあなたの好奇心をそそり、もっと学ぶことを願っています。

重要なメモ：あなたの何人かがすでに知っているかもしれないように、ジェイドはソフトウェアの商標請求のためにパグに改名されました。将来、ジェイドに関する記事は新しい名前「パグ」または「パグジ」を使用します。初心者向けのジェイドチュートリアルに関するよくある質問（FAQ）

Jadeとは何ですか？Web開発において重要なのはなぜですか？

Jadeは、Pugとしても知られていますが、Hamlの影響を強く影響を受け、node.jsおよびブラウザーのJavaScriptで実装されています。開発者がより簡潔な方法でHTMLテンプレートを作成できるようにする、クリーンでエレガントな構文を提供します。 Jadeは、HTMLコードの作成に費やす時間を短縮し、開発プロセスをより効率的にするため、Web開発において重要です。また、動的コードもサポートします。つまり、HTMLのレンダリング中に評価される変数と式を含めることができます。 JSおよびNPM（ノードパッケージマネージャー）は、コンピューターにインストールされています。これらを手に入れると、ターミナルまたはコマンドプロンプトにjade -gをインストールするコマンドNPMを実行することにより、システムにJadeをグローバルにインストールできます。これにより、コンピューター上の任意のディレクトリからJadeを使用できます。

HTMLをJadeに変換するにはどうすればよいですか？。手動で行うには、Jade構文とHTMLへのマップを理解する必要があります。たとえば、HTMLタグはJade Elements、HTML属性がJade属性などになります。オンラインツールはこのプロセスを自動化できますが、基礎となる変換ルールを理解することは依然として重要です。構文。 Jadeはインデントを使用してネストされた要素を表し、タグを閉じる必要はなく、HTMLよりも簡潔にします。ただし、HTMLはより広く使用され理解されており、一部の開発者は、その明示的なクロージングタグとインデントルールの欠如が読み取りと理解しやすいと感じています。 Jadeでは、-myntaxを使用して定義できます。たとえば、-var title = 'home'は、値「Home」を持つ変数のタイトルを定義します。その後、＃{}でプレフィックスすることにより、Jadeテンプレートでこの変数を使用できます。たとえば、H1 =タイトルはhtmlで

home

としてレンダリングされます。 Jadeは、変数、式、コントロール構造（IF-ELSEステートメントやループなど）、機能など、さまざまなJavaScriptコンストラクトをサポートしています。 JavaScriptコードをJadeテンプレートに含めるには、 - インクルードキーワードを使用します。たとえば、ヘッダーには、テンプレートのその時点でheader.hadeファイルの内容が含まれます。