Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
スコープの話
自己紹介 
Nobuhiro Nakashima 
@ombran 
JavaScript/Ruby/サンホラ/アニオタ 
株式会社アラタナ エンジニア 
Miyazaki.js主催
スコープ
スコープ 
“ある変数や関数が 
特定の名前で参照される範囲のこと” 
– by Wikipedia
スコープの種類
global scope 
プログラム「全体」から見えるスコープ 
file scope 
プログラムを記述したファイルの内側でのみ参照できるスコープ 
local scope 
ある関数やブロックの範囲内に限定されたスコープ 
instanc...
global scope 
プログラム「全体」から見えるスコープ 
file scope 
プログラムを記述したファイルの内側でのみ参照できるスコープ 
local scope 
ある関数やブロックの範囲内に限定されたスコープ 
instanc...
スコープの例
var scope = "Global"; 
function getValue() { 
console.log(scope); // > undefined 
var scope = "Local"; 
return scope; 
} 
...
global scope 
var scope = "Global"; 
function getValue() { 
console.log(scope); // > undefined 
var scope = "Local"; 
retu...
local scope 
var scope = "Global"; 
function getValue() { 
console.log(scope); // > undefined 
var scope = "Local"; 
retur...
スコープの話の前に 
変数の前のやつを 
説明します
varについて
varなし→必ずグローバル 
varあり→スコープ内変数 
varは絶対付けること
スコープをもう 
ちょっと深く
global scope 
• functionの外で宣言された変数・関数 
• varなしで宣言された変数
functionの外で宣言 
var scope = "Global"; 
function getValue() { 
console.log(scope); // > “Global” 
scope = "Global2"; 
return...
varなしで宣言 
function getValue() { 
scope = "Global2"; 
return scope; 
} 
console.log(getValue()); // > "Global2" 
console.lo...
local scope 
• functionの中で宣言された変数・関数 
• functionの引数で宣言された変数
functionの中で宣言 
var scope = "Global"; 
function getValue() { 
console.log(scope); // > undefined 
var scope = "Local"; 
ret...
functionの引数で宣言 
var scope = "Global"; 
function getValue(arg1) { 
console.log(arg1); // > “Global” 
arg1 = "Local"; 
retur...
なぜこういう挙動 
をするのか
スコープチェーン
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
これが 
スコープチェーン
さっきのやつ 
var scope = "Global"; 
function getValue() { 
console.log(scope); 
var scope = "Local"; 
return scope; 
} 
console...
さっきのやつ 
var scope = "Global"; 
function getValue() { 
console.log(scope); 
var scope = "Local"; 
return scope; 
} 
console...
なぜundefined?
こういうイメージ 
var scope = "Global"; 
function getValue() { 
var scope; 
console.log(scope); // > undefined 
scope = "Local"; 
...
だから変数は最初に 
全部書きましょう
スコープチェーン 
による強力な機能
の前に 
ちょっと最新の話
ちなみに 
Javaなどにある 
ブロックスコープですが
ブロックスコープ 
var sum = 0; 
for (var i = 0; i < 10; i++) { 
sum += i; 
} 
console.log(sum); 
console.log(i);
ブロックスコープ 
var sum = 0; 
for (var i = 0; i < 10; i++) { 
sum += i; 
} 
console.log(sum); // > 45 
console.log(i); // > ??
ブロックスコープ 
var sum = 0; 
for (var i = 0; i < 10; i++) { 
sum += i; 
} 
console.log(sum); // > 45 
console.log(i); // > Refe...
ブロックスコープ 
var sum = 0; 
for (var i = 0; i < 10; i++) { 
sum += i; 
} 
console.log(sum); // > 45 
console.log(i); // > Refe...
ECMAScript6の新機能 
letでできるよ
ブロックスコープ 
var sum = 0; 
for (let i = 0; i < 10; i++) { 
sum += i; 
} 
console.log(sum); // > 45 
console.log(i); // > Refe...
戻ります
スコープチェーン 
による強力な機能
クロージャ
クロージャ 
“引数以外の変数を実行時の環境ではなく、 
自身が定義された環境(静的スコープ)に 
おいて解決することを特徴とする。” 
– by Wikipedia
var a = “GlobalA”; 
var b = “GlobalB”; 
function func1() { 
var b = “Func1B”; 
function func2() { 
var c = “Func2C”; 
cons...
クロージャの 
実践例
function counter() { 
var count = 0; 
return function() { 
count = count + 1; 
return count; 
} 
} 
var cnt = counter(); 
...
function counter() { 
var count = 0; 
return function() { 
count = count + 1; 
return count; 
} 
} 
var cnt = counter(); 
...
function counter() { 
var count = 0; 
return function() { 
count = count + 1; 
return count; 
} 
} 
var cnt = counter(); 
...
即時関数
普通の関数定義と実行 
function helloWorld() { 
alert("Hello, World!"); 
} 
helloWorld();
即時関数 
(function helloWorld() { 
alert("Hello, World!"); 
})(); 
定義後、即実行
メリット
グローバルスコープを 
汚さない
即時関数 
(function helloWorld() { 
alert("Hello, World!"); 
})(); 
helloWorld(); // > エラー
ということは 
関数名もいらない
即時関数 
無名関数 
(function() { 
alert("Hello, World!"); 
})();
どういう時に使うか
ファイル内の全コードを囲む 
(function() { 
var hoge = 1; 
function fuga() { 
console.log(hoge); 
} 
fuga(); 
})();
なにがうれしい?
グローバルスコープを 
汚さない
同一ページで 
複数JSファイルを 
読み込んでも 
他のJSを壊さない
(function() { 
// ここに自分の 
//JavaScriptコードを書く 
})();
(function() { 
// ここに自分の 
//JavaScriptコードを書く 
})(); 
マナーとして覚えてください
fin
Miyazaki.js vol.1 スコープの話
Prochain SlideShare
Chargement dans…5
×

Miyazaki.js vol.1 スコープの話

727 vues

Publié le

2014/10/18
Miyazaki.js vol.1
スコープの話

Publié dans : Ingénierie
  • Soyez le premier à commenter

Miyazaki.js vol.1 スコープの話

  1. 1. スコープの話
  2. 2. 自己紹介 Nobuhiro Nakashima @ombran JavaScript/Ruby/サンホラ/アニオタ 株式会社アラタナ エンジニア Miyazaki.js主催
  3. 3. スコープ
  4. 4. スコープ “ある変数や関数が 特定の名前で参照される範囲のこと” – by Wikipedia
  5. 5. スコープの種類
  6. 6. global scope プログラム「全体」から見えるスコープ file scope プログラムを記述したファイルの内側でのみ参照できるスコープ local scope ある関数やブロックの範囲内に限定されたスコープ instance scope いわゆるカプセル化 class scope あるクラスの定義全体から参照できるスコープ
  7. 7. global scope プログラム「全体」から見えるスコープ file scope プログラムを記述したファイルの内側でのみ参照できるスコープ local scope ある関数やブロックの範囲内に限定されたスコープ instance scope いわゆるカプセル化 class scope JavaScript でのスコープ あるクラスの定義全体から参照できるスコープ
  8. 8. スコープの例
  9. 9. var scope = "Global"; function getValue() { console.log(scope); // > undefined var scope = "Local"; return scope; } console.log(getValue()); // > "Local" (ローカル変数を参照) console.log(scope); // > "Global" (グローバル変数を参照)
  10. 10. global scope var scope = "Global"; function getValue() { console.log(scope); // > undefined var scope = "Local"; return scope; } console.log(getValue()); // > "Local" (ローカル変数を参照) console.log(scope); // > "Global" (グローバル変数を参照)
  11. 11. local scope var scope = "Global"; function getValue() { console.log(scope); // > undefined var scope = "Local"; return scope; } console.log(getValue()); // > "Local" (ローカル変数を参照) console.log(scope); // > "Global" (グローバル変数を参照)
  12. 12. スコープの話の前に 変数の前のやつを 説明します
  13. 13. varについて
  14. 14. varなし→必ずグローバル varあり→スコープ内変数 varは絶対付けること
  15. 15. スコープをもう ちょっと深く
  16. 16. global scope • functionの外で宣言された変数・関数 • varなしで宣言された変数
  17. 17. functionの外で宣言 var scope = "Global"; function getValue() { console.log(scope); // > “Global” scope = "Global2"; return scope; } console.log(getValue()); // > "Global2" console.log(scope); // > "Global2"
  18. 18. varなしで宣言 function getValue() { scope = "Global2"; return scope; } console.log(getValue()); // > "Global2" console.log(scope); // > "Global2"
  19. 19. local scope • functionの中で宣言された変数・関数 • functionの引数で宣言された変数
  20. 20. functionの中で宣言 var scope = "Global"; function getValue() { console.log(scope); // > undefined var scope = "Local"; return scope; } console.log(getValue()); // > "Local" console.log(scope); // > "Global"
  21. 21. functionの引数で宣言 var scope = "Global"; function getValue(arg1) { console.log(arg1); // > “Global” arg1 = "Local"; return arg1; } console.log(getValue(scope)); // > "Local" console.log(scope); // > "Global"
  22. 22. なぜこういう挙動 をするのか
  23. 23. スコープチェーン
  24. 24. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); ここの変数の値 を探すルール
  25. 25. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); Cはこのスコープで見つかる
  26. 26. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); Bはこのスコープで見つかる
  27. 27. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); Aはこのスコープで見つかる
  28. 28. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); 変数の 検索範囲 が徐々に 広がって いる
  29. 29. これが スコープチェーン
  30. 30. さっきのやつ var scope = "Global"; function getValue() { console.log(scope); var scope = "Local"; return scope; } console.log(getValue()); // > "Local" console.log(scope); // > "Global" この時点で同一スコープを探す
  31. 31. さっきのやつ var scope = "Global"; function getValue() { console.log(scope); var scope = "Local"; return scope; } console.log(getValue()); // > "Local" console.log(scope); // > "Global" この時点で同一スコープを探す いた!!
  32. 32. なぜundefined?
  33. 33. こういうイメージ var scope = "Global"; function getValue() { var scope; console.log(scope); // > undefined scope = "Local"; return scope; } console.log(getValue()); // > "Local" console.log(scope); // > "Global"
  34. 34. だから変数は最初に 全部書きましょう
  35. 35. スコープチェーン による強力な機能
  36. 36. の前に ちょっと最新の話
  37. 37. ちなみに Javaなどにある ブロックスコープですが
  38. 38. ブロックスコープ var sum = 0; for (var i = 0; i < 10; i++) { sum += i; } console.log(sum); console.log(i);
  39. 39. ブロックスコープ var sum = 0; for (var i = 0; i < 10; i++) { sum += i; } console.log(sum); // > 45 console.log(i); // > ??
  40. 40. ブロックスコープ var sum = 0; for (var i = 0; i < 10; i++) { sum += i; } console.log(sum); // > 45 console.log(i); // > ReferenceError 10
  41. 41. ブロックスコープ var sum = 0; for (var i = 0; i < 10; i++) { sum += i; } console.log(sum); // > 45 console.log(i); // > ReferenceError 10
  42. 42. ECMAScript6の新機能 letでできるよ
  43. 43. ブロックスコープ var sum = 0; for (let i = 0; i < 10; i++) { sum += i; } console.log(sum); // > 45 console.log(i); // > ReferenceError
  44. 44. 戻ります
  45. 45. スコープチェーン による強力な機能
  46. 46. クロージャ
  47. 47. クロージャ “引数以外の変数を実行時の環境ではなく、 自身が定義された環境(静的スコープ)に おいて解決することを特徴とする。” – by Wikipedia
  48. 48. var a = “GlobalA”; var b = “GlobalB”; function func1() { var b = “Func1B”; function func2() { var c = “Func2C”; console.log(c); // > “Func2C” console.log(b); // > “Func1B” console.log(a); // > “GlobalA” } func2(); } func1(); さっきのも クロージャ
  49. 49. クロージャの 実践例
  50. 50. function counter() { var count = 0; return function() { count = count + 1; return count; } } var cnt = counter(); console.log(cnt()); // > 1 console.log(cnt()); // > 2 console.log(cnt()); // > 3 変数の 永続化
  51. 51. function counter() { var count = 0; return function() { count = count + 1; return count; } } var cnt = counter(); console.log(cnt()); // > 1 console.log(cnt()); // > 2 console.log(cnt()); // > 3 変数の 永続化 ここで変数が束縛される
  52. 52. function counter() { var count = 0; return function() { count = count + 1; return count; } } var cnt = counter(); console.log(cnt()); // > 1 console.log(cnt()); // > 2 console.log(cnt()); // > 3 変数の 永続化 束縛されたままなので 値がインクリメントされる
  53. 53. 即時関数
  54. 54. 普通の関数定義と実行 function helloWorld() { alert("Hello, World!"); } helloWorld();
  55. 55. 即時関数 (function helloWorld() { alert("Hello, World!"); })(); 定義後、即実行
  56. 56. メリット
  57. 57. グローバルスコープを 汚さない
  58. 58. 即時関数 (function helloWorld() { alert("Hello, World!"); })(); helloWorld(); // > エラー
  59. 59. ということは 関数名もいらない
  60. 60. 即時関数 無名関数 (function() { alert("Hello, World!"); })();
  61. 61. どういう時に使うか
  62. 62. ファイル内の全コードを囲む (function() { var hoge = 1; function fuga() { console.log(hoge); } fuga(); })();
  63. 63. なにがうれしい?
  64. 64. グローバルスコープを 汚さない
  65. 65. 同一ページで 複数JSファイルを 読み込んでも 他のJSを壊さない
  66. 66. (function() { // ここに自分の //JavaScriptコードを書く })();
  67. 67. (function() { // ここに自分の //JavaScriptコードを書く })(); マナーとして覚えてください
  68. 68. fin

×