開発部だより 第152回
最近はスマートフォンやタブレット端末が急速に普及して、それらで受講できる eラーニングコンテンツを作成したいという要望も多くいただくようになりました。ただこのスマートフォンやタブレット端末で受講できるコンテンツは、PCのブラウザーで受講するものと結構作りが変わってきます。その理由として、タッチ操作独特のインターフェイス、画面サイズ・解像度が機種ごと違う、ネットワークの速度が遅い（ことが前提）など色々あります。そしてもう一つ大きな理由として、iPad、iPhone ではAdobe FLASHが使用できないことを挙げないわけにはいきません。
Adobe FLASHが使用できないとなると、映像・音声の再生、画像をアニメーションなども別の手段で作成することになりますが、それがHMTL5、JavaScript、CSSとなるわけです。そんなわけで開発部ではFLASHと同様、そちらの方の開発技術向上にも力を入れています。特にJavaScriptは本格的なプログラミング言語ですし、パターン化・高速化など考えないといけないことも多いので頑張りすぎると夢にも出てきます。
そんなわけで、ここからは開発中に見つけたJavaScriptの役に立ちそうな記述「三項演算子を使用した複数条件分岐」についてご紹介します。
まずは条件分岐するときは「if/else」文を使用しますが、条件が多いときは「switch」文を使用したほうが何度も分岐をチェックしないし見た目もわかりやすいですね。もう、条件が3つ以上になるなら「switch」文のほうがいいような気がしますが、書いてる途中でつい条件が増えていくようなこともありますし基本の式文でもあなどれません。
そこで、複数の条件分岐を簡単に書く方法をご紹介します。
まず、これの基本は三項演算子です。
条件式 ? 式1 : 式2
a == 100 ? alert("100点") : alert("100点じゃありません");
あまり使わないかもしれませんが上の式、三項演算子は「if/else」文より簡単に書けます。
ちなみに「if/else」文だと次のようになります。
if(a == 100) {
alert("100点");
} else {
alert("100点じゃありません");
}
そして更に条件を付け足したい場合、「if/else」文なら
} else if(条件) {
としますが、三項演算子でやる場合はこうなります。
a == 100 ? alert("100点"):
a >= 80 ? alert("80〜99点"):
a >= 50 ? alert("50〜79点"):
a >= 30 ? alert("30〜49点"):
alert("0〜29点");
簡単に説明すると、三項演算子の条件にあてはならない項に更に三項演算子を書いて、そのまた条件にあてはならない項に更に三項演算子を書いて・・・ということです。
ちなみに上の記述、aには0〜100の数値を入れてください、でないと怪しい結果が出てしまいます。
