「JavaやC#は使ったことあるけどJavaScriptはまだよくわからない…」と言った人向けに、ES3 ～ ES6 までのポイントをダイジェスト。

1. Startup JavaScript

2. JavaScript ？

3. Java や C# なら書けるけど…
JavaScriptはちょっと。。

4. Node.js ？ なにそれ ？
もはや何のことだか…

5. 目標
① ECMAScript が 何者 だか 理解できる
② JavaScript の ポイント がつかめる
③ ES5 & ES6 が ちょっと読めるようになる

6. What is ECMAScript ?

7. ECMAScriptとは
• JavaScript の標準仕様書
• ECMA International が策定
–メンバーはIT系企業
• Adobe Systems Inc., Google, HP, Hitachi, IBM, Intel,
Konica Minolta, Microsoft, PayPal, Yahoo
• 2015年以降は1年に1度更新が目標
→最新版は ES2016(ES7) (2016/6/17リリース)

8. 仕様書と実装
• 仕様書
–ECMAScript
• 実装
–V8 (Chrome、Opera、Node.js）
–JavaScriptCore (Safari)
–JScript (Internet Explorer)
–Chakra (Edge)

9. ECMAScriptの参照方法
• Webページで閲覧可能

10. ECMAScriptの実装状況
• “ECMAScript compatibility table”が便利
→ http://kangax.github.io/compat-table/

11. ES3 Essentials

12. 目次
• データ型
• 構文
– if
– for
• 関数

13. データ型
型 typeof サンプルコード
数値 number
文字列 string
論理値 boolean
関数 function
オブジェクト object
配列 object
var num = 100;
var txt = "Hello Worls";
var flag = true;
var method = function () { console.log('Hello'); };
var obj = { id: 10, name: "Sasamiya" };
var arr = [1, 2, 3];

14. データ型
型 typeof サンプルコード
数値 number
文字列 string
論理値 boolean
関数 function
オブジェクト object
配列 object
var num = 100;
var txt = "Hello Worls";
var flag = true;
var method = function () { console.log('Hello'); };
var obj = { id: 10, name: "Sasamiya" };
var arr = [1, 2, 3];
変数宣言はどんな型でも
“var”
で宣言する

15. if文
• 論理式を判定して条件分岐ができます
// DOM要素からテキストを取得
var text = document.getElementById("answer").value;
// 取得した文字列を判定
if (text === "金曜日") {
console.log("Thanks god it's friday !");
} else {
console.log("humm...");
}

16. if文
• 論理式を判定して条件分岐ができます
// DOM要素からテキストを取得
var text = document.getElementById("answer").value;
// 取得した文字列を判定
if (text === "金曜日") {
console.log("Thanks god it's friday !");
} else {
console.log("humm...");
} “==“は近似比較
→null や undefined 、””(空文字)、0 を同値とみなす
“===“は厳密な比較
→null、undefined、””(空文字) 、0 をすべて別物とみなす

17. for文
• 配列やオブジェクトの中身を順に取り出して走査できます
// 配列を準備
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 合計を入れる変数
var sum = 0;
// 配列をループする
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
// 結果を表示
console.log(sum); // -> 55

18. 関数
• function演算子で関数を定義できます
// 名前付き関数で宣言する方法
function method1(a, b, c) {
console.log(a + b + c);
}
// 変数に無名関数を代入して宣言する方法
var method2 = function (a, b, c) {
console.log(a + b + c);
};

19. 関数
• function演算子で関数を定義できます
// 名前付き関数で宣言する方法
function method1(a, b, c) {
console.log(a + b + c);
}
// 変数に無名関数を代入して宣言する方法
var method2 = function (a, b, c) {
console.log(a + b + c);
};
変数に代入する方法が
よく見かける書き方

20. ES5 Essentials

21. 目次
• strictモード
• 配列
– forEach
• JSONオブジェクト

22. strictモード
• ファイルまたは関数の先頭で宣言することで
曖昧な記述を排除できる
"use strict"
function greet() {
console.log("Hello");
}
function greet() {
"use strict"
console.log("Hello");
}

23. strictモード
• ファイルまたは関数の先頭で宣言することで
曖昧な記述を排除できる
"use strict"
function greet() {
console.log("Hello");
}
function greet() {
"use strict"
console.log("Hello");
}
ファイル全体に適用されるので
新規作成向き
関数内だけが適用範囲なので
既存に対する修正向き

24. 配列 forEach
• 配列の要素を1個ずつ取り出して処理できる
var arr = [3, 1, 4, 1, 5, 9, 2];
// コンソールに配列の内容を表示する
arr.forEach(function (item, index, array) {
console.log(item);
});

25. JSONオブジェクト
• JSON文字列とオブジェクトの相互変換ができる
// サーバーから受信した JSONテキスト 等。
var data = '{"id":"123456789","name":"Saya Sasamiya"}';
// parse() で オブジェクト に変換。
var obj = JSON.parse(data);

26. JSONオブジェクト
• JSON文字列とオブジェクトの相互変換ができる
// クライアント側で作ったデータ
var obj = {
id: '123456789',
name: 'Saya Sasamiya'
};
// JSON文字列に変換 ... → AjaxでサーバーにPOST送信
var data = JSON.stringify(obj);

27. ES6 Essentials

28. 目次
• 宣言
– const
– let
• 式と演算子
– for ... of 演算子
• 関数
– デフォルト引数
– 残余引数
– アロー関数

29. const
• 読み取り専用の定数を宣言できる
const MESSAGE = 'Hello World.';
console.log(MESSAGE); // "Hello World."
MESSAGE = 'Hello World !!'; // <-エラーになる

30. let
• ブロックスコープ内で有効な変数を宣言できる
var msg1 = ‘Hello’;
{
// この{}で囲まれた範囲がブロックスコープ
let msg2 = ‘こんにちは’;
console.log(msg1); // “Hello"
console.log(msg2); // "こんにちは"
}
console.log(msg1); // "Hello"
console.log(msg2); // ERROR

31. for … of 演算子
• カウント可能なオブジェクトの要素のみを走査できる
var arr = [1, 2, 3];
arr.message = 'Hello World';
for (let item of arr) {
console.log(item);
};
// -> 1, 2, 3
// 'Hello World'; は表示されない

32. デフォルト引数
• 関数の引数にデフォルト値を設定できる
var getMessage(name = 'tanaka') {
return 'Hello ' + name + '.';
};
var message = getMessage();
console.log(message); // 'Hello tanaka.'

33. 残余引数
• 不特定多数の引数を配列として受け取れる
var log = function (...args) {
console.log(args.join(','));
};
log("host", "status"); // "host,status"

34. 残余引数
• 不特定多数の引数を配列として受け取れる
var log = function (...args) {
console.log(args.join(','));
};
log("host", "status"); // "host,status"
残余引数は配列と同じように扱える

35. アロー関数
• 無名関数を省略形式で記述できる
（ラムダ式が記述できる）
var hoge = function () {
var self = this;
this.arg = 0;
// ES6より前の古い書き方
window.setInterval(function () {
self.arg += 1;
$('#out').val(self.arg);
}, 1000);
};
var hoge = function () {
this.arg = 0;
// ES6の新しい書き方
window.setInterval(() => {
this.arg += 1;
$('#out').val(this.arg);
}, 1000);
};

36. アロー関数
• 無名関数を省略形式で記述できる
（ラムダ式が記述できる）
var hoge = function () {
var self = this;
this.arg = 0;
// ES6より前の古い書き方
window.setInterval(function () {
self.arg += 1;
$('#out').val(self.arg);
}, 1000);
};
var hoge = function () {
var self = this;
this.arg = 0;
// ES6の新しい書き方
window.setInterval(() => {
this.arg += 1;
$('#out').val(this.arg);
}, 1000);
};
this のスコープが
外側のスコープに固定される

37. Summary

38. まとめ
• ECMAScript は 仕様書
• ES5, ES6 から 以下のような記述ができる
– “use strict”
– forEach / for … of
– JSON
– const, let
– () => {}