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

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

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

ES2015（ES6）

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

console.log()

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

例

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

// 出力結果 → Hello World

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

例

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

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

変数

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

例

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

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

　-変数の命名ルールの例

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

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

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

例

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

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

定数

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

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

例

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

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

テンプレートリテラル

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

例

const name = "Aki";

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

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

if文

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

例

const level = 12;

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

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

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

例

const password = "JavaScript";

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

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

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

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

例

const password = "Python";

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

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

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

例

const number = "12";

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

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

例

const number = 25;

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

switch文

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

例

const ranking = 2;

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

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

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

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

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

例

const ranking = 1;

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

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

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

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

例

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位以下です

今迄の投稿記事

【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript ~ファイルの分割について~】勉強メモ⑤
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12