getInitialState () {
  return { clicked: false };
},
clickHandler () {
  this.setState({ clicked: true });
  console.log(this.state.clicked); // -> false
},
render () {
  console.log(this.state.clicked); // -> true
  return <button onClick={this.clickHandler}>Click Me</button>;
}

インタラクションのハンドラで this.setState したとして、そのハンドラ内でthis.state を参照しても、まだ更新後の値は取れない。render() が呼ばれるタイミングでは更新後の値になっている。実際にステートが更新されるタイミングは意図的に制御されているらしい。トリッキーだ。

更新後の値は変数に入れておいて this.setState しつつ、ハンドラ内ではその変数の値を使うのがおそらく正解だろう。

getInitialState () {
  return { clicked: false };
},
clickHandler () {
  var value = true;
  this.setState({ clicked: value });
  console.log(value); // -> true
},
render () {
  console.log(this.state.clicked); // -> true
  return <button onClick={this.clickHandler}>Click Me</button>;
}

それによって…

• hasOwnProperty()/getOwnPropertyDescriptor()/JSON.stringify() で、DOM attribute が検出できなくなる
• read-only な DOM attribute を上書きしようとすると例外を投げるようになる

だそうな。
他人が作ったフレームワークは特に、それで動かなくなったりするものも出てくるかもしれないので頭の片隅に置いておくとよい。

Global Methods

Document

以下のメソッドはグローバルコンテキストにあり、どこでも使うことができる。

messnamed (Max object name, message name, any arguments)

Document

グローバルシンボルに紐付けてネーミングされた Max オブジェクトにメッセージを送る。例えば receive オブジェクトなど。 以下の例は “jsmessage” と名付けられたオブジェクトに “hogehoge” とメッセージを送る例である。

Test Code

function loadbang () {
    messnamed("jsmessage", "hogehoge");
}

cpost (any arguments)

Document

コンソールにメッセージを出力する。引数とかは次項の post() と同じ。

Test Code

function foo(a, b, c) {
  cpost(a, b, c);
}
function loadbang() {
  foo('foo', [ 'a', 'b', 'c' ], { 'hoge': 'fuga' });
}

なお、グローバルスコープは jsthis オブジェクト（ブラウザ JavaScript でいうwindow オブジェクト）とドキュメントには書いてあるが、jsthisオブジェクトを呼び出そうとしてもMAXウィンドウに Javascript ReferenceErrod: jsthis is not defined と出て怒られる。 一方、一般的な this オブジェクトは機能している。

function foo() { }
post(this.foo === foo); // 1 (true)

post (any arguments)

Document

MAXウィンドウにメッセージを出力する。 \n を含めると改行になる。 post() を新しい行から初めても改行が出力される。

Test Code

function foo(a, b, c) {
  post(a, b, c);
}
function loadbang() {
  foo('bar', [ 'a', 'b', 'c' ], { 'hoge': 'fuga' });
}

The jsthis Object

Document

Browser JavaScript だと ”window” にあたるもの。 jsthis オブジェクトはグローバルコードにおける ”this” を表す。グローバルコードで関数を定義すればそれは jsthis のメソッドになり、変数を定義すれば jsthis のメソッドになる。jsthis オブジェクトは以下のようなビルトインプロパティとメソッドを持つ。

autowatch (Number, get/set)

Document

これはとりわけ、1つのソースファイルからいくつかの js インスタンスを作っていて、ソースファイルを変更したらすべてのインスタンスを更新したいような時に便利。外部のテキストエディタでソースファイルを書いている場合も、これを使えばパッチ中の js オブジェクトは自動的に再コンパイルされる。 デフォルトではこの autowatch は 0 (off) に設定されている。on にしたいときはグローバルコード中で行うことがベスト。

box (Maxobj, get)

Document

js オブジェクトを含む Maxobj を返す。jsui オブジェクトからオブジェクトボックスの長方形を取得する際に便利。 詳しくは the Max Object を参照のこと

editfontsize (Number, get/set)

Document スクリプトを編集するウィンドウのフォントサイズを制御する。グローバルコードで書くと、テキスト編集のデフォルトフォントサイズ（Maxウィンドウのフォントサイズ）が変更される。

inlet (Number, get)

Document 関数の実行中、 inlet プロパティには、その関数を呼び出したメッセージを受け取ったインレット番号が格納されている。 この番号は一番左のインレットから0で始まる。 グローバルコード中ではこのプロパティは 0 になる。

inlets (Number, get/set)

