JavaScript

node.jsのインストール

何はともあれnode.jsのインストール。aptではなくgithubからリポジトリをcloneしてmakeした。最近はapt以外のものは$HOME/localに入れるルールでやってるのでnode.jsも同様に。node.jsをsudoで入れると結構ハマるみたいな話を聞くので特に理由がなければaptとかで入れるか$HOME以下に入れるのがよさそう。

$ git clone git://github.com/joyent/node.git
$ cd node
$ ./configure --prefix=$HOME/local
$ make
$ make install
$ which node
/home/ukstuido/local/bin/node

npmのインストール

duostackを使うのにnpmが必要なのでnpmもインストール。curl使う方じゃなくてmakeしてインストールした。curl … | sh の形式があまり好きじゃない程度の理由。

$ git clone git://github.com/isaacs/npm.git
$ cd npm
$ make install
$ which npm
/home/ukstudio/local/bin/npm

npmがインストールされる場所は特に指定しなくても$HOME/localに入った。node.jsの位置でも見てるんだろうか。よくわからない。

duostackのインストール

あらかじめ、Duostackのアカウントは取っておくこと。結構すぐ登録確認メールが来る。

duostackのインストールは-gオプションを付けないとnode_modulesディレクトリがカレントディレクトリに出来る。最初-gオプションを知らなくて困惑した。

$ npm install -g duostack
$ which duostack
/home/ukstudio/local/bin/duostack

アプリの作成とデプロイ

ここまで来るとDuostack · Docs: Quick Start Guideに従うだけでOK。

適当なディレクトリを作ってそこにserver.jsを置く。

$ mkdir sample
$ cd sample
$ vim server.js

git initしてやる。

$ git init
$ git add .
$ git commit -m 'init'

duostackコマンドでアプリケーションを登録。ここで指定したアプリ名がそのままドメインになる。

$ duostack create ukstudio
$ git push duostack master

無事にpushできればURLが表示されているはずなのでブラウザで確認する。今回の例だとhttp://ukstudio.duostack.net/になる。

こんな感じでduostackでnode.jsアプリを動かすところまで試してみた。herokuとかもそうだけど、こうサクッとアプリが動かせる環境があるのはうれしい。

次はnode.js + CoffeeScriptとか、もうちょっとアプリらしいアプリを作ってみようかな。

追記: duostackでCoffeeScriptを動かす

CoffeeScriptからコンパイルしたJavaScriptを乗せるんじゃなくて、CoffeeScriptそのものを乗せる方法。server.jsは必要っぽいのでそこからrequireする形にした。CoffeeScriptはアプリの中にインストールしておく。 これで一応動くことは動く。

$ npm install coffee-script

Rails3.1からCoffeeScriptがデフォルトで入ってるとかなんとかで、とりあえずCoffeeScriptだけで少し触ってみた。とりあえずQUnit自体もCoffeeScriptで書けるようなTDD環境を作ってみた。

とりあえず、UbuntuにCoffeeScriptをインストールするわけだけどaptの方が古いしせっかくだから最新のを触るかと思ったのでgithubからCoffeeScriptとnode.jsのリポジトリをcloneしてインストール。

$ git clone git://github.com/joyent/node.git
$ cd node
$ ./configure
$ make
$ sudo make install
$ node -v
v0.5.0-pre

$ git clone git://github.com/jashkenas/coffee-script.git
$ cd coffee-script
$ sudo bin/cake install
$ coffee -v
CoffeeScript version 1.1.0-pre

ディレクトリ構成はこんな感じ。coffeeにCoffeeScriptに入れて生成されたJavaScriptはsrcにいれるルール。test/index.htmlはQUnitの結果を見るため。test/qunitはずばりQUnitそのもの。

./coffee/hello.coffee
./src/hello.js
./test/index.html
./test/qunit/qunit.css
./test/qunit/qunit.js
./test/coffee/test-hello.coffee
./test/src/test-hello.js

