t51 jqueryで学ぶjavascriptでのフロント開発～asp.net mvc3もあるよっ！～

わんくま同盟東京勉強会 #51

jQueryで学ぶJavaScriptでのフロント開発

～ASP.NET MVC3もあるよっ！～

http://twitter.com/normalian

http://d.hatena.co.jp/waritohutsu

http://twitter.com/normlian







• HN ：割と普通

• 本拠地：横浜近辺

• 肩書き：しがない SI屋

• 趣味：コードを書く＆絵を描く

http://d.hatena.co.jp/waritohutsu http://twitter.com/normalian


本セッションの趣旨 • 本セッションの対象者

• jQueryって聞いたことあるけど、どう活用するん？

• JavaScriptってブラウザ依存激しいからイヤン

• ASP.NETってAjaxと相性悪くなかったっけ？

• 本セッションのゴール • jQueryの活用方法もわかったし、ブラウザ依存の回避もばっちり！

• ASP.NET MVCならAjaxとの相性もばっちり

（最近のASP.NETならAjax可能ですが）


アジェンダ • jQueryの概要

• jQueryとは？

• 登場の背景

• 今はどんなシェア？誰が後援してるの？

• jQueryを利用した画面開発

• ASP.NET MVCと jQueryとの連携

• まとめ


jQueryとは？ • いまをときめくJavaScriptライブラリ

• ブラウザ依存の記述を吸収

• 便利なメソッドを多数用意

• 豊富なプラグイン、拡張が容易

jQuery本家サイト

Firefox

IE

Opera

開発者

jQueryによるブラウザ依存の記述を吸収


登場の背景 • Bing Mapとよく似たアプリを皮切りに、「Ajax =

Asynchronous JavaScript+XML」が普及

• ブラウザで非互換な記述が多いJavaScriptを開発を補助するツールとして「prototype.js」が登場

• 「prototype.js」は強力だが、「prototype汚染」という問題が存在

prototype.jsの抱えた問題を解決し、

JavaScript開発のさらなる開発効率

向上を狙ったのが jQuery

ちょっとデモ


今はどんなシェア？誰が後援してるの？

• jQueryのシェア（BuiltWithの利用統計）

• 上位10000ウェブサイトのうち、30%以上が利用

• jQuery 38.17%、次点がSWFObject 17.54%で圧勝

Visual Studio 2010

のインテリセンス

• 後援

• 最近はMicrosoft

が援助している




• 開発環境

• jQueryの利用～基本編～

• jQueryの利用～応用編～


• まとめ


開発環境 • 以下の環境をそろえましょう

• Visual Studio 2010

• IE8 + 開発ツール（もともと入ってる）

• ieHTTPHeaders

• FireFox／Firebug／WebDeveloper

IE8の開発者モード ieHTTPHeaders


jQueryの利用～基本編～

解説後にデモ

• ブラウザに依存しないDOMエレメントの選択（CSS

ライク）

• 属性の操作、CSSの操作

• イベント処理（DOM2ベース）

• エフェクト処理

• Ajax

• ユーティリティ（ブラウザ情報の取得、map関数、each関数、filter関数）


基本編 > 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


基本編 > 属性の操作、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’);


基本編 > イベント処理 • onloadやonclick等のイベント処理を追加する

//onload時のイベント追加

$(document).ready( function(){

alert(‘画面読み込まれたー’);

});

//onclick時のイベント追加

$(‘#mybutton’).click( function(){

alert(‘ボタン押されたよー’);

});


基本編 > エフェクト処理 • DOM要素のエフェクト処理

//表示、非表示の切り替え

$(‘#my_img’).toggle( 1000 );

//フェードイン処理

$(‘#my_element’).fadeIn( 1000, function(){

alert(‘フェードイン後’);

});

//フェードアウト処理

$(‘#my_element’).fadeOut( 1000, function(){

alert(‘フェードアウト後’);

});


基本編 > Ajax • 非同期リクエスト

$.ajax({

type: "POST",

dataType: "json",

url: 'Home/Index',

data: { "key1":1, "key2",2 },

success: function (serverResponse) {

alert('正常終了です');

},

error: function () {

alert('エラー終了です');

}

});

基礎編のデモでは

$.load

を使います


基本編 > ユーティリティ • ブラウザ情報、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

辺りで仕様が変わったようだ。。。。


jQueryの利用～応用編～ • プラグイン拡張

• jQuery-validate

• jQuery-UI

• Template

• プラグインを作成

解説後にデモ


応用編 > jQuery-validate • バリデーションのルール、表示メッセージを設定

$(document).ready(function () {

$("#my_form").validate({

rules: {

my_textbox: { required: true }},

messages: {

my_textbox: {

required: "1文字くらい入力してほしいお。。。"

}}

});});


応用編 > jQuery-UI • jQueryを利用したJavaScriptのUI部品を提供

http://jqueryui.com/demos/

Dialog、

Tabs とかは便利そう


応用編 > 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が変わっている。。。。


応用編 > プラグインを作成 • ｊQuery自体を拡張し、プラグインを作成

//1. jQueryに独自メソッド（scrollchaser）を追加

( function($) {

$.fn.scrollchaser = function() {

//var elem = this;

//独自処理

}

})(jQuery);

//2. 独自メソッド(scrollchaser)を利用

$("#my_element").scrollchaser();





• ASP.NET MVCの振り返り

• jQueryとの連携について

• まとめ


ASP.NET MVCの振り返り • 最新バージョン「ASP.NET MVC3 Preview」公開中

• URLルーティング

• 単体テスト実施の容易性

• 属性ベースのモデル検証

• そのままのHTMLを記述可能

• Razor記法（MVC3 Preview版ではVB未対応）

Controller

(*.cs、*.vb) Model

(*.cs、*.vb) View

(aspx、cshtml)

Web ブラウザ


jQueryとの連携について • MVC3から、JsonValueProviderFactoryが追加

• json形式でのデータ送受信が可能

View

Controller ブラウザからjson

形式でデータ送信

サーバからjson形式のデータ送信

ちょっとデモ


jQueryとの連携について • JsonValueProviderFactoryを利用する手順

1. ASP.NET MVC3 Previewをインストール

2. JsonValueProviderFactoryをGlobal.asaxで登録

3. クライアントからのデータ送信

• json2.js スクリプトを読み込んで、「JSON.stringfy() 」してリクエストを送る

• ControllerにAjaxリクエストを受け取るメソッドを作成

4. サーバからのデータ送信

• ControllerにJsonResultを返すメソッドを作成


まとめ • jQueryは便利なナイスJavaScriptライブラリです

• ブラウザ依存系の記述はお任せ

• Ajaxも楽々

• 豊富なプラグイン

• 独自の拡張も容易

• ASP.NET MVCとの連携が容易

• json使って非同期にすると楽しそう

• HTMLがそのまま吐き出されるので、jQueryと連携しやすい

t51 jqueryで学ぶjavascriptでのフロント開発～asp.net mvc3もあるよっ！～

Technology