Embed Size (px)
DESCRIPTION
Effective JavaScript 社内勉強会用の資料です。
Citation preview
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モードで禁止な理由 - Togetterhttp://togetter.com/li/215907
• function - Why was the arguments.callee.caller property deprecated in JavaScript? - Stack Overflowhttp://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モードにしない。
項目2JavaScriptの浮動小数点を
理解しよう
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'; // falses == 'hello'; // true
var s2 = new String('hello');s === s2; // falses == s2; // false
オブジェクトラッパー•プリミティブのプロパティを取得あるいは設定すると、オブジェクトラッパーが暗黙のうちに作成される。
"hello".toUpperCase(); // "HELLO""hello".hoge = 1;"hello".hoge; // undefined(123).toString(); // '123'123..toString(); // '123'
項目5型が異なるときに
==を使わない
==演算子•==演算子は、引数の型が異なるとき、分かりにくい暗黙の強制を適用される
•valueOfとかtoStringとかDateだけ違うとか、おおよそ人間には理解できないルールが存在する。http://os0x.hatenablog.com/entry/20100916/1284650917http://d.hatena.ne.jp/sandai/20100916/p1
"1.0e0" == {valueOf: function() {return true;}}// true だけど、頭がいたくなる。。
===演算子使おう•===演算子を使えば、比較に暗黙の強制が関わらないことを明示できる。
•型の異なる値を比較するときは、明示的な型変換を自分で行うこと。
項目6セミコロン挿入の限度を学ぼう
セミコロン;自動挿入ルール•厳密には結構むずい。
•returnのあとに改行しちゃいけないことだけは覚えておこう。
a = b/hoge/i.test(str)// a = b / hoge / i.test(str)// 自動挿入されないので正規表現が割り算に！
セミコロンの省略•セミコロンの省略はするな（超意訳）省略したければ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"
サロゲートペア•文字列を扱うサードパーティライブラリには要注意。
•開発してるアプリがサロゲートペア対応するのか、対応してないならどんな挙動になるのか、気をつけましょう。
第１章 完
