らりょすの日記

備忘録と感じたことと。ブログじゃないです,日記です。

AngularJSで書いたプログラムが予想外の理由で想定外の動作をしていたはなし

最近バイトをはじめて,コードを書く機会が増えました。AnularJSやRuby on Railsがメインです。 先日,そのバイト先で運用しているサービスに新しい機能をAngularJSで実装しようとしていた時に沼にはまったので,備忘録として残しておきます。

先述の「新しい機能」とは,記事一覧がだばだばーっとあって,Readmoreみたいなボタンを押したら更に記事を取得してくれるみたいな機能です。そんな難しい機能ではありません。これまでは記事がだばだばーと表示する機能は実装されていたので,そこにReadmoreみたいなボタンを追加するだけです。

AngularJSの勉強も兼ねてQiitaのAPIを用いて例を書いてみました => AngularJSのテスト この例は正常に動作しています(記事の取得には多少時間がかかるけど)。 単純に,最初に10件記事を取得して,Readmoreを押されたら更に10件取得するという処理を行っているだけです。

次に失敗した例がこちらです。 => AngularJSのテスト なぜか15件しか取得できません。このサンプルだと原因がわかりやすいですね(むしろわかりやすくした) 。limitTo:15 というフィルタが設定されているため15件しか取得できていません。

しかし,これに気づくまで(正確には先輩に指摘されるまで)1時間を要しました。以下に私の思考をまとめます。

  1. きちんと記事を表示できないということは,Javascriptの非同期の闇に飲まれているのではないか
  2. しかし, promiseメソッドを利用している*1
  3. きちんと記事を取得するためにリクエストは飛ばしている
  4. console.log を表示しまくってもきちんと想定通りの呼びだされ方をしている
EntriesFactory().query($scope.params).$promise.then(function(entries) {
    $scope.items = entries; 
}, function(v){
}, function(v){
    alert(v);
});

ここまでで僕は完全に力尽きました。
まとめると,「原因がMVCのV(View)にあると思っていなかった」のが完全な敗因です。

どんなものを作る時もですが妙な先入観を持ってものを作ったりデバッグをしようとすると解決が難しくなるということを実感しました。なるべくたくさんの可能性を探っていかないといけませんね。