2014-01-04

AngularJSの2way bindingの仕組みを追ってみた

AngularJSの特徴でもある、モデルとビューの2way binding。
AngularJSの簡単なコードがあるとする。（投稿時点ではv1.2.6）

<body ng-app ng-init="message = 'nothing'">
  <div ng-controller="SampleCtrl">
    <input type="text" ng-model="message">
    <br>
    <button ng-click="clearMessage()">Clear</button>
    <br>
    <span>{{getMessage()}}</span>
  </div>
  <script>
  var SampleCtrl = function($scope) {
    $scope.message = '';
    $scope.clearMessage = function() {
      $scope.message = '';
    };
    $scope.getMessage = function() {
      return $scope.message;
    };
  };
  <script>
</body>

テキストボックスに文字を打ち込むと「{{getMessage()}}」に打ち込んだ文字がリアルタイムに表示されるし、「Set "init"」ボタンを押すとテキストボックスと「{{getMessage()}}」で表示されるテキストが空文字になる。
テキストボックスに$scopeのmessageプロパティをバインドしているので、テキストボックスがインタラクティブになるのは分かる。
しかしなぜ$scope.getMessage()も同じタイミングで実行されHTMLまで書き変わるのか。気になる。気になる・・！

AngularJSのソースがどう動いているのか追ってみる。
AngularJSはuncompressedなファイルでは全体で20539行。
ギリギリ読めないことはない。

20535行目でロード時のイベントハンドラが発火される。

jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

angularInit関数の中で、「'ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'」をid,classあるいは属性で持つ要素がAngularアプリのベース要素としてセットされる。
該当する要素がなければその後の処理はなにも実行されない。

1283行目のdoBootstrap関数が実行される。
名前の通り初期化関数であり、ここでモジュールをロードし、Angular内の各サービスがファクトリー関数でインスタンス化される。
ここで利用されるinjectorというオブジェクトは、内部関数を呼び出すための抽象レイヤーみたいなもの。
本筋とはずれるが、window.nameに「NG_DEFER_BOOTSTRAP」という名前をセットしておくとdoBootstrap関数は呼ばれない。
代わりにangular.resumeBootstrap(extraModules)という、後から手動でdoBootstrap関数を実行できる関数が生える。

サービスのファクトリー関数を見ると、名前の最後に"Provider"をつけて再起的にinvokeしていることが分かる。

createInternalInjector(instanceCache, function(servicename) {
  var provider = providerInjector.get(servicename + providerSuffix); // providersuffix == "Provider"
  return instanceInjector.invoke(provider.$get, provider);
});

doBootstrap関数では、最終的にScopeインスタンスの$apply関数が実行される。

injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate',
  function(scope, element, compile, injector, animate) {
    scope.$apply(function() {
      element.data('$injector', injector);
      compile(element)(scope);
    });
  }]
);

$apply関数でやっていることは引数に渡した関数を実行すること。
ようやくcompile関数にたどり着いた。

compile関数で、引数に渡されたelementから再帰的にHTML要素を舐め、HTML要素にセットした「ng-*」属性名からディレクティブを呼び出し、ディレクティブのcompile関数で属性値を$eval関数で処理する。

例えば、ng-init属性に対応するngInitDirectiveディレクティブはこのようになっている。

var ngInitDirective = ngDirective({
  priority: 450,
  compile: function() {
    return {
      pre: function(scope, element, attrs) {
        scope.$eval(attrs.ngInit);
      }
    };
  }
});

ng-controllerやng-modelもcompile関数でディレクティブを集め、返却されたクロージャで各ディレクティブをコンパイルしていく。
ここでまず、「ng-init="message = 'nothing'」といった初期化のための属性値はAngularが持つ構文解析にかけられ、対応するScopeインスタンスにセットされる。

実際に値をセットしているのは、10238行目のsetter関数で行われる。
最初の引数の「obj」にはScopeインスタンスが入っている。

