わんくま同盟 東京勉強会 51回で話した内容。

1. わんくま同盟 東京勉強会 #51
jQueryで学ぶJavaScriptで
のフロント開発
～ASP.NET MVC3もあるよっ！～
http://twitter.com/normalian
http://d.hatena.co.jp/waritohutsu

2. わんくま同盟 東京勉強会 #51
• HN ： 割と普通
• 本拠地 ： 横浜近辺
• 肩書き ： しがない SI屋
• 趣味 ： コードを書く＆絵を描く
http://d.hatena.co.jp/waritohutsu http://twitter.com/normalian

3. わんくま同盟 東京勉強会 #51
本セッションの趣旨
• 本セッションの対象者
• jQueryって聞いたことあるけど、どう活用するん？
• JavaScriptってブラウザ依存激しいからイヤン
• ASP.NETってAjaxと相性悪くなかったっけ？
• 本セッションのゴール
• jQueryの活用方法もわかったし、ブラウザ依存の回
避もばっちり！
• ASP.NET MVCならAjaxとの相性もばっちり
（最近のASP.NETならAjax可能ですが）

4. わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryとは？
• 登場の背景
• 今はどんなシェア？誰が後援してるの？
• jQueryを利用した画面開発
• ASP.NET MVCと jQueryとの連携
• まとめ

5. わんくま同盟 東京勉強会 #51
jQueryとは？
• いまをときめくJavaScriptライブラリ
• ブラウザ依存の記述を吸収
• 便利なメソッドを多数用意
• 豊富なプラグイン、拡張が容易
jQuery本家サイト
Firefox
IE
Opera
開発者
jQueryによるブラウ
ザ依存の記述を吸収

6. わんくま同盟 東京勉強会 #51
登場の背景
• Bing Mapとよく似たアプリを皮切りに、「Ajax =
Asynchronous JavaScript+XML」が普及
• ブラウザで非互換な記述が多いJavaScriptを開発を
補助するツールとして「prototype.js」が登場
• 「prototype.js」は強力だが、「prototype汚染」という
問題が存在
prototype.jsの抱えた問題を解決し、
JavaScript開発のさらなる開発効率
向上を狙ったのが jQuery
ちょっとデモ

7. わんくま同盟 東京勉強会 #51
今はどんなシェア？誰が後援してるの？
• jQueryのシェア（BuiltWithの利用統計）
• 上位10000ウェブサイトのうち、30%以上が利用
• jQuery 38.17%、次点がSWFObject 17.54%で
圧勝
Visual Studio 2010
のインテリセンス
• 後援
• 最近はMicrosoft
が援助している

8. わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryを利用した画面開発
• 開発環境
• jQueryの利用 ～基本編～
• jQueryの利用 ～応用編～
• ASP.NET MVCと jQueryとの連携
• まとめ

9. わんくま同盟 東京勉強会 #51
開発環境
• 以下の環境をそろえましょう
• Visual Studio 2010
• IE8 + 開発ツール（もともと入ってる）
• ieHTTPHeaders
• FireFox／Firebug／WebDeveloper
IE8の開発者モード ieHTTPHeaders

10. わんくま同盟 東京勉強会 #51
jQueryの利用 ～基本編～
解説後にデモ
• ブラウザに依存しないDOMエレメントの選択（CSS
ライク）
• 属性の操作、CSSの操作
• イベント処理（DOM2ベース）
• エフェクト処理
• Ajax
• ユーティリティ（ブラウザ情報の取得、map関数、
each関数、filter関数）

