すぐに公開できる
そして、すぐ突っ込まれることができます (・∀・)
10 年。
世界が JavaScript の真の実力を発見するのに要した時間である。
1995 年、Netscape 社の Brendan Eich により開発・設計された JavaScript は、「世界で最も誤解されたプログラミング言語」などと呼ばれもした、
ともすれば不遇とすらいい得る歳月を経て、あたりのそこここに満ち充ちていた「Web の旧来的なインタラクションの窮屈さを革命したい」という思いによって、ふたたび表舞台に招来された。
JavaScript は、Web の「あちら側」と「こちら側」とを取り結ぶ、もっとも古くてもっとも新しい、そして、もっとも重要な技術だ。次の 10 年を自らの手で創り出すために、我々は Shibuya.js を結成した。
JS
今日は
10 年も前に設計され
人々を引きつけ続ける
JavaScript について
お話したいと思います
JavaScript は初心者が初めて触るプログラミング言語として最適な言語だと思っています。
どこらへんがそうなのでしょうか。
すぐに始められることは非常に重要です。
何故なら、すぐに始められないとモチベーションが湧かないからです。
JavaScript を開発し始めるために、 必要なものはすべてパソコンを購入した時点で揃っていて、
ブラウザに搭載されているという点は 非常に大きいと思います。
プログラミングが上達する肝は「突っ込まれびりてぃ」です
突っ込みどころ満載なうちに、作ったものを広く公開して 突っ込まれることが大切です
JavaScript は作ったものを「すぐに」公開できます。
そして、「広く」誰でも使うことができます。
ブログサービスによっては、 JavaScript を許可しているところもあるので、 公開するサーバすらなくてもいいのです。
そして、すぐ突っ込まれることができます (・∀・)
やっぱり、すぐにおもしろいものが作れないと、モチベーションが続かないです。
JavaScript は開発環境が充実しています。
JavaScript では、プログラミングに必要な様々なことが学べます
このように、 JavaScript はプログラミング学習に最適な言語ということができます。
ちなみに、僕は 3 年前まだ初心者だったころに JavaScript に出会い 3 年間。 まだまだ勉強し続けることがたくさんあります。
JavaScript はオブジェクト指向言語です。
オブジェクト指向とは、値（オブジェクト）にメッセージを送って何かの処理をさせたり値を取得したりするという概念です
var obj = 'amachang' obj.length // 値に length というメッセージを送って // 値から文字列の長さを得た obj.substring(3) // 値に substring と 3 というメッセージを送って // 3 文字目より後の文字列を得た
たいてい、メッセージという概念は 以下のように分けて語られることが多いと思います。
JavaScript も同じようにも見えます
しかし、そのように見えているだけで本当は大違いなのです。
という訳で今回は JavaScript のメッセージを以下のように分けてみました
このように、分けて考えることで JavaScript という言語の見通しが急によくなります。
角括弧のメッセージとは値が持っている別の値の参照を取得するためのメッセージです
a = [1, 2, 3] a [ 1 ] // <- 配列のこれなんかがそう
代入演算子の左辺になれば値の追加、または書き換えができます。
a [ 1 ] = 2 // <- 書き換え a [ 4 ] = 3 // <- 追加
また . はこれのシンタックスシュガーです。
obj . hoge = 1 obj . fuga ()
また . はこれのシンタックスシュガーです。
obj [ 'hoge' ] = 1 obj [ 'fuga' ] ()
丸括弧のメッセージとは、値を関数のように呼び出すためのメッセージです。
f = function(a) { return a + 1};
f ( 1 ) // <- これなんかがそう
丸括弧のメッセージは「関数という値」に対してのみ有効なように思えますが、 JavaScript の仕様上はそのような制限ありません。
// Firefox では以下は正常に動作する /^[am]+chang$/ ( 'amachang' ) // IE では alert は関数ではない typeof alert == 'object' alert ( 'Hello' )
ここで重要なことは JavaScript の式は演算子を除くと すべてこの値とメッセージで できているということです。
（演算子も値だったらな。。）
言い換えると、 JavaScript の式は演算子と値と角括弧と丸括弧で表されるのです
たとえば、
// 次の式をすべて角括弧と丸括弧と値で表すと
document.getElementsByTagName('a')[0]
.appendChild(
document.createTextNode('リンク')
)
document
[ 'getElementsByTagName' ]
( 'a' )
[ 0 ]
[ 'appendChild' ]
( document
[ 'createTextNode' ]
( 'リンク' ) )
document // <- これは値じゃなくて変数？
[ 'getElementsByTagName' ]
( 'a' )
[ 0 ]
[ 'appendChild' ]
( document // <- これは値じゃなくて変数？
[ 'createTextNode' ]
( 'リンク' ) )
実は、変数参照に見えるそれも概念上は値とメッセージで表す事ができます
誤解を恐れずに言うと、 JavaScript に変数という特別な仕組みは存在しないのです
この話を理解する為には with を知る必要があります
// with は通常このように使われます
with (document) {
getElementsByTagName('a')[0]
.appendChild(createTextNode('リンク'));
}
with はブロック（文）内に書かれたシンボルを、ある値への角括弧のメッセージとするための構文なのです。
逆に言うと変数を参照するというのは、 with された値に対して角括弧のメッセージを送るということなのです。
そして、 JavaScript の関数やグローバル領域は暗黙の with をしていると言えます。
// イメージとしては
function(a, b, c) {
var d = 1;
var e = d + 1;
}
// このような値が暗黙的に with されています
function(a, b, c) {
with({a:a,b:b,c:c,
d:undefined,e:undefined}) {
d = 1;
e = d + 1;
}
}
このように、 JavaScript では変数すらも値とメッセージで説明出来てしまうのです。
値とメッセージ。つまり、
JavaScript は本質的なオブジェクト指向の仕組み以外のものを ほとんど持っていない非常にシンプルなオブジェクト指向言語と言えるのです。
JavaScript は、 オブジェクト指向言語を扱いやすくするため、 プロトタイプという仕組みを持っています。
プロトタイプとは、ある値（オブジェクト）が（角括弧の）メッセージに対する値を持っていない場合に、代理でメッセージを受け付ける値のことです。
f = function() {};
f.prototype = { hoge: 1 }
// new 演算子は f.prototype をプロトタイプとした
// 空のハッシュ {} を作る
a = new f
a [ 'hoge' ] // これが 1 になる
f = function() {};
f.prototype = { hoge: 1 }
// new 演算子は f.prototype をプロトタイプとした
// 空のハッシュ {} を作る
a = new f
a [ 'hoge' ] = 2;
a [ 'hoge' ] // この場合は 2
// また、包含関係にある変数のスコープも
// プロトタイプで説明することができる
with ({ a: 1 }) {
with ({ b: 2 }) {
alert(a);
alert(b);
}
}
// また、包含関係にある変数のスコープも
// プロトタイプで説明することができる
with ({ a: 1 }) { // ←この値が
with ({ b: 2 }) { // ←この値のプロトタイプ
alert(a); // だから、ここで参照することができる
alert(b);
}
}
プロトタイプを使うと、変数の様な名前空間の包含関係を表現したり、値の共通の性質を一つのオブジェクトに纏めたりすることができます。
また JavaScript は関数指向言語だということもできます。
関数指向とは、ラムダ計算を使ってプログラミングをするスタイルです（と僕は思っています）
JavaScript では、関数はただの値で数値や文字列と比べてもなんの制限もありません。
これが、関数指向のテクニックを使う事を可能にしているのです。
// たとえば、カリー化
add = function(a, b) { return a + b };
curriedAdd = function(a) { return function(b) {
return add(a, b);
} };
// こんな感じで使えます curriedAdd ( 1 ) ( 3 ) // => 4 add10 = curriedAdd ( 10 ) add10 ( 10 ) // => 20 add10 ( 15 ) // => 35
// 例えば、遅延評価
force = function(v) {
return typeof v == 'function'
&& v.length == 0 ? force(v()) : v;
}
// 遅延評価対応版の add 関数
add = function(a) { return function (b) {
return function() { return force(a) + force(b) }
} }
force(add (add (1) (3)) (2)) // => 6
force(add (function() { return 1 + 3 }, 2) // => 6
JavaScript ではこのように関数指向言語のテクニックを使うこともできるのです。
これまで、様々な側面からプログラミング言語としての JavaScript を紹介していきました。
このように、 JavaScript は一粒で四度もおいしいプログラミング言語なんです
みなさんも、この機会と第一言語、第二言語として JavaScript を使ってみませんか
というわけで
これから、 JavaScript を始める人やお気に入りのライブラリがない人のために おすすめのライブラリを紹介します。
jQuery は非常に「やわらかい」ライブラリです
現在、日本では一番人気のあるライブラリなのではないでしょうか
$('ul.foo li') // CSS のセレクタを指定
.addClass('bar')
.addClass('baz')
.append('chang')
<ul class="foo">
<li>hoge</li>
<li>fuga</li>
</ul>
$('ul.foo li')
.addClass('bar') // したいこと
.addClass('baz')
.append('chang')
<ul class="foo">
<li class="bar">hoge</li>
<li class="bar">fuga</li>
</ul>
$('ul.foo li')
.addClass('bar')
.addClass('baz') // さらにしたいこと
.append('chang')
<ul class="foo">
<li class="bar baz">hoge</li>
<li class="bar baz">fuga</li>
</ul>
$('ul.foo li')
.addClass('bar')
.addClass('baz')
.append('chang') // さらにしたいこと
<ul class="foo">
<li class="bar baz">hogechang</li>
<li class="bar baz">fugachang</li>
</ul>
jQuery はこのように CSS セレクタとメソッドチェーンを使って、 HTML を操作したり HTML が持つ値を取したりするためのライブラリです。
jQuery はこのメソッドチェーンに徹底的にこだわっています。
jQuery にしかないの特徴的な例をもう一つお見せします
$('ul.foo') // 要素を選択する
.addClass('bar')
.find('> li:first-child')
.addClass('baz')
.end()
.append('<li>piyo</li>')
<ul class="foo">
<li>hoge</li>
<li>fuga</li>
</ul>
$('ul.foo')
.addClass('bar') // class 追加
.find('> li:first-child')
.addClass('baz')
.end()
.append('<li>piyo</li>')
<ul class="foo bar">
<li>hoge</li>
<li>fuga</li>
</ul>
$('ul.foo')
.addClass('bar')
.find('> li:first-child') // 現在の要素を起点にして要素を選択
.addClass('baz')
.end()
.append('<li>piyo</li>')
<ul class="foo bar">
<li>hoge</li>
<li>fuga</li>
</ul>
$('ul.foo')
.addClass('bar')
.find('> li:first-child')
.addClass('baz') // class 追加
.end()
.append('<li>piyo</li>')
<ul class="foo bar">
<li class="baz">hoge</li>
<li>fuga</li>
</ul>
$('ul.foo')
.addClass('bar')
.find('> li:first-child')
.addClass('baz')
.end() // さっきの選択範囲に戻る
.append('<li>piyo</li>')
<ul class="foo bar">
<li class="baz">hoge</li>
<li>fuga</li>
</ul>
$('ul.foo')
.addClass('bar')
.find('> li:first-child')
.addClass('baz')
.end()
.append('<li>piyo</li>') // li 要素を追加
<ul class="foo bar">
<li class="baz">hoge</li>
<li>fuga</li>
<li>piyo</li>
</ul>
このように、自由に選択範囲を変えながら操作をしていくというのが jQuery のスタイルです。
addClass や append 以外にも便利な関数が沢山あります。
逆に、 jQuery にはオブジェクト指向をサポートしたり、配列をリッチにしたりなど、他のライブラリにあるような言語自体を便利にするような機能はついていません
jQuery は、 $ 関数とそこから繋ぐメソッドチェーンが全てであり、それだけでほとんどの用件は満たせてしまうのです。
それが jQuery の凄いところです
また、多数の jQuery のプラグインも多数開発されていますので、状況に応じて様々な機能を追加できることも jQuery が持つ大きな利点ということができるでしょう。
もう一つ、最近注目しているライブラリが EXT JS です。
このライブラリは jQuery とは対照的に「固い」ライブラリです。
「固い」ライブラリなので、大規模開発でも使うことが出来ると思います。
EXT JS の最大の強みは GUI を作る強力なクラス群です。
とはいえ、 GUI 以外の部分もかなり充実しています。
EXT JS の導入方法はここからを一式をダウンロードして解凍して以下のファイルを読み込みます
// 継承
SubClass = function() { /* コンストラクタの内容 */ };
// ちゃんとプロトタイプを継承する
Ext.extend(SubClass, SuperClass, {
hoge: function() {
},
:
});
// 要素のラッパーを取得 el.dom に実体が入っている
var el = Ext.get('hoge');
var handler = function(e, node) { /* ... */ };
// イベントの割当（名前がかわいい）
el.on('click', handler);
el.un('click', handler);
// CSS のセレクタとメソッドチェーン
Ext.select('div')
.addClass('foo')
.addClass('bar')
.on('click', function() { /* ... */ })
.applyStyles('background: red')
Klass = function() {
this.addEvents('hoge', 'fuga', 'piyo' )
Klass.superclass.constructor.apply(this, arguments)
};
/* Ext.util.Observable を継承する */
Ext.extend(Klass, Ext.util.Observable, {
method: function(a) { /* ... */ }
});
var obj = new Klass();
obj.beforeMethod('method', function() {})
obj.afterMethod('method', function() {})
obj.on('fuga', function() {})
obj.fireEvent('fuga')
obj.method()
次は、メインの EXT JS の GUI を作る機能を紹介します。
Ext.ComponentMgr.create という関数だけでどんな部品でも自在に作ることができます。
var win = Ext.ComponentMgr.create({
xtype: 'window', // window を作る
width: 200, height: 150
});
win.show();
var win = Ext.ComponentMgr.create({
xtype: 'window', width: 200, height: 150,
items: [{ xtype: 'tabpanel', ...
items: [
{ xtype: 'panel', ... },
{ xtype: 'panel', ... }]
}]
});
win.show();
このように GUI の定義を JSON で書くだけで、かなり簡単に GUI コンポーネントを作ることができます。
みなさんも EXT JS を使ってみたら、いかがでしょうか
一時間ぶっとおしで JavaScript の言語のお話と、 おすすめのライブラリの紹介をいたしました。
これで、皆様が少しでも JavaScript に興味を持っていただけたら嬉しいです。
ところで
今日は IE7 の自動更新の日ですね＾＾
皆様、家に帰ったら IE7 を入れてみてあげてください＾＾
ではでは
ご清聴ありがとうございました