//////////////////////////////////////////////////
// Parser helper functions
//////////////////////////////////////////////////

function setter(obj, path, setValue, fullExp, options) {
  //needed?
  options = options || {};

  var element = path.split('.'), key;

  // カット

  key = ensureSafeMemberName(element.shift(), fullExp);
  obj[key] = setValue;
  return setValue;
}

コントローラについて、$ControllerProviderが返したクロージャが実行され、インスタンス化される。

return function(expression, locals) {
  var instance, match, constructor, identifier;

  if(isString(expression)) {
    match = expression.match(CNTRL_REG),
          constructor = match[1],
          identifier = match[3];
    expression = controllers.hasOwnProperty(constructor)
      ? controllers[constructor]
      : getter(locals.$scope, constructor, true) || getter($window, constructor, true);

    assertArgFn(expression, constructor, true);
  }

  instance = $injector.instantiate(expression, locals);

  if (identifier) {
    if (!(locals && typeof locals.$scope == 'object')) {
      throw minErr('$controller')('noscp',
          "Cannot export controller '{0}' as '{1}'! No $scope object provided via `locals`.",
          constructor || expression.name, identifier);
    }

    locals.$scope[identifier] = instance;
  }

  return instance;
};

実際にインスタンス化されるのは「$injector.instantiate(expression, locals)」の行だが、ここでユーザーが定義したコントローラーのコンストラクタを実行した結果が返る。
新規で作ったFunctionオブジェクトをthisとしてコントローラーのコンストラクタを実行するのが面白い。

function invoke(fn, self, locals){
  var args = [],
      $inject = annotate(fn),
      length, i,
      key;

  for(i = 0, length = $inject.length; i < length; i++) {
    key = $inject[i];
    if (typeof key !== 'string') {
      throw $injectorMinErr('itkn',
          'Incorrect injection token! Expected service name as string, got {0}', key);
    }
    args.push(
        locals && locals.hasOwnProperty(key)
        ? locals[key]
        : getService(key)
        );
  }
  if (!fn.$inject) {
    // this means that we must be an array.
    fn = fn[length];
  }

  // http://jsperf.com/angularjs-invoke-apply-vs-switch
  // #5388
  return fn.apply(self, args);
}

function instantiate(Type, locals) {
  var Constructor = function() {},
      instance, returnedValue;

  // Check if Type is annotated and use just the given function at n-1 as parameter
  // e.g. someModule.factory('greeter', ['$window', function(renamed$window) {}]);
  Constructor.prototype = (isArray(Type) ? Type[Type.length - 1] : Type).prototype;
  instance = new Constructor();
  returnedValue = invoke(Type, instance, locals);

  return isObject(returnedValue) || isFunction(returnedValue) ? returnedValue : instance;
}

「ng-model」はNgModelControllerとしてインスタンス化され、属性値をwatchする。
モデルに指定した変数の値が変更された場合、コントローラーの$viewValueに値をセットして再描画する。
これがモデルからビューへのバインディングになっているわけか。

$scope.$watch(function ngModelWatch() {
    var value = ngModelGet($scope);

    // if scope model value and ngModel value are out of sync
    if (ctrl.$modelValue !== value) {
      var formatters = ctrl.$formatters,
      idx = formatters.length;

      ctrl.$modelValue = value;
      while(idx--) {
        value = formatters[idx](value);
      }

      if (ctrl.$viewValue !== value) {
        ctrl.$viewValue = value;
        ctrl.$render();
      }
    }

    return value;
});

要素が「input type="text"」の場合、textInputTypeというディレクティブが呼ばれる。
キー入力を監視し、Scopeインスタンスの$apply関数でコントローラーの$setViewValue関数に新しい値を渡して再描画させる。
他のinput要素などの再描画ロジックの違いはここで吸収し、ctrl.$renderに関数をセットしている。

