1.
モテる JavaScript日本マイクロソフト株式会社デベロッパー& プ ラットフォーム統括本部物江修Twitter : osamum_MSBlog : http://blogs.msdn.com/b/osamum/

2.
目的• 他人に見られて恥ずかしくないコードを書く• 格好良い JavaScript コードを書いてモテる

3.
アジェンダ•知っておきたい JavaScript の慣例的な記述方法とマナー•使われているとなんかカッコ良いJavaScript の機能•最近、こんなふうに書いてます。

4.
知っておきたい JavaScript の慣例的な記述方法とマナー

5.
変数/関数の命名規則• 基本var fistName; (キャメルケース)• コンストラクタvar calendar = new CalenderCtrl();(先頭が大文字)• this (現在の名前空間)var that = this;• 定数var GENERAL_API_KEY = "4fh5cv$sp";• プライベートvar _userName = "user01";

6.
変数/関数を判別する工夫•関数 : 動詞を先頭ex) setHandler, getInfo, loadContent•変数 : 単語間を _ (アンダースコア) でex) var first_name = "";

7.
変数を宣言する場所•関数の先頭•すべての変数function myFunc(){var shopName;var address;var phone;var catchCopy;・・function myFunc(){var shopName,address,phone,catchCopy;・・

8.
スコープ (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);}}

9.
• 宣言されていない変数は巻き上げられる• 複数回宣言可能 (上書きれる)スコープ (2/2)function myFunc(){$ = "Hello";//jQuery を使用していた場合、正常に動作しなくなる意図しない名前空間の変数書き換え⇒ 名前空間の汚染

10.
名前空間を汚染しないための工夫• “use strict” の使用• 即時実行関数に閉じる<script>(function(){"use strict";onload = function(){var variable1, variable2, variable3;//ページ読み込み時の処理};function otherFunction(){ //関数の処理 };})();</script>

11.
オブジェクトを利用した書き方(1)var myUtil = {methodA : function () {//method A の処理return resultValue;},methodB : function(arg){//method B の処理return resultValue;}};//呼び出し方var variable = myUtil.methodA();

12.
オブジェクトを利用した書き方(2)var myUtil = {};myUtil.methodA = function () {//method A の処理return resultValue;};myUtil.methodB = function (arg) {//method B の処理return resultValue;};//呼び出し方は同じvar variable = myUtil.methodA();

13.
中括弧({})の書き方 (1/2)• 中括弧の開始タグの前で改行しない• 暗黙的 ; (セミコロン) の挿入による意図しない動作となる場合があるfunction userInfo(){return {firstName : "ひろし",lastName : "山田",age : 23};}×〇function userInfo(){return{firstName : "ひろし",lastName : "山田",age : 23};}エラーが発生

14.
中括弧({})の書き方 (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;}△〇

15.
DOM アクセスについて• DOM ツリーを探すのでアクセスにはコストがかかる• 2 回以上アクセスする際はインスタンスを変数に//一般的に使用される DOM エレメントのインスタンスの取得法var element = document.getElementById("エレメントのID");.getElementByName("エレメントの名前");.querySelector("CSS セレクタ");.activeElement();.all();

16.
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;}

17.
ここまでのまとめ•慣例的な記述方法• 可読性を高めるため• メンテナンス性を高めるため• 意図しない動作を避けるため• 他者に迷惑をかけないためのマナー

18.
使われているとなんかカッコ良いJavaScript の機能

19.
あいまいな評価の利用 (1/3)• JavaScript の 5 つの false以下はいずれも false と判断されるfalsenullundefined"" (空文字)0NaN (not a number)

20.
if(stringData!="")⇒ if(stringData)あいまいな評価の利用 (2/3)いろいろな使いみちif(myObject) //オブジェクトのインスタンスの有無if(document.addEventListener) //メソッドの有無if(items.length) //要素の有無 (数)

21.
定義済み判定のさらに短い書式//変数の初期値設定function(stringArg){stringArg = stringArg || "defaultValue";//安全な名前空間の登録var myApp = myApp||{};

22.
•注意が必要な場合もあいまいな評価 (3/3)以下の式は正しく評価されないconsole.log(0 == ); //trueconsole.log(0 == 0); //trueconsole.log(false == 0); //trueconsole.log(null == undefined); //trueconsole.log(0 == trn); //true

23.
あいまいな評価を避けるには===!==•厳密な評価が可能イコールNot イコールconsole.log(null === undefined); //false

24.
即時実行関数• (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;})(",");

25.
クロージャー(1/3)• 渡された引数の値を保持するfunction makeAdder(x){return function(y){return x + y;}}var add5 = makeAdder(5);var add10 = makeAdder(10);console.log(add5(2)); //7console.log(add10(2)); //12

26.
クロージャー(2/3)[[scoope]]makeAddradd5add10function(y){return x + y}[[scoope]]function(y){return x + y}[[scoope]][[scoope]]x : 10[[scoope]]x : 5function (x){returnfunction( y ){ }}

27.
クロージャー(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) リストに生成時のインデックスを保持

28.
メソッドチェーン (1/2)• ワンライナー(一行)で複数メソッドの呼び出し• オブジェクトツリーの検索処理の軽減01| myPage.setCtrl();02| myPage.setHendler();03| myPage.loadData();01| myPage.setCtrl().setHendler().loadData();

29.
メソッドチェーン (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();

30.
ここまでのまとめ• JavaScript の良い意味での「曖昧さ」を理解してうまく使うことでコンパクトで効率の良いコードが書ける• 関数の実行タイミング、メモリの使われ方をすることで頓智の効いたコードが書ける

31.
最近、こんなふうに書いてます。

32.
完結したページ/コントロールを1 対 1 のオブジェクトで管理var thisPage ={ctrls:{//コントロールの//インスタンスを保持},init:{//ページの初期化関数群},handlers:{//イベントハンドラ群},util:{//一般関数群}}

33.
初期化オブジェクトの中身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;}}

34.
初期化メソッドの呼び方onload = function(){thisPage.init.setCtrls().setHandlers().lenderPage();}//正常時、エラー時に実行する関数を引数に.lenderPage(success,error);

35.
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"));

36.
ここまでのまとめ• インタラクティブに動作する Web アプリケーションは、ページをオブジェクトを介して抽象化すると扱いやすい

37.
まとめ•日々是学び•「オトコならシャツ一枚にもこだわれ」⇒「技術者ならコード一行にこだわれ」enjoy!

38.
参考O’RELLY JapanJavaScripthttp://www.oreilly.co.jp/books/9784873113296/

39.
参考O’RELLY JapanJavaScript: The GoodParts――「良いパーツ」によるベストプラクティスhttp://www.oreilly.co.jp/books/9784873113913/

40.
参考O’RELLY JapanJavaScriptパターン――優れたアプリケーションのための作法http://www.oreilly.co.jp/books/9784873114880/