Movatterモバイル変換

いまさらJavaScript 2012/09/10, DT Corp Naomichi Yamakita

アジェンダ- JavaScriptの概要と歴史- 2012年のトレンド- 最後に二言くらい

誕生秘話 1/3- インターネット初期（1995年） - アムラー、DA・YO・NE時代- 当時、ダイナミックなコンテンツを作るには、CGIやActiveX Control、 JavaAppletが必要だった - これらの技術は初心者に敷居が高かった

誕生秘話 2/3 Netscape Communications「もっと手軽に、インタラクティブな機能を持たせたいことはできないか」

誕生秘話 3/3- Netscape Communications社によってLiveScriptが開発される - 当時Netscape CommunicationsとSun Microsystem（現Oracle）が提携していたこと（Javaが流行ってたこと）もあり、名称をJavaScript に変更 - Netscape Navigator 2.0で初登場

言語の特性- インタプリタ言語 - コンパイルが不要- 構文がJavaに似ている - ただしJava != JavaScript - 未だに「あーHTMLと一緒にJavaも修正しといて」とか言う人がいる- 動的型宣言- 関数型プログラミング- オブジェクト指向 - JavaやPHPがクラスベースのオブジェクト指向であるのに対し、 JavaScriptはプロトタイプベースのオブジェクト指向である

プロトタイプベースのオブジェクト指向- JavaScriptが持つ全てのデータは（プリミティブ型を除き）オブジェクト- 全ての関数オブジェクトはprototypeプロパティを持つvar IPad = function() { this.vendor = "Apple";};IPad.prototype = { name: "iPad", late: 2011,};var NewIPad = function(late) { this.late = late;};NewIPad.prototype = new IPad();NewIPad.prototype.name = "iPad mini";var newIPad = new NewIPad(2012);console.log(newIPad.vendor); // (1)console.log(newIPad.late); // (2)console.log(newipad.name); // (3)

プロトタイプベースのオブジェクト指向- JavaScriptが持つ全てのデータは（プリミティブ型を除き）オブジェクト- 全ての関数オブジェクトはprototypeプロパティを持つvar IPad = function() { this.vendor = "Apple";};IPad.prototype = { name: "iPad", late: 2011,};var NewIPad = function(late) { this.late = late;};NewIPad.prototype = new IPad();NewIPad.prototype.name = "iPad mini"; Applevar newIPad = new NewIPad(2012);console.log(newIPad.vendor); // (1)console.log(newIPad.late); // (2)console.log(newipad.name); // (3)

プロトタイプベースのオブジェクト指向- JavaScriptが持つ全てのデータは（プリミティブ型を除き）オブジェクト- 全ての関数オブジェクトはprototypeプロパティを持つvar IPad = function() { this.vendor = "Apple";};IPad.prototype = { name: "iPad", late: 2011,};var NewIPad = function(late) { this.late = late;};NewIPad.prototype = new IPad();NewIPad.prototype.name = "iPad mini"; Applevar newIPad = new NewIPad(2012); 2012console.log(newIPad.vendor); // (1)console.log(newIPad.late); // (2)console.log(newipad.name); // (3)

プロトタイプベースのオブジェクト指向- JavaScriptが持つ全てのデータは（プリミティブ型を除き）オブジェクト- 全ての関数オブジェクトはprototypeプロパティを持つvar IPad = function() { this.vendor = "Apple";};IPad.prototype = { name: "iPad", late: 2011,};var NewIPad = function(late) { this.late = late;};NewIPad.prototype = new IPad();NewIPad.prototype.name = "iPad mini"; Applevar newIPad = new NewIPad(2012); 2012console.log(newIPad.vendor); // (1)console.log(newIPad.late); // (2)console.log(newipad.name); // (3) iPad mini