var listener = function() {
  if (composing) return;
  var value = element.val();

  if (toBoolean(attr.ngTrim || 'T')) {
    value = trim(value);
  }

  if (ctrl.$viewValue !== value) {
    scope.$apply(function() {
        ctrl.$setViewValue(value);
    });
  }
};

「ng-pattern」という属性値をセットしておくと、バリデーションとしてセットできることも分かる。

// pattern validator
var pattern = attr.ngPattern,
    patternValidator,
    match;

var validate = function(regexp, value) {
  if (ctrl.$isEmpty(value) || regexp.test(value)) {
    ctrl.$setValidity('pattern', true);
    return value;
  } else {
    ctrl.$setValidity('pattern', false);
    return undefined;
  }
};

「{{getMessage()}}」で表現している箇所に関しては、TextInterpolateDirectiveのtextInterpolateLinkFn関数でテキストノードにリスナー関数をバインディングする。
リスナー関数では「{{}}」を評価した結果を返し、値に変更があればテキストノードの値を書き換える。
$scope.messageの値が変わったら、$scope.getMessage()の結果も変わるので、「{{}}」の部分が変更される。
これでモデルからビューへのバインディングの仕組みが分かった。

function textInterpolateLinkFn(scope, node) {
  var parent = node.parent(),
      bindings = parent.data('$binding') || [];
  bindings.push(interpolateFn);
  safeAddClass(parent.data('$binding', bindings), 'ng-binding');
  scope.$watch(interpolateFn, function interpolateFnWatchAction(value) {
    node[0].nodeValue = value;
  });
}

最後に、$rootScope.$digest関数が呼ばれ、Scopeの階層を下りながらScopeのwatch対象に対してリスナー関数を実行していく。
$scope.messageには"nothing"という文字列が新しく入っているので、変更後の値として扱われる。

if ((watchers = current.$$watchers)) {
  // process our watches
  length = watchers.length;
  while (length--) {
    try {
      watch = watchers[length];
      // Most common watches are on primitives, in which case we can short
      // circuit it with === operator, only when === fails do we use .equals
      if (watch) {
        if ((value = watch.get(current)) !== (last = watch.last) &&
            !(watch.eq
              ? equals(value, last)
              : (typeof value == 'number' && typeof last == 'number'
                && isNaN(value) && isNaN(last)))) {
          dirty = true;
          lastDirtyWatch = watch;
          watch.last = watch.eq ? copy(value) : value;
          watch.fn(value, ((last === initWatchVal) ? value : last), current);

          // カット
        }
      }
    }
  }
}

これでbootstrap関数で実行される処理は終わり。

長い・・！フレームワークの特性上、ロード時にいろいろやってるのは想像つくけど、これはすごい。
クロージャを上手く使ってキャプチャすることでなるべくプロトタイプに値を持たせずに引き回してたり、全体を見たときに作られるインスタンスがとても少ない。
Scopeという概念がHTMLの階層とマッチしていて、値の変更時のキャプチャリング/バブリングを上手く抽象化していることが分かる。
でもって、Scopeはその階層でのハンドラや独自処理をプロトタイプに書けると。
invokeの使い方はAngular使わないコードでも参考になるなー。
あと、GoogleClosureLibraryを使ったことのある人だったら見覚えのある実装がいくつかあったりしてニヤッとしたり。

これで2way bindingの仕組みが分かったので、AngularJSと少し仲良くなれた気がする。
次はDIともうちょっとディレクティブをちゃんと追ってみよう。

2013-12-31

2013年の振り返り

あっというまに過ぎた2013年だったので振り返り。

スタートアップに転職した

今年はなんといっても6月からfreeeという会計サービスのスタートアップで働き始めたのが一番大きな出来事だった。

