40歳からのキャリアチェンジ

20代はエンジニア・PM、30代はWeb系エンジニア向けのキャリアアドバイザー。40代の今はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連あたり

非エンジニアな人におくるJavaScriptの基礎:(2)制御文(for)

前回は、関数についてとりあげたので今回は、制御文についてとりあげていこうと思います。

取り上げる制御文

プログラミング言語別に利用できる制御文が色々あり、その記法も異なってきます。

JavaScriptでもいくつか利用できる制御文がありますが、Titanium Mobileでの開発というのを念頭においた場合にひとまず

  • ループ処理のための for
  • if

の2つを最低限おさえるのが必要かなと思ってます。

なぜこの2つをとりあげるのか?

正直言うと、これ以外の制御文を個人的にあまり利用する機会がないというのが大きな理由だったりします^^;

実際過去自分が作ってきたアプリを振り返ると

  • for ループ
    • WebAPIから取得したJSON形式のデータを1つづつ取り出して処理する
    • ローカルにキャッシュしたSQLiteから取得したデータを1つづつ取り出してTableViewRowに追加していく
  • if文
    • ループ処理中、特定の項目の値がtrueだった場合 にTableViewにLabelを追加
    • スライド済かかどうか判定 して、処理を実行する

という感じのものが多く感じます。

作るアプリによっては、他の制御分を利用するケースというのももちろんありますが、Titanium Mobileが得意とするWeb APIと連携する一般的によくあるスマフォアプリ開発に限ればまずはこの2つの制御分をおさえておくのが良いかと思ってます。

ひとまず今回はfor ループ使ったサンプル

前回作った関数をベースにしてみます。

前回は、関数に渡す引数を

var tab1 = createTabElement('1!!!');
var tab2 = createTabElement('2!!!');

とすることで、I am Window1!!! や、I am Window2!!!というラベルが表示されるタブを2つ生成しましたが、この処理を応用させて、forループを使ってI am Window1からI am Window5というラベルがそれぞれ表示される5つのタブを生成するようにしてみます

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();
for(var i = 1; i < 6; i++){  //(1)
    var tab = createTabElement(i + '!!!'); // (2)
    tabGroup.addTab(tab);   
}
tabGroup.open();

function createTabElement(titleNumber){
    var win = Titanium.UI.createWindow({  
        title:"Tab" + titleNumber,
        backgroundColor:'#fff'
    });

    var label = Titanium.UI.createLabel({
        color:'#999',
        text:'I am Window' + titleNumber,
        font:{fontSize:20,fontFamily:'Helvetica Neue'},
        textAlign:'center',
        width:'auto'
    });

    win.add(label);

    var tab = Titanium.UI.createTab({  
        icon:'KS_nav_views.png',
        title:"Tab" + titleNumber,
        window:win
    });

    return tab;

};
  1. for ループの処理を開始します。今回はI am Window1からI am Window5まで表示したいので、forループのカウンターとして利用してる変数のiの初期値として、1を設定しています。また5までは表示したいので、ループのカウンターとして利用してる変数のiの値が6より小さくなるまで繰り返します。
  2. createTabElement()に渡す引数の箇所に、変数iと文字列を組み合わせて渡すことで、変数iには1から5までの数値が順番に入っていきます

上記実行結果

こんな感じで、タブが5つ生成されます。

f:id:h5y1m141:20140324064516p:plain

非エンジニアな人におくるJavaScriptの基礎記事一覧