GitBookCommonJSについてTableViewの使い方について学ぶのサンプルデータを表示させるのサンプルコードをベースにCommonJSスタイルの書き方について解説していきます。Resources直下に、style.jsというファイルを新規に作成します。作成後は以下の様なフォルダ構成になるかと思います。以下のように記述することで、UI要素の幅、高さ、色などの値の設定箇けをapp.jsから切り離すことが出来ます。編集するUI要素を生成する部分はstyle.jsにて行うようにしたことでapp.jsの方を編集する必要が出てきます。具体的にはapp.js内で処理していたUI要素を生成する部分のコードは削除style.jsを読み込みこちらで設定した値をそれぞれのTi.UI要素に適用という流れになります。編集した結果以下の様なコードになります。rows.push(row);}mainTable.setData(rows);win.add(mainTable);win.open();ソースコードの解説style.jsとapp.jsの対応関係を絵にまとめつつソースコードの解説をします。いう形式で、UI要素に指定したい項目名を設定します。オブジェクト名は任意の名前でOKですが、対応関係がわかるようにして置いたほうがソースコードとして理解しやすくなるため名前を統一することをおすすめします。app.jsからstyle.jsを読み込む時には、require()という関数を利用して任意の変数に格納します。style.jsでは、exports.mainTable:app.jsでは変数mainTableとして格納されてるTableViewに対する設定値exports.row:app.jsでは変数rowとして格納されてるTableViewRowに対する設定値exports.textLabel:app.jsでは変数textLabelとして格納されてるTextLabelに対する設定値という形になります。このように設定情報だけを別のファイルにするだけでも比較的ソースコードの見通しが良くなりますが、次の項でもう少し踏み込んだ形でCommonJSスタイルの書き方を紹介します。