JavaScript(ベイビーステップ)
学習記録(10/27)
(0)
以下のサイトが初学者向けっぽかったのでここで勉強する。
https://qiita.com/azk0305/items/a13d494178d83fc8f2bc
(1) 学習環境の構築と基本的な書き方
・JavaScriptは、ブラウザの表示内容を動的に制御するための言語。
・Firefoxのスクラッチパッドの開発環境を利用可能。.jsで保存可能。
・ブラウザコンソールに情報表示→console.log("hello world");
(2) 変数とデータ型
・データ型に依らず全ての変数はvarというキーワードをつけて宣言する。
・練習1
var s = "あいうえお";
console.log(s);
・練習2
var a, b, c;
a = 3;
b = 2;
c = a + b;
console.log(c);
・練習3
var a = 123;
a = "あいう";
console.log(a);
//データ型に依らないため、エラーしない。
・varをつけないで宣言することも可能だが、上級者向け。
・JavaScriptのデータ型
・数値型(Number)
・文字列型(String)
・真偽値型(Boolean)
・配列型(Array)
・オブジェクト型(Object)→プロパティとメソッドを持つ。連想配列として利用可能。
・Null型(Null) →意図的に何も入っていないことを指定するための型。
・未定義型(Undefine) →初期化・定義されていない状態を表す型。
・typeofというキーワードで、変数に入っているデータの型を知ることが可能。
・練習4
var a = 123;
var b = "abc";
var c; // 初期化しない。
console.log(typeof a); // numberと表示される。
console.log(typeof b); // stringと表示される。
console.log(typeof c); // undefinedと表示される。
・予約語は以下で確認できる。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Reserved_Words
(3) 演算子および配列
・算術演算子
・ + → 数値の足し算
→ 文字列の連結
・ - → 数値の引き算
・ * → 数値の掛け算
・ / → 数値の割り算
・ % → 数値の割り算の余り
・練習1
console.log(123 + 456); //579
console.log("123" + "456"); //123456
・代入演算子
・ = → a = 1; 代入
・ += → a += 1; 加算して代入
・ -= → a -= 1; 減算して代入
・ *= → a *= 1; 乗算して代入
・ /= → a /= 1; 割り算して代入
・ %= → a %= 1; 割り算の余りを代入
・ ++ → a++; 1加算(インクリメント)
・ -- → a--; 1減算(デクリメント)
・配列
通常の配列とは、a[0]、a[1]、a[2]のようにインデックスが0から並んでいるものを指す。
・練習2 (配列の基本的な使い方)
var num = [ 10, 20, 30 ];
console.log(num[0]); //10
console.log(num[1]); //20
console.log(num[2]); //30
console.log(num[3]); //データがないため、undefined
・配列要素の追加と上書き
JavaScriptの配列は自由に拡張できる。既存要素の上書きも可能。
・練習3
var num = [ 10, 20, 30 ];
num[2] = 40;
num[3] = 50;
console.log(num[2]); // 40 (上書き)
console.log(num[3]); // 50 (拡張)
・多次元配列
var num = [[ 10, 20, 30 ], [ 40, 50, 60 ]];
console.log(num[0][0]); //10
console.log(num[0][1]); //20
console.log(num[0][2]); //30
console.log(num[1][0]); //40
console.log(num[1][1]); //50
console.log(num[1][2]); //60
・配列要素数の取得
JavaScriptでは、通常の配列はArray型のオブジェクト。
配列に要素が何個入っているかを調べるには、
Arrayオブジェクトが持つ、lengthプロパティを参照する。
・練習4
var num = [ 10, 20, 30 ];
num[3] = 40; //拡張
console.log(num.length); // 4 と表示される。
・連想配列
キーの文字列と値をペアで格納する配列のこと。
JavaScriptの連想配列には、専用の型(オブジェクト)が存在していない。
代わりにObject型のオブジェクトとして扱う。
・オブジェクトとはなにか。
・属性(プロパティ)を持つ。
・振る舞い(メソッド)を持つ。
・1つのオブジェクトと全く同じオブジェクトは存在しない。
・1つのオブジェクトは他のオブジェクトと関連性を持たせられる。
・練習5 (連想配列の基本的な使い方(プロパティに着目))
//連想型配列
var myself = {
"name" : "たかよう",
"age" : "26",
"seibetsu" : "男性"
};
//プロパティを参照する2種の記述方法
console.log(myself.name); //たかよう
console.log(myself["seibetsu"]); //男性
//参照したいキー名が入った変数をキーとして指定したい場合は[]の方を使う。
var pt = "age";
console.log(myself[pt]); //26と表示される。
・練習6 (連想配列要素の追加と上書き)
var myself = {
"name" : "たかよう",
"age" : "26",
"seibetsu" : "男性"
}
myself.age = 30; //要素の上書き
myself.pref = "東京都"; //要素の追加
console.log(myself.age) //30
console.log(myself.pref) //東京都
To Be continued → (4) 制御構文と関数
(4) 制御構文と関数
・if文
var season = "秋";
if(season == "春") {
console.log("春はあけぼの");
}
else if(season == "夏") {
console.log("夏は夜");
}
else if(season == "秋") {
console.log("秋は夕暮れ");
}
else if(season == "冬") {
console.log("冬はつとめて");
}
else {
console.log("エラー:存在しない季節です。");
}
・比較演算子
・ == 等しければtrue
・ != 等しくなければtrue
・ > 左辺が大きければtrue
・ < 右辺が大きければtrue
・ >= 左辺が右辺以上であればtrue
・ <= 右辺が左辺以上であればtrue
・ === 左辺と右辺が等しく、なおかつデータ型も等しければ、true
・ !== 左辺と右辺が等しくない、あるいは、データ型が等しくなければ、true
・論理演算子
・ && 論理積。and。条件式がどちらもtrueであればtrue。
・ || 論理和。or。 条件式がどちらかがtrueであればtrue。
・ ! 否定。true・falseをひっくり返す。
・練習1 (論理演算子)
//18歳以上65歳未満であれば、OKデスと表示する。
var age = 25;
if(age >= 18 && age < 65) {
console.log("OKデス");
} else {
console.log("禁じられています");
}
・練習2 (switch文)
var a = 3;
var b = 2;
var operator = "+";
switch(operator) {
case "+":
console.log(a + b);
break;
case "-":
console.log(a - b);
break;
default:
console.log("エラー:受付できない演算子デス");
}
・練習3 (while文)
// 1 から 10 までの和を求めるプログラム
var i = 1;
var sum = 0;
while(i <= 10){
sum += 1;
i++;
}
console.log(sum); //55
・練習4 (do-while文)
// 1 から 10 までの和を求めるプログラム
var i = 1;
var sum = 0;
do {
sum += i;
i++;
} while(i <= 10);
console.log(sum); //55
・練習5 (for文)
// 1から10までの和を求めるプログラム
var i;
var sum = 0;
for(i = 1; i <= 10; i++) {
sum += i;
}
console.log(sum); //55
・練習6 (for-in文)
var colors = {
"red" : "赤",
"blue" : "青",
"green" : "緑",
"yellow" : "黄"
}
console.log("英語名 => 日本語名");
for(var key in colors) {
console.log(key + "=>" + colors[keys]);
}
・breakとcontinue
途中でループを抜ける場合には、break。
1回分の処理をスキップしてループの先頭に戻す場合には、continue。
・練習7 (breakとcontinue)
// 1から20までのうち偶数のみの合計を求める
var i = 0;
var sum = 0;
while(true) { //無限ループにしておく。
i++;
if(i % 2 > 0) {
continue;
}
if(i > 20) {
break;
}
sum += i;
}
console.log(sum) // 110
・ブロック内の変数のスコープ
基本的にifやforのブロックの中で宣言された変数でも、
そのブロックの外から参照できてしまうので、注意。
・練習8 (スコープ)
for(var i = 1; i <= 5; i++) {
var a = 3;
console.log("ループ" + i + "回目:" + a);
}
console.log("ループの外:" + a);
・JavaScriptの関数の基本的な書き方
CやJavaなどの言語とは以下の点が異なる。
・functionのキーワードで関数を定義する。
・引数にデータ型の指定は不要。
・戻り値にデータ型の指定は不要。
・関数の定義よりも上で関数を呼び出しても、問題なく実行される。
・練習8
funcA(); // abc と表示される
var num = funcB(2, 3);
console.log(num); // 5 と表示される
// 引数なし、戻り値なし
function funcA() {
console.log("abc");
}
// 引数2つ、戻り値あり
function funcB(x, y) {
return x + y;
}
・javaScriptで用意されている組み込み関数(オブジェクトのメソッドではなく、関数。)
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#定義済み関数
上記の中でも、以下の5つは良く使う。
関数名 説明
parseInt 文字列型→数値型(整数)に変換
parseFloat 文字列型→数値型(実数)に変換
isNaN 指定された演算結果の値が数値ではない型(NaN)かどうかを調べる
encodeURIComponent 指定された文字列をURLエンコードする。
decodeURIComponent 指定された文字列をURLデコードする。
・関数内の変数スコープ
・関数内で定義された変数は、その関数の中でしか参照されない。
・グローバル変数と同じ名前の変数を、関数内で再度宣言することが可能。
varをつければ再定義、varをつけなければグローバル変数の上書きになる。
・練習9
var x = 10; // グローバル変数x
function func() {
x = 20; // グローバル変数xを上書き
var y = 30; // ローカル変数y
console.log(x); // 20 と表示される
console.log(y); // 30 と表示される
}
func();
console.log(x); // 20と表示される
console.log(y); // この部分で 'yが見つからない' というエラーが発生する
・練習10
var x = 10; // グローバル変数x
var y = 20; // グローバル変数y
function func() {
var x = 30; // グローバル変数xとは別のローカル変数xを宣言
y = 40; // グローバル変数yを上書き
console.log(x); // ローカル変数の x が参照され、30 と表示される
console.log(y); // 40 と表示される
}
func();
console.log(x); // グローバル変数の x が参照され、10 と表示される
console.log(y); // 40 と表示される
・varをつけずに宣言した変数のスコープ
varをつけずに変数を宣言した場合、どこで宣言されても(関数内でも)、
グローバル変数となる。ただし、非推奨。
(5) 制御構文と関数
・JavaScriptの関数は、実は Function 型のオブジェクトである。
関数がオブジェクトであることの利点の一つに、
関数の定義を変数に格納できるというものがある。
・練習11
function getOne(){
return 1;
}
var f = getOne; //関数の定義を変数に格納できる。
console.log(f()); // f() と書くことで getOne関数が実行され、1 と表示される
・関数式と匿名関数(無名関数)
練習11では、つまり、getOne関数に f という別名をつけたことになる。
こうするなら、わざわざ getOne という関数名をつける必要は無いわけで、
次(練習12)のようにも記述できる。
このように、関数の定義を変数に代入する記述方法を関数式と呼び、
関数名をつけないで定義している関数のことを匿名関数(無名関数)
と呼ぶ。まとまった複数の処理を定義したいが、再利用を考える
必要がない(記述する場所でしか利用しない)場合は、匿名関数
を利用すると、余計なことを考える必要がないので便利。
・練習12
var f = function() {
return 1;
};
console.log(f()); // 1 と表示される
・練習13
var add = function(x, y) {
return x + y;
};
console.log(add(3, 2)); // 5 と表示される
・注意:関数式で関数を定義する場合は、その関数の呼び出しをする際、
定義した箇所よりも下に記述する。定義より前で呼び出すと
「その関数は見つからない」という内容のエラーになる。
・即時関数
通常の関数の定義でも関数式による定義でも、必ず関数を呼び出さない
と定義した内容が実行されない。ひとまとまりの処理を定義して、
さらに定義と同時に実行するための記述方法を即時関数と呼ぶ。
即時関数は、無名関数の利用例のひとつである。
・関数の使いかたまとめ。
・ひとまとまりの処理を定義(関数の役割)。
・利用する場面で定義し、その場でのみ利用(無名関数の役割)。
・定義と同時に実行する(即時関数の役割)
・即時関数の書き方は、関数の定義を括弧で囲み、
更にその直後に括弧をつけ、その中に引数に与えたい値を指定する
(引数がなければ空の括弧で良い)。
また、即時関数の実行結果を変数に格納するような記述方法も可能。
・練習13
// この記述だけで こんにちは、田中さん! と表示される
(function(name) {
console.log("こんにちは、" + name + "さん!");
})("たかよう");
・練習14
var sum = (function(a, b) {
return a + b;
})(3, 2);
console.log(sum); // 5と表示される。
・関数の引数に関数を指定する。
関数の引数に関数を指定して、関数の中で「引数として渡した関数」
を実行してもらうことがJavaScriptでは可能である。
・練習15
// 引数funcに渡された関数を実行する
var sumFunc = function(a, b, func) {
return func(a) + func(b);
};
// 13 が表示される(3 * 3 + 2 * 2の計算結果)
console.log(sumFunc(3, 2, function(x) {
return x * x;
}));