Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
Effective JavaScript Ch.1 | PDF
[go: Go Back, main page]

Effective JavaScript
         第1章

    @teppeis 2013/04/01
      サイボウズ社内勉強会
ファーストクラスの関数と、
オブジェクトプロトタイプという、
2つの大きな目標は別として、
そういう実現困難な要求と、
すさまじく加熱したスケジュールに対して、
僕が採用したソリューションは、
JavaScriptを最初から
極度に柔軟なものにしておくことだった。
           ∼ブレンダン・アイクによる序文∼ より
極度に
柔軟!
JavaScriptは言語でできる
ことをやりたい放題やるとチー
ム開発とか絶対無理だよ。
規律を持って開発しましょう。
=> Effective JavaScript!
余談
• 類書に『JavaScript: The Good
  Parts』というのがあってこれも良い
  本だけど、原理主義すぎて盲信すると
  副作用があります。いろいろ分かって
  から読むとニヤニヤできる。

• 『Effective JavaScript』の方は
  安心して参考にできるプラクティスを
  収録している印象です。
第1章
JavaScriptに慣れ親しむ
項目1
    どのJavaScriptを
使っているのかを意識しよう
JavaScriptの歴史
 • ECMAScirpt 3 <= IE8-
 • ECMAScript 4 <= 黒歴史
 • ECMAScript 5 <= モダンブラウザ
 • ECMAScript 6 <= 策定中
ES3とES5
• 実際使うときによく間違えるのが、
 Arrayのメソッドとか。
 ES3にはmapとかfilerとかないよ。

• ES5 compatibility tableで確認で
 きる。
 http://kangax.github.com/es5-compat-table/
strictモード

   function  hoge()  {
       "use  strict";
       //  something...
   }
strictモード
 • いろいろstrictになる。
 • 最近は割と常識になってきた。
 • 参考:
 •   Strict モード - JavaScript ¦ MDN
     https://developer.mozilla.org/ja/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode



 •   arguments.calleeがstrictモードで禁止な理由 - Togetter
     http://togetter.com/li/215907



 •   function - Why was the arguments.callee.caller
     property deprecated in JavaScript? - Stack Overflow
     http://stackoverflow.com/questions/103598/why-was-the-arguments-callee-caller-property-deprecated-in-javascript
ファイル連結に注意
   "use  strict";
   function  strictFunc()  {
       //  strict  code...
   }

   function  nonStrictFunc()  {
       //  non-­‐strict  code...
   }


• 連結したらどっちもstrict
 逆に連結したらどちらもnon-strict

• 即時関数で囲んで          use strict しよう
Closure的には?
• DEBUGモードではgoog.base()な
  どでarguments.callee使ってて
  strictモードでは動かない。

• gjslint, Closure Compilerでほと
  んど検出できるので、Closure世界で
  はstrictモードにしない。
項目2
JavaScriptの浮動小数点を
            理解しよう
number
• JSの数は倍精度浮動小数点数。
• JSにおける整数はダブルの部分集合。
• ビット演算は、数値を32ビット符号付
 き整数として扱う。 8  |  1  //  9

• 浮動小数点演算の精度に注意
項目3
暗黙の型変換に注意しよう
型変換
• 型エラーは暗黙の型強制で隠される
• +演算子は、引数の型によって、数の加
 算か文字列の連結のどちらかになる

  3  +  true  //  4
  "hoge:"  +  true  //  "hoge:true"
  (1  +  2)  +  "3"  //  "33"
  1  +  (2  +  "3")  //  "123"
NaN is not NaN
• isNaNは型強制してしまうので、
 数値型以外には使えない!
  var  str  =  "hoge";
  isNaN(str);  //  true!



• 「それ自身と等しくない」性質を使おう
  var  a  =  NaN;
  a  !==  a;  //  true!