プロトタイプベースのオブジェクト指向- JavaScriptが持つ全てのデータは（プリミティブ型を除き）オブジェクト- 全ての関数オブジェクトはprototypeプロパティを持つvar IPad = function() { this.vendor = "Apple";};IPad.prototype = { name: "iPad", late: 2011,}; i が小文字なので Uncaught ReferenceError:var NewIPad = function(late) { this.late = late; newipad is not deﬁned でした!}; （大文字・小文字は区別される)NewIPad.prototype = new IPad();NewIPad.prototype.name = "iPad mini"; Applevar newIPad = new NewIPad(2012); 2012console.log(newIPad.vendor); // (1)console.log(newIPad.late); // (2)console.log(newipad.name); // (3) iPad mini

プロトタイプクイズ- 何色になるでしょう?var Container = function(){};Container.prototype = { color: "red"};var container = new Container();console.log(container.color); // (1)Container.prototype = { color: "blue"};console.log(container.color); // (2)var container2 = new Container();console.log(container2.color); // (3)Container.prototype.color = "yellow";console.log(container.color); // (4)console.log(container2.color); // (5)

JavaScriptが持つwindowオブジェクト- クライアントサイドJavaScriptはブラウザを操作するAPIを提供している - navigator - location - history - screen - frames - document（DOM） - parent, top, self

黎明期（1997年∼）- Internet Explorer 3.0にJScriptが搭載され、急速に普及が始まる - JScriptはMicrosoftがJavaScriptをベースに独自実装した言語- 1997年、Internet Explorer 4.0から本格的なDynamicHTML時代へ突入 - HTML+CSS+JavaScript（DOM）を使ったダイナミックコンテンツ- ブラウザ戦争の始まり - Internet Explorer vs Nescape Navigator

DOM（Document Object Model）- JavaScriptからHTMLやXMLを操作するためのAPI- DOMを使うことで、HTMLに特定の要素や属性を追加したり、既存の属性を変更することができる- DOMはJavaScriptのサブセットではない（仕様が独立している）<div id="foo"> <span>a</span> <span>b</span> <span>c</span></div><script> var foo = document.getElementById("foo"); var elements = foo.getElementsByTagName("span"); console.log(elements[0].innerHTML);</script>

イベント（イベントハンドラ）- ユーザが発生させるイベントに対し、イベントハンドラ（関数）を実行する - 「送信ボタンが押されたらフォームのデータを検証する」 - 「入力されたキーの文字をチェックする」- イベントハンドラの種類 - onclick - onkeyup - onchange - onload - onselect ...

イベントハンドラの使い方<script> function changeGreeting(value) { document.getElementById('greeting-message').innerText = value; }</script><form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value=""onkeyup="changeGreeting(this.value)" /> </div></form><p id="greeting-message"></p>

イベント（イベントリスナ）- 何らかのイベントを受け取って処理を実行する- イベントハンドラは1つの要素に対し1つのイベントしか実行できないが、イベントリスナは複数のイベントを実行することができる<script> // 同じ要素に複数のハンドラが登録されてる場合、後に指定した方が優先される window.onload = function() { console.log(‘Hello!’); }; window.onload = function() { conosle.log(‘good bye!’); };</script>

イベントリスナの使い方<!doctype html><html> <head> </head> <body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value="" /> </div> </form> <p id="greeting-message"></p> </body> <script> var greetingMessage = document.getElementById('greeting'); greetingMessage.addEventListener('keyup', function(e) { document.getElementById('greeting-message').innerText = e.target.value; }, false); </script></html>

DHTMLでできることの代表例- マウスを動かすとポインタに☆がつきまとう- 雪の結晶が降る- 「右クリック禁止です！！！」とアラートを出すことができる

氷河期の到来- 各ブラウザベンダーは独自の仕様を拡張するため、ブラウザ間の互換性は高いものとは言えなかった - 一つの処理を実行したいだけなのに、ブラウザごとにコードを分岐して記述することもあり、数多くのバッドノウハウを生む結果に - セキュリティホールもたくさん！ - 「JavaScriptはオンは情弱の極み！」 - 雪が降るサイトが増え、地球の気候が長期に渡って寒冷化 - 氷河期時代へ- 1997年、ECMA-262（標準化規格）が公開される

