Startup JavaScript

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

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

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

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/

目次 • データ型 • 構文 – 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); }; 変数に代入する方法がよく見かける書き方

目次 • 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);

目次 • 宣言 – 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 のスコープが外側のスコープに固定される

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

Startup JavaScript

More Related Content

What's hot

Similar to Startup JavaScript

More from Akinari Tsugo

Recently uploaded

Startup JavaScript