1. JavaScript入門
2011/10/24
h13i32maru@Twitter
maruyama-r@KLab

2. 自己紹介
• 丸山 亮(h13i32maru) 最近はJSを触ってます
• KLab株式会社所属
32 http://blog.h13i32maru.jp
http://twitter.com/h13i32maru
https://www.facebook.com/ryo.maruyama
https://github.com/h13i32maru

3. JavaScript面白いよ(´ω｀)

4. でも良く分からないと
はまっちゃう(´・ω・｀)

5. 今日は他の言語とは
少し違うところのお話

6. JavaScriptとは
• プロトタイプベースのオブジェクト指向言語
• 関数言語の性質もあり
• シングルスレッド
• 全てパブリック

7. “関数”
超重要

8. オブジェクト指向
• JavaScriptはプロトタイプベース
- JavaやPHPはクラスベース
• あるオブジェクト(プロトタイプ)をカスタマイズ

9. var MyConstructor = function(){
this.print = function(){
console.log("this is MyClass");
};
}
var a = new MyConstructor();
a.print();

10. 継承
• あるオブジェクトを継承したオブジェクトを作る
- Object#prototype
• MyConstructorを継承してChildConstructor作る

11. var MyConstructor = function(){
this.print = function(){
console.log("this is MyConstructor");
};
}
var ChildConstructor = function(){
this.childPrint = function(){
console.log("this is ChildConstructor");
}
}
ChildConstructor.prototype = new MyConstructor();
var b = new ChildConstructor();
b.print(); //this is MyConstructor
b.childPrint(); //this is ChildConstructor

12. スコープ
• グローバルスコープと関数スコープのみ
• ブロックスコープは無し
• var hogeで関数スコープになる
• 変数宣言はスコープ先頭になる

13. function func(){
var x = 20;
for(var i = 0; i < 100; i++){
var x = i;
}
console.log(x);
}
func(); //99

14. x = 10;
y = -10;
function func(){
x = 20;
var y = -20;
}
func();
console.log(x); //20
console.log(y); //-10

15. function func(){
console.log(x); //undefined
var x = 10;
console.log(y); //error
}
func();

16. x = 10;
function func(){
console.log(x);
var x = 20;
}
func(); //undefined

17. 実行時コンテキスト
• 関数は実行時にコンテキスト(this)が決定される
- JavaやC++などではコンテキストは不変
• あるオブジェクトのメソッドを別のオブジェクトのメ
ソッドとして実行できる

18. var obj = {
hoge: 100,
func: function(){
console.log(this.hoge);
}
}
//case 1: “this”はobjコンテキスト
obj.func(); //100
//case 2: “this”はグローバルコンテキスト
var foo = obj.func;
foo(); //undefined
//case 3: “this”はfugaコンテキスト
var fuga = {hoge: -10};
fuga.piyo = obj.func;
fuga.piyo(); //-10

19. var obj = {
hoge: 100,
func: function(){
console.log(this.hoge);
}
}
function piyo(func){
func();
}
function fuga(func, context){
func.apply(context);
}
piyo(obj.func); //undefined
fuga(obj.func, obj); //100

20. クロージャ
• 関数外の変数を関数内に内包（クロージング)する
• 関数実行時のスコープ解決に関数生成時のスコープを使
用する

21. function hoge(){
var x = 10;
var func = function(){
console.log(x);
}
foo(func);
}
function foo(func){
var x = 100;
func();
}
hoge(); //10

22. func = null;
function hoge(){
var x = 10;
func = function(){
console.log(x);
x++;
}
}
hoge();
func(); //10
func(); //11
func(); //12

23. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[0]();
a[2]();
a[4]();

24. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(){
console.log(i);
}
}
a[0](); //10
a[2](); //10
a[4](); //10

25. a = [];
for(var i = 0; i < 10; i++){
a[i] = makeFunc(i);
}
function makeFunc(index){
return function(){
console.log(index);
}
}
a[0](); //0
a[2](); //2
a[4](); //4

26. a = [];
for(var i = 0; i < 10; i++){
a[i] = function(index){
return function(){
console.log(index);
}
}(i);
}
a[0](); //0
a[2](); //2
a[4](); //4

27. プライベート変数
• クロージャを使ってプライベート変数やメソッドを作る
ことができる

28. var init = function(){
this.x = 10;
this.print = function(){
console.log(this.x);
};
this.inc = function(){
this.x++;
}
};
var obj = new init();
obj.print(); //10
obj.inc();
obj.print(); //11
console.log(obj.x); //11

29. var init = function(){
var x = 10;
this.print = function(){
console.log(x);
};
this.inc = function(){
x++;
}
};
var obj = new init();
obj.print(); //10
obj.inc();
obj.print(); //11
console.log(obj.x); //undefined
var obj2 = new init();
obj2.print(); //10

30. コーディングスタイル
• Google JavaScript Style Guide
• http://cou929.nu/data/google_javascript_style_guide/#id8
• JavaScript? Coding Guidelines for Mac OS X
• http://developer.apple.com/jp/documentation/ScriptingAutomation/Conceptual/
JSCodingGuide/
• Felix's Node.js Style Guide
• http://popkirby.github.com/contents/nodeguide/style.html
• JavaScript? style guide
• https://developer.mozilla.org/ja/JavaScript_style_guide

31. おわり