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

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

非エンジニアな人におくるJavaScriptの基礎:(1)関数編

はじめに

自分のような非エンジニアな人が、Titanium Mobileに興味を持って取り組み始めてつまづく要因が色々あると思うのですが、JavaScriptの基礎的な部分の理解がちょっと足りないことによるものというのは結構大きいかなと思ってます。

JavaScriptの基礎的な部分というのは、人によって様々あるかと思いますが、非エンジニアな人にとっては

  • 関数
  • 制御文

などが挙げられると思ってます。

裏を返せば、この部分の理解をある程度深めておくことで自分が作りたいと思ったものを、調べながらなんとか作れるようになれるんじゃないかなとふと思いつき、非エンジニアな人におくるJavaScriptの基礎みたいなチュートリアルを考えてみました。

とりあげるJavaScriptの知識

上記でも記載しましたが、以下についてとりあげます

  • 関数
  • 制御文
    • for ループ
    • if

ここではとりあげないJavaScriptの知識

以下については、とりあげません。

  • 無名関数(特に function(){..}()みたいな記号だらけのやつ
  • JavaScriptでのクラスを実現する方法
  • JavaScriptのthisのスコープ
  • JavaScriptのCommonJSについて

ただ、自分の体験上、画面遷移を伴い、かつ、複数ウィンドウを管理するようなアプリを開発する場合には上記に上げた内容を理解してないと、開発がはかどらない可能性があるかと思ってるのでいつかとりあげてみたいとは思ってます。(*1)

想定対象者

Titanium Mobileに興味を持って実際にいじりはじめた非エンジニアな人を想定しています。

チュートリアル始める前の準備

新規プロジェクト作成後のひな形のアプリをベースにしたサンプル

ある程度ベースとなるアプリを基盤に、少しづつ機能を追加してくようなアプローチの方が理解が進みやすいと考え、当初は、オリジナルなサンプルアプリを考えたのですが、考えるのが大変だったので、Titaniumで新規プロジェクト作成後に出来上がるひな形のアプリをベースにすることにしました。

ひな形のアプリなら、環境構築した人にとってもすぐに利用できる題材で敷居も低いかなと思ったので、ひとまずこれを利用することにします。

念のためTitanium Studioでのproject設定の流れ

TitaniumStudioを起動した後、File→New→Titanium Mobile Projectと進みます

プロジェクト設定スタート画面

Project Template画面が標示されたら、Default Projectを選択します

テンプレート選択

プロジェクト設定画面が表示されますので任意の名前、idを設定して下さい

プロジェクト名とID入力画面

しばらくして設定が完了すると、以下のような画面が表示されればOKです

設定完了後の画面

関数について

プロジェクト設定完了後に自動的に出来上がるapp.jsのソースコードを簡単に解説します

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup(); // (1)
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({   // (2)
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({      // (3)
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
var label1 = Titanium.UI.createLabel({  // (4)
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
win1.add(label1);                       // (5)
// 以下省略
  1. Tabを格納するためのTabGroupを生成tabGroupという名前を付けてます
  2. タイトルが「Tab 1]、背景色が白(#fff)のWindowを生成win1という名前を付けてます
  3. タイトルが「Tab 1]、アイコンを指定、対応するWindowとしてWin1を指定したTabを生成。tab1という名前を付けてます
  4. 表示内容「I am Window 1」、表示色を灰色(#999)、フォント名&サイズを指定したLabelを生成。label1という名前を付けてます
  5. win1の内部にlabel1を配置してます

UI配置イメージ

これと似た処理が、省略された箇所で実施されてますが、こういう似たような処理をコピペしながらプログラムを書いてくのは非効率ですし、コピペして修正して・・という作業をしててうっかり作業を間違える可能性もあるかと思います。

こういう、ほぼ同じよな処理を複数こなす場合には、プログラムの中で小さいプログラムを定義するようなことがどのようなプログラミング言語でも実現でき、これを関数と言います。

こう書いてもすぐにイメージできないかもしれないので、具体的なコードを以下で紹介したいと思います。

createTabElementというを関数を使って書き換える

Label、Window、Tabにそれぞれ表示する文字が違いますが、Ti.UI.Label、Ti.UI.Window、Ti.UI.Tabを生成するという意味においては、共通した処理になるため、このUI要素を生成する部分を関数として定義することにします。

なお関数の名前を考える際に

  • 先頭文字には数字の0から9は使用できない
  • JavaScriptプログラミング言語ですでに定義された用語(ifとかvarとかforなど)は使用できない

というのを避ければOKです。

一応日本語も使えるようですが通常は英単語を組み合わせて、他の人にもその関数がどのような処理を行うのかおおまかに把握できる名前にするのが一般的なので、今回はcreateTabElement (*2)という名前にしました。

既存のapp.jsを以下のように書き換えます

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup();
var tab1 = createTabElement('1!!!');
var tab2 = createTabElement('2!!!');
tabGroup.addTab(tab1); 
tabGroup.addTab(tab2); 


tabGroup.open();

function createTabElement(titleNumber){ //(1)
    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;
};

上記のソースコードの以下の部分が今回キモになるポイントです

function createTabElement(titleNumber){
  // 実際の処理
}

JavaScriptの場合、関数を利用する場合には

  function 関数名(引数){}

という形で記述します。

引数の所が少しわかりづらいかもしれないので、補足説明します

var tab1 = createTabElement('1!!!');
function createTabElement(titleNumber){
    var win = Titanium.UI.createWindow({  
        title:"Tab" + titleNumber, // (1)
        backgroundColor:'#fff'
    });
    // 以下省略
}

(1)の所に注目いただくとわかるかと思いますが、引数として設定されたtitleNumberという変数がここに代入されます。createTabElement関数に、'1!!!' としてるため、Ti.Ui.TabのTitleには、Tab'1!!!'が設定されます。

まとめ

新規プロジェクト作成後のひな形のアプリをベースに、JavaScriptの関数を利用した形式に書き換える方法を紹介しました。プログラム経験がまだまだ少ない方にとってどこまで役に立てる内容か正直わからない所があるので、些細な所でもわかりづらい所があったり、素朴な疑問があるようでしたら、はてブコメント、Twitter、MessageLeafなどでフィードバックいただければと思ってます。

次回は、制御文のfor とif をとりあげようかと思ってます

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

(*1)※ 完璧に理解しきれてない所があるのと、こういう部分については、CoffeeScriptのチカラを借りてコードを書いてるので、自分自身、説明がうまく出来ないというのが本音だったりします ^^;

(*2) こういう名前を付ける際に、英単語をすべて小文字にせず何らかの規則性をもたせた形にしておくと、後々プログラムを読む返すことがあった場合に、読みやすくなります。 JavaScriptは、Titanium Mobile以外にも、通常のWebアプリ開発でも利用されてますが、getElementsByTagName のように、複合語の先頭を小文字で書き始めるローワーキャメルケース(LCC) 、または単にキャメルケースというものが採用されてます。