Help us understand the problem. What is going on with this article?

そろそろ自社で今時のCSS、JS教育をしようと思う(Jade-実践編その1)

More than 5 years have passed since last update.

昨日の「そろそろ自社で今時のCSS、JS教育をしようと思う(Jade-基本編)」に引き続き、今日は実務での使用を想定したTipsを勉強がてら書いていきます。

Facebookのスニペットを貼り付けたい

JadeはHTMLの方言のようなものなので基本は方言を使うことになるのですが、FaceBookやTwitterなどのいわゆる「いいね!」ボタンのHTML+Javascriptはそのまま貼り付けたいと思うはずです。(わざわざJadeの方言に直すのが面倒くさい)

facebook-snipet
div#facebook.
  <div id="fb-root"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>
  <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>

ここのポイントはセレクタのdiv#facebookに"."をつけること。こうすると次のインデントのブロックが入れ子になってくれます。
以下はわかりやすい例。

error-syntax
script
  if (confirm("You are Men?")) {
    alert("YES");
  }
ng...
Running "jade:src" (jade) task
>> Jade failed to compile src/index.jade.
>> SyntaxError: src/index.jade:16
>>     14|   body
>>     15|     script
>>   > 16|       if (confirm("You are Men?")) {
>>     17|         alert("YES");
>>     18|       }
>>     19|     main

これはシンタックスエラーになります。Jsは<script>の入れ子にしたいので要素に"."をつけて入れ子にします。

データの入力

業務系のシステムはやたらとテーブルの一覧とかあったりするんですが、モック作るのしんどいですよね。
こんなときはデータを外に切り出すと楽になれます。
(複数行にわたってデータを定義できないのはJadeの仕様みたいです。複数行の表示はArray.push()で我慢しましょう)

table-data
    - var head = ["col1", "col2", "col3"];
    - var body = [];
    - body.push(["hoge1", "moge1", "soge1"]);
    - body.push(["hoge2", "moge2", "soge2"]);
    - body.push(["hoge3", "moge3", "soge3"]);
    - body.push(["hoge4", "moge4", "soge4"]);
    - body.push(["hoge5", "moge5", "soge5"]);
    - body.push(["hoge6", "moge6", "soge6"]);

    table
      tr
        each val in head
          th= val
      each line in body
        tr
          each col in line
            td= col

以下、生成結果。

table-data
    <table>
      <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
      </tr>
      <tr>
        <td>hoge1</td>
        <td>moge1</td>
        <td>soge1</td>
      </tr>
      <tr>
        <td>hoge2</td>
        <td>moge2</td>
        <td>soge2</td>
      </tr>
      <tr>
        <td>hoge3</td>
        <td>moge3</td>
        <td>soge3</td>
      </tr>
      <tr>
        <td>hoge4</td>
        <td>moge4</td>
        <td>soge4</td>
      </tr>
      <tr>
        <td>hoge5</td>
        <td>moge5</td>
        <td>soge5</td>
      </tr>
      <tr>
        <td>hoge6</td>
        <td>moge6</td>
        <td>soge6</td>
      </tr>
    </table>

一番左にある列だけthにしたいとか、col,rowspanしたいとか思ったら隣りにいるプログラマに相談してください。
多分いい案を持っていると思います。

以外と進まなかった。

次回はextendsとかmixinに触れてみたいと思います。

ちょっとした所感

静的なページでifを使う用途があまり思い浮かばなかった。

  • ファイルの差し替えなしに「工事中」ページに差し替える(どのみちコンパイル後のファイル差し替えるんだけどさ)
  • mixinsで再利用するのを前提に表示箇所で微妙に表示を変えたい場合に、変数渡してif分岐する

ぐらいかな。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away