1. 今さら始めるJavaScript
- 社内勉強会 第一回 -
2012/07/11 @mryoshio
Copyright 2012 tachibanakikaku.com. All rights reserved.

2. 目次
‣ 自己紹介
‣ 後ろ向きな動機
‣ 前向きな動機
‣ 何を始めたらよいのか分からない人へ
‣ 楽したい
‣ [デモ] それらしく見えるサイト
‣ おわりに

3. 自己紹介
‣ mryoshio
→ A社の社員
→ AlfrescoやLiferayのコンサルタントやっています
→ ソースコードを読んだりカスタマイズしたり
→ Twitterでは基本的に愚痴か食事など生活臭漂うツイートだけです
→ Facebookやってますがフレンド申請スパムには引っかかりません

4. 後ろ向きな動機（ me）
‣ JavaScriptやりたくない
→ レスポンシブWebデザインとやらが言われているので重い腰を上げざ
るを得ない気がする。こんな調子でRetina対応とかもしないと駄目
なのだろうか。⃝ppleェ...
‣ レスポンシブWebデザイン
→ Webサイトを作り際の方法の1つ。視聴する端末の解像度に合わせて
表示内容を適切に変化させる。PCだろうがタブレットのような携帯
端末だろうがちゃんと見られるようにしろということ
→ （参考: http://designmodo.com/responsive-design-examples/）

5. 前向きな動機（ me）
‣ 技術の幅が広がる
→ 偏見を捨てて取り組むと面白かったことが過去に幾つもあるのでやっ
てみてもいいかも。人としての心の幅も広がるといいね（希望）
‣ プロトタイプを作れる
→ JavaScriptライブラリを使えるとフロントを持つプロトタイプくら
いは自分で作れるようになる。本格的にレイアウトきれいにするなら
デザイナを入れるべきだけど
‣ 手に職を
→ Ajaxという言葉が出てからJavaScript関連技術はプロジェクト内で
も重宝されてきた気がするので身に着けておいて損は無い。私は
JavaScriptライブラリが出る前から書いてたけどね（ドヤッ

6. 何を始めたらよいのか分からない人へ

7. JavaScriptライブラリを探してみよう
‣ ライブラリ?
→ プログラムなんてのは（JavaScriptに限らず）簡単に汚く書けてしまう。
そこで、偉大な先人が用意してくれたライブラリを使うことで定型的なメ
ソッドやかゆいところに手が届くメソッドを、クロスブラウザで簡単に実
行できる
‣ 何ができるの?
→ DOMの操作、タイマーの設定、HTTPリクエスト、イベント処理などを簡
単に行える

8. きっとお気に入りが見つかるはず
‣ jQuery
→ 日本で最も使われているのではないかと思う（体感）。使いやすいし、プ
ラグインを入れることで機能を簡単に拡張できる。プラグインを書くこと
も割と簡単
‣ Dojo
→ 日本ではあまり聞かないけど名前が良い。私はこれが好きである。
‣ Prototype
→ シンプル。とにかくシンプル

9. どれを使えばいいの？
‣ とりあえず動かしてみたい人
→ jQueryかPrototypeがよいと思われる
‣ あまり皆が使ってないのを好む人
→ 自分で探せ

10. 楽したい

11. jQueryで楽したコード
‣ id: hogeのテキストボックスに対し...
→ 値を取得/設定 => $( #hoge ).val(); / $( #hoge ).val( new value );
→ text クラスを追加 => $("#hoge").addClass("text");
→ text クラスを削除 => $("#hoge").removeClass("text");

12. jQueryで楽したコード2
‣ 東京電力の最新供給状況を取得して表示
function successCb(data) {
var el;
$.each(data, function(k, v) {
el = $("<span/>");
el.text(k+" => "+v);
el.append($("<br/>"));
$("#latest").append(el);
});
};
$.ajax({
success: successCb,
timeout: 5000,
dataType: "jsonp",
url: "http://tepco-usage-api.appspot.com/latest.json"
});

13. [デモ] それらしく見えるサイト

14. おわりに

15. 注意事項
‣ ライブラリを使うと簡単だけど書籍やWebで調べ
て基本的なことを理解しておくように努めましょう
‣ ライブラリを使う場合はライセンス等に気をつけて
作者への敬意を表しましょう

16. おまけ

17. ソースコードの在り処
‣ 今日のソースコードはここにあります。
→ https://github.com/mryoshio/PraiseMe

18. 参考
‣ デモで利用したライブラリ群
→ jQuery => http://jquery.com/
→ jQuery UI => http://jqueryui.com/
→ jWizard => http://dominicbarnes.us/jWizard/
→ jQuery Slider^2 => http://wex.im/jquery-slider2

19. Copyright 2012 tachibanakikaku.com. All rights reserved.