モテる javascript
TRANSCRIPT
![Page 1: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/1.jpg)
モテる JavaScript
日本マイクロソフト株式会社デベロッパー & プ ラットフォーム統括本部物江修Twitter : osamum_MS
Blog : http://blogs.msdn.com/b/osamum/
![Page 2: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/2.jpg)
目的
• 他人に見られて恥ずかしくないコードを書く
• 格好良い JavaScript コードを書いてモテる
![Page 3: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/3.jpg)
アジェンダ
•知っておきたい JavaScript の慣例的な記述方法とマナー
•使われているとなんかカッコ良い JavaScript の機能
•最近、こんなふうに書いてます。
![Page 4: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/4.jpg)
知っておきたい JavaScript の慣例的な記述方法とマナー
![Page 5: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/5.jpg)
変数 / 関数の命名規則•基本
var fistName; ( キャメルケース )
•コンストラクタ var calendar = new CalenderCtrl(); (先頭が大文字 )
• this ( 現在の名前空間 )var that = this;
•定数var GENERAL_API_KEY = "4fh5cv$sp";
• プライベート var _userName = "user01";
![Page 6: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/6.jpg)
変数 / 関数を判別する工夫
•関数 : 動詞を先頭ex) setHandler, getInfo, loadContent
•変数 : 単語間を _ ( アンダースコア ) でex) var first_name = "";
![Page 7: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/7.jpg)
変数を宣言する場所
•関数の先頭•すべての変数
function myFunc(){ var shopName; var address; var phone; var catchCopy; ・ ・
function myFunc(){ var shopName, address, phone, catchCopy; ・ ・
![Page 8: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/8.jpg)
スコープ (1/2)• JavaScript の変数スコープは関数単位
// 変数 i と fullName のスコープは for 文内に閉じていないfor (var i = 0; i < length; i++) { var fullName = items[i].firstName + " " items[i].lastName; :// 以下は期待どおりの動作とならないfor (var i=0; i<5; i++) { console.log("Outer loop " + i); for (var i=0; i<10; i++) { console.log("Inner loop " + i); }}
![Page 9: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/9.jpg)
•宣言されていない変数は巻き上げられる•複数回宣言可能 ( 上書きれる )
スコープ (2/2)
function myFunc(){ $ = "Hello";//jQuery を使用していた場合、正常に動作しなくなる 意図しない名前空間の変数書き換え⇒ 名前空間の汚染
![Page 10: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/10.jpg)
名前空間を汚染しないための工夫• “use strict” の使用•即時実行関数に閉じる
<script>(function(){"use strict"; onload = function(){ var variable1, variable2, variable3; // ページ読み込み時の処理 }; function otherFunction(){ // 関数の処理 };})();</script>
![Page 11: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/11.jpg)
オブジェクトを利用した書き方 (1)var myUtil = { methodA : function () { //method A の処理 return resultValue; }, methodB : function(arg){ //method B の処理 return resultValue; }};// 呼び出し方var variable = myUtil.methodA();
![Page 12: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/12.jpg)
オブジェクトを利用した書き方 (2)var myUtil = {};myUtil.methodA = function () { //method A の処理 return resultValue; };myUtil.methodB = function (arg) { //method B の処理 return resultValue; };
// 呼び出し方は同じvar variable = myUtil.methodA();
![Page 13: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/13.jpg)
中括弧 ({}) の書き方 (1/2)
•中括弧の開始タグの前で改行しない• 暗黙的 ; ( セミコロン ) の挿入による意図
しない動作となる場合がある
function userInfo(){ return { firstName : " ひろし", lastName : " 山田 ", age : 23};}
×〇
function userInfo(){ return { firstName : " ひろし", lastName : " 山田 ", age : 23};}エラーが発生
![Page 14: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/14.jpg)
中括弧 ({}) の書き方 (2/2)
• if 文は {} を省略せずに書く
if( itemslength == MAX_LENGTH) countLabel.innerText = "Full"; else countLabel.innerText = itemslength;
if( itemslength == MAX_LENGTH) { countLabel.innerText = "Full"; }else{ countLabel.innerText = itemslength;}
△
〇
![Page 15: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/15.jpg)
DOM アクセスについて
• DOM ツリーを探すのでアクセスにはコストがかかる• 2 回以上アクセスする際はインスタンスを変数に
// 一般的に使用される DOM エレメントのインスタンスの取得法var element = document.getElementById(" エレメントのID"); .getElementByName(" エレメントの名前 "); .querySelector("CSS セレクタ "); .activeElement(); .all();
![Page 16: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/16.jpg)
DOM アクセスの例// 非常に効率が悪い例for(var i=0; i < document.getElementById(“itemList”).childNodes.length; i++){ document.getElementById("itemList").childNodes[i].innerText = " アイテム " + i;}
// ロスを減らした例var nodes = document.getElementById("itemList").childNodes;var length = nodes.length;for(var i=0; i< length; i++){ nodes[i].innerText = " アイテム " + i;}
![Page 17: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/17.jpg)
ここまでのまとめ
•慣例的な記述方法•可読性を高めるため•メンテナンス性を高めるため•意図しない動作を避けるため•他者に迷惑をかけないためのマナー
![Page 18: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/18.jpg)
使われているとなんかカッコ良い JavaScript の機能
![Page 19: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/19.jpg)
あいまいな評価の利用 (1/3)
• JavaScript の 5 つの false
以下はいずれも false と判断される
falsenullundefined"" ( 空文字 )0NaN (not a number)
![Page 20: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/20.jpg)
if(stringData!="") ⇒ if(stringData)
あいまいな評価の利用 (2/3)
いろいろな使いみち
if(myObject) // オブジェクトのインスタンスの有無if(document.addEventListener) // メソッドの有無if(items.length) // 要素の有無 ( 数 )
![Page 21: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/21.jpg)
定義済み判定のさらに短い書式
// 変数の初期値設定function(stringArg){ stringArg = stringArg || "defaultValue";
// 安全な名前空間の登録var myApp = myApp||{};
![Page 22: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/22.jpg)
•注意が必要な場合も
あいまいな評価 (3/3)
以下の式は正しく評価されないconsole.log(0 == ''); //trueconsole.log(0 == '0'); //trueconsole.log(false == '0'); //trueconsole.log(null == undefined); //trueconsole.log(0 == '\t\r\n'); //true
![Page 23: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/23.jpg)
あいまいな評価を避けるには
===!==
•厳密な評価が可能
イコール
Not イコール
console.log(null === undefined); //false
![Page 24: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/24.jpg)
即時実行関数• (function(){// 処理 })();• 一か所からのみ呼び出される• 名前空間を使用しない
var shopName = item.shopName;var avgFare = item.avgFare;var creditCard = (function(sepChar){ var dotList = "", cardList = item.creditCardList, length = cardList.length; for(var i=0; i<= length; i++){ dotList += cardList[i].name + sepChar; } return dotList;
})(",");
![Page 25: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/25.jpg)
クロージャー (1/3)•渡された引数の値を保持する
function makeAdder(x){ return function(y){ return x + y; }}
var add5 = makeAdder(5);var add10 = makeAdder(10);
console.log(add5(2)); //7 console.log(add10(2)); //12
![Page 26: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/26.jpg)
クロージャー (2/3)
[[scoope]]makeAddr
add5
add10
function(y){return x + y}[[scoope]]
function(y){return x + y}[[scoope]]
[[scoope]]x : 10
[[scoope]]x : 5
function (x){ return function( y ) { ・・・ } }
![Page 27: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/27.jpg)
クロージャー (2/3)
var ctrl_listView = document.getElementById("itemList"), ctrl_item = null; for(var i=0; i <=5; i++){ crtl_item = document.createElement("li"); crtl_item.innerText = " リンク " + i; crtl_item.addEventListener("click", function (index) { return function(){
console.log(index + " 番目がクリックされました。 ");
} }(i) , false); ctrl_listView.appendChild(crtl_item); }
• ex) リストに生成時のインデックスを保持
![Page 28: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/28.jpg)
メソッドチェーン (1/2)
• ワンライナー ( 一行 ) で複数メソッドの呼び出し• オブジェクトツリーの検索処理の軽減
01| myPage.setCtrl();02| myPage.setHendler();03| myPage.loadData();
01| myPage.setCtrl().setHendler().loadData();
![Page 29: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/29.jpg)
メソッドチェーン (2/2)var myPage = { methodOne : function(){
console.log("ONE"); return this;},
methodTwo : function(){ console.log("TWO"); return this;},
methodThree : function(){ console.log("THREE");
return this;}
}
// 呼び出しmyPage.methodOne().methodTwo().methodThree();
![Page 30: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/30.jpg)
ここまでのまとめ
• JavaScript の良い意味での「曖昧さ」を理解してうまく使うことでコンパクトで効率の良いコードが書ける•関数の実行タイミング、メモリの使われ方をすることで頓智の効いたコードが書ける
![Page 31: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/31.jpg)
最近、こんなふうに書いてます。
![Page 32: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/32.jpg)
完結したページ / コントロールを 1 対 1 のオブジェクトで管理
var thisPage ={ ctrls:{
// コントロールの// インスタンスを保持
}, init:{
// ページの初期化関数群 }, handlers:{
// イベントハンドラ群 }, util:{
// 一般関数群 }}
![Page 33: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/33.jpg)
初期化オブジェクトの中身var thisPage ={ ctrls:{ listBox:null }, init:{ setCtrls:function(){ this.ctrl.listBox = id$("listBox"); return this; }, setHandlers:function(){
this.ctrl.listBox.addEventListener("change",this.hendlers.changeItem,false);
return this; }, lenderPage:function(){ //listBox へのデータロード処理等 return this;
} }
![Page 34: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/34.jpg)
初期化メソッドの呼び方
onload = function(){
thisPage.init.setCtrls().setHandlers().lenderPage();
}// 正常時、エラー時に実行する関数を引数に.lenderPage(success,error);
![Page 35: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/35.jpg)
Web ページの場合の応用・ブラウザ間のイベント設定の記述の違いを吸収するvar util ={ addEvent:null, init: function () { if(document.addEventListener) { this.addEvent = function(element, type, handler){ element.addEventListener(type, handler, false); } }else if(document.attachEvent) { this.addEvent = function(element, type, handler){ element.attachEvent('on' + type, handler); }}}}
// 初期化util.init();// イベントハンドラの設定util.addEvent(document.getElementById("button"));
![Page 36: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/36.jpg)
ここまでのまとめ
•インタラクティブに動作する Web アプリケーションは、ページをオブジェクトを介して抽象化すると扱いやすい
![Page 37: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/37.jpg)
まとめ
•日々是学び•「オトコならシャツ一枚にもこだわれ」⇒「技術者ならコード一行にこだわれ」
enjoy!
![Page 38: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/38.jpg)
参考
O’RELLY Japan JavaScript
http://www.oreilly.co.jp/books/9784873113296/
![Page 39: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/39.jpg)
参考O’RELLY Japan JavaScript: The Good Parts―― 「良いパーツ」によるベストプラクティス http://www.oreilly.co.jp/books/9784873113913/
![Page 40: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/40.jpg)
参考O’RELLY Japan JavaScript パターン――優れたアプリケーションのための作法
http://www.oreilly.co.jp/books/9784873114880/
![Page 41: モテる JavaScript](https://reader036.vdocuments.net/reader036/viewer/2022062418/5558bd89d8b42aa52a8b5044/html5/thumbnails/41.jpg)
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information
provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.