Slide 1
Slide 1 text
JavaScript を書き始める前に知
っておきたい JavaScript のこと
Kanazawa.js
Remote Meetup #02
千葉 弘太郎
1
1
Slide 2
Slide 2 text
千葉 弘太郎（ちば こうたろう）
Kotaro Chiba
Twitter: @ur_uha
Github: uruha
Work: DMM.com LLC
2
2
Slide 3
Slide 3 text
前回
JavaScript を書き始める前にやっておきたいこと
3
3
Slide 4
Slide 4 text
今回
JavaScript の歴史
JavaScript とは
4
4
Slide 5
Slide 5 text
JavaScript の歴史
5
5
Slide 6
Slide 6 text
1995 ~ LiveScript (Brendan Eich from Netscape)
初期は LiveScript として開発された。後にその当時 Java
が流⾏っていたことから、現⾏の JavaScript の命名とな
る
1996 ~ Internet Explorer 3.0 搭載
これ以降ブラウザによってJSの実装 (仕様) がことなるため
⾮常にこれが問題になる「ブラウザ問題」
6
6
Slide 7
Slide 7 text
1997 ~ ECMA international 発⾜
JavaScript の標準仕様である ECMAScript (通称ES) が定
義される
TC39 (Technical Committee) という専⾨委員会が策定
現在は ES5 がメジャーで最新は ES9 まで標準化が動い
ている
7
7
Slide 8
Slide 8 text
2000 ~ 発展
Google, Amazon が積極的に JavaScript を使⽤したWeb
サービスを展開
Ajax の誕⽣・Google map のサービス開始などで世間に
衝撃を与える
今では当たり前の技術として普及
8
8
Slide 9
Slide 9 text
最近 ~ より便利なWebの世界に
ECMAScript 更新が活発化 (先述)
ブラウザの機能を拡張する Web API の提供などが注⽬
されている
Web VR
Web RTC
Web Bluetooth
Shape Detection
9
9
Slide 10
Slide 10 text
JavaScript とは
10
10
Slide 11
Slide 11 text
JavaScript と ECMAScript の関係
ECMAScript は ECMA International によって標準化されて
いる JavaScript の仕様 を指す
ECMA International では ECMAScript を管理番号として
262
と定めており、 ECMAScript
と ECMA-262
は同じ
意味になる
11
11
Slide 12
Slide 12 text
イメージ
仕様 (ECMAScript) =>
実装 (JavaScript)
12
12
Slide 13
Slide 13 text
JavaScript の特徴
軽量なインタープリタ型プログラミング⾔語
または、実⾏時コンパイルされる、第⼀級関数を備えたプロ
グラミング⾔語とも⾔える
Client でDOMの操作が⾏える
13
13
Slide 14
Slide 14 text
インタープリタ
コードが上から下に実⾏されてコードの実⾏結果がすぐに返
ってくる原理
スクリプトを実⾏する際にコンパイルされてバイナリとし
て実⾏される
JavaScript は JIT (just-in-time compiling) という技術を
⽤いて、 実⾏時の最適化を図っている
14
14
Slide 15
Slide 15 text
エンジン名 ⾔語 その他
Spider
Monkey C JS開発当初のエンジン
Rhino Java Node.js より前のサーバサイド側の
エンジン
V8 C++ Chrome などのブラウザでのJS実⾏
エンジン
Node.js C++ サーバサイドでJSが実⾏できるエン
ジン
15
15
Slide 16
Slide 16 text
第⼀級関数
定義した関数が変数 (オブジェクト) として扱うことができる
⾔語仕様
16
16
Slide 17
Slide 17 text
function sayHello() {
return "Hello, ";
}
function greeting(helloMessage, name) {
console.log(`${helloMessage()}${name}`);
}
// `sayHello`
を `greeting`
関数の引数として渡す
greeting(sayHello, "JavaScript!");
参考: MDNより
17
17
Slide 18
Slide 18 text
DOM 操作
DOM (Document Object Model) にアクセスができる
テキストの更新
タグ要素の追加・削除・移動
スタイルの更新もできる
jQuery は DOM の操作に特化
etc...
18
18
Slide 19
Slide 19 text
Hello World !
Hello New Wolrd !!
Slide 20
Slide 20 text
まとめ
JavaScript
そんなに歴史は⻑くない
仕様が乱⽴して、ECMAが今は取り纏めている
最近はクライアント・サーバサイド共によく使われてい
る
インタープリタ型で第⼀級関数を持つスクリプト⾔語
⾔語が実⾏される際にコンパイルされる
関数を変数などで扱うことができる
DOM の操作もできる
20
20
Slide 21
Slide 21 text
次回予告 (参加できたら)
21
21
Slide 22
Slide 22 text
JavaScript を書き始めたら知っておきたい
JavaScript のこと
JavaScript についてもう少し詳しく
オブジェクト指向
prototype 継承
動的型付け
シングルスレッド
22
22