初心者向けJavaScript勉強会の資料公開と補足

とある理由で僕主催の初心者向けの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さんのブログをみるよーに。