読者です 読者をやめる 読者になる 読者になる

WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot.jsで変数の値によってhtmlタグに別のクラス名を付与する方法のメモ

Riot.js プログラミング 備忘録 JavaScript

まえおき

分かりにくいタイトルじゃの(笑)

例えばmount時に渡された変数の値を取得したり、ajaxAPIから何らかのデータを取得し、 その結果の値によってpタグのクラス名を別々に付与したい時ってあると思う。あるよね? ほいで、それをRiot.jsだとどう書くのか、個人的には3パターンある。これはそのメモ。

※この記事執筆当時のRiot.jsのバージョンは2.4.1です。

書き方

3パターンを大雑把に書くと、こんな感じ。

例として、変数colorの値がtrue/falseによってクラス名をcolor-light/color-darkとする処理を、 この3パターンで順番に書いていく。

愚直に書く

1つ目。これは{}内でガリガリ書く。この書き方だと長くなって読みづらいけんあまりオススメしない。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ 'color-light': (color === true), 'color-dark': (color === false) }">ダミーテキスト</p>
      </li>
    </ul>
  </div>
</app>

理解はしやすいが長い。そしてhtmlが見辛い(というか頭悪い)。夜中にコード書いてて、朝これを見て昨晩の自分を怒りたくなった。┐('~`;)┌ヤレヤレ

三項演算子を使う

2つ目。これはさっきのコードを三項演算子をで書き換えたもの。こっちの方が短くスッキリして、htmlも見やすくなった。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ color === true ? 'color-light' : 'color-dark' }">ダミーテキスト</p>
      </li>
    </ul>
  </div>
</app>

一応デモも用意したので参考になれば幸い。→ サンプル

メソッドにする

3つ目。これが一番htmlは見やすいかなと。上記2つの例ではJavaScriptの処理はscriptタグ内ではなく、{}内だったが、 この例ではscriptタグ内で処理している。

以下コード例。

<app>
  <!-- layout -->
  <div id="hoge">
    <ul>
      <li each="{ opts.fuga }">
        <p class="{ classSet(color) }">ダミーテキスト</p>
      </li>
    </ul>
  </div>

  <!-- javascript -->
  <script>
    classSet(val) {
      // ここを三項演算子で書いても良いかな
      if ( val === true )
        return 'class-light';
      else
        return 'class-dark';
    }
  </script>
</app>

余談

好みやコーディング規約にしたがって書き方は分かれるじゃろうな。 それにしても、はてブロのシンタックスハイライトは見辛いな。。。(カラフル過ぎるかと)