JavaScript ４日目
ＪＳＯＮ（JavaScript Object Notation）の使い方
JSON（じぇいそん：JavaScript Object Notation）とは
JSONはJavaScriptの配列とオブジェクトを使って記述されたデータ形式。
JavaScriptのプログラム以外でもデータ交換用フォーマットとして広く使われている。
JSON形式データを作成する
配列とオブジェクトを多次元化してデータを作成する。
var party = [
{name: '田中', job: '勇者', maxLife: 1000, life: 1000}, //0番地
{name: '佐藤', job: '僧侶', maxLife: 400, life: 200}, //1番地
];
// 1次元目（配列）：人数
// 2次元目（オブジェクト）：キャラ情報
// lengthを使う場合は「配列」
// プロパティ名を使う場合は「オブジェクト」例）今回は
◆パーティの人数を配列で管理
◆パーティのキャラクター情報をオブジェクトで管理
配列：同じカテゴリーやグループに属する複数の値を管理 ※length 使える
オブジェクト：ある物事に関する複数のデータをまとめて管理 ※length 使えない
上記の特徴から
１次元目「人数管理」は配列
２次元目「キャラクター情報」はオブジェクト で管理している。
人数管理は配列なので「length」が使えパーティの人数を確認できる。
キャラクター情報は「length」が使えないが、キャラクターがいくつ情報をもっているか調べることはないので問題ない。
オブジェクトの特徴であるプロパティ名から必要な情報を推測できるほうが有意義。
作成したJSON形式のデータを変数に代入してプログラム内で利用する
JSON形式データを使用（参照）する
console.log('１回目の出力');
console.log(party);
console.log(party.length);
// 1次元目の配列を確認
コンソールに変数「party」を表示すると２部屋の配列の各部屋に「{}（中カッコ）」で囲まれたオブジェクトが入っていることが確認できる。
今回のデータは１次元目の配列のため、「length」を使うことができる。
コンソールに「party.length」を表示すると「2」となる。
パーティの人数確認などができる。
次に２次元目のキャラクター情報をコンソールに表示する。
１次元目配列の部屋番号、２次元目のプロパティ名を記述。配列の部屋番号は
「[] 角カッコ」、オブジェクトのプロパティ名は「.（ドット）」を使用して記述するので注意
console.log('２回目の出力');
console.log(party[0]);
console.log(party[0].name);
console.log(party[0].life);
// 2次元目のオブジェクトを確認
// 問題：2人目の情報を表示
console.log('問題：2人目の情報');
console.log(party[1]);
console.log(party[1].name);
console.log(party[1].life);
// 問題：変数を使ってキャラ情報を切り替えて表示
console.log('問題：変数を使ってキャラ情報切り替え');
var num = 0;
console.log(party[num]);
console.log(party[num].name);
console.log(party[num].life);
// ★変数<num>にキャラクターの部屋番号を代入すれば
// 表示されるキャラ情報がまとめて切り替わる
第５章：演算子
データ型
データ型とは
値の種類
JavaScriptで使用する値と変数は下記のデータ型のいずれかに属している。
データ型は必要に応じて適したものに自動変更してくれるので普段はあまり意識せずに使用できる。
ただし、この章で学ぶ演算子の種類によってはデータ型が原因で思った結果にならないことがあるので注意。
※トラブルが起きたらまず「データ型」を疑う
基本型は変数に直接値が入る。
参照型は配列やオブジェクトのようにアドレス先を参照して、そこに値を管理している。
| データ型 | 内容 | |
|---|---|---|
| 基本型 | 文字列型 String | 「’」か「”」で囲まれた値 |
| 〃 | 数値型 Number | 数値（整数と浮動小数点を区別しない） |
| 〃 | 真偽型 Boolean | 「true」または「false」 |
| 〃 | 未定義型 Undefined | 未定義の状態 |
| 〃 | Null型 Null | 参照型の値が存在しない |
| 参照型 | オブジェクト型 Object | オブジェクト（配列を含む） |
| 〃 | 関数型 Function | 関数 |
※ECMAScript2015でシンボル型（Symbol）が追加されているが、今回は除外
※ブラウザによってデータ型の表記が異なる
データ型を調べる：typeof演算子
typeof 変数名変数と値のデータを調べることができる。
JavaScriptは変数に入る値によって自動的にデータ型が変換されるため変数宣言時にデータ型を指定しない。
変数のデータ型が入る値によって変わっていくところを「typeof演算子」で確認する。
①変数xを宣言してすぐデータ型を調べてみる。
var x;
console.log('１回目の出力');
console.log(x);
console.log(typeof x);変数内に値が入っていないので「未定義」の「undefined」が表示される。
②変数xに文字列「メッセージ」を代入してデータ型を調べてみる。
x = 'メッセージ';
console.log('２回目の出力');
console.log(x);
console.log(typeof x);「文字列型」の「string」が表示される。
③変数xに数値「20」を代入してデータ型を調べてみる。
x = 20;
console.log('３回目の出力');
console.log(x);
console.log(typeof x);「数値型」の「number」が表示される。
④変数xに審議地「true」を代入してデータ型を調べてみる。
x = true;
console.log('４回目の出力');
console.log(x);
console.log(typeof x);「真偽型」の「boolean」が表示される。
「true」＝条件を満たした。「false」＝条件を見たさない。
⑤変数xに配列を代入してデータ型を調べてみる。
x = [100, 200];
console.log('５回目の出力');
console.log(x);
console.log(typeof x);「オブジェクト型」の「object」が表示される。配列もオブジェクトの一種なのでデータ型は「object」になる。
⑦変数xにオブジェクトを代入してデータ型を調べてみる。
x = {
name: '田中',
age: 20,
};
console.log('６回目の出力');
console.log(x);
console.log(typeof x);「オブジェクト型」の「object」が表示される。
undefined と null の違い
「undefined」も「null」も何もないという意味。
「undefined」は初期値が定義されていない状態。
「null」は何らかの処理により変数に代入されるはずだった参照型の値がない場合を表す。
「null」は参照型の値がないというのがポイント。
データ型で調べると参照型である「object」と表示される。
つまり「本来オブジェクトが入るはずだったけど、無かった」の意味で、値がない。ということ。
◆値「undefined」のデータ型は「undefined」
値「null」のデータ型は「object」
値とtypeofの結果
chromeの場合、変数に入っている値に対して以下のようなtypeof結果を返す。
| 値 | データ型 | typeof結果 | |
|---|---|---|---|
| 基本型 | ‘メッセージ’ / “メッセージ” | 文字列型 | string |
| 〃 | 100 / 3.14 | 数値型 | number |
| 〃 | NaN | 数値型 | number |
| 〃 | true / false | 真偽型 | boolean |
| 〃 | undefined | 未定義型 | undefined |
| 〃 | null | Null型 | object |
| 参照型 | { name: ‘佐藤’} | オブジェクト型 | object |
| 〃 | [100,200] | オブジェクト型 | object |
文字列連結演算子
左辺と右辺の値のデータ型を文字列型に変更した後、文字列同士を連結する
| 演算子 | 名称 | 内容 |
|---|---|---|
| + | 文字列連結演算子 | 文字列同士を連結する |
文字列型 + 文字列型
var name = '田中';
console.log('１回目の出力');
console.log('こんにちは' + name + 'さん');
// 【処理の流れ】
// 1. 'こんにちは' + name
// 文字列型 + 文字列型
// 文字列型同士の「+」処理は文字列連結する
// 文字列連結した結果'こんにちは田中'になる
// 2. 'こんにちは田中' + 'さん'
// 文字列型 + 文字列型
// 文字列型同士の「+」処理は文字列連結する
// 文字列連結した結果'こんにちは田中さん'になる
文字列型 + 数値型
console.log('２回目の出力');
console.log(name + 200);
// 【処理の流れ】
// 1. name + 200
// 文字列型 + 数値型
// データ型の違う値を「+」処理はできない
// JSが自動的にデータ型を揃える
// → 数値型を文字列型に変更する
// 2.name + '200'
// 文字列型 + 文字列型
// データ型を揃えて「+」で文字列連結処理
// 文字列連結した結果'田中200'になる
算術演算子
左辺と右辺の値のデータ型を数値型に変更した後、数値同士を計算する。
※加算演算子を除く
| 演算子 | 名称 | 内容 |
|---|---|---|
| + | 加算演算子 | 数値同士を足し算した答えを出す |
| － | 減算演算子 | 数値同士を引き算した答えを出す |
| * | 乗算演算子 | 数値同士を掛け算した答えを出す |
| / | 除算演算子 | 数値同士を割り算した答えを出す |
| % | 剰余演算子 | 数値同士を割り算した余りを出す |
console.log('１回目の出力');
console.log(5 + 2);
console.log(5 - 2);
console.log(5 * 2);
console.log(5 / 2);
console.log(5 % 2);
console.log('２回目の出力');
console.log('答えは' + 4 + 2);
console.log('答えは' + 4 - 2);
console.log('答えは' + 4 * 2);
console.log('答えは' + 4 / 2);
console.log('答えは' + 4 % 2);
剰余演算子で「余り算」の結果を返す
剰余演算子は割り算の余りを返す。★プログラムではよく使う
２回目の出力で計算結果がおかしい
同じ優先度の場合、文字列連結演算子と算術演算子は左から順に処理されていく。
①<console.log('答えは' + 4 + 2);> …答えは42
1.文字列型 + 数値型 になっているため、数値型が文字列型に自動変換されている
‘答えは’ + ‘4’ 文字列型 + 文字列型 で文字列連結する
‘答えは4’
2.’答えは4′ + 2
文字列型 + 数値型 になっているため、数値型が文字列型に自動変換されている
‘答えは4’ + ‘2’ 文字列型 + 文字列型 で文字列連結する
‘答えは42’
②<console.log('答えは' + 4 - 2);> …答えはNaN
1.文字列型 + 数値型 になっているため、数値型が文字列型に自動変換されている
‘答えは’ + ‘4’ 文字列型 + 文字列型 で文字列連結する
‘答えは4’
2.’答えは4′ – 2
文字列型 – 数値型
「-」は引き算の演算子なので
左辺・右辺ともに数値型に揃える必要があるが
’答えは4′ は数値型に変換できないので【計算付加】
結果「NaN（計算不可だった時の値）」となる
※掛け算・割り算は、算数と同じで処理が優先されるので
「答えは8」「答えは2」…と計算結果が正しく表示される。
処理優先度を変える
「() 丸カッコ」で囲むことで処理の優先度を上げることができる。
また計算のルールに則り「+」「-」と比較して「*」「/」「%」が優先される。
console.log('２回目の出力');
console.log('答えは' + (4 + 2));
NaN（Not a Number）：計算不可能な式の結果
NaN（Not a Namber）は計算不可能な式の結果で使われる。
計算は数値同士で行うが、片方もしくは両方が数値に型変換できない場合はNaNの結果がでる。
同じ優先度の場合、文字列連結演算子と算術演算子は左から順に処理される。
console.log('答えは' + (4 - 2));
文字列連結演算子の「+」と加算演算子の「+」
JavaScriptでは文字列連結演算子も加算演算子も「+」を使う。そのため足し算する際注意が必要。プログラム内部でどのように演算子を使い分けているのか確認する。
文字列連結演算子として処理する場合：どちらかが文字列型
左辺と右辺のどちらかが文字列型であれば「文字列連結演算子」として処理するため「左辺」「右辺」ともに文字列型に型変換する。
加算演算子として処理する場合：どちらも数字型
左辺と右辺のどちらも数値型であれば「加算演算子」として処理する。
console.log('１回目の出力');
console.log('10' + '20');
console.log('10' + 20);
console.log(10 + '20');
console.log(10 + 20);
// 「+」は文字列連結演算子と加算演算子の２つの役割
// 左辺右辺のどちらかが文字列の場合
// 文字列型に揃えて「文字列連結演算子」
加算演算子以外のデータ型変換
加算演算子以外の算術演算子は数値型同士で計算させるものなので、
「左辺」「右辺」ともに「数値型」に型変換する。もし、数値型に変換できない場合は計算処理ができず結果が「NaN」になる。
console.log('２回目の出力');
console.log('10' - '20');
console.log('10' - 20);
console.log(10 - '20');
console.log(10 - 20);
console.log('10個' - 20);
// 「-」は減算演算子のみ（計算のみ）の役割
// 左辺右辺を必ず数値型に変換して処理
ステップアップ問題
// ボタンをクリックすると呼び出される処理
// ★ユーザ入力値を使って足し算した結果をブラウザに表示したい
// 1.ユーザ入力値を取得
// 2.足し算する
// 3.ブラウザに表示
function displayMessage(){
// 1.ユーザ入力値を取得
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
console.log('１回目の出力');
console.log(num1);
console.log(typeof num1);
console.log(num2);
console.log(typeof num2);
// 2.足し算する
// ・・・ではなく、文字列連結している Σ(ﾟдﾟlll)
// （変数 num1,num2 ともに文字列型のため）
var result = num1 + num2;
// 3.ブラウザに表示
// 文字列連結の結果をブラウザに表示
// やりたいこととは違う結果を表示している
document.getElementById('display1').innerHTML = result;
// 改めて…
// 2.文字列型を数値型に手動で型変換してから、足し算する
// parseInt（解析して整数型に変換）
result = parseInt(num1) + parseInt(num2);
document.getElementById('display2').innerHTML = result;
}
外部から取得した値はすべて文字列型
JavaScriptに限らずほとんどのプログラム言語は外部から取得した値を文字列型として扱う。今回のプログラムではテキストボックスに入力した値を取得している。
テキストボックスに入力した数字を「typeof演算子」で確認してみる。
※上のコンソール出力内容の【１回目の出力】
取得した数字は数値型ではなく文字列型（string）で管理されていることがわかる。
データ型を数値型に変換
◆数値型に変換（整数の場合）
parseInt( 型変換対象変数)返り値：処理の結果得られるもの
parseIntの返り値：数値型の整数
◆数値型に変換（浮動小数点数の場合）
parseFloat( 型変換対象変数)parseFloatの返り値：数値型の浮動小数点数
()内の値を数値型（整数もしくは浮動小数点数）にして返す。
正負記号（ + か – ）、数値（0-9）、小数点、指数以外の文字があった場合は、その箇所より前の値を返してそれ以降の文字すべてを無視する。文字列の前後に空白があってもOK。
数値型に変換できない値の場合は「NaN」を返す。
インクリメント・デクリメント演算子
変数内の数値を1増やすor減らす
| 演算子 | 名称 | 内容 |
|---|---|---|
| ++ | インクリメント演算子 | 数値を1増やす |
| — | デクリメント演算子 | 数値を1減らす |
インクリメント演算子：変数の数値を1増やす
前置置換
変数名++後置置換
++変数名var num = 10;
console.log('１回目の出力');
console.log(num);
++num;
console.log(num);
num++;
console.log(num);
インクリメント演算子をつけると変数内の数値が1増える。
インクリメント演算子つき変数のみ記述する場合はインクリメント演算子を前につけても後ろにつけても処理内容は変わらない。
num = 10;
console.log('２回目の出力');
console.log(num);
console.log(++num);
// インクリメントとコンソール出力を1つの命令で実行
// インクリメントが前置置換となっている
// 1.インクリメント
// 2.コンソール出力
console.log(num);
console.log(num++);
// インクリメントとコンソール出力を1つの命令で実行
// インクリメントが後置置換となっている
// 1.コンソール出力
// 2.インクリメント
console.log(num);
2回目の出力では、インクリメント演算子つき変数をコンソール出力処理で使用している。
インクリメント演算子つき変数を処理の中で使用する場合は注意しなければいけない。
★前置置換の場合・・・「変数の値を1増やしてから処理」
後置置換の場合・・・「処理の後に変数の値を1増やす」
デクリメント演算子：変数の数値を1減らす
前置置換
変数名--後置置換
--変数名num = 10;
console.log('３回目の出力');
console.log(num);
--num;
console.log(num);
num--;
console.log(num);
num = 10;
console.log('４回目の出力');
console.log(num);
console.log(--num);
// デクリメントとコンソール出力を1つの命令で実行
// デクリメントが前置置換となっている
// 1.デクリメント
// 2.コンソール出力
console.log(num);
console.log(num--);
// デクリメントとコンソール出力を1つの命令で実行
// デクリメントが後置置換となっている
// 1.コンソール出力
// 2.デクリメント
console.log(num);
//ページ読み込み時に実行
var size = 16;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
// document.getElementById('change')
// ↑id属性を使って要素を特定
// .style
// ↑style属性を管理するプロパティ
// .fontSize
// ↑CSSの文字サイズを管理するプロパティ
// 「16px」を代入して文字サイズを定義
// 「大」ボタンを押したときに実行
function bigSize(){
console.log('「大」ボタンが押されました');
document.getElementById('display1').innerHTML = ++size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
}
// 「小」ボタンを押したときに実行
function smallSize(){
console.log('「小」ボタンが押されました');
document.getElementById('display1').innerHTML = --size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
}
ＩＤ属性で指定した要素の文字サイズ変更
document.getElementById('要素ID名').style.fontSize() 内に文字列で対象要素のID名を記述して文字サイズ変更エリアを指定する。
「document.・・・.style.fontSize」に単位「px」をつけた数値を代入することで文字サイズ変更できる。
<document.getElementById('change').style.fontSize = size + 'px';>
※CSSでは「font-size」等、「-（ハイフン）」を使用していた定義を
JSでは「fontSize」とキャメル記法で表記する。
（JSでは「-」はマイナスなので使用できないため）
追加問題
// 「小」ボタンを押したときに実行
function smallSize() {
console.log('「小」ボタンが押されました');
document.getElementById('display1').innerHTML = --size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
document.getElementById('display1').style.color = '#32cd32';
}
【問題】ボタンを押して変更された状態を[リセット]ボタンを追加して
押したら「フォントサイズ：16」に戻るようにする
①HTMLで[リセット]のボタンを追加する。
<div class="box">
<input type="button" value="大" onclick="bigSize();">
<input type="button" value="小" onclick="smallSize();">
<input type="button" value="リセット" onclick="resetSize();">
</div>
②JSでsizeを16に戻す。デクリメントも削除する
// 「リセット」ボタンを押したときに実行
// 文字サイズを16px（最初の値）・文字色を黒にする
function resetSize() {
console.log('「リセット」ボタンが押されました');
size = 16;
document.getElementById('display1').innerHTML = size;
console.log(size);
document.getElementById('change').style.fontSize = size + 'px';
document.getElementById('display1').style.color = '#333';
}
※単純に「16」に戻ればいいわけではなく
「size」の中を「16」にしないければいけない。
＝でないと、例えばまた[小]ボタンを押した時の「size」の数値が
「25」のままになっているので、リセットで「16」にした後に
[小]を押すと「フォントサイズ：24」となってしまう。