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