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

## JavaScriptとJavaの違い
##### 1.　型

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

##### ２.　JavaScriptは全てオブジェクトで扱う
「オブジェクトとは」
下記を持ったもののことをいう

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

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

```javascript
let num = 1;
console.log('オブジェクトのタイプは' + typeof num);
let str = 'aaa';
console.log('オブジェクトのタイプは' + typeof str);
```
【コンソール出力結果】

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

## 変数
#### JavaScript
JavaScriptは全てオブジェクトで扱う。変数の宣言はどのデータ型でも下記のものが使用される。
| 使える書き方か | 書き方 | ES | 使用 | 特徴 |
|:-:|:-:|:-:|:-:|:-:|
| ▲ |  var |  ES5 |　基本使用しない　|　変数の値を直接書き換えられる<br>後から値の計算や結合はできる|
|  ○ |  let |  ES6 |　基本使用する| 変数の値を直接書き換えられない<br>後から値の計算や結合はできる|

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

```javascript
var test = 1;
var test = 'aaa';
console.log(test);
test += 'bbb';
console.log(test);
```
【コンソール出力結果】

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

###### 変数の書き換え
``` javascript
let test = 1;
let test = 'aaa';
console.log('test= ' + test);
```
【コンソール出力結果】

``` text
Uncaught SyntaxError: Identifier 'test' has already been declared
```
###### 変数の値への結合
``` javascript
let test = 1;
console.log('typeof= ' + typeof test);
test += 'aaa';
console.log('test= ' + test);
console.log('typeof= ' + typeof test);
```
【コンソール出力結果】

``` text
typeof= number
test= 1aaa
typeof= string
```


#### Java
データ型を意識した上で変数の宣言をする必要がある
``` java
int num = 1;
String str = "文字";
System.out.println(num);
System.out.println(str);
```
【コンソール出力結果】

``` text
1
文字
```

## 定数
#### JavaScript
``` javascript
const TEST = '定数';
console.log('TEST = ' + TEST);
```
【コンソール出力結果】

``` text
TEST = 定数
```
#### Java

``` java
final String TEST = "定数";
System.out.println("TEST = " + TEST);
```
【コンソール出力結果】

``` text
TEST = 定数
```

## 配列
#### JavaScript
###### 1次元配列
``` javascript
const arrayTest = ['赤','青','黄'];
console.log(arrayTest);
```
【コンソール出力結果】

``` text
(3) ['赤', '青', '黄']
```
***
###### ２次元配列

``` javascript
const arrayTest2 = [
    ['赤','青','黄'],
    ['白','黒','緑']
];
console.log(arrayTest2);
```
【コンソール出力結果】

``` text
(2) [Array(3), Array(3)]
0: (3) ['赤', '青', '黄']
1: (3) ['白', '黒', '緑']
```
***
###### ２次元配列のlength、値の取得

``` javascript
const arrayTest2 = [
    ['赤','青','黄'],
    ['白','黒','緑']
];
console.log(arrayTest2.length);
console.log(arrayTest2[1].length);
console.log(arrayTest2[0][1]);
```
【コンソール出力結果】

``` text
2
3
青
```

#### Java
###### 1次元配列
``` java
int[] numArray = {10, 20, 30};
for(int i:numArray) {
	System.out.println(i);
}
```
【コンソール出力結果】

``` text
10
20
30
```

***
###### ２次元配列

``` java
// 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]);
	}
}
```
【コンソール出力結果】

``` text
赤
青
黄
白
黒
緑
```
※補足
ArraysクラスのdeepToStringメソッドを使うとprintlnメソッドでfor文を使用しなくても多次元配列を出力表示することができる（１次元配列も出力可能）
``` java
String[][] arrayTest = { { "赤", "青", "黄" }, { "白", "黒", "緑" } };
System.out.println(Arrays.deepToString(arrayTest));
```


【コンソール出力結果】

``` text
[[赤, 青, 黄], [白, 黒, 緑]]
```
***
###### ２次元配列のlength、値の取得

``` java
String[][] arrayTest = { { "赤", "青", "黄" }, { "白", "黒", "緑" } };
System.out.println(arrayTest.length);
System.out.println(arrayTest[0].length);
System.out.println(arrayTest[0][0]);
```
【コンソール出力結果】

``` text
2
3
青
```
## 連想配列
#### JavaScript
``` javascript
const associativeArray = {
    'name':'taro',
    'age':10,
    'origin':'tokyo'
};
console.log(associativeArray);
```
【コンソール出力結果】

``` text
{name: 'taro', age: 10, origin: 'tokyo'}
```
###### 連想配列の値の取得

``` javascript
const associativeArray = {
    'name':'taro',
    'age':10,
    'origin':'tokyo'
};
//書き方は２通り
console.log(associativeArray['name']);
console.log(associativeArray.age);
```
【コンソール出力結果】

``` text
taro
10
``` 
***
###### 連想配列の中に連想配列

``` javascript
const member = {
    'honda':{
        'bloodType':'A',
        'age':10
    },
    'kagawa':{
        'bloodType':'B',
        'age':10
    }
};
console.log(member);
```
【コンソール出力結果】

``` text
{honda: {…}, kagawa: {…}}
honda: {bloodType: 'A', age: 10}
kagawa: {bloodType: 'B', age: 10}
```
***
###### 連想配列の中に連想配列の値の取得方法

``` javascript
const member = {
    'honda':{
        'bloodType':'A',
        'age':10
    },
    'kagawa':{
        'bloodType':'B',
        'age':10
    }
};
console.log(member.honda.bloodType);
```
【コンソール出力結果】

``` text
A
```
#### Java
Javaで連想配列を使うときは、「HashMap」を使う。
``` java
HashMap<String, String> map = new HashMap<>();
map.put("apple", "りんご");
map.put("banana", "バナナ");
map.put("peanut", "ピーナッツ");
System.out.println(map.entrySet());
```
【コンソール出力結果】

``` text
[banana=バナナ, apple=りんご, peanut=ピーナッツ]
```
###### 連想配列の値の取得
``` java
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"));
```
【コンソール出力結果】

``` text
りんご
バナナ
ピーナッツ
```