変数の基本からpugの変数を理解する-WEB向上中！

書き方が少し特徴的ですが使うと便利なpug。その中でも情報の一元管理や条件分岐に活用できる変数は覚えると、とても便利です。

普段からJavaScriptなどを開発している人はすぐに覚える事ができると思いますが、そうでない方には少しハードルの高い機能とは思います。ただ覚えると開発の幅がとても広がるので、ぜひ変数の特性を理解し活用しましょう。

そもそも変数とは？から理解する

変数とは一言で言うと値を入れておく箱の事です。箱に入れられた値は記憶され、変更も可能です。

JavaScriptの記述を例に少しご紹介します。pugの変数も基本的には同じ考えとなります。

  var a = 1;
  alert('a');

これはaという変数の箱に「1」を入れています。
2行目は表示コマンドで、箱「a」の中身を表示します。実行すると「1」が画面上に表示されます。

次の場合はどうなるでしょうか？

  var a = 1;
  a = 2;
  alert('a');

aという箱に1を入れるのは一緒ですが、その次にaの箱に「2」を入れ直しています。結果「2」が表示されます。

このように好きなタイミングで値を入れたり、変更したり、利用したりできるのが変数です。

pugも他の変数同様に宣言をして変数を作成します。その宣言は頭に「-（ハイフン）」とvar宣言をして変数を定義します。以下のように記述します。

  - var a = 'テスト'

これで変数「a」に「テスト」という文字がセットされました。

次にこの変数を使う方法です。
使い方は「#{変数名}」と記述するだけで、その部分が変数にセットした値で出力されます。

  p #{a}

結果htmlには以下のように変数「a」にセットされた「テスト」という文字がセットされて出力されます。

  <p>テスト</p>

何となく変数の記述方法がわかった所で、実際にどういった使い方があるのでしょうか？
使い方としては、ページ内で繰り返し出てくる情報を変数で一元管理する使い方があります。

例えばランディングページであれば申込みのURLに変数を使うと、URLが変更が必要な際に1箇所変更するだけで全てのURLが変更されます。
他には商品詳細ページでスペックを変数で管理する事で、数字のブレを無くし管理・修正が行いやすくなるといった使い方が考えれます。

このように変数で管理する事で変更箇所を探す必要が無くなり、また1ヵ所修正するとページ内の内容は全て変更されるので、変更漏れのリスクを減らすことができます。
慣れてくるとif文などの条件分岐に使ったり、テンプレートを活用したりと、変数を覚える事で利用シーンが広がっていきます。

ページによってはたくさんの変数を扱う場合があるかと思います。その場合に全て「-」を入れるのではなく、入れ子にする事で1つの「-」だけで記述できます。

見た目もすっきりするのでお勧めで、以下のように最初に「-」を記述し、その次の行から1段ずらして変数を書いていきます。

  -
      var a = 'テスト1'
      var b = 'テスト2'
      var c = 'テスト3'

pugでは属性値の指定に変数を使うとでエラーとなる、または正しく変数の値が出力されない場合があります

例えば下記のようなパターンです。

  - var _url = '/aaa/bbb/'
  a(href="#{_url}")

これを出力するとhtmlでは「<a href="#{_url}"></a>」と、変数の記述がそのまま表示され期待した結果と違うことになります。

そいった場合の回避方法を2つご紹介します。
他のケースの変数エラーでもどちらかの方法で回避できることもあるので、エラーが出た場合はお試し下さい。

まず1つ目ですが「`(バッククォート）」を使う方法です。「#」が「$」に変わっている点にご注目下さい。

  - var _url = '/aaa/bbb/'
  a(href="`${_url}`")

もう一つは変数名をそのまま表記する方法です。ここでのポイントは属性値を「"」で囲っていない点です。

  - var _url = '/aaa/bbb/'
  a(href=_url)

なぜ属性値がエラーとなり、なぜこういった方法で回避できるのかここでは割愛します。エラーが起こった時に回避の方法としてこういった記述があると覚える程度で良いかと思います。

最初は新しいやり方を覚えるのが大変で、エラーが出るたびに心が折れそうになりますが、慣れてくると手放せないものになります。

私も最初はpugの記述に戸惑う事が多々ありましたが、慣れてくると手放せなくなりました。
特に変数は何かと便利なので、ぜひ使いこなして下さい。