3月にサービスがベータ公開されたのをTechCrunchかなにかのニュースで知って、ログインしてみてこれは面白いと感じたのと、使い勝手やパフォーマンスなど自分ならもっとよく出来ると感じた。
会社のメールアドレスが載っていたので、自分がこれまでやってきたことをメールしたら、会おうということになってその場で入社が決まった。
家族や年齢いろいろ考えて、設立まもない（その時点ではまだ売り上げゼロだった）会社で働くのはラストチャンスかなと思った。
少人数ながら、社員みんなサービスへの思いも強く、明るい人たちばかりでとても楽しく働けている。

やったこと

自動で仕訳を解析して推測する機能があるのだけど、そいつをほぼ作り直したり、クライアントサイドのパフォーマンスチューニング、不具合改修などなど7ヶ月いろいろやった。
さっきGitHubのコミットグラフを見たら7ヶ月でおよそ13万行のdiffをコミットしていた。
今までで最もコードを書いた年になったと思う。ようやくRubyにも慣れた。

データ分析などもするようにしているのだけど、ちょっとした改善でとある機能が劇的に使われるようになったりして嬉しかった。
来年はもっとデータを活用して改善することに慣れていきたい。

経験できたこと

普通の会社だとアプリはアプリ、インフラはインフラと担当範囲が分かれているし、中途で入ると得意な領域しか触れないことが多いだろうけど、創業期のスタートアップではそんなことはない。なにしろ人がいない。
CoffeeScript書いてる合間にAWS上に本番サーバーを作ったりもした。

会社として初めての売り上げがあがったときはみんなで盛り上がり飲みに行った。
自分の仕事と会社の成長がリンクするというのは創業期のスタートアップでないと味わえないことだと思う。

来年は

打って変わってObjective-C, Android Java(or Scala)にどっぷりな感じになりそう。
今年は環境の変化に付いていくので精一杯だったので、来年は外でしゃべる機会を増やしていけたらいいな。

2013-09-17

ActiveRecordのマイグレーションでMySQLのunsignedな数値タイプを指定できるGemライブラリ作った

ruby

今の会社でRailsを使うようになって、いわゆるマイグレーションの仕組み超便利。

なんですが、MySQLを使っているのにidや数値にunsignedを指定できないのどうなんだろう。
他のDBはサポートしてないからいらないよねっていうのも分かるんですが、せっかくアダプタが分けられてるならサポートしてもいいんじゃないかな。
ということで、ActiveRecordの勉強がてらマイグレーションでintegerなカラムに"unsigned"を指定できるGemライブラリを作ってみました。

github/activerecord-mysql-unsigned

ついでに初めてのRubyGemsで公開もしてみた。
rubygems/activerecord-mysql-unsigned

ActiveRecord3.2以降と4で動作確認しています。

使い方はGemfileに書いて、マイグレーションファイルで「unsigned: true」をオプションに指定するだけ。

class CreateUsersTable < ActiveRecord::Migration
  def self.change
    create_table :users, force: true do |t|
      t.string  :name, null: false
      t.integer :age,  null: false, unsigned: true
    end
  end
end

既存のテーブルの主キーや数値カラムを置き換えるのが主目的なので、change_columnでも使えます。
このためにv3.2でauto_incrementをオプションで指定できるようにもしてあったり。

class ChangeColumnToUsersTable < ActiveRecord::Migration
  def self.change
    change_column :users, :id,  :integer, null: false, unsigned: true, auto_increment: true # 主キー
    change_column :users, :age, :integer, null: false, unsigned: false
  end
end

v3.2とv4.0の両方対応させるためにActiveRecordのソース読みましたが、中のクラス構造や挙動が結構変わってるんですねー。
v3.2だとunsignedな数値カラムにマイナス値を入れると0が保存される。v4.0だとActiveRecord::StatementInvalidエラーにしてくれる。
v4.0の方が圧倒的に見通しもいいしソースも綺麗。カラムのマイグレーションにもcollationやextraオプションを指定できたりいろいろ便利そうな機能を発見しました。
ウチのサービスも早く4.0にしたいなーっ。。。

2013-09-17

