Effective JavaScript Ch.1

10,191 views
10,191 views

Published on

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

Published in: Technology
0 Comments
41 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,191
On SlideShare
0
From Embeds
0
Number of Embeds
5,243
Actions
Shares
0
Downloads
32
Comments
0
Likes
41
Embeds 0
No embeds

No notes for slide

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章 完

×