DTP屋さんの為のJavaScriptショートTips.2

時間の流れというのは本当に侮れません。とうとう連休が来てしまったようです。といいつつも、わたしはカレンダー通りに勤労致しておる次第でございます。皆様に置かれましては７連休以上の方もいらっしゃると存じます。そういう方もお休みのひとときに頭の体操がてらスクリプトを書いてみるのも良いのではないでしょうか。
ということで、今回もJavaScriptの基本的な部分について書いておこうと思います。

今回は条件分岐についてです。
まずは以下の関数について…

function u16to8 (cd)
{
   var out =
      (cd<0x80
         ? [cd]
         : (cd<0x800
            ? [cd >> 6 & 0x1f | 0xc0, cd & 0x3f | 0x80]
            : [cd >> 12 | 0xe0, cd >> 6 & 0x3f | 0x80, cd & 0x3f | 0x80]
         )
      );
   return out;
}

この例はUnicode（16bit）文字コードからUTF-8へ変換する関数です。できるだけコンパクトに記述するために３項演算子を利用しています。
この３項演算子の仕組みはif文と違いはありません。評価式や処理の振り分けに用いる記号が1文字だけになるためにif文を利用した場合より記述がコンパクトになる傾向があります。しかし、区切りが１文字で済むという事は視認性の低下に直結し構造を見失いやすいということです。

function u16to8 (cd)
{
   var ar = [];
   if (cd<0x80)
   {
      return [cd];
   }
   else if (cd<0x800)
   {
      ar = [cd >> 6 & 0x1f | 0xc0];
   }
   else
   {
      ar = [cd >> 12 & 0xf | 0xe0,
      cd >> 6 & 0x3f | 0x80];
   }
   ar.push (cd & 0x3f | 0x80);
   return ar;
}

こちらのコードは同一の内容をif〜else文を利用して書いたものです。随分冗長に感じますが、処理構造は一目瞭然です。3項演算子ではネストが深くなるほど、どの段階での振り分けに対する処理なのかが見えにくくなる傾向にあります。

function price (name)
{
   if (name == "item_A") return 200;
   else if (name == "item_B") return 500;
   else if (name == "item_C") return 300;
   else return -1;
}

var kakaku = price("item_A");
alert(kakaku);

こちらの関数は商品名に対する価格を返す例です。if〜else文が見るからに冗長ですね。
これを…

var kakaku = -1;
switch (name)
{
   case "item_A" :
      kakaku = 200;
      break;
   case "item_B":
      kakaku = 500;
      break;
   case "item_C":
      kakaku = 300;
      break;
   default:
      kakaku = -1;
}

alert(kakaku);

switch文を利用して書いてみました。全く同じ処理ですが、これも中身が複雑な処理になると見通しが悪くなります。
このような名前／値の単純な参照を行う場合、次のようにオブジェクトを利用すると処理が単純になる場合も多くあります。

var kakaku =
{
   "item_A" : 200,
   "item_B" : 500,
   "item_C" : 300,
}

alert(kakaku["item_A"])

毎回書いているような気がしますがJavaScriptというのは非常に柔軟な制御構造を持つ言語です。その時々に応じて最適解は異なるかとは思いますが、こういった実装のバリエーションが頭に入っていると可読性の高いコードが書けるようになるでしょう。
「構成はシンプルに、実現したい機能は細かく分けて部分的な機能をしっかり煮詰めて、それらをつなげて行く。」という流れを大切にしていただければと思います。