CoffeeScriptは-wでファイルの変更を監視してコンパイルしなおすことができるので,以下の用に実行しておけばそれぞれ変更があったらコンパイルしてくれる。CoffeeScriptはデフォルトでfunction(){}();で囲って外部からアクセスできなくなるので,-bを付けてトップレベルにJavaScriptを生成するようにする。

$ coffee -w -b -o src/ -c coffee

$ coffee -w -b -o test/src -c test/coffee

これでテストコードもしくは本体のコードを修正すれば勝手にコンパイルするのでtest/index.htmlを見ればよい。後はもうちょい頑張ってブラウザを勝手にリロードするか,Rhinoとか使えばindex.htmlを用意しなくてもCUIでテスト結果をみれそう。

一式は以下のgistに置いた。(Qunitはライセンス見てないので外してある)
CoffeeScript+QUnit — Gist

初グリモン。結構適当に書いたけど、とりあえず動くのでよし。codereposに上げたのでいじりたい人はご自由にどうぞー。

amazon_crossreview.user.js

現状、取得できるレビュー数が7件までなのは仕様です。ごめんなさい!

サンプル画像

とある理由で僕主催の初心者向けのJavaScript勉強会 を14日行いました。とある理由はforestkさんのエントリーを参照ください(UK 主催の初心者向け Javascript 勉強会が生まれた経緯)

会場は株式会社ノッキングオン様にご提供いただきました。借りたい人ははてなキーワードのノッキングオンの会議室使いたい!を利用するといいと思います。東麻布でプロジェクター & ネット環境あり(優先ですがアクセスポイントを持参すれば無線も利用可能みたいです)の好環境ですのでかなりおすすめの物件となっております:-P

資料を公開しますので参考になれば幸いです。といっても、ほとんど入門書に書いてあるようなことですがwしかもif文とかの説明すげー適当だしね!

資料URL : http://www.slideshare.net/ukstudio/javascript/11

質問されたり、資料が半端な出来だったりしたのでちょっといくつか補足しておきます

補足1:連想配列とオブジェクト

連想配列とオブジェクトの違いはなにか?みたいな質問を受けたので簡単にお答えします。結論としてその２つに違いはないと僕は考えます。下のコードをみてください。

var obj = {
  name : "UK",
  age : 20,
  birthday : "12月14日"
}

alert(obj.name);       //UK
alert(obj["name"]); //UK

1つ目のalertは資料でも説明したプロパティの呼び出しです。2つ目に注目してください。連想配列と同じ呼び出し方をしてますよね。今度は次のコードをみてください。

var array = new Array();
array["name"] = "UK";
array["age"] = 20;
array["birthday"] = "12月14日";
alert(array["name"]);  //UK
alert(array.name);        //UK

上記のように連想配列でもドットシンタックス(.)を使って値を呼び出すことができます。これでなんとなくは連想配列とオブジェクトに違いはないと言った意味がわかってもらえたんじゃないでしょーか。

結局は連想配列もオブジェクトの一種(Arrayオブジェクト)なので元をたどっていけばもっとも基本的なオブジェクト(Objectオブジェクト)に行き着くってことです。これはArrayオブジェクトに限らず他のオブジェクト(DateオブジェクトとかFunctionオブジェクトとか)も最終的にはObjectオブジェクトに行き着きます。Objectオブジェクトがすべてのオブジェクトの出発点なのです。

ちょっとおまけですが、連想配列ではなく普通の配列を空のオブジェクトから作ってみます。

var array = {
  0 : "インデックス0",
  1 : "インデックス1",
  2 : "インデックス2"
}

alert(array[0]);     //インデックス0
alert(array.0);           //エラー

とまぁ、こんな感じでプロパティのラベルに数値でつけてやれば配列のようなオブジェクトができます。あとはlengthプロパティだとかをつけてやればOKですね(どうやってプロパティの数を求めるんだとかは聞かないでね)

ただ、自分もちょっとよくわかってない点がarray.0でエラーがでるところですね。多分、0がプリミティブな数値リテラルとして扱われてるからかなとか思うんですがなんともかんとも。

補足2:数値オブジェクトと文字列オブジェクト

