JavaエンジニアによるJavaScript入門1(変数、定数、配列、連想配列)

JavaScriptとJavaの違い

1.　型

言語	型付けルール	説明
JavaScript	動的型付け言語	変数の中身の型を自動で判定
Java	静的型付け言語	変数の中身の型を手動で判定

２.　JavaScriptは全てオブジェクトで扱う

「オブジェクトとは」
下記を持ったもののことをいう

• 値（変数/定数）（プロパティ）
• 関数（メソッド）

「typeof 変数」でオブジェクトのタイプを調べることができる。
下記の変数「num」は「number」オブジェクト
下記の変数「str」は「string」オブジェクト

let num = 1;
console.log('オブジェクトのタイプは' + typeof num);
let str = 'aaa';
console.log('オブジェクトのタイプは' + typeof str);

【コンソール出力結果】

オブジェクトのタイプはnumber
オブジェクトのタイプはstring

変数

JavaScript

JavaScriptは全てオブジェクトで扱う。変数の宣言はどのデータ型でも下記のものが使用される。

使える書き方か	書き方	ES	使用	特徴
▲	var	ES5	基本使用しない	変数の値を直接書き換えられる 後から値の計算や結合はできる
○	let	ES6	基本使用する	変数の値を直接書き換えられない 後から値の計算や結合はできる

「ES5」

基本「var」はもう使わない（IEはこちらを使っている）
変数の値を直接書き換えられる。
後から値の計算や結合等はできる。

var test = 1;
var test = 'aaa';
console.log(test);
test += 'bbb';
console.log(test);

【コンソール出力結果】

aaa
aaabbb

「ES6」

基本は「let」を使用する（chromeはこちらを使う）
変数の値を直接書き換えられない。
後から値の計算や結合等はできる。

変数の書き換え

let test = 1;
let test = 'aaa';
console.log('test= ' + test);

【コンソール出力結果】

Uncaught SyntaxError: Identifier 'test' has already been declared

変数の値への結合

let test = 1;
console.log('typeof= ' + typeof test);
test += 'aaa';
console.log('test= ' + test);
console.log('typeof= ' + typeof test);

【コンソール出力結果】

typeof= number
test= 1aaa
typeof= string

Java

データ型を意識した上で変数の宣言をする必要がある

int num = 1;
String str = "文字";
System.out.println(num);
System.out.println(str);

【コンソール出力結果】

1
文字

定数

JavaScript

const TEST = '定数';
console.log('TEST = ' + TEST);

【コンソール出力結果】

TEST = 定数

Java

final String TEST = "定数";
System.out.println("TEST = " + TEST);

【コンソール出力結果】

TEST = 定数

配列

JavaScript

1次元配列

const arrayTest = ['赤','青','黄'];
console.log(arrayTest);

【コンソール出力結果】

(3) ['赤', '青', '黄']

---

２次元配列

const arrayTest2 = [
    ['赤','青','黄'],
    ['白','黒','緑']
];
console.log(arrayTest2);

【コンソール出力結果】

(2) [Array(3), Array(3)]
0: (3) ['赤', '青', '黄']
1: (3) ['白', '黒', '緑']

---

２次元配列のlength、値の取得

const arrayTest2 = [
    ['赤','青','黄'],
    ['白','黒','緑']
];
console.log(arrayTest2.length);
console.log(arrayTest2[1].length);
console.log(arrayTest2[0][1]);

【コンソール出力結果】

2
3
青

Java

1次元配列

int[] numArray = {10, 20, 30};
for(int i:numArray) {
	System.out.println(i);
}

【コンソール出力結果】

10
20
30

---

２次元配列

// 2次元配列の宣言と格納
String[][] arrayTest = { { "赤", "青", "黄" }, { "白", "黒", "緑" } };
// 配列の各要素の個数分配列の宣言
int[] arraysNum = new int[arrayTest.length];
// 配列の各要素の個数を１次元配列に格納
for (int i = 0; i < arrayTest.length; i++) {
	arraysNum[i] = arrayTest[i].length;
}
// 2次元配列の出力
for (int i = 0; i < arrayTest.length; i++) {
	for (int j = 0; j < arraysNum[i]; j++) {
		System.out.println(arrayTest[i][j]);
	}
}

【コンソール出力結果】

赤
青
黄
白
黒
緑

※補足
ArraysクラスのdeepToStringメソッドを使うとprintlnメソッドでfor文を使用しなくても多次元配列を出力表示することができる（１次元配列も出力可能）

String[][] arrayTest = { { "赤", "青", "黄" }, { "白", "黒", "緑" } };
System.out.println(Arrays.deepToString(arrayTest));

【コンソール出力結果】

[[赤, 青, 黄], [白, 黒, 緑]]

---

２次元配列のlength、値の取得

String[][] arrayTest = { { "赤", "青", "黄" }, { "白", "黒", "緑" } };
System.out.println(arrayTest.length);
System.out.println(arrayTest[0].length);
System.out.println(arrayTest[0][0]);

【コンソール出力結果】

2
3
青

連想配列

JavaScript

const associativeArray = {
    'name':'taro',
    'age':10,
    'origin':'tokyo'
};
console.log(associativeArray);

【コンソール出力結果】

{name: 'taro', age: 10, origin: 'tokyo'}

連想配列の値の取得

const associativeArray = {
    'name':'taro',
    'age':10,
    'origin':'tokyo'
};
//書き方は２通り
console.log(associativeArray['name']);
console.log(associativeArray.age);

【コンソール出力結果】

taro
10

---

連想配列の中に連想配列

const member = {
    'honda':{
        'bloodType':'A',
        'age':10
    },
    'kagawa':{
        'bloodType':'B',
        'age':10
    }
};
console.log(member);

【コンソール出力結果】

{honda: {…}, kagawa: {…}}
honda: {bloodType: 'A', age: 10}
kagawa: {bloodType: 'B', age: 10}

---

連想配列の中に連想配列の値の取得方法

const member = {
    'honda':{
        'bloodType':'A',
        'age':10
    },
    'kagawa':{
        'bloodType':'B',
        'age':10
    }
};
console.log(member.honda.bloodType);

【コンソール出力結果】

A

Java

Javaで連想配列を使うときは、「HashMap」を使う。

HashMap<String, String> map = new HashMap<>();
map.put("apple", "りんご");
map.put("banana", "バナナ");
map.put("peanut", "ピーナッツ");
System.out.println(map.entrySet());

【コンソール出力結果】

[banana=バナナ, apple=りんご, peanut=ピーナッツ]

連想配列の値の取得

HashMap<String, String> map = new HashMap<>();
map.put("apple", "りんご");
map.put("banana", "バナナ");
map.put("peanut", "ピーナッツ");
// Mapからデータを取得する
System.out.println(map.get("apple"));
System.out.println(map.get("banana"));
System.out.println(map.get("peanut"));

【コンソール出力結果】

りんご
バナナ
ピーナッツ