【JavaScript ~変数・定数、if文・switch文~】勉強メモ

今回は、JavaScriptちゃんと勉強してみた。
個人で作成したポートフォリオなどで使っていたものの、今迄は、ググってコピペして動いたから
とりあえずオッケーっと言う感じにしていたので、今回基礎からちゃんと勉強してみた。

ほぼ自分の勉強メモです。
過度な期待はしないでください。


ES2015（ES6）
-
2015年、JavaScriptの使用が大きく改定され、名前「ECMAScript 2015」(通称ES2015 または ES6)と
呼ばれるようになった。従来のJSより効率的にコードが書けるよう大幅に機能が拡張された。

<br>

console.log()
-
　-console.log() は丸括弧 () 内に入力された文字をコンソールに出力する。
　-文字列を出力する場合、シングルクォーテーション（'）かダブルクォーテーション（"）で囲む必要がある。
　-文の最後はセミコロン`;` →　なくても問題は無いが、思わぬ不具合が生じる可能性もある。
　-文頭に`//`を書くと、その行はコメントとみなされる。なので、プログラムとしては無視され実行されない。

```.js:例
console.log('Hello World'); 
console.log("Hello World");
// 文の最後には、セミコロン

// 出力結果 → Hello World

```
<br>
　-数値と計算
　数値は文字列と違いクォーテーションで囲まない。
　クォーテーションで囲ってしまえば、例え計算式でも文字列として出力される。

```.js:例
console.log(7 + 7); 
// 出力結果 → 14

console.log("7 + 7");
// 出力結果 → 7 + 7

```
<br>

変数
-
　-変数は`「let 変数名 = 値」`として定義
　出力する時、変数はクォーテーションで囲まない、囲むと文字列となってしまう。
　-変数の最後にもセミコロン`;` →　なくても問題は無いが、思わぬ不具合が生じる可能性もある。

```.js:例
let name = 'Aki';
console.log(name); 
// 出力結果 → Aki

console.log('name');
// 出力結果 → name

```
<br>

　-変数の命名ルールの例

|付けて良い変数名|備考|
|:---:|:---:|
|_style|アンダースコアは使える|
|＄|ダラーマークは使える|
|name1|１文字目で、なければ数字は使える|

|付けてはいけない変数名|備考|
|:---:|:---:|
|1name|１文字目が数字|
|css-style|- は使用出来ない|
|&name|& は使用出来ない|

<br>

　-変数の更新
　「let」は必要なく、`「変数名 = 新しい値」`と書けば値が変更される。

```.js:例
let name = 'Aki';
console.log(name); 
// 出力結果 → Aki

name = 'John';
console.log('name');
// 出力結果 → John

```
<br>

定数
-
　-変数は`「const 変数名 = 値」`として定義
　変数は1度代入した値を更新することができるが、定数は値を更新することはできない。

　-定数のメリットは、「後から値を更新できない」ところ、
　コードの量が増えるにつれて、より安全なコードを書くと言うことに適している。

```.js:例
const name = 'Aki';
console.log(name); 
// 出力結果 → Aki

name = 'John';
console.log('name');
// 出力結果 → Aki 　定数は一度代入した値は更新出来ない

```
<br>

テンプレートリテラル
-
　-文字列や定数の連結には、「+」記号を用いてきたが、それ以外に
　文字列の中に`「${定数}」`とすることで、文字列の中に定数や変数を含めることが出来る。
　この時、文字列全体を<b>バッククォーテーション（`）</b>で囲む必要がある。

```.js:例
const name = "Aki";

console.log(`ぼくの名前は${name}です`);

// 出力結果 → 私の名前はAkiです

```
<br>

if文
-
　-ifの後ろに`（ ）`の中に条件式を書き、それが成り立つ場合の処理を`{ }`の中に書く

```.js:例
const level = 12;

if (level > 10){
  console.log('レベルが10より大きいです');
}

// 出力結果 → レベルが10より大きいです

```
<br>

　-比較演算子
　左と右の値が等しいか異なるかを調べるもの
　「a === b」　→　a と b　が等しい
　「a ！== b」　→　a と b　は異なる

```.js:例
const password = "JavaScript";

if (password==='JavaScript'){
  console.log('ログインに成功しました!');
}

if (password!=='JavaScript'){
  console.log('ログインに失敗しました!');
}

// 出力結果 → ログインに成功しました!

```
<br>

　-else を使って一つに纏める
　if文に「else」を組み合わせると「もし〇〇なら●●を行う、そうでなければ■■を行う」
　という処理が行われる。

```.js:例
const password = "Python";

if (password==='JavaScript'){
  console.log('ログインに成功しました!');
}else{
  console.log('ログインに失敗しました!');
}

// 出力結果 → ログインに失敗しました!

```
<br>

　-else if
　ifとelseだけでなく、さらに条件を追加したい場合に使用する。
　`「else if (条件)」を追加`

```.js:例
const number = "12";

if (number >= 20){
  console.log('数字は２０以上です');
}else if (number >= 10){
  console.log('数字は1０以上です');
}else{
  console.log('数字は1０より小さいです');
}
// 出力結果 → 数字は1０以上です

```
<br>

　-複数の条件式
　「かつ」 - 「&&」　→　複数の条件がすべてtrueならtrueになる
　「または」 - 「| |」 → 複数の条件のうち1つでもtrueならtrueになる

```.js:例
const number = 25;

if (number >= 20 && number <= 30){
  console.log('数字は２桁です');
}
// 出力結果 → 数字は２桁です

```
<br>

switch文
-
　-`switch(条件の値){ 処理 }`でとすることでswitch文を書くことが出来る。
　条件の値とは、<b>変数や定数</b>のこと
　値によって処理を分岐する場合にswitch文を使用。
　switch文の中に`case`を追加することで処理を分けることができ、分岐の数だけcaseを追加する。
　switch文の中で`break`は、switch文を終了する命令

```.js:例
const ranking = 2;

switch (ranking) {
  case 1:
    console.log('1位です！');
    break;

  case 2:
    console.log('２位です！');
    break;
  
  case 3:
    console.log('３位です！');
    break;
}

// 出力結果 → ２位です！

```
<br>

　-breakが無いと、その次のcaseの処理も実行してしまう。

```.js:例
const ranking = 1;

switch (ranking) {
  case 1:
    console.log('1位です！');

  case 2:
    console.log('2位です！');
    break;
}

// 出力結果 → 1位です！　2位です！

```
<br>

　-caseのどれにも一致しなかった時、`default`のブロックが実行される
　defaultはif文のelseに似たようなもの

```.js:例
const ranking = 5;

switch (ranking) {
  case 1:
    console.log('1位です！');
    break;
  case 2:
    console.log('2位です！');
    break;
  case 3:
    console.log('3位です！');
    break;
  default:
    console.log('4位以下です');
    break;
}

// 出力結果 → 4位以下です

```
<br>

今迄の投稿記事
-
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/f2b6fbbd073b512d548b)
[【JavaScript ~ファイルの分割について~】勉強メモ⑤](https://qiita.com/k-yasuhiro/items/209eda27bbc61ae961a1)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/private/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)