*イマドキのJavaScript
Ajax, prototype.js and Giza

*JavaScript放談なので
気楽に行きましょう！途中でのツッコミや話題提供求む！
- ていうかそうじゃないと90分も持たない！

*自己紹介
gorouこと(ry
- id:secondlife
- http://rails2u.com/

*職業
-過去
--Webプログラマ
--php
- 無職(有給期間)←いまここ
-来年
--Webプログラマ2.0
-- perl
-- JavaScript

*言語経験
- ruby
-- 二年
- php
-- 一年半
- JavaScript
-- 八ヶ月

*好きなアイドル
- 紺野あさ美(こんこん)
- 中川翔子(しょこたん)

*JavaScript
- ひどくバカにされてきた言語
- Collection & Copy - JavaScript: 世界で最も誤解されたプログラミング言語
-- すいません昔は自分もバカに…
-- まともなコードが少なかった
-- DHTMLでエフェクトとかwindow.open()とか

- prototypeベースなOO言語
- 言語自体は面白い、けど
-- 動かす環境であるブラウザごとの実装が…

- これからのWebプログラマには必須スキル？
-- でも日本じゃまだまだWebアプリケーションのインターフェイスの要求が低いから…。

* JavaScriptを覚えたほうがいいの？
- 覚えると…
-- 表現の幅がぐっと広がる
-- できること、できないことが解る
-- インターフェイスの提案

**個人的には
- 覚えると…
-- タノシス！ギザタノシス！

* JavaScriptを学ぶ
- JavaScriptでOOP(マトモなプログラミング)するには、他のOO言語知ってないとつらい
-- 初心者にはお勧めできない

* JavaScriptを手っ取り早く学ぶには
- 詳しい人と仲良くなる
- 詳しい人に訊く (いちばんはやい)
でも訊いてばっかりだと中途半端に覚えます(体験談)

* JavaScriptのドキュメント
Webサイトのドキュメントすくねーｙｐ！
- JavaScriptでGoogle検索
- そもそも検索ワードが解らない
- 旧世代のドキュメントばかり…

* オススメサイト
- CodeZine：JavaScriptにおけるオブジェクトの基本的性質
- Latest > Flakes of Ideas > JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
- オブジェクトなJSの基礎講座
- Effective JavaScript - Dynamic Scripting
- Under Translation of ECMA-262 3rd Edition

* オススメ書籍
たくさんありすぎてわかんねーｙｐ！
- JavaScriptビジュアル・リファレンス
- JavaScript & DHTMLクックブック (お金があれば)
あまり良書は見かけたことがありません

* 手っ取り早く学ぶまとめ
- どんな言語か知る
- ビジュアルリファレンスを一通り眺めてブラウザでできること、できないことを知る
- prototype.js、scriptaclousのソースコード読む
- アプリ作る

* JavaScriptのここが難しい
- 要件定義がきっちりできない
- 見積もりが曖昧
-- ただの経験不足？
- バッドノウハウ
- ブラウザ互換性
-- test大変

* Ajax
2005年のJavaScript流行語大賞。間違いない。

* Ajaxって結局何なのさ 
http://la.ma.la/tree/
- 非同期のデータ通信でサーバとやりとりしてなんでもできちゃう

- mashup (コンテンツmix-in)
-- 同一ドメインならXMLHTTPRequestでなんでも
-- 外部ドメインならJSON使ってdocument.createElement("script");でeval
けっこう最近jsonでデータ提供してくれるとこ増えてきたよね。うれしい。

* Ajaxって技術的に難しいの？
-全然難しくない
--JavaScriptが解ってれば簡単
--XMLHTTPRequestのグッドラッパライブラリもあるし

* じゃあなんで注目されてるの？
- いままでできないと思われていたことができるから
-- みんなXMLHTTPRequest知らなかった
-- googleがGoogle Suggestsやり始めてみんな知った←自分
- Ajaxという名前が付いた
-- 名前重要。
- Web2.0の技術

* Web2.0って？
あいまいな言葉
- WebAPIを提供
- Ajax使ってる
- mashupしてる
- JavaScriptでDHTML
- タグをFolksonomyとかカッコヨク読む
-- 名前重要。
- ドメインが面白い(del.icio.us, script.aculo.us, 37signals)
-- 名前重要。でも打ちにくい。
- 外観がかっこいい
- RailsやCatalyst使ってる
これら一個でも満たして「Web2.0なウェブアプリケーションなんだ！」といえばWeb2.0

* JavaScript Library
イマドキのJavaScriptを書くのに楽するためのライブラリ

*prototype.js
-Prototype JavaScript Framework: Class-style OO, Ajax, and more
--オフィシャルドキュメントが無いことで有名
--ドキュメントはソース。ソース嫁。
-prototype.js v1.3.1 の使い方

*script.aculo.us
- script.aculo.us - web 2.0 javascript
- prototype.jsにDHTML周りを追加したもの
-- オフィシャルのwikiが重いことで有名
-- あまりwikiのドキュメントが信用ならない
-- 結局はソース嫁

* prototype.jsとRails
- Railsに付属
- RailsのHelperから呼び出せる
-- でもいまいちなので結局はJavaScript書くことに
-- RailsでJavaScriptのコードを書かずにAjax！とかはscaffoldをまんま利用するような物であまりオススメできない

* prototype.jsのここがいい
**よく使う物を短いalias functionにしてる(ポイント $も変数名に使える)
- $()
-- document.getElementById()
- $A()
-- $A(arguments)
- $H()
-- $H({key:'value'})
- $R()
-- $R(10, 20)
**buildin objectのprototype拡張(賛否両論)、しかもrubyっぽいメソッド
- String
- Array
- Numeric
**prototypeベースなOOだけどclass指向っぽくも使える
- Object.extend()
-- 実際は継承ではなくプロパティのコピーなため、superなどを用いて親を参照とかはできない
**bind, bindAsEventListener
- とあるオブジェクトからコールバック関数を定義するとき必須。eachなどのイテレータ(?)内部からthis参照したりするのにも必要。コレ知らなかったら無理矢理どろどろ回避しか思い浮かばなかった。
**使いまくるEventListener(WinIE, Firefoxで登録方法が違う)をobserverとして提供している
**Debug時に便利なinspect()関数
**Ajaxのラッパーの提供

**ソースが読みやすい

*Giza
JavaScript オレオレFramework inspired by しょこたん

*作ってみた理由
全部JavaScriptなアプリケーションを作る
- サーバ間のデータ通信はAjax
- ページの状態はURLで管理
-- query
-- hash
けっこうめんどくさいし、JavaScriptをどばーって書いていくとわけ解らなくなりがち。 Convention Over Configuration、規約重要。

そんなわけでフレームワークを作ってみました
(15時間ぐらい、400行弱)

* Gizaってどんなん？
JavaScriptのフレームワーク、といってもMVCじゃなくてCの部分だけ

- Giza.Controller
- Giza.Events
- Giza.Logger
- Giza.Request

ファイル的には
giza.js
giza/config.js
giza/events.js
giza/*_controller.js

必要な外部ライブラリ
- prototype.js
- behaviour.js
- hotkey.js

*Giza.Controller
コントローラの役割
Giza.Requestがquery or hashパラメータをパースしてるので、適応するactionを実行。
- #c=page&a=index

もしくは$Giza(controller, action, params) or $Giza(action, params)を呼び出して実行。

変数名が_で始まらない関数だけ呼び出される
_をつけるとprivateみたいな

*Giza.Events
まずはrestwikiのhtmlを

- attributesのgiza:でクリックしたときのコントローラ、アクション、パラメータを定義できる。
- events.js
-- powered by behaviour.js
-- Behaviour : Using CSS selectors to apply Javascript behaviours
-- powered by hotkey.js
-- 最速インターフェース研究会 :: キー割り当て用ライブラリを作った 

*Giza.Logger
Giza.LoggersにJavaScriptっぽいLoggerをいくつか作ったの
用途に合わせてGiza.Loggerに設定しとく
- Exception
-- ログメッセージをthrowする
- Alert
-- ログメッセージをalertで表示
- Inline
-- HTMLの一番下にログメッセージを表示
- Remote
-- Ajaxでサーバ側にログを保存

*Gizaを作ってみて
** 良かったこと
-コードでエラーが起きてもLoggerで表示されるのでWinIEでも安心？
-どこで関数定義して、とかあまり悩まなくても良くなる
-JavaScriptレベルがアップした気がする
** 問題点
-いつのまにかsafari「が」落ちるように…。
-簡易でいいからテンプレートエンジン作っておけば良かった…。
-実際にすごい役立つの？つわれたらあってもなくても良いような…。
-- JavaScriptの大半はEvent管理な気がするので、そっち指向のフレームワークとかおもろそう

* JavaScriptのフレームワーク
-JavaScriptなりのパターンがありそうでオモロイよ
-どの言語にしてもフレームワーク作るとレベルアップするよ
-みんな作ろう！
-でも役に立つかどうかは(ry