Document インスタンスがいくつのインレットを持つべきかを指定する。”inlets” プロパティはグローバルコード中で指定しなければ効果がない。指定されなかった場合、インレットを1つ持ったオブジェクトが作られる。

Test Code 1

function msg_int(a) { // a == 1
  post(a); // 1
}

Test Code 2

function msg_int(a) { // a == 1
  post(a); // 1
}
function msg_float(a) { // a == 1.23456
  post(a); // 1.23
}

list

Document

inlet に最初の値が int もしくは float の list が入力されると list() が呼ばれる。 上記の例のように最初の値が String の list はその String 名の関数が呼ばれる。

Test Code 1

function list(a, b, c) { // a == 1, b == 2, c == hoge
  post(a, b, c); // 1 2 hoge
  post(arguments.length); // 3
}

anything

inlet に入力されたものに該当する function が定義されていなかった場合、anything() で受け取ることができる。例えば int が入力されたときに msg_int() が未定義だったら anything() が呼ばれる。float や list でも同様。
anything() 内部では messagename と inlet 変数が定義されており、それぞれ inlet に入ったメッセージの種類と、inlet 番号を参照できる。

Test Code 1

function anything(a, b, c) { // a == 1, b == 2, c == hoge
  post("messagename", messagename); // messagename list
  post("inlet", inlet); // inlet 0
  post("anything", a, b, c); // anything 1 2 hoge
}

loadbang

Document

loadbang() はパッチ起動時に呼ばれる。js オブジェクトや jsui オブジェクトを追加した時ではなく、あくまでそれを予め含むパッチ起動時に呼ばれることに注意。
Cmd+Shiftを押しながらパッチを起動すると loadbang を無効化できるが、無効になっているかどうかは max.loadbangdisabled プロパティに 1 が入っているかどうかで分かる。

Test Code 1

function loadbang() {
  if (max.loadbangdisabled == 1) {
    post("no loadbang");
  } else {
    post("loadbang!");
  }
}
function bang() {
  post("bang!");
}

普通にパッチを起動した場合

Cmd+Shiftを押しながらパッチを起動した場合

getvalueof

Document

JavaScript 内で定義した変数の値（String か Number）を pattr 関連オブジェクトから呼び出せるようにする関数。 → pattr オブジェクトのことがよく分からないので、テストコードが書けない。後で復習する。

setvalueof

Document

pattr 関連オブジェクトから JavaScript 内に変数（Number か String）をパスできるインターフェースを提供する関数。 value が複数の場合、jsthis オブジェクトの arrayfromargs() メソッドで引数を扱うと良いとのこと。
→ pattr オブジェクトのことがよく分からないので、テストコードが書けない。後で復習する。

save

Document

save() を定義すると、JavaScript 内の状態をパッチに保持することができる。 パッチが再読み込みされると、JavaScript 内の状態が復元される。

save() 内だけで使える embedmessage() を使い、値を保存する。

• embedmessage() の第1引数には保存された値を渡したいコールバック関数名を文字列で渡す
• embedmessage() の第2引数以降には保存したい値を渡し、これがコールバック関数の引数に渡される

Test Code 1

var valuetosave = 0;
function foo(v) {
  valuetosave = v;
}
function save() {
  embedmessage("callback", valuetosave);
}
function callback(v) {
  valuetosave = v;
  post(v);
}

foo 1 メッセージを送ったあと、パッチを再起動した場合

foo 2 メッセージを送ったあと、パッチを再起動した場合

notifydeleted

Document

js オブジェクトが削除されたときに呼ばれる

Test Code 1

function notifydeleted() {
  post('js object was deleted.');
}

Global Code

Document

グローバルスコープに書かれたコードは編集された後、スクリプトがロードされるかコンパイルされたタイミングで評価される。 js / jsui オブジェクトが完全に作られる前に評価される。 js オブジェクトがいくつ inlet / outlet を持つかはグローバルコードからは分からない。これはグローバルコードから inlet / outlet をいくつにするか定義できることを意味する。しかし言い換えれば、まだ outlet が存在しなければ、使うことはできない。 初期化処理を書きたい場合は loadbang() の中に書くべし。

グローバルコードでやるべきこと

• inlet / outlet の数を定義する
• jsarguments[] プロパティ（js オブジェクトの引数）にアクセスする
• inlet / outlet の値の操作
• グローバル変数の定義と初期化
• グローバルアプリケーション環境にアクセス＆操作するため、Max オブジェクトを使う

グローバルコードでやるべきでないこと

• outlet から何か出力すること
• js オブジェクトが置かれたパッチ側を参照しようとすること

Private (Local) Function

Document

