• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
モテる Java script
 

モテる Java script

on

  • 28,640 views

 

Statistics

Views

Total Views
28,640
Views on SlideShare
24,246
Embed Views
4,394

Actions

Likes
98
Downloads
121
Comments
5

17 Embeds 4,394

http://blogs.msdn.com 3862
https://twitter.com 264
http://dismantler10.corisu.com 116
http://triweb.hits.unisys.co.jp 56
http://sinka.gob.jp 24
http://www.newsblur.com 23
http://alt.st 17
http://rss.ameba.jp 14
http://feedspot.com 5
http://localhost 4
http://monoe1.rssing.com 3
http://tweetedtimes.com 2
http://b.hatena.ne.jp 2
http://www.hanrss.com 2
https://web.tweetdeck.com 1
http://www.orangehedgehog.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    モテる Java script モテる Java script Presentation Transcript

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