startup javascript
TRANSCRIPT
Startup JavaScript
JavaScript ？
Java や C# なら書けるけど…
JavaScript はちょっ
と。。
Node.js ？ なにそれ ？
もはや何のことだか…
目標
① ECMAScript が 何者 だか 理解できる
② JavaScript の ポイント がつかめる
③ ES5 & ES6 が ちょっと読めるようになる
What is ECMAScript ?
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 リリー
ス )
仕様書と実装
• 仕様書–ECMAScript
• 実装–V8 (Chrome 、 Opera 、 Node.js ）–JavaScriptCore (Safari)–JScript (Internet Explorer)–Chakra (Edge)
ECMAScript の参照方法
• Web ページで閲覧可能
ECMAScript の実装状況
• “ECMAScript compatibility table” が便利→ http://kangax.github.io/compat-table/
ES3 Essentials
目次
• データ型• 構文– if– for
• 関数
データ型
型 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];
データ型
型 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”
で宣言する
if 文
• 論理式を判定して条件分岐ができます
// DOM 要素からテキストを取得var text = document.getElementById("answer").value;
// 取得した文字列を判定if (text === " 金曜日 ") { console.log("Thanks god it's friday !");} else { console.log("humm...");}
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 をすべて別物とみなす
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
関数
• function 演算子で関数を定義できます
// 名前付き関数で宣言する方法function method1(a, b, c) { console.log(a + b + c);}
// 変数に無名関数を代入して宣言する方法var method2 = function (a, b, c) { console.log(a + b + c);};
関数
• function 演算子で関数を定義できます
// 名前付き関数で宣言する方法function method1(a, b, c) { console.log(a + b + c);}
// 変数に無名関数を代入して宣言する方法var method2 = function (a, b, c) { console.log(a + b + c);};
変数に代入する方法がよく見かける書き方
ES5 Essentials
目次
• strict モード• 配列– forEach
• JSON オブジェクト
strict モード
• ファイルまたは関数の先頭で宣言することで曖昧な記述を排除できる
"use strict"
function greet() { console.log("Hello");}
function greet() { "use strict" console.log("Hello");}
strict モード
• ファイルまたは関数の先頭で宣言することで曖昧な記述を排除できる
"use strict"
function greet() { console.log("Hello");}
function greet() { "use strict" console.log("Hello");}
ファイル全体に適用されるので新規作成向き
関数内だけが適用範囲なので既存に対する修正向き
配列 forEach• 配列の要素を 1 個ずつ取り出して処理できる
var arr = [3, 1, 4, 1, 5, 9, 2];
// コンソールに配列の内容を表示するarr.forEach(function (item, index, array) { console.log(item);});
JSON オブジェクト
• JSON 文字列とオブジェクトの相互変換ができる
// サーバーから受信した JSON テキスト 等。var data = '{"id":"123456789","name":"Saya Sasamiya"}';
// parse() で オブジェクト に変換。var obj = JSON.parse(data);
JSON オブジェクト
• JSON 文字列とオブジェクトの相互変換ができる
// クライアント側で作ったデータvar obj = { id: '123456789', name: 'Saya Sasamiya'};
// JSON 文字列に変換 ... → Ajax でサーバーに POST 送信var data = JSON.stringify(obj);
ES6 Essentials
目次
• 宣言– const– let
• 式と演算子– for ... of 演算子
• 関数–デフォルト引数–残余引数–アロー関数
const• 読み取り専用の定数を宣言できる
const MESSAGE = 'Hello World.';console.log(MESSAGE); // "Hello World." MESSAGE = 'Hello World !!'; // <- エラーになる
let• ブロックスコープ内で有効な変数を宣言できる
var msg1 = ‘Hello’;
{ // この {} で囲まれた範囲がブロックスコープ let msg2 = ‘ こんにちは’ ; console.log(msg1); // “Hello" console.log(msg2); // " こんにちは "}
console.log(msg1); // "Hello" console.log(msg2); // ERROR
for … of 演算子
• カウント可能なオブジェクトの要素のみを走査できる
var arr = [1, 2, 3];arr.message = 'Hello World'; for (let item of arr) { console.log(item);};// -> 1, 2, 3// 'Hello World'; は表示されない
デフォルト引数
• 関数の引数にデフォルト値を設定できる
var getMessage(name = 'tanaka') { return 'Hello ' + name + '.';}; var message = getMessage(); console.log(message); // 'Hello tanaka.'
残余引数
• 不特定多数の引数を配列として受け取れる
var log = function (...args) { console.log(args.join(','));}; log("host", "status"); // "host,status"
残余引数
• 不特定多数の引数を配列として受け取れる
var log = function (...args) { console.log(args.join(','));}; log("host", "status"); // "host,status"
残余引数は配列と同じように扱える
アロー関数
• 無名関数を省略形式で記述できる（ラムダ式が記述できる）
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);};
アロー関数
• 無名関数を省略形式で記述できる（ラムダ式が記述できる）
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 のスコープが外側のスコープに固定される
Summary
まとめ
• ECMAScript は 仕様書
• ES5, ES6 から 以下のような記述ができる– “use strict”– forEach / for … of– JSON– const, let– () => {}