js オブジェクトへの inlet メッセージから参照されたくないローカル関数を作りたい場合、local プロパティに 1 をセットする。

Test Code 1

function foo() {
  post("Welcome to 'foo' method!");
}
foo.local = 1;

未完

grunt.loadNpmTasks 'grunt-contrib-jshint'
grunt.initConfig(
  jshint:
    main:
      options:
        jshintrc: true
      src: [ 'app' + sitePath + 'js/script.js' ]
  ...
  watch:
    js:
      options:
        livereload: true
      files: [ 'app' + sitePath + 'js/*' ]
      tasks: [ 'jshint' ]
)

options.jshintrc = true を設定するとそれ以外の options は無視され同階層に置かれた .jshintrc ファイルを参照するようになる。

.jshintrc はJSON形式で記述する。
結果的に以下のような設定に。

{
  "node": true,
  "esnext": true,
  "bitwise": true,
  "camelcase": true,
  "curly": true,
  ...
  "globals": {
    "window": true,
    "document": true,
    "jQuery": true,
    "$": true,
    "_": true,
    "Backbone": true
  },
  "-W116": true,
  "-W041": true
}

globals には「XXXグローバルオブジェクトがない」的な警告が出るときに、予め「このグローバルオブジェクトはあるから、警告出すな」とJSHint側に伝えておく設定。
-WXXX: true は特定のエラーを無視したいときに追加する設定。このエラーコード（ドキュメントの原文では warning code）は grunt --verbose（もしくは grunt -v）として verbose モードで Grunt タスクを起動すると表示されるようになる。

表示例：

^ [W116] Expected '!==' and instead saw '!='.

ここでは W116 というのが warning code なのでそれを "-W116": true のように options に追加すると、警告は出なくなる。

ダウンロード：
http://code.google.com/p/js-test-driver/downloads/list

使い方：
http://code.google.com/p/js-test-driver/wiki/GettingStarted

参考になる日本語記事：
http://0-9.tumblr.com/post/15614207218/js-jstestdriver
http://everyday-eachday.blogspot.jp/2011/12/jstestdriver.html

ダウンロードページで JsTestDriver-x.x.x.jar ってやつを落とす。ダウンロードしたファイルを ~/bin/JsTestDriver.jar みたいなパスに置く。コンソールから以下のコマンドでサーバーを起動。

$ java -jar ~/bin/JsTestDriver.jar --port 4224

ポート番号は適当でいいらしい。コマンド成功したら、適当なブラウザで http://localhost:4224/ を開く。そうすると

• Capture This Browser
• Capture This Browser in strict mode

ってテキストリンクが並んでる画面になるので好きな方をクリック。（普通は Capture This Browser でいいと思われ）そうするとそのブラウザをウォッチしているような状態になる。で、そのブラウザのエンジンでテストが実行される。

実際にテストしたいプロジェクトのディレクトリを作る。例えば以下のような構造にする。

|- jsTestDriver.conf
|- src
|--- hoge.js
|- test
|--- hoge_test.js

hoge.js が書きたいJavaScript。hoge_test.js がhoge.jsに対するテストを書くファイル。jsTestDriver.conf がjs-test-driverのためのファイル。テキストエディタで開き、以下のように記述。

