わんくま同盟 東京勉強会 #51
jQueryで学ぶJavaScriptで
のフロント開発
~ASP.NET MVC3もあるよっ!~
http://twitter.com/normalian
http://d.hatena.co.jp/wari...
わんくま同盟 東京勉強会 #51
• HN : 割と普通
• 本拠地 : 横浜近辺
• 肩書き : しがない SI屋
• 趣味 : コードを書く&絵を描く
http://d.hatena.co.jp/waritohutsu http://twi...
わんくま同盟 東京勉強会 #51
本セッションの趣旨
• 本セッションの対象者
• jQueryって聞いたことあるけど、どう活用するん?
• JavaScriptってブラウザ依存激しいからイヤン
• ASP.NETってAjaxと相性悪くなかった...
わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryとは?
• 登場の背景
• 今はどんなシェア?誰が後援してるの?
• jQueryを利用した画面開発
• ASP.NET MVCと jQueryとの連携
• ...
わんくま同盟 東京勉強会 #51
jQueryとは?
• いまをときめくJavaScriptライブラリ
• ブラウザ依存の記述を吸収
• 便利なメソッドを多数用意
• 豊富なプラグイン、拡張が容易
jQuery本家サイト
Firefox
IE
...
わんくま同盟 東京勉強会 #51
登場の背景
• Bing Mapとよく似たアプリを皮切りに、「Ajax =
Asynchronous JavaScript+XML」が普及
• ブラウザで非互換な記述が多いJavaScriptを開発を
補助する...
わんくま同盟 東京勉強会 #51
今はどんなシェア?誰が後援してるの?
• jQueryのシェア(BuiltWithの利用統計)
• 上位10000ウェブサイトのうち、30%以上が利用
• jQuery 38.17%、次点がSWFObject ...
わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryを利用した画面開発
• 開発環境
• jQueryの利用 ~基本編~
• jQueryの利用 ~応用編~
• ASP.NET MVCと jQueryとの連携
...
わんくま同盟 東京勉強会 #51
開発環境
• 以下の環境をそろえましょう
• Visual Studio 2010
• IE8 + 開発ツール(もともと入ってる)
• ieHTTPHeaders
• FireFox/Firebug/WebDe...
わんくま同盟 東京勉強会 #51
jQueryの利用 ~基本編~
解説後にデモ
• ブラウザに依存しないDOMエレメントの選択(CSS
ライク)
• 属性の操作、CSSの操作
• イベント処理(DOM2ベース)
• エフェクト処理
• Ajax...
わんくま同盟 東京勉強会 #51
基本編 > DOMエレメントの選択
• jQueryを利用したDOMエレメントの取得
//id属性で取得
var elem1 = $(‘#my_id’);
//先頭の取得
var elem2 = $(‘li:f...
わんくま同盟 東京勉強会 #51
基本編 > 属性の操作、CSSの操作
• 属性の操作
//属性の取得・設定
var link = $(‘#my_element’).attr(‘href’);
$(‘#my_img’).attr(‘src’, ...
わんくま同盟 東京勉強会 #51
基本編 > イベント処理
• onloadやonclick等のイベント処理を追加する
//onload時のイベント追加
$(document).ready( function(){
alert(‘画面読み込まれ...
わんくま同盟 東京勉強会 #51
基本編 > エフェクト処理
• DOM要素のエフェクト処理
//表示、非表示の切り替え
$(‘#my_img’).toggle( 1000 );
//フェードイン処理
$(‘#my_element’).fade...
わんくま同盟 東京勉強会 #51
基本編 > Ajax
• 非同期リクエスト
$.ajax({
type: "POST",
dataType: "json",
url: 'Home/Index',
data: { "key1":1, "key2...
わんくま同盟 東京勉強会 #51
基本編 > ユーティリティ
• ブラウザ情報、each関数
$.each($.browser, function(i, val) {
document.write( i + " : " + val + "<br...
わんくま同盟 東京勉強会 #51
jQueryの利用 ~応用編~
• プラグイン拡張
• jQuery-validate
• jQuery-UI
• Template
• プラグインを作成
解説後にデモ
わんくま同盟 東京勉強会 #51
応用編 > jQuery-validate
• バリデーションのルール、表示メッセージを設定
$(document).ready(function () {
$("#my_form").validate({
r...
わんくま同盟 東京勉強会 #51
応用編 > jQuery-UI
• jQueryを利用したJavaScriptのUI部品を提供
http://jqueryui.com/demos/
Dialog、
Tabs
とかは便利そう
わんくま同盟 東京勉強会 #51
応用編 > Template
• 「jquery.tmpl.js」を利用した機能
var dataObject = {
name: "割と普通",
comments: ["えろーげ","えろーす"]
};
$(...
わんくま同盟 東京勉強会 #51
応用編 > プラグインを作成
• jQuery自体を拡張し、プラグインを作成
//1. jQueryに独自メソッド(scrollchaser)を追加
( function($) {
$.fn.scrollcha...
わんくま同盟 東京勉強会 #51
アジェンダ
• jQueryの概要
• jQueryを利用した画面開発
• ASP.NET MVCと jQueryとの連携
• ASP.NET MVCの振り返り
• jQueryとの連携について
• まとめ
わんくま同盟 東京勉強会 #51
ASP.NET MVCの振り返り
• 最新バージョン「ASP.NET MVC3 Preview」公開中
• URLルーティング
• 単体テスト実施の容易性
• 属性ベースのモデル検証
• そのままのHTMLを記...
わんくま同盟 東京勉強会 #51
jQueryとの連携について
• MVC3から、JsonValueProviderFactoryが追加
• json形式でのデータ送受信が可能
View
Controller
ブラウザからjson
形式でデータ...
わんくま同盟 東京勉強会 #51
jQueryとの連携について
• JsonValueProviderFactoryを利用する手順
1. ASP.NET MVC3 Previewをインストール
2. JsonValueProviderFacto...
わんくま同盟 東京勉強会 #51
まとめ
• jQueryは便利なナイスJavaScriptライブラリです
• ブラウザ依存系の記述はお任せ
• Ajaxも楽々
• 豊富なプラグイン
• 独自の拡張も容易
• ASP.NET MVCとの連携が容...
Upcoming SlideShare
Loading in …5
×

T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~

3,815 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,815
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~

  1. 1. わんくま同盟 東京勉強会 #51 jQueryで学ぶJavaScriptで のフロント開発 ~ASP.NET MVC3もあるよっ!~ http://twitter.com/normalian http://d.hatena.co.jp/waritohutsu
  2. 2. わんくま同盟 東京勉強会 #51 • HN : 割と普通 • 本拠地 : 横浜近辺 • 肩書き : しがない SI屋 • 趣味 : コードを書く&絵を描く http://d.hatena.co.jp/waritohutsu http://twitter.com/normalian
  3. 3. わんくま同盟 東京勉強会 #51 本セッションの趣旨 • 本セッションの対象者 • jQueryって聞いたことあるけど、どう活用するん? • JavaScriptってブラウザ依存激しいからイヤン • ASP.NETってAjaxと相性悪くなかったっけ? • 本セッションのゴール • jQueryの活用方法もわかったし、ブラウザ依存の回 避もばっちり! • ASP.NET MVCならAjaxとの相性もばっちり (最近のASP.NETならAjax可能ですが)
  4. 4. わんくま同盟 東京勉強会 #51 アジェンダ • jQueryの概要 • jQueryとは? • 登場の背景 • 今はどんなシェア?誰が後援してるの? • jQueryを利用した画面開発 • ASP.NET MVCと jQueryとの連携 • まとめ
  5. 5. わんくま同盟 東京勉強会 #51 jQueryとは? • いまをときめくJavaScriptライブラリ • ブラウザ依存の記述を吸収 • 便利なメソッドを多数用意 • 豊富なプラグイン、拡張が容易 jQuery本家サイト Firefox IE Opera 開発者 jQueryによるブラウ ザ依存の記述を吸収
  6. 6. わんくま同盟 東京勉強会 #51 登場の背景 • Bing Mapとよく似たアプリを皮切りに、「Ajax = Asynchronous JavaScript+XML」が普及 • ブラウザで非互換な記述が多いJavaScriptを開発を 補助するツールとして「prototype.js」が登場 • 「prototype.js」は強力だが、「prototype汚染」という 問題が存在 prototype.jsの抱えた問題を解決し、 JavaScript開発のさらなる開発効率 向上を狙ったのが jQuery ちょっとデモ
  7. 7. わんくま同盟 東京勉強会 #51 今はどんなシェア?誰が後援してるの? • jQueryのシェア(BuiltWithの利用統計) • 上位10000ウェブサイトのうち、30%以上が利用 • jQuery 38.17%、次点がSWFObject 17.54%で 圧勝 Visual Studio 2010 のインテリセンス • 後援 • 最近はMicrosoft が援助している
  8. 8. わんくま同盟 東京勉強会 #51 アジェンダ • jQueryの概要 • jQueryを利用した画面開発 • 開発環境 • jQueryの利用 ~基本編~ • jQueryの利用 ~応用編~ • ASP.NET MVCと jQueryとの連携 • まとめ
  9. 9. わんくま同盟 東京勉強会 #51 開発環境 • 以下の環境をそろえましょう • Visual Studio 2010 • IE8 + 開発ツール(もともと入ってる) • ieHTTPHeaders • FireFox/Firebug/WebDeveloper IE8の開発者モード ieHTTPHeaders
  10. 10. わんくま同盟 東京勉強会 #51 jQueryの利用 ~基本編~ 解説後にデモ • ブラウザに依存しないDOMエレメントの選択(CSS ライク) • 属性の操作、CSSの操作 • イベント処理(DOM2ベース) • エフェクト処理 • Ajax • ユーティリティ(ブラウザ情報の取得、map関数、 each関数、filter関数)
  11. 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. 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. 13. わんくま同盟 東京勉強会 #51 基本編 > イベント処理 • onloadやonclick等のイベント処理を追加する //onload時のイベント追加 $(document).ready( function(){ alert(‘画面読み込まれたー’); }); //onclick時のイベント追加 $(‘#mybutton’).click( function(){ alert(‘ボタン押されたよー’); });
  14. 14. わんくま同盟 東京勉強会 #51 基本編 > エフェクト処理 • DOM要素のエフェクト処理 //表示、非表示の切り替え $(‘#my_img’).toggle( 1000 ); //フェードイン処理 $(‘#my_element’).fadeIn( 1000, function(){ alert(‘フェードイン後’); }); //フェードアウト処理 $(‘#my_element’).fadeOut( 1000, function(){ alert(‘フェードアウト後’); });
  15. 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. 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. 17. わんくま同盟 東京勉強会 #51 jQueryの利用 ~応用編~ • プラグイン拡張 • jQuery-validate • jQuery-UI • Template • プラグインを作成 解説後にデモ
  18. 18. わんくま同盟 東京勉強会 #51 応用編 > jQuery-validate • バリデーションのルール、表示メッセージを設定 $(document).ready(function () { $("#my_form").validate({ rules: { my_textbox: { required: true }}, messages: { my_textbox: { required: "1文字くらい入力してほしいお。。。" }} });});
  19. 19. わんくま同盟 東京勉強会 #51 応用編 > jQuery-UI • jQueryを利用したJavaScriptのUI部品を提供 http://jqueryui.com/demos/ Dialog、 Tabs とかは便利そう
  20. 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. 21. わんくま同盟 東京勉強会 #51 応用編 > プラグインを作成 • jQuery自体を拡張し、プラグインを作成 //1. jQueryに独自メソッド(scrollchaser)を追加 ( function($) { $.fn.scrollchaser = function() { //var elem = this; //独自処理 } })(jQuery); //2. 独自メソッド(scrollchaser)を利用 $("#my_element").scrollchaser();
  22. 22. わんくま同盟 東京勉強会 #51 アジェンダ • jQueryの概要 • jQueryを利用した画面開発 • ASP.NET MVCと jQueryとの連携 • ASP.NET MVCの振り返り • jQueryとの連携について • まとめ
  23. 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. 24. わんくま同盟 東京勉強会 #51 jQueryとの連携について • MVC3から、JsonValueProviderFactoryが追加 • json形式でのデータ送受信が可能 View Controller ブラウザからjson 形式でデータ送信 サーバからjson形 式のデータ送信 ちょっとデモ
  25. 25. わんくま同盟 東京勉強会 #51 jQueryとの連携について • JsonValueProviderFactoryを利用する手順 1. ASP.NET MVC3 Previewをインストール 2. JsonValueProviderFactoryをGlobal.asaxで登 録 3. クライアントからのデータ送信 • json2.js スクリプトを読み込んで、 「JSON.stringfy() 」してリクエストを送る • ControllerにAjaxリクエストを受け取るメソッド を作成 4. サーバからのデータ送信 • ControllerにJsonResultを返すメソッドを作成
  26. 26. わんくま同盟 東京勉強会 #51 まとめ • jQueryは便利なナイスJavaScriptライブラリです • ブラウザ依存系の記述はお任せ • Ajaxも楽々 • 豊富なプラグイン • 独自の拡張も容易 • ASP.NET MVCとの連携が容易 • json使って非同期にすると楽しそう • HTMLがそのまま吐き出されるので、jQueryと連 携しやすい

×