JavaScript 基礎 (Part 1) 資料
Boolean にキャストすると false になるものに 0 を追加
ループの continue で偶数と奇数が逆になっていたのを修正
今日は特定の処理系 (ブラウザなど) に依存しない JavaScript の言語のみに着目した内容になります。そのため座学っぽくなってしまいますが、お手柔らかに…
次回以降実践を交えながら JavaScript で本格的なオブジェクト指向をやっていく予定です。
新しいプログラミング言語として JavaScript を覚えたい人
作者: Blendan Eich さん (現 Mozilla CTO)
1995 年に Netscape 2.0 とともに登場
現在は Node.js に代表されるサーバサイドの言語としても注目される
getName, getname, GETNAME はそれぞれ別物として扱われる。
連続したホワイトスペース (改行, 空白, タブ) は一つにまとめられる。
値を格納しておくための識別子。一般的な言語の変数と同じ。
var 変数名; // 宣言 変数名 = 値; // 代入
var 変数名 = 値; // 宣言と代入を同時に
宣言時に値を代入しなかった場合、undefined という特別な値になる。
var a = 10, b = 100, c = 1000;
var 123abc = 'test'; // NG
プログラムに注釈を入れることが可能。コメントはインタプリタから無視される。
// 次の行は無視される // var a = 10;
JavaScript で扱う「値」は必ず何かの「型」に従属する。
整数型 (int)、小数型 (float) の分類はなくて、引っ括めて数値型。
var num1 = 10, num2 = 10.5, num3 = 1034;
parseInt(), parseFloat() で整数型へキャストする。
var a = parseInt('32', 10); // 32 var b = parseFloat('10.5'); // 10.5
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Number
var greeting1 = 'hello world', greeting2 = "hello world"; var genre = 'Rock\'n Roll'; // Rock'n Roll var tag = "<div class=\"cleafix\"></div>"; // <div class="clearfix"></div>
ダブルクオーテーション " かシングルコーテーション ' のいずれかで括る。どちらでも良い。\ でエスケープする。
var str = String(10); // "10"
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/String
var like = true, hate = false;
var success = Boolean(1); // true
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Boolean
var pattern = /java(script)?/gi; pattern.test('Java'); // true pattern.test('JavaScript'); // true pattern.test('Objective-C'); // false
var regexp = RegExp("Go{2,3}gle"); // /Go{2,3}gle/
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/RegExp
実は変数なので上書きできる。 undefined = 100;
undefined = void 0; // 確実に undefined を得る方法
var obj = { a: 10, b: 20, hello: 'world' }; var val1 = obj.a; // 10
ここでの a, b, hello はプロパティと呼ばれる。詳細はまた後で。
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Object
var arr = [10, 20, 30, 'Hello', 'world']; var val = arr[0]; // 10 var len = arr.length; // 5 arr.push(100); arr.push(200); // arr is [10, 20, 30, 'Hello', 'world', 100, 200] len = arr.length // 7
Array の length プロパティで要素数を調べられる。push() で末尾に追加。
https://developer.mozilla.org/ja/JavaScript/Reference/Global_Objects/Array
function funcName() { // do something... }
JavaScript の演算子は C や Java と同様のスタイル。
ゼロ 0 で割ると Infinity もしくは -Infinity という特別な値となる。
ゼロで割った余りは NaN (Not a Number) という特別な値となる。
var a = 0; a++; // 1 a++; // 2
var a = 100; a--; // 99 a--; // 98
var a = 10; a += 100; // 110 (a = a + 100; と同様) a -= 50; // 60 (a = a - 50; と同様)
ふたつの式を比較する。比較結果が正しければ true, そうでない場合 false と評価される。
a == b; // 一致 a === b; // 完全に一致 a != b; // 一致しない a > b; // a は b より大きい a >= b; // a は b より大きいか等しい a < b; // a は b 未満 a <= b; // a は b 以下
'10' == 10 // true '10' === 10 // false
== は比較時に型変換を行う。=== は型変換を行わない。
var message = 'hello'; message = message + ', world.'; // 'hello, world.' message += ' everyone!'; // 'hello, world. everyone!'
var a = true, b = false, c = true, d = false; a && b; // false a && c; // true a || b; // true b || d; // false !(a && b); // true !(b || d); // true
&& は比較するすべての値が true であれば true, || は比較する値が一つでも true であれば true。
var child = (age <= 18) ? "yes" : "no";
var a = 1 + 2 * 3; // 2 * 3 が優先される var b = (1 + 2) * 3; // カッコを使って優先順位を変更できる
https://developer.mozilla.org/ja/JavaScript/Reference/Operators/Operator_Precedence
JavaScript の分岐は C や Java と同様のスタイル。
if (a > b) { // a が b よりも大きいとき } else { // a は b 以下 }
if (a > b) { // a が b よりも大きい時 } else if (a > c) { // a が c よりも大きい時 } else { // それ以外の時 }
switch (char) { case 'a': // do something if char is 'a' break; case 'b': // do something if char is 'b' break; case 'c': // do something if char is 'c' break; case 'd': // do something if char is 'd' break; case 'e': case 'f': // do something if char is 'e' or 'f' break; // 何にも一致しなかった時 default: break; }
switch (num) { case 1: // do something if num is 1 break; case 2: // do something if num is 2 case 3: // do something if num is 2 or 3 case 4: // do something if num is 2 or 3 or 4 default: // do something if num is not 1 }
JavaScript のループ文は C や Java と同様のスタイル。
var sum = 0; for (var i = 0; i < 10; i++) { sum = sum + (i * 10); }
var i = 0, sum = 0; while (i < 10) { sum = sum + (i * 10); i++; }
var i = 0, sum = 0; do { sum = sum + (i * 10); } while (i < 10);
ループ内で break を実行するとループを終了させることができる。
var i = 0; while (true) { // 無限ループ if (i > 5) { break; // i が 5 より大きくなったらループを中断 } }
ループ内で continue を実行するとそのループをスキップし後続のループを処理する。
var i = 0; for (i = 0; i < 10; i++) { if (i % 2) { continue; // 奇数の場合はスキップ } // 偶数の時だけここに行く // do something }
JavaScript のオブジェクトは「プロパティ」と「値」のペアで表現される。
var obj = { a: 10, b: 20, c: 30 };
var obj = {}; obj.a = 10; // ドットシンタックス obj.b = 20; obj['c'] = 30; // 連想配列風
var my = { namespace: { foo: 'baz' } }; my.namespace.foo; // 'baz' my['namespace'].foo; // 'baz'
JavaScript のオブジェクトはネームスペースの生成や連想配列として使うこともできる。
オブジェクトにプロパティが存在するか調べるには in 演算子を使う。
var obj = { a: 10, b: 20 }; var res1 = 'a' in obj; // true var res2 = 'z' in obj; // false
var obj = {}; obj.foo = 10; obj.bar = 20; obj.baz = 30; for (var p in obj) { obj[p]; }
function キーワードを使って関数を定義する。
function funcName() { // do something }
return で戻り値を返すことができる。return した時点で関数の処理は終わる。
function max(a, b) { if (a > b) { return a; } return b; }
関数名に () をつけることで呼び出すことができる。
var result = max(10, 20);
function pow(n) { if (n == 0) { return 1; } return pow(n - 1) * n; } var result = pow(5); // 120 (5!)
関数に new キーワードを使ってオブジェクトを生成することもできる
function funcName() { // do something } var fn = funcName; // 変数に代入 fn(); // 呼び出し
function funcName(callback) { // do something... callback(); } function callbackFunc() { // run after `funcName` } funcName(callbackFunc);
var fn = function() { // do something... }; fn(); // 呼び出し
以下はよくある一例。無名関数をそのまま関数の引数として渡す。
function doSomething(callback) { // do something… callback(); } doSomething(function() { // run after `doSomething` });
(function() { // run anonymous function })();
var obj = { max: function(a, b) { if (a > b) { return a; } return b; }, min: function(a, b) { if (a > b) { return b; } return a; } }; obj.max(10, 20); // 20 obj.min(10, 20); // 10
function foo() { var a = 100; } var baz = a; // baz === undefined
function foo() { // outer function function bar() { // inner function function baz() { // super inner function } } }
外側の関数の値は参照できる。外側からはできない。(レキシカルスコープ)
function outer() { var a = 10, b = 20; function inner() { var c = a; // c == 10 } inner(); var x = c; // x === undefined }
関数外で変数を宣言した場合はグローバルオブジェクトに定義される。(グローバル汚染)
var a = 10, b = 20; // どこからでも参照できてしまう function() { var c = a, d = b; // c == 10, d == 20 }
(function() { var a = 10, b = 20; })();
function capsule() { var himitsu1 = 10, himitsu2 = 20; return function(a, b) { return a + b + himitsu1 + himitsu2; }; } var fn = capsule(); var result = fn(100, 200); // result == 330
変数 himitsu1, himitsu2 の存在が隠蔽される。
function closure() { var n = 0; return function() { n++; return n; }; } var fn = closure(); var res1 = fn(), // 1 res2 = fn(), // 2 res3 = fn(); // 3
function Person(name, age) { this.name = name; this.age = age; this.introduce = function() { return 'My name is ' + this.name + '. I\'m ' + age ' years old.'; }; } var alice = new Person('Alice Liddel', 10), bob = new Person('Bob Dylan', 71); var introOfAlice = alice.introduce(); // 'My name is Alice Liddel. I'm 10 years old.' var introOfBob = bob.introduce(); // 'My name is Bob Dylan. I'm 71 years old.' alice.sayAboutFuture = function(n) { return n + ' years after, my age will be ' + (this.age + n) + '.'; }; var future = alice.sayAboutFuture(90); // '90 years after, my age will be 100.'
コンストラクタとして振る舞う関数 Person をコンストラクタ関数と呼ぶ
new を使って関数を呼び出す場合、this は生成されたオブジェクト自身の参照となる
すべて public 扱い (alice.age = 100; ができてしまう！！)
try { // do something. // 例外が起きるかもしれないコード } catch (e) { // 例外が起きた時に実行される // e にスローされたオブジェクトが渡される } finally { // 例外が起きても起きなくても必ず実行される }
try { if (Math.random() % 2) { throw new Error('なにか起きた'); } // do something... } catch (e) { // e.message でエラーメッセージを取得できる }
Error オブジェクトにかぎらず、なんでもスローできるが、原則として Error オブジェクトのインスタンスをスローするのが一般的。