server: http://localhost:4224/
load:
- src/*.js
- test/*.js

コンソールに戻る。さっきサーバーを起動したプロセスウィンドウはそのままにしといて、新しいプロセスを起動。そっちで

$ cd プロジェクトのディレクトリへ
$ java -jar ~/bin/JsTestDriver.jar --tests all

するとテストが走って hoge_test.js に書いたテスト結果が表示される…予定なんだけど、この時点で hoge_test.js には何も書いてないのでエラーになるはず。
というわけで簡単なコードを書いてみる。

で、コンソールでコマンドを叩いてテストする。

$ java -jar ~/bin/JsTestDriver.jar --tests all

ちなみにここで'test should return true'っていうのは各テスト単位の名前で、エラー時にコンソールに出力される。ちなみに文字列だからってマルチバイトは使えない。

assertなんちゃらって関数でテストを実行してるんだけど、使えるassertionの一覧は以下に載ってる。
http://code.google.com/p/js-test-driver/wiki/Assertions
例えば assertTrue だったら、引数の値が true だったらテスト合格になる。

まだちょっと使ってみただけなので、もうちょい勉強して実務に生かしたい。

<meta name="apple-mobile-web-app-capable" content="yes" />

出典：Safari HTML Reference – Supported Meta Tags

フルスクリーンモードで開いた場合、navigator.userAgentの値に「Safari」の文字列が現れなくなる。

Moble SafariでのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3 

フルスクリーンモードでのuserAgent（iOS 5.1.1）：

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 

ところで、FacebookアプリやTwitterアプリなど、投稿内容のURLを踏むと、そのアプリの中でWebページが展開されるものがある。UIWebViewというやつ。この場合のuserAgentにも、やはり「Safari」の文字列は現れない。

FacebookアプリのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 [FBAN/FBIOS;FBAV/5.1;FBBV/68414;FBDV/iPhone4,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/5.1.1;FBSS/2; FBCR/KDDI;FBID/phone;FBLC/ja_JP] 

TwitterアプリのuserAgent（iOS 5.1.1）:

userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 

というわけでSafariという文字列があるかないかを頼りに、フルスクリーンモード、ないしはUIWebViewからのアクセスを判別しようとすると失敗する。 しかし上記出典のSafari HTML Referenceによると、フルスクリーンモードではwindow.navigator.standaloneというプロパティがtrueになるらしいので試した。

デモ

iPhone/iPadのどちらでも、フルスクリーンモードのみでwindow.navigator.standaloneがtrueになるのを確認できた。

userAgent文字列からiPhone/iPadであることを判定した上で、

• userAgentにSafariの文字列あり → Mobile Safari
• userAgentにSafariの文字列なし、かつwindow.navigator.standalone === true → フルスクリーンモード
• userAgentにSafariの文字列なし、かつwindow.navigator.standalone === false → UIWebView

という判定をすることができる。

第10章の内容について、議論の対象となった部分を引用する。

10.3 変数の初期化のガイドライン

変数は最初に使用する場所の近くで初期化する

リスト10-2: 悪い初期化（Visual Basic）

' すべての変数を宣言する
Dim accountIndex As Integer
Dim total As Double
Dim done As Boolean

' すべての変数を初期化する
acountIndex = 0;
total = 0.0
done = False
...

' accountIndexを使用するコード
...

' totalを使用するコード
...

' doneを使用するコード
While Not done
...

…中略

リスト10-2の例では、done変数を宣言した後、done変数を使用するコードが実行されるまでに、done変数が変更される可能性がある。

…中略

もう1つの問題は、すべての初期化を1か所にまとめると、done変数は最後の方でしか使用されないにもかかわらず、すべての変数がルーチン全体で使用されるという印象を与えることだ。

…中略

これは、「関連する作業を1つにまとめる」という近接の法則の一例である。

なるほどなるほど。しかし僕は普段の業務でプログラミング言語らしきものはJavaScriptしか使わないので、JavaScriptに置き換えて考えよう。

var accountIndex = 0,
    total = 0,
    done = false;
// accountIndexを使用するコード
...

// totalを使用するコード
...

// doneを使用するコード
while(!done) {
    
}
...

これが本書で「悪い例」とされているコードをJavaScriptに置き換えたコードだ。しかし関数の先頭で var hoge = 0, fuga = false; のようにして変数をまとめて宣言（＆初期化）するのはJavaScriptではよく見られるコードだ。あのjQueryですらそのような記法を多用している。
JavaScript: The Good Partsによると

ほとんどの言語では、変数は一般的に最初に利用される場所で定義するのが最も良い方法だ。しかしこれは、ブロックスコープを持たないJavaScriptでは好ましくない。すべての変数は、それぞれの関数の先頭で定義したほうが良い。

とある。そう、JavaScriptはブロックスコープを持たない（{}でくくられた部分限定の変数スコープ）といういわゆる変態言語であり、変数のスコープを生成するのは関数ブロックのみだ。それが理由で、変数はまとめて関数の先頭で宣言するという記法がベストプラクティスとされている。

さてしかし、Code Complete第2版による「変数は最初に使用する場所の近くで初期化する」ほうがよいという理屈の続きはこうだ。

10.4.1 変数の参照はまとめて

変数を参照してから次に参照するまでのコードは、「脆弱性の窓」（無防備な時間帯）である。その窓では、新しいコードが追加されたり、何気なく変数が変更されたり、変数に含まれていなければならない値が忘れられてしまったりする。変数の参照は、常に近いところにまとめて局所化するのが望ましい。

…中略

これを測定する方法は、変数の「持続間隔」を計算することである。

…中略

リスト10-6: 1と0の持続間隔（Java）

a = 0;
b = 0;
c = 0;
b = a + 1;
b = b / c;

この場合、bの1つ目の参照と2つ目の参照の間にコードが1行あるので、その持続間隔は1である。bの2つ目の参照と3つ目の参照の間にはコードがないので、その持続間隔は1である。bの2つ目の参照と3つ目の参照の間にはコードがないので、その持続間隔は0である。

…中略

リスト10-6では、bの平均持続間隔は (1 + 0) / 2 = 0.5 である。変数の参照を近くにまとめると、コードの読み手がコードをセクションごとに読んでいけるようになる。

…中略

10.4.2 変数の「寿命」はできるだけ短く

変数の持続間隔に関連して、変数の「寿命」という概念がある。変数の寿命とは、変数が存続する期間内に存在するステートメントの合計である。

…中略

変数の持続間隔とは異なり、変数の寿命は、最初に参照されてから最後に参照されるまでの変数の使用回数を計算に入れない。変数が最初に1行目で参照され、最後に25行目で参照された場合、変数の寿命は25（ステートメント）である。

…中略

変数の持続間隔と同様に、変数の寿命もできるだけ短くする、つまりステートメントの数を少なくすることが目標となる。持続間隔と同様に、ステートメントの数を少なくすると、脆弱性の窓が小さくなるという利点がある。

…中略

寿命を短くするもう1つの利点は、コードを正確に把握できることである。変数に10行目で値を代入し、45行目まで使用しない場合、2つの参照の間に空いている空間は、変数がその間に使用されていることを暗示する。

…中略

変数の寿命が短いと、コードが読みやすくなる。読み手が一度に頭に入れなければならないコードの行数が少なければ少ないほど、コードは理解しやすい。

変数には「平均持続間隔」と「寿命」という概念があるという。そしてそれらが短くなった方がコードの読み手にとって読みやすいコードになるという。

去年、僕がとある案件で数千行に及ぶJavaScriptを書いた際、最も頭を悩ませたのはコードを頭に入れることだった。機能を追加・修正するために一度に頭に入れなければならないコードが多すぎたため、開発が進めば進む程、コードの修正は困難を極めた。

プログラミング初心者が誰しも一度はぶつかる壁なのかもしれない。コードの分割をはじめとする、コードの設計の重要性を肌で感じた瞬間だった。
だからこそ、上記の「読み手が一度に頭に入れなければならないコードの行数が少なければ…」というくだりに深く納得したのだった。

さて、ではJavaScriptにおいて「変数の寿命を短くする」ことと「関数の先頭ですべての変数を宣言する」ことは両立するのだろうか？これについて隣席の@keiskeyの意見はこうだった。

関数1つの長さ自体を短くしてしまうのがいいのでは。Google Closure Libraryのコードを見ていると、中身が2行しかないメソッドに長々とした名前が付いていたりする。そんな長い名前を付けるんだったら直接コードを書いてしまえばいいやん、と思うけど、「変数の寿命」のポリシーをもって書かれていると考えると合点がいく。

なるほど…と再び納得するとともに、「この話、共有してよかった」と思った。

例えば上述（リスト10-2）のコードを一つの関数だと考えるとこうなる。

function Account() {
    var accountIndex = 0,
        total = 0,
        done = false;
    // accountIndexを使用するコード
    ...

    // totalを使用するコード
    ...

    // doneを使用するコード
    while(!done) {
        
    }
    ...
}

この関数をクラス風に書き直し、機能分割するとこういう感じになる。

function Account() {
    // コンストラクタ
    ...
}
Account.prototype = {
    getAccountIndex: function() {
        var accountIndex = 0;
        // accountIndexを使用するコード
        ...
        return accountIndex;
    },
    getTotal: function() {
        var total = 0;
        // totalを使用するコード
        ...
        return total;
    },
    checkStatus: function() {
        var done = false;
        // doneを使用するコード
        while(!done) {
            ...
        }
    }
}

prototypeにぶら下げたメソッド1つ1つを短くまとめて上手に機能分割することが、限りなく正解に近いのではないかと思った次第。

僕はプログラマと呼ばれる職種ではないのだけれど、プログラミングに関わる人間として、こういった考察はとてもおもしろいと感じる。また何か同じような話があったら書いていきたい。

[jQuery] getJSON callback not firing? – jQuery Forum

なんでinvalidなのかと調べたところ・・・、JSONでは文字列は必ずダブルクォートで囲まないといけないことが判りました。シングルクォートではダメです。それからオブジェクトリテラルの左のオペランドにも、ダブルクォート省略不可！あー、なんか初歩的なところでつまづいています。

A string is a collection of zero or more Unicode characters, wrapped in double quotes, using backslash escapes.

http://json.org/

何しろエラーが出ないので、何が悪いのかわかりにくいです＞＜ これで2時間はハマってしまった・・・。。