資料で数値も文字列もオブジェクトと書いてありますが厳密には違います。口頭で簡単に説明しましたがちゃんと文章で補足しておきます

文字列や数値にドットシンタックスをつけると一時的にプリミティブなリテラルからオブジェクトに変換されます。だからプロパティやメソッドを呼び出せるようになるわけです。あくまで変換なので厳密にはオブジェクトではない、ということです。

補足3:yoshioriさんのクイズ

yoshioriさんのクイズで下のようなクイズがあったと思います。非プログラマな方にはいまいちわからない部分があったと思うので簡単に解説します。ちなみにswitch文とか他の問題は自分も理解があやふやなのでスルーです。

alert(2 & 3 == 1);    //0

まず各演算子には優先順位というものが存在します。(後で説明します)&と==では==の方が優先順位が高いので3==1が先に評価され、falseが返されます。

falseというのは真偽値でいう偽の値でつまりは｢0｣です。そうすると2 & 0のビット演算が行われ0が返されるという訳です。

とか言っても、ビット演算がわからないと思うのでそこを説明したいと思います。

ビット演算は2進数で計算されます。2進数っていうのは10進数が10で次の桁に繰り上がるように2で次の桁に繰り上がります。つまり0と1で表現します。

2を二進数で表すと0010になります。0は当然0000ですね。これを&演算します。

 0010
&0000
------
 0000

&演算というのは両方が1のときだけ1を返す演算です。今回は片方が0なので問答無用で全部0を返すということです。

ちなみにalert(7 & 3)とかだったら3を返します。

 0111
&0011
---------
0011 = 3

ビット演算はあまり使う機会はないと思いますが、興味ある人は調べてみるといいと思います。

補足4:演算子の優先順位

上でちょろっと言いましたが、演算子には優先順位というものが存在します。簡単な例を出してみます。

var a = 100 + 200 * 10;alert(a); // 2100

aの宣言のところで演算子は = , + , *の３つがあります。この３つでの優先順位は * > + > = のようになります。

* と + は数学と同じですからわかりやすいと思います。=が低いのは単純に計算が終わる前に値を代入しちゃうのはまずいよね?ってことです。

上の式を頭で計算するときもまずは200 * 10して2000を求めます。そしたら100 + 2000で2100が得られるので最後にa= 2100しますよね。それと同じことです。

他にも多種多様な演算子があってそれぞれ優先順位があります。さらに小難しい話をすると演算子の結合性といった話もでてきます。そこまで説明するのはちょっと骨が折れるので割愛しますが、なんとなくは演算子の優先順位といったものがわかっていただけると幸いです。

まとめ

かなり長いエントリーになってしまい申し訳ないです。本当はもうちょっとDOMまわりの補足もしたかったんですが、それはまた別の機会にお話するかエントリーをあげたいと思います。

今回の勉強会は参加する側ではなく主催するという僕にとっては初の試みでしたが、無事(?) になんとか終えることができました。様々な方にご協力いただき本当にありがとうございます。

第２回目希望の声もちらほらと聞こえており、うれしい限りです。もし次も発表する側であれば、ちゃんと準備して本番に望みたいと思います( 前日に資料作るとかあほだよねw)

追記

発表する側に立ってみて思ったことですが、あらためてアウトプットは大事だなと。本を読んだり、話を聞くよりも何倍も勉強になった気がします。デザイン勉強会の話もでてるみたいなので、もし発表するか迷ってる人はとりあえずやってみることをおすすめします。いろいろ不安もあると思いますが、みんないい人なのでなんとかなります、きっとw

あ、あと全体のまとめはちょっと書ききれなかったのでhamashunさんのブログをみるよーに。

ロクナナの中村享介さんが訳した監修した本です。こういう表紙は結構好きだなぁ。中は２色刷りで余白や行間がちょうど良く見やすい感じ。

デザイナーさんが、こういうJavaScriptやDOMの本からプログラミングに興味もってもらえるとうれしいなー。デザイナーもプログラマーももっとお互いのことを理解したほうがいいと思うんだよね。