javascriptの記法（es5,es6）

javascriptの記法をざざっと

# 細かいルール

## コメントアウト

```js
/*コメントアウト*/

// コメントアウト
```

## 行の改行

```js
var width = 7;
var width 
= 7;
```

javascriptは途中で改行してもいいのでセミコロンで終わらなくても大丈夫な場合もあるが念のためセミコロンで終わるのに統一。

## 変数の定義

```js
var 変数 = 値

/*下記のように複数一度に定義するのも可能*/

var msg = "hello",
 x = 20,
 y = 30;
```

https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27

varを使うか、letを使うかconstを使うか迷ったらこの記事。一旦下記のルールが一番良さそう。

* 再代入が必要ならlet
* 基本はconst

### 変数の更新

```
var name = "太郎";
name = "次郎";
```

更新の際はvarはいらない。

## 文字列の連結

```javascript
var s;
s = "hello" + "world";
/* => hello world*/
```

javascriptは片方が文字列の場合+が連結になる

## 命名規則

キャメルケースで単語の区切りに大文字を使う

```js
yourName
```

## 等号

```javascript:例
x === y
// xとyは等しい

x !== y
// xとyは等しくない
```

# html内の記述箇所

## head内

```javascript
<head>
<script type="text/javascript">
 JavaScript命令および関数...
</script>
</head>
```
## body内

```javascript
<head>
</head>
<body>
<script language="JavaScript">
 document.write("テスト")
</script>
</body>
```

## おすすめはbodyのとじタグ直前

javascriptは読み込まれて処理が終わるまで他のcssなどが読み込めないため他の処理が終わった後に読み込んだほうがページの表示が早くなる。またもしhtml内に処理の結果を表示する場合、htmlが読み込まれたあとでないとその処理は行われないため読み込まれていない場合また再度読み込むという内容をjavascript内に記述しないといけない。

# 条件文

```javascript:例
if(条件){
 インデントを入れて何か
}else if{
 console.log("あばば")
}else{
 console.log("あばば")
}
// うしろにセミコロンは不要
```
## switch文

```javascript:例
var item = "ほうき"
switch(item){
 case "掃除機":
 console.log("掃除機");
 break;
 case "ちりとり":
 console.log("ちりとり");
 break;
 default:
 console.log("掃除用具");
}
// breaｋでswitch文から抜ける。どれにも当てはまらない場合、defaultになる。
```
## while文

```javascript:例
var i = 1
while(i<=5){
 console.log(i)
 i = i + 1
}
```
while文は()内の条件がtrueだったら処理を続ける。falseになると繰り返しの処理から抜ける。

## for文

```javascript:例
for(変数の定義; 条件式; 変数の更新){
 処理
}

for(var i = 1; i <= 5; i += 1){
 console.log(i);
}
```
1,変数の定義
2,条件
3,繰り返す処理→console.log
4,変数の更新

# 配列

```javascript:例
var 変数 = [値0,値1,値2];
```

セミコロンで終わるの注意。

# 連想配列（オブジェクト）

```javascript:例
var 変数名 = {キー１:値１,キー2:値2};
console.log(変数名.キー);
console.log(変数名["キー"]);
// キーが文字列の場合""で囲うのを忘れずに
```

このキー：値はプロパティとも言う。

```javascript
変数名.キー
```
で取り出すことができる。

```javascript
var user{
 name:太郎
};
console.log(user.name);
=>太郎
```
オブジェクトはnewで生成できる

```javascript
var s = new String("太郎");
```

## push（配列に値を追加する）

```javascript
const numbers = [a1,b1,c1];
numbers.push(d1);
console.log(numbers);
=>[a1,b1,c1,d1]
```

## forEachメソッド（配列１つ１つに処理）

```javascript
const numbers = [1,2,3];
numbers.forEach((number) => {console.log(number)});
=>
1
2
3
```

## find（配列の中で条件にあった値を１つ引っ張ってくる）

```javascript
const numbers = [1,2,3,5,7];
const foundnumbers = numbers.find((number) => {
return numbers > 3;
});
console.log(foundnumbers);
=>5,7
```