未定義チェックは要注意
 function  do(num,  str)  {
     //  デフォルト値を設定するときによく見るコード
     //  このままだとnum  =  0やstr  =  ""を指定できない!
     num  =  num  ||  10;
     str  =  str  ||  "default  string";
     //  ...
 }


 //  正攻法
 if  (typeof  num  ===  'undefined')  {
     num  =  10;
 }
   
 //  null  or  undefinedのチェックはこれがオススメ
 if  (num  ==  null)  {
     num  =  10;
 }
Falsy value in JS
• false
• +0, -0
• (empty string)
• NaN
• null
• undefined

• 他はすべてtrueです。
項目4
オブジェクトラッパーよりも
  プリミティブが好ましい
プリミティブ型
• boolean
• number
• string
• null
• undefined
オブジェクトラッパー
• オブジェクトラッパーは、等値演算子
 (===)で比較されたときプリミティブ
 値と同じ振る舞いをしない。
  var  s  =  new  String('hello');
  typeof  s;  //  'object'  not  'string'
  s  ===  'hello';  //  false
  s  ==  'hello';  //  true

  var  s2  =  new  String('hello');
  s  ===  s2;  //  false
  s  ==  s2;  //  false
オブジェクトラッパー
• プリミティブのプロパティを取得ある
 いは設定すると、オブジェクトラッパ
 ーが暗黙のうちに作成される。

  "hello".toUpperCase();  //  "HELLO"
  "hello".hoge  =  1;
  "hello".hoge;  //  undefined
  (123).toString();  //  '123'
  123..toString();  //  '123'
項目5
型が異なるときに
  ==を使わない
==演算子
• ==演算子は、引数の型が異なるとき、
   分かりにくい暗黙の強制を適用される
"1.0e0"  ==  {valueOf:  function()  {return  true;}}
//  true  だけど、頭がいたくなる。。




• valueOfとかtoStringとかDateだ
   け違うとか、おおよそ人間には理解で
   きないルールが存在する。
   http://os0x.hatenablog.com/entry/20100916/1284650917
   http://d.hatena.ne.jp/sandai/20100916/p1
===演算子使おう
• ===演算子を使えば、比較に暗黙の強
 制が関わらないことを明示できる。

• 型の異なる値を比較するときは、
 明示的な型変換を自分で行うこと。
項目6
セミコロン挿入の限度を学ぼう
セミコロン;自動挿入ルール
• 厳密には結構むずい。
 a  =  b
 /hoge/i.test(str)
 //  a  =  b  /  hoge  /  i.test(str)
 //  自動挿入されないので正規表現が割り算に!



• returnのあとに改行しちゃいけないこ
 とだけは覚えておこう。
セミコロンの省略
• セミコロンの省略はするな(超意訳)
 省略したければCoffee使え。

• スクリプトを連結による意図しない
 セミコロン自動挿入に注意。

  //  先頭に;を置いて連結ミスを防ぐテクニック
  ;(function()  {
      //  ..
  })();
項目7
  文字列は16ビットの
    符号単位を並べた
シーケンスとして考えよう
文字列とUnicode
• JavaScriptの文字列は、Unicode
  の符号位置(code point)ではなく、
  16ビットの符号単位(code unit)

• code point が2^16未満のときは、
  普通に文字列操作できますが。
サロゲートペア
• code point が2^16以上のとき、
     1対の符号単位(サロゲートペア)で表現

 • サロゲートペアは length, charAt,
     charCodeAt や正規表現に影響する

//  " ":  U+20BB7
//  http://www.fileformat.info/info/unicode/char/20bb7/index.htm
" ".length;  //  2
" ".charCodeAt(0).toString(16);  //  "d842"
" ".charCodeAt(1).toString(16);  //  "dfb7"
サロゲートペア
• 文字列を扱うサードパーティライブラ
 リには要注意。

• 開発してるアプリがサロゲートペア対
 応するのか、対応してないならどんな
 挙動になるのか、気をつけましょう。
第1章 完

Effective JavaScript Ch.1