QA@IT

Titanium Mobileで複数のJavaScriptファイルに処理を分ける方法はありますか?

3962 PV

複雑なアプリを作る場合、機能やライブラリ毎に複数のファイルに処理を分散して、複数人でも開発しやすいようにしたいのですが、可能ですか?

回答

古いチュートリアルでは、こんな風にWindow毎にファイルを分けている例がありました:

var tab1 = Ti.UI.createTab(
  {
    window: 'window.js',
    title:'Tab 1',
    icon: '/images/icon1.png'
  }
);

この場合、tab1というタブのウィンドウに関する処理はResources/window.jsに記述することができます。

もちろん今でもこれで動作はするのですが、最近ではこの書き方は問題があると見なされています。むしろ忘れてほしい、なかったことにしたいくらいの勢いで、近頃ではサンプルプログラムでさえこの手法は採用されていません。

ではどうすればいいのかというと、requireとexportsを使ったCommonJSスタイルが主流になっています。

window1.js

function Window1(title){
  self = Ti.UI.createWindow({
    title: title
  });
  self.add(Ti.UI.createLabel({text: "I am Window 1"}));
  return self;
}
module.exports = Window1;

app.js

var Win1 = require('window1');
var win1 = new Win1("Window 1");

var tab = Ti.UI.createTab(window:win1);
var tabGroup = Ti.UI.createTabGroup();

tabGroup.addTab(tab);
tabGroup.open();

requireを使ってwindow1.jsの内容を変数win1に閉じ込めることになるので、app.jsとwindow1.jsの間で名前空間の衝突などは考慮する必要はありません。また、exportsを使って外部に公開したい部分をAPIとして定義することができるので、規約や仕様書、約束をベースに複数人で開発する際には効果的です。もし抵抗がなければ、こちらの手法を使って開発されることを強く勧めます。

Titanium Mobileの開発に先立って必ずチェックしておきべき、Kitchen SinkというアプリでもCommonJSスタイルに書き直されたバージョンが公開されています。https://github.com/appcelerator-developer-relations/KitchenSink

『Titanium MobileのCommonJSサンプルをCoffeeScript化してgithubにアップしました』
http://mochizblog.heroku.com/32
こちらのサイトではAppcelerator社から提供されているサンプルをCommonJSスタイルに変更し、CoffeeScriptでも読めるようにしたものが公開されています。CoffeeScriptもTitanium Mobileの開発者の間ではとても人気のあるツールなので、一度お試しください。

この他にも、Ti.includeを使って外部ファイルを取り込むという手法もあります。これは記述された箇所に他ファイルを読み込んで合成します。PHPのincludeみたいなものですが、中身がどうなっているのかわからないのが不安だからと使わない開発者もいます。

編集 履歴 (3)
ウォッチ

この質問への回答やコメントをメールでお知らせします。