非エンジニアな人におくるJavaScriptの基礎：（４）if文
前回ちょっと脱線して変数を扱いましたが今回は、制御文のifについて取り上げます。
- 目次
- なぜif文をとりあげるのか?
- if文を使ったサンプル
- まず list1とlist2に格納されてる「型」を理解する
- == と === の違い
- Titanium Studioで生成されるひな形アプリをベースに値が偶数の場合のみTabを生成するサンプル
- まとめ
- 関連情報
- まず list1とlist2に格納されてる「型」を理解する
- == と === の違い
なぜif文をとりあげるのか？
制御文のforを紹介した時にも書きましたが過去自分が作ってきたアプリを振り返った場合に
- ループ処理中、特定の項目の値がtrueだった場合 にTableViewにLabelを追加
- スライド済かかどうか判定 して、処理を実行する
というようなケースでif文を利用しておりアプリ開発では割と利用するものだと思うので取り上げることにしました。
if文を使ったサンプル
if文自体はそれほど使いこなすのは難しいと感じないかもしれませんが、JavaScriptでif文使う上で注意する所があると思うので、その部分を意識した簡単なコードを紹介します
var list1 = 1.0; var list2 = "1.0"; // (1)値の確認が同じかどうか確認する時に == を利用した場合 if(list1 == list2){ Ti.API.info("list1 and list2 is same"); } else { Ti.API.info("list1 and list2 is not same"); } // (2)値の確認が同じかどうか確認する時に === を利用した場合 if(list1 === list2){ Ti.API.info("list1 and list2 is same"); } else { Ti.API.info("list1 and list2 is not same"); }
(1)と(2)とでそれぞれどういう結果になるのかわかりますか？
両方共同じ結果になりそうですが、結果はというと
[INFO] list1 and list2 is same [INFO] list1 and list2 is not same
という形になります。
「あれ何でだろう？」
と素朴な疑問を持つかもしれませんし、私も昔この違いよく理解せず、ひとまず、全部 == としてました。
ただここを理解してないと思いがけないエラーを引き起こす可能性あるため、順を追って説明します。
まず list1とlist2に格納されてる「型」を理解する
list1は数字として扱うことを意識してクォーテーション無しで値を代入し、一方、list2は文字として扱うことを意識してクォーテーションで囲いました。
（JavaScript含めて）プログラミング言語の変数には型というものがあり、プログラミング言語によっては、変数を宣言する時に、その変数がどのような型なのかを同時に指定しなければいけないものがありますが、JavaScriptは変数名だけを宣言すればOKです。
ただ、あくまで宣言する時の話であって、実際には、型というものが存在しており、typeof という関数を以下のように利用することでその変数の型を調べることが出来ます。
Ti.API.info("list1 type: " + typeof list1); Ti.API.info("list2 type: " + typeof list2);
上記の実行結果はこのようになります
[INFO] list1 type: number [INFO] list2 type: string
ちょっとしたサンプルアプリ程度なら型の違いを深く理解してなくてもエラーになる確率は少ないかもしれませんが、list1は数値、list2は文字列として扱われているため、頭のなかで数字同士の足し算をしてるつもりになって
list1 + list2
とやっても、このようなケースの場合には、list1が数値でもlist2が文字列のため、前者のlist1が文字列として扱われてしまうため
11.0
という結果になります。
これ以上型の話を進めると、話がそれていきそうなのでひとまずこの辺りでとどめておきますが、気になる方は
- JavaScriptの型にはどのようものがあるのか？
- 上記のような型が異なる場合の処理を行うための型変換
あたりを書籍などで調べて見ると良いかと思います。
初めてのJavaScript 第2版
posted with amazlet at 14.03.31
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス
posted with amazlet at 14.03.31
== と === の違い
Qiitaに厳密等価演算子 javaプログラマのjavascript入門という記事がありここから一部文章を引用します
==を「等価演算子」 ===を「厳密等価演算子」という。 「厳密等価演算子」は型が同じかどうかチェックするが、「等価演算子」はチェックしない。 「等価演算子」を使うと型が異なる場合下記のように変換して比較する。 ・数値と文字列を比較するとき、文字列は数値に変換される。
== を使ったチェックの場合には、型の違いはチェックしないため、値だけのチェックになります。
そのためlist1、list2とも、値としては1.0なので、
var list1 = 1.0; var list2 = "1.0"; if(list1 == list2){ Ti.API.info("list1 and list2 is same"); } else { Ti.API.info("list1 and list2 is not same"); }
とあった場合には、
Ti.API.info("list1 and list2 is same");
と表示されます。
一方で、=== を利用した場合には、値のチェックのみならず、型のチェックも行い、値は両方共1.0ですが、listは数値型、list2は文字列型で異なる型になります。
そのためif文でチェックした場合には、
var list1 = 1.0; var list2 = "1.0"; if(list1 === list2){ Ti.API.info("list1 and list2 is same"); } else { Ti.API.info("list1 and list2 is not same"); }
というコードはelse句が評価されて
[INFO] list1 and list2 is not same
という形になります。
Titanium Studioで生成されるひな形アプリをベースに値が偶数の場合のみTabを生成するサンプル
Titanium Studioで生成されるひな形アプリをベースにして、
- １から９までの値が格納された配列をあらかじめ準備
- 値が偶数の場合のみ要素を生成する
というサンプルを考えました。
var i,len,tab,list,tabGroup = Titanium.UI.createTabGroup(); Titanium.UI.setBackgroundColor('#000'); list = [1,2,3,4,5,6,7,8,9]; for (i = 0, len = list.length; i < len; i++) { // listの値が偶数の場合のみ要素を生成する if(list[i] % 2 === 0){ tab = createTabElement(list[i] + '!!!'); tabGroup.addTab(tab); } } tabGroup.open(); function createTabElement(titleNumber){ var win ,label ,tab; win = Titanium.UI.createWindow({ title:"Tab" + titleNumber, backgroundColor:'#fff' }); label = Titanium.UI.createLabel({ color:'#999', text:'I am Window' + titleNumber, font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); win.add(label); tab = Titanium.UI.createTab({ icon:'KS_nav_views.png', title:"Tab" + titleNumber, window:win }); return tab; };
まとめ
if文を使いこなすのは簡単そうに見えるのですが、以下の様なポイントおさえておかないと思いがけないエラーが生じる可能性あります。
- 変数には型があるのをまずは理解しておく必要ある。
- if文を使って値のチェックをする時に、== （等価演算子）と=== （厳密等価演算子）がある。
- list1 = 1.0 と list2 = "1.0" というような変数同士の演算を行う場合には上記2点をしっかり理解しておく必要ある。