11. わんくま同盟 東京勉強会 #51
基本編 > DOMエレメントの選択
• jQueryを利用したDOMエレメントの取得
//id属性で取得
var elem1 = $(‘#my_id’);
//先頭の取得
var elem2 = $(‘li:first’);
//class属性で取得
var elems1 = $(‘.my_class’);
//タグで取得
var elems2 = $(‘li’);
連載：jQuery逆引きリファレンス 第1回 セレクタ編
http://www.atmarkit.co.jp/fdotnet/jqueryref/01selector/selector_00.html

12. わんくま同盟 東京勉強会 #51
基本編 > 属性の操作、CSSの操作
• 属性の操作
//属性の取得・設定
var link = $(‘#my_element’).attr(‘href’);
$(‘#my_img’).attr(‘src’, ‘img.jpg’);
//クラス属性の取得・設定
$(‘#my_element’).addClass(‘my_class’);
$(‘#my_element’).removeClass(‘my_class’);
• CSSの操作
//CSSの取得・設定
var color = $(‘#my_element’).css(‘background’);
$(‘#my_element’).css(‘background’, ‘#FF00FF’);

13. わんくま同盟 東京勉強会 #51
基本編 > イベント処理
• onloadやonclick等のイベント処理を追加する
//onload時のイベント追加
$(document).ready( function(){
alert(‘画面読み込まれたー’);
});
//onclick時のイベント追加
$(‘#mybutton’).click( function(){
alert(‘ボタン押されたよー’);
});

14. わんくま同盟 東京勉強会 #51
基本編 > エフェクト処理
• DOM要素のエフェクト処理
//表示、非表示の切り替え
$(‘#my_img’).toggle( 1000 );
//フェードイン処理
$(‘#my_element’).fadeIn( 1000, function(){
alert(‘フェードイン後’);
});
//フェードアウト処理
$(‘#my_element’).fadeOut( 1000, function(){
alert(‘フェードアウト後’);
});

15. わんくま同盟 東京勉強会 #51
基本編 > Ajax
• 非同期リクエスト
$.ajax({
type: "POST",
dataType: "json",
url: 'Home/Index',
data: { "key1":1, "key2",2 },
success: function (serverResponse) {
alert('正常終了です');
},
error: function () {
alert('エラー終了です');
}
});
基礎編のデモでは
$.load
を使います

16. わんくま同盟 東京勉強会 #51
基本編 > ユーティリティ
• ブラウザ情報、each関数
$.each($.browser, function(i, val) {
document.write( i + " : " + val + "<br />");
});
• map関数、filter関数
var ary = $.map( new Array( 1, -2, 3, -4, 5, -6 ),
function( x ){
return x * x;
})//.filter( function( x ){
// if( x < 4*4 ) return x;
// });
jQuery 1.2.6
辺りで仕様が変わっ
たようだ。。。。

17. わんくま同盟 東京勉強会 #51
jQueryの利用 ～応用編～
• プラグイン拡張
• jQuery-validate
• jQuery-UI
• Template
• プラグインを作成
解説後にデモ

18. わんくま同盟 東京勉強会 #51
応用編 > jQuery-validate
• バリデーションのルール、表示メッセージを設定
$(document).ready(function () {
$("#my_form").validate({
rules: {
my_textbox: { required: true }},
messages: {
my_textbox: {
required: "1文字くらい入力してほしいお。。。"
}}
});});

19. わんくま同盟 東京勉強会 #51
応用編 > jQuery-UI
• jQueryを利用したJavaScriptのUI部品を提供
http://jqueryui.com/demos/
Dialog、
Tabs
とかは便利そう

20. わんくま同盟 東京勉強会 #51
応用編 > Template
• 「jquery.tmpl.js」を利用した機能
var dataObject = {
name: "割と普通",
comments: ["えろーげ","えろーす"]
};
$("#sometmpl").rendertmpl( dataObject )
.appendTo("ul");
<script id="sometmpl" type="text/html">
<li>${$i}) ${name}(こめんと: {{each(i,comment)
comments}}${comment}{{/each}})</li>
</script>
<ul></ul>
IE9だと動かない
伝説。。。
まだIFが変わって
いる。。。。

21. わんくま同盟 東京勉強会 #51
応用編 > プラグインを作成
• ｊQuery自体を拡張し、プラグインを作成
//1. jQueryに独自メソッド（scrollchaser）を追加
( function($) {
$.fn.scrollchaser = function() {
//var elem = this;
//独自処理
}
})(jQuery);
//2. 独自メソッド(scrollchaser)を利用
$("#my_element").scrollchaser();

22. わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryを利用した画面開発
• ASP.NET MVCと jQueryとの連携
• ASP.NET MVCの振り返り
• jQueryとの連携について
• まとめ

23. わんくま同盟 東京勉強会 #51
ASP.NET MVCの振り返り
• 最新バージョン「ASP.NET MVC3 Preview」公開中
• URLルーティング
• 単体テスト実施の容易性
• 属性ベースのモデル検証
• そのままのHTMLを記述可能
• Razor記法（MVC3 Preview版ではVB未対応）
Controller
(*.cs、*.vb)
Model
(*.cs、*.vb)
View
(aspx、cshtml)
Web
ブラウザ

24. わんくま同盟 東京勉強会 #51
jQueryとの連携について
• MVC3から、JsonValueProviderFactoryが追加
• json形式でのデータ送受信が可能
View
Controller
ブラウザからjson
形式でデータ送信
サーバからjson形
式のデータ送信
ちょっとデモ

25. わんくま同盟 東京勉強会 #51
jQueryとの連携について
• JsonValueProviderFactoryを利用する手順
1. ASP.NET MVC3 Previewをインストール
2. JsonValueProviderFactoryをGlobal.asaxで登
録
3. クライアントからのデータ送信
• json2.js スクリプトを読み込んで、
「JSON.stringfy() 」してリクエストを送る
• ControllerにAjaxリクエストを受け取るメソッド
を作成
4. サーバからのデータ送信
• ControllerにJsonResultを返すメソッドを作成

26. わんくま同盟 東京勉強会 #51
まとめ
• jQueryは便利なナイスJavaScriptライブラリです
• ブラウザ依存系の記述はお任せ
• Ajaxも楽々
• 豊富なプラグイン
• 独自の拡張も容易
• ASP.NET MVCとの連携が容易
• json使って非同期にすると楽しそう
• HTMLがそのまま吐き出されるので、jQueryと連
携しやすい