Sencha 公式トレーニングで教えている時には、受講生が解決できない問題があって、私に見て欲しいと聞きに来ることがよくあります。私はコードを書かないので、すぐ対応することは出来ないことがあります。しかし、最も明らかな問題をカテゴライズして、解決していくシンプルな技術のセットがありますので、それを今日提供します。

今日の記事で、最もよく現れる問題を紹介して、シンプルで効果的な戦略で解決してみます。

問題: データが表示されない

アプリは表示されているけれどデータが見えません。ほとんどの場合、この問題は簡単に解決できます。

これをお試しください

まず、Storeを確認して下さい。次のコードをブラウザコンソールから実行ます。

Ext.getStore('MyStore').load();

これはStoreオブジェクトを返します。data コンフィグを見ると、配列の長さがゼロより大きいか確認できます。

data が有効な状態なのであれば、レンダリングで何かが起きている可能性があります。次の事項を検討してみましょう。

data フィールドはモデルのフィールドをマッピングしてますか？

data 配列は空ですか？ブラウザーのデベロッパーツールバーの Network タブを選択して下さい。

ステータスコードは 200 でしたか？違いますか？ その場合はリクエストで問題が起きています。 Model/Store の proxy を確認して下さい。

リクエストは正常に動作しているけど、まだデータは表示できませんか？ 取得したデータが有効かどうかを確認して下さい。 例えば、JSON データを利用している場合は、ブラウザの Network タブからデータのレスポンスをコピーして、 http://jsonlint.com または http://jsonplint.com/ に貼りつけてチェックできます。自分のテストデータも利用できます。

問題: アプリケーションをビルドできない

Sencha Cmd があなたのアプリケーションを構築してくれない。こんな時、ほとんどの場合は Sencha Cmd は何が起こっていて、何を変更するべきか明確に説明してくれます。 しかし、時々 Sencha Cmd がビルドしない状況で、エラーの解説がわかりにくいこともあります。

ひょっとすると、あなたのコードには何の問題もないかもしれません。 例えば、コードはローカル環境では問題無く動作していて、ただビルドできないという時もあります。

これをお試しください

この方法は過激ですが、多くの場合に効果があります。 コマンドラインから同じ名前空間で新しいアプリケーションを生成するのです。

sencha generate app App ../myapp

次に app フォルダを上書きコピーして、忘れずに app.js も変更します。

そして、もう一度試して下さい！

問題: あるコンポーネントのおかしな挙動

この手の問題は、だいたい一番難しいものです。

例えば、急に複数のスクロールバーがグリッドに現れる。 間違ったスタイルのタブパネルが表示される、など。 このような問題をアプリ内でテストするのにとても時間がかかります。 問題にたどり着くまで、アプリをナビゲートしなければならないし、旨く動作しない理由も様々です。

これをお試しください

開発者がこういった問題を解決する時によくやる方法は、問題をより管理し易い、小さい部分に分けていく方法です。

問題を分離する

今度も Sencha Cmd で同じ名前空間の新しいアプリケーションを生成しましょう。

問題のある Class をコピーして、テストして下さい。

同じバグが再現しますか？ それなら、このテストアプリで解決してみることができます。

クラスをゼロから再び構築して、さらに分離することができます。必要なコードだけで始めて下さい。

解決しましたか？ フレームワークには問題がなく、Class にも問題がない場合は、他のものが原因です。

デフォルトテーマに切り替える

自分のアプリケーションに戻って、Sencha のデフォルトスタイルシート (Sencha TouchではSencha Default StyleSheetでExt JSではNeptune Theme) に切り替えて下さい。

動作しましたか？ それなら、あなたのカスタムスタイルシートに問題があります。

まだ動作しませんか？ とりあえずあなたのカスタムスタイルシートには問題がないことは解りました。ネスティングで問題があるかもしれません。あるいは誤ったレイアウトを使っているか？

コンポーネントをクエリする

コンポーネントのクエリに問題はありませんか？ ブラウザのデベロッパーコンソールから簡単にコンポーネントをクエリできます。

Ext.ComponentQuery.query('button[action="test"]');

空の配列が返ってきましたか？ それですよ！ また、コンポーネントは返すけれど、タイミングで失敗しているかもしれません。 コールバックを使って作業しているときによくあることです。 コードを実行したら、コンポーネントが画面でレンダリングされないかもしれません。

よく使うデバッグ技術

開発者をやっていると、解決する必要があるバグと問題が発生します。 でもこれが我々の仕事のやりがいですよね？違います？

上記で説明した技術とは別に、よく使ういくつかのコツもあります。まずはフレームワークとツールをよく理解すること。 そして API ドキュメントを読むこと (さらに良いのはフレームワークのソースを読むこと) です。

読み込むフレームワークをデバッグ版にします。 そうすると、追加のログメッセージが表示される場合があり、直接フレームワークコードを読むことができます。 Sencha Touchのプロジェクトの、app.json を開いて、フレームワークを一時的に変更して下さい。

"js": [
    {
        "path": "../touch/sencha-touch-all-debug.js",
        "x-bootstrap": true
    },

Ext JSのプロジェクトの場合には、index.html を開いて、フレームワークを一時的に変更して下さい。

<script src="../ext/ext-all-debug.js"></script>

ブラウザのデベロッパーツール (Google Chrome や Firebug) も役立ちます。また Sencha コードの開発に役に立つプラグインもあります。 Illuminations や App Inspector for Sencha です。

プロトタイプを迅速に作りたいですか？ Sencha Fiddle をお試し下さい。

Siesta のような素晴らしいテストツールもあります。

最後に、もしこの記事のテクニックに効果が無くて、何時間 (または何日間) もコードをじっと見ているなら…休憩して下さい！ よく休んで、頭を解放させると、すぐ問題を解決できます。 特に文字のつづりの間違えとか、大文字/小文字の間違いなどがあると、、なかなか間違が発見できずに何時間もフラストレーションがたまります。

さらにお手伝いが必要ですか？ Sencha Ext JSとSencha Touchの世界中で行っている training classes または オンラインクラスに参加して下さい。