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.

Effective JavaScript Ch.1

11,069 views

Published on

Effective JavaScript 社内勉強会用の資料です。

Published in: Technology
  • Be the first to comment

Effective JavaScript Ch.1

  1. 1. Effective JavaScript 第1章 @teppeis 2013/04/01 サイボウズ社内勉強会
  2. 2. ファーストクラスの関数と、オブジェクトプロトタイプという、2つの大きな目標は別として、そういう実現困難な要求と、すさまじく加熱したスケジュールに対して、僕が採用したソリューションは、JavaScriptを最初から極度に柔軟なものにしておくことだった。 ∼ブレンダン・アイクによる序文∼ より
  3. 3. 極度に柔軟!
  4. 4. JavaScriptは言語でできることをやりたい放題やるとチーム開発とか絶対無理だよ。規律を持って開発しましょう。=> Effective JavaScript!
  5. 5. 余談• 類書に『JavaScript: The Good Parts』というのがあってこれも良い 本だけど、原理主義すぎて盲信すると 副作用があります。いろいろ分かって から読むとニヤニヤできる。• 『Effective JavaScript』の方は 安心して参考にできるプラクティスを 収録している印象です。
  6. 6. 第1章JavaScriptに慣れ親しむ
  7. 7. 項目1 どのJavaScriptを使っているのかを意識しよう
  8. 8. JavaScriptの歴史 • ECMAScirpt 3 <= IE8- • ECMAScript 4 <= 黒歴史 • ECMAScript 5 <= モダンブラウザ • ECMAScript 6 <= 策定中
  9. 9. ES3とES5• 実際使うときによく間違えるのが、 Arrayのメソッドとか。 ES3にはmapとかfilerとかないよ。• ES5 compatibility tableで確認で きる。 http://kangax.github.com/es5-compat-table/
  10. 10. strictモード function  hoge()  {    "use  strict";    //  something... }
  11. 11. 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
  12. 12. ファイル連結に注意 "use  strict"; function  strictFunc()  {    //  strict  code... } function  nonStrictFunc()  {    //  non-­‐strict  code... }• 連結したらどっちもstrict 逆に連結したらどちらもnon-strict• 即時関数で囲んで use strict しよう
  13. 13. Closure的には?• DEBUGモードではgoog.base()な どでarguments.callee使ってて strictモードでは動かない。• gjslint, Closure Compilerでほと んど検出できるので、Closure世界で はstrictモードにしない。
  14. 14. 項目2JavaScriptの浮動小数点を 理解しよう
  15. 15. number• JSの数は倍精度浮動小数点数。• JSにおける整数はダブルの部分集合。• ビット演算は、数値を32ビット符号付 き整数として扱う。 8  |  1  //  9• 浮動小数点演算の精度に注意
  16. 16. 項目3暗黙の型変換に注意しよう
  17. 17. 型変換• 型エラーは暗黙の型強制で隠される• +演算子は、引数の型によって、数の加 算か文字列の連結のどちらかになる 3  +  true  //  4 "hoge:"  +  true  //  "hoge:true" (1  +  2)  +  "3"  //  "33" 1  +  (2  +  "3")  //  "123"
  18. 18. NaN is not NaN• isNaNは型強制してしまうので、 数値型以外には使えない! var  str  =  "hoge"; isNaN(str);  //  true!• 「それ自身と等しくない」性質を使おう var  a  =  NaN; a  !==  a;  //  true!
  19. 19. 未定義チェックは要注意 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; }
  20. 20. Falsy value in JS• false• +0, -0• (empty string)• NaN• null• undefined• 他はすべてtrueです。
  21. 21. 項目4オブジェクトラッパーよりも プリミティブが好ましい
  22. 22. プリミティブ型• boolean• number• string• null• undefined
  23. 23. オブジェクトラッパー• オブジェクトラッパーは、等値演算子 (===)で比較されたときプリミティブ 値と同じ振る舞いをしない。 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
  24. 24. オブジェクトラッパー• プリミティブのプロパティを取得ある いは設定すると、オブジェクトラッパ ーが暗黙のうちに作成される。 "hello".toUpperCase();  //  "HELLO" "hello".hoge  =  1; "hello".hoge;  //  undefined (123).toString();  //  123 123..toString();  //  123
  25. 25. 項目5型が異なるときに ==を使わない
  26. 26. ==演算子• ==演算子は、引数の型が異なるとき、 分かりにくい暗黙の強制を適用される"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
  27. 27. ===演算子使おう• ===演算子を使えば、比較に暗黙の強 制が関わらないことを明示できる。• 型の異なる値を比較するときは、 明示的な型変換を自分で行うこと。
  28. 28. 項目6セミコロン挿入の限度を学ぼう
  29. 29. セミコロン;自動挿入ルール• 厳密には結構むずい。 a  =  b /hoge/i.test(str) //  a  =  b  /  hoge  /  i.test(str) //  自動挿入されないので正規表現が割り算に!• returnのあとに改行しちゃいけないこ とだけは覚えておこう。
  30. 30. セミコロンの省略• セミコロンの省略はするな(超意訳) 省略したければCoffee使え。• スクリプトを連結による意図しない セミコロン自動挿入に注意。 //  先頭に;を置いて連結ミスを防ぐテクニック ;(function()  {    //  .. })();
  31. 31. 項目7 文字列は16ビットの 符号単位を並べたシーケンスとして考えよう
  32. 32. 文字列とUnicode• JavaScriptの文字列は、Unicode の符号位置(code point)ではなく、 16ビットの符号単位(code unit)• code point が2^16未満のときは、 普通に文字列操作できますが。
  33. 33. サロゲートペア• 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"
  34. 34. サロゲートペア• 文字列を扱うサードパーティライブラ リには要注意。• 開発してるアプリがサロゲートペア対 応するのか、対応してないならどんな 挙動になるのか、気をつけましょう。
  35. 35. 第1章 完

×