WEB+DB PRESS Vol.76にWeb Componentsの記事を書きました

javascript

うう、発売されてからだいぶ経ってしまった。。。

WEB+DB PRESSのJavaScript連載の第9回目にWeb Componentsについての記事を書かせていただきました。

WEB+DB PRESS Vol.76

作者: 五十嵐啓人,伊野亘輝,近藤宇智朗,渡邊恵太,須藤耕平,中島聡,A-Listers,はまちや2,川添貴生,片山育美,池田拓司,濱崎健吾,佐藤太一,曾川景介,久保渓,門脇恒平,登尾徳誠,伊藤直也,mala,後藤秀宣,若原祥正,奥野幹也,大林源,WEB+DB PRESS編集部
出版社/メーカー: 技術評論社
発売日: 2013/08/24
メディア: 大型本
この商品を含むブログを見る

サービス/アプリの作り始めは特に気にする必要もないのですが（最初から検討するリソースがあるならその方がいいけど）、ページ数の多いサイト、インタラクションの多いアプリなどを作っていると、何かしらの方法でクライアントサイドのコンポーネント化を考えますよね。
サーバサイドのビューライブラリでのHTMLテンプレート化、Sassなどのmix-in、RequireJSなどを使って依存関係解決など、HTML/CSS/JavaScriptを個別にコンポーネント化していったり。

そうやってコンポーネント化が進んでくると、HTML/CSS/JavaScriptトータルで見たときの管理コストが逆に増えるケースもあると思います。
このJSであてられてるCSSクラスはどこで定義されてるんだろうとか、どの画面のどのDOMにこのJSコンポーネントは適用されているのか、とか。

大きめのクライアントサイドアプリだと、後から入ってくる人はHTMLの構造を把握するのも結構大変ですよね。
jQueryUIなんかそうですけど、UIコンポーネントを適用するために決まったDOM構造をHTMLに定義しておかないとよく分からないセレクタエラーで動いてくれない。ドキュメント通りのHTML構造にしろ、とかそういうHTMLの枠組みはUIコンポーネントの責務なのでは、、と思うこともしばしば。

そういった不便をブラウザネイティブの機能として解消してくれそうなのがWeb Componentsだと思っています。なんせカスタムタグ一発でビデオタグみたいなリッチなUIを提供できるわけなので、ライブラリを使う人からしたらとても楽チン。

まだまだ一部の仕様しか使えないWeb Conponentsですが、GoogleのPolymerに続きMozillaもBrickを公開してきたりと、動きが活発になってきて楽しい感じです。

実際にvideoタグやaudioタグなどは既にブラウザに実装されて普通に使われているわけなので、運用も問題なさそう。ただ、実際に普及するにはIEが実装してくれないとですが＞＜

2013-04-10

Nginx1.3でWebsocketをリバースプロキシするメモ

nodejs

Nginx1.3（2013/04/10時点では開発版）からWebsocketのリバースプロキシを通せるようになったということで、Socket.IOへリバースプロキシさせようとしたけどけどなかなか上手くいかなくて、ようやく上手く動いたのでメモっておく。

Nginxのバージョンは1.3.14です。

http {
    upstream socketio {
        server localhost:3000;
    }
    server {
        listen  80;
        charset  UTF-8;
        server_name  _; # all accept

        location /socket.io {
            proxy_set_header  Host $host;
            proxy_set_header  X-Real-IP $remote_addr;
            proxy_set_header  X-Forwarded-Host $host;
            proxy_set_header  X-Forwarded-Server $host;
            proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header  X-Nginx-Proxy true;

            proxy_pass  http://socketio;

            proxy_http_version  1.1;
            proxy_set_header    Upgrade $http_upgrade;
            proxy_set_header    Connection "upgrade";
        }
    }
}

"upgrade"は小文字でないとダメ。ここを最初"Upgrade"にしててハマったという。。

yo_waka's blog

418 I'm a teapot