Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

モテる JavaScript

56,832 views

Published on

  • 物江様 DM失礼いたします。 初めましてBranding Engineer (https://b-engineer.co.jp/)イベント事業部土井と申します。 弊社は月に10-12回ほどエンジニアさん向けにイベントを開催しています。 11/30(水)には『JavaScript Bash』というJavascriptをお酒を飲みながら楽しく勉強したい方へ向けたイベントを開催させていただきます。 そこで上記のイベントの登壇者を探していたところ、物江様のスライドシェアに掲載されていたJavaScriptのスライドを拝見しまして是非イベントにて登壇していただきたくご連絡させていただきました。 ご検討の程何卒宜しくお願いします。 http://tech-eight.connpass.com/event/44268/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 第4回「ブラウザー勉強会」-『モテる JavaScript』フォローアップ記事 3 回目、書きましたー。
    「使われているとなんかカッコ良い JavaScript の機能」
    http://blogs.msdn.com/b/osamum/archive/2013/05/22/javascript-3-javascript.aspx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • フォローアップ記事、書きはじめましたー。
    1 回目
    http://blogs.msdn.com/b/osamum/archive/2013/05/09/javascript-1.aspx

    2回目
    http://blogs.msdn.com/b/osamum/archive/2013/05/09/javascript-2-javascript.aspx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @higashidetakuya お役に立てて幸いでございます。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 非常に参考になりました。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

モテる JavaScript

  1. 1. モテる JavaScript日本マイクロソフト株式会社デベロッパー& プ ラットフォーム統括本部物江修Twitter : osamum_MSBlog : http://blogs.msdn.com/b/osamum/
  2. 2. 目的• 他人に見られて恥ずかしくないコードを書く• 格好良い JavaScript コードを書いてモテる
  3. 3. アジェンダ•知っておきたい JavaScript の慣例的な記述方法とマナー•使われているとなんかカッコ良いJavaScript の機能•最近、こんなふうに書いてます。
  4. 4. 知っておきたい JavaScript の慣例的な記述方法とマナー
  5. 5. 変数/関数の命名規則• 基本var fistName; (キャメルケース)• コンストラクタvar calendar = new CalenderCtrl();(先頭が大文字)• this (現在の名前空間)var that = this;• 定数var GENERAL_API_KEY = "4fh5cv$sp";• プライベートvar _userName = "user01";
  6. 6. 変数/関数を判別する工夫•関数 : 動詞を先頭ex) setHandler, getInfo, loadContent•変数 : 単語間を _ (アンダースコア) でex) var first_name = "";
  7. 7. 変数を宣言する場所•関数の先頭•すべての変数function myFunc(){var shopName;var address;var phone;var catchCopy;・・function myFunc(){var shopName,address,phone,catchCopy;・・
  8. 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. 9. • 宣言されていない変数は巻き上げられる• 複数回宣言可能 (上書きれる)スコープ (2/2)function myFunc(){$ = "Hello";//jQuery を使用していた場合、正常に動作しなくなる意図しない名前空間の変数書き換え⇒ 名前空間の汚染
  10. 10. 名前空間を汚染しないための工夫• “use strict” の使用• 即時実行関数に閉じる<script>(function(){"use strict";onload = function(){var variable1, variable2, variable3;//ページ読み込み時の処理};function otherFunction(){ //関数の処理 };})();</script>
  11. 11. オブジェクトを利用した書き方(1)var myUtil = {methodA : function () {//method A の処理return resultValue;},methodB : function(arg){//method B の処理return resultValue;}};//呼び出し方var variable = myUtil.methodA();
  12. 12. オブジェクトを利用した書き方(2)var myUtil = {};myUtil.methodA = function () {//method A の処理return resultValue;};myUtil.methodB = function (arg) {//method B の処理return resultValue;};//呼び出し方は同じvar variable = myUtil.methodA();
  13. 13. 中括弧({})の書き方 (1/2)• 中括弧の開始タグの前で改行しない• 暗黙的 ; (セミコロン) の挿入による意図しない動作となる場合があるfunction userInfo(){return {firstName : "ひろし",lastName : "山田",age : 23};}×〇function userInfo(){return{firstName : "ひろし",lastName : "山田",age : 23};}エラーが発生
  14. 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. 15. DOM アクセスについて• DOM ツリーを探すのでアクセスにはコストがかかる• 2 回以上アクセスする際はインスタンスを変数に//一般的に使用される DOM エレメントのインスタンスの取得法var element = document.getElementById("エレメントのID");.getElementByName("エレメントの名前");.querySelector("CSS セレクタ");.activeElement();.all();
  16. 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. 17. ここまでのまとめ•慣例的な記述方法• 可読性を高めるため• メンテナンス性を高めるため• 意図しない動作を避けるため• 他者に迷惑をかけないためのマナー
  18. 18. 使われているとなんかカッコ良いJavaScript の機能
  19. 19. あいまいな評価の利用 (1/3)• JavaScript の 5 つの false以下はいずれも false と判断されるfalsenullundefined"" (空文字)0NaN (not a number)
  20. 20. if(stringData!="")⇒ if(stringData)あいまいな評価の利用 (2/3)いろいろな使いみちif(myObject) //オブジェクトのインスタンスの有無if(document.addEventListener) //メソッドの有無if(items.length) //要素の有無 (数)
  21. 21. 定義済み判定のさらに短い書式//変数の初期値設定function(stringArg){stringArg = stringArg || "defaultValue";//安全な名前空間の登録var myApp = myApp||{};
  22. 22. •注意が必要な場合もあいまいな評価 (3/3)以下の式は正しく評価されないconsole.log(0 == ); //trueconsole.log(0 == 0); //trueconsole.log(false == 0); //trueconsole.log(null == undefined); //trueconsole.log(0 == trn); //true
  23. 23. あいまいな評価を避けるには===!==•厳密な評価が可能イコールNot イコールconsole.log(null === undefined); //false
  24. 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. 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. 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. 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. 28. メソッドチェーン (1/2)• ワンライナー(一行)で複数メソッドの呼び出し• オブジェクトツリーの検索処理の軽減01| myPage.setCtrl();02| myPage.setHendler();03| myPage.loadData();01| myPage.setCtrl().setHendler().loadData();
  29. 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. 30. ここまでのまとめ• JavaScript の良い意味での「曖昧さ」を理解してうまく使うことでコンパクトで効率の良いコードが書ける• 関数の実行タイミング、メモリの使われ方をすることで頓智の効いたコードが書ける
  31. 31. 最近、こんなふうに書いてます。
  32. 32. 完結したページ/コントロールを1 対 1 のオブジェクトで管理var thisPage ={ctrls:{//コントロールの//インスタンスを保持},init:{//ページの初期化関数群},handlers:{//イベントハンドラ群},util:{//一般関数群}}
  33. 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. 34. 初期化メソッドの呼び方onload = function(){thisPage.init.setCtrls().setHandlers().lenderPage();}//正常時、エラー時に実行する関数を引数に.lenderPage(success,error);
  35. 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. 36. ここまでのまとめ• インタラクティブに動作する Web アプリケーションは、ページをオブジェクトを介して抽象化すると扱いやすい
  37. 37. まとめ•日々是学び•「オトコならシャツ一枚にもこだわれ」⇒「技術者ならコード一行にこだわれ」enjoy!
  38. 38. 参考O’RELLY JapanJavaScripthttp://www.oreilly.co.jp/books/9784873113296/
  39. 39. 参考O’RELLY JapanJavaScript: The GoodParts――「良いパーツ」によるベストプラクティスhttp://www.oreilly.co.jp/books/9784873113913/
  40. 40. 参考O’RELLY JapanJavaScriptパターン――優れたアプリケーションのための作法http://www.oreilly.co.jp/books/9784873114880/

×