2000年代中盤 AJAXの登場- Web技術や通信回線の発展により、本格的にWebアプリが普及し始める - Web 2.0- AJAX（非同期制御）が登場 - DHMTL + XMLHttpRequestを組み合わせた技術 - Google Mapsの登場- XMLHttpRequest - JavaScriptのHTTP通信機能を用いて、動的ファイルを読み込むAPI - クロスドメイン制約により、外部サーバのファイルを読み込むことはできない（ただしJSONPを使えば読み込み可能）

2000年代後半 AJAXライブラリの登場- AJAXライブラリが続々と登場し、再びJavaScriptが脚光を浴び始める- 代表的なライブラリ - prototype.js、YUI、jQuery- 機能 - クロスブラウザ対応 - AJAX機能 - セレクタを使ったDOM操作 - リッチUI、UXの提供

jQueryのサンプルコード<!doctype html><html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('#greeting').keyup(function(e){ $('#greeting-message').text(e.target.value); }); }); </script> </head> <body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" id="greeting" name="greeting" value="" /> </div> </form> <p id="greeting-message"></p> </body></html>

ブラウザ戦争再び- REST APIの利用が流行り始める - facebook、Twitter、amazon、mixi...- Mozilla FoundationによるJavaScriptのパフォーマンス改善- JavaScriptの高速化競争（短期リリースサイクル）が始まる - HTML5やCSS3の実装も着々と進行中- 各ブラウザが搭載するJavaScriptエンジン - Chrome: V8 - Firefox: JägerMonkey - Internet Explorer: Chakra

2012年はJavaScript MVC時代の幕開け- AJAXライブラリが登場したおかげでフロントエンドの開発は楽になった- 今後JavaScriptを使う場面はますます増えてくるであろう - HTML5、CSS3、REST API…- 複雑化するコードに対応するためJavaScriptにもMVCの波がきた！

MVCフレームワークの比較- 続々とMVCフレームワークが登場している The Top 10 Javascript MVC Frameworks Reviewed http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/

主要フレームワーク- 有力候補はBackbone.js- 最近GoogleがリリースしたAngularJSも注目株

AngularJSのサンプルコード<!doctype html><html ng-app><head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script></head><body> <form action="onclick.html" method="post"> <div class="form-field"> <label for="greeting">Your greeting</label> <input type="text" ng-model="yourName" placeholder="Inputgreeting!"> </div> </form> <p>{{yourName}}</p></body></html>

AngularJS デモンストレーション- UIバインディング - http://phpunit/angularjs/ui_bindings/- コントローラを使う - http://phpunit/angularjs/loop_ﬁlter/- Twitter APIの利用 - http://phpunit/angularjs/twitter/

これからのJavaScript- サーバサイドJavaScript（Node.js、Google Apps Script等）の利用- クライアント/サーバサイド全てをJavaScript化することも可能

JavaScript超イイじゃん！- フォームのデータチェックはJavaScriptに一任しよう！ - 危険。JavaScriptは無効にできることを忘れてはならない - サーバサイドで検証していないと、思わぬセキュリティホールを突かれる可能性がある - サーバサイドの検証を必須とし、JavaScriptの検証はあくまで補助的なものと考えるべき- PC、スマートフォン、ガラケーに対応しちゃおう！ - 残念ながらガラケー（ヒューチャーフォン）はJavaScriptに非対応 - 日本は未だガラケーが7割！

JavaScriptの開発テクニック- ソースコードの圧縮- CDNの利用- デバッグ構文の利用- デバッグ、プロファイリングツールの利用 - Chrome: デベロッパーツール - Firefox: Firebug- テストツールの導入 - QUnit - Jenkins

Web技術は進化が早い!- 技術の変化に取り残されないよう、常に新しい情報を把握しておく - 全てを知る必要はないが、要点は押させておくこと

Movatterモバイル変換

Change Language

いまさらJavaScript

Embed presentation

Recommended

More Related Content

What's hot

Similar to いまさらJavaScript

いまさらJavaScript

Editor's Notes