## filter（配列の中で条件にあった値をすべて引っ張ってくる）

```javascript
const numbers = [1,3,5,7];
const filteredNumbers = numbers.filter((number) => {
 return number > 3;
});
console.log(filteredNumbers);
```

## map（配列の各値に同じ処理をする）

```javascript
const numbers = [1,2,3];
const doubledNumbers = numbers.map((number) => {
 return number * 2;
});
console.log(doubledNumbers);
```

## スプレッド演算子

```javascript
const ary = ['Pen', 'Pineapple', 'apple'];
const myAry = [...ary];
```

https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8

## メソッド

```javascript
var user{
 name:太郎
 greet: function(name){
 console.log("hello" + name)
 }
};
user.greet("太郎");
=>hello,太郎
```
オブジェクトの中に関数を定義したものをメソッドという。

## this


```javascript
var user{
 name:太郎
 greet: function(name){
 console.log("hello" + this.name)
 }
};
user.greet("太郎");
=>hello,太郎
```

オブジェクト内でそのオブジェクトを指すもの

thisの詳細はこの記事がわかりやすい

https://jsprimer.net/basic/function-this/#function-without-arrow-function-this

>thisが参照先を決めるルールは、Arrow Functionとそれ以外の関数定義の方法で異なります。

アロー関数と他の関数で挙動が異なっており、下記の挙動

>これは、変数におけるスコープチェーンの仕組みと同様で、そのスコープにthisが定義されていない場合には外側のスコープを探索するのと同じです。 そのため、Arrow Function内のthisの参照先は、常に外側のスコープ（関数）へとthisの定義を探索しに行きます（詳細はスコープチェーンを参照）。

# グローバル変数とローカル変数

```javascript:例
var name = "あばば";
function hello{
 var name = "えへへ";
 console.log(name);
}
hello();
console.log(name);
// => これでえへへで出力される。あばばがグローバル変数でえへへは関数内のローカル変数
```

# 関数

```javascript:例
function 関数(){
}
// 実行する場合
関数名();
```

## アロー関数

```javascript
let getTriangle = (base, height) => {
  return base * height / 2;
};

変数 = (引数) => {
};
```

## 無名関数

```javascript
var hello = function(){
}
```
変数に関数を入れて関数名を入れない形が存在します。この形を無名関数と言います。

## 即時関数

```javascript
(function hello(){
 console.log("hello");
})();

/*関数名は省略できる*/

(function(){
 console.log("hello");
})();

```
functionを()で囲み、後ろに()をつけると即時関数としてすぐに関数を実行できる。


# ユーザーに対しての警告、情報提示

```javascript

alert("");
/*ブラウザで注意文言を提示*/

confirm("");
/*okと閉じるの注意文言を提示*/

prompt("");
/*ユーザーに質問を提示*/
```

# 以下ES6

# es5とes6の変更点

「ES5とES6の違いをまとめてみた(メモ)」
https://qiita.com/rifutan/items/a55f132d4dae7e2f1941

ここによくまとめられている。下記重複もあるが復習も兼ねて。

# letが使えるようになる

```javascript
let name = "太郎";
var name = "太郎";
```

letはブロックスコープでvarは関数レベルでのスコープ

# テンプレートリテラル

```javascript
console.log(`${変数}`);
```
変数を値の中にいれることができるのがテンプレートリテラル。下記の書き方をしないといけない。

* テキストを`バッククオートで囲む
* 変数を${}の中に入れる

# class

## constructor

classを使用する際に同時にしたい処理を書く。

```javascript
class Animal{
  constructor(){
  処理
 }
}
```

## 要素はプロパティ、動作はメソッド

ES6ではclass直下にプロパティをかけないのでconstructorで代入する。

```javascript
class Animal{
 constructor(name,age){
  this.name = name,
  this.age = age
 },
 greet(){
  console.log("こんにちは！");
 }
}
```

# fileの分割

```javascript
class Rei{
}
export default Rei;
```

```javascript
import Rei from "./rei.js";
```