JavaScript 基礎編

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a>基礎編 f:id:TomozQ:20201027132013j:plain

JavaScript備忘録

今回もJavaScriptの記事になっています。

if文

前回の記事にも出てきましたがif文を見ていきます。

そこまで難しくは無いのでサクッと

まずは例文

const score = 60;
 if(score >= 80){
   console.log('Great!')
 }else{
   console.log('OK...')
 }

1行目

const score = 60;

constを用いてscoreという定数に数値の60を代入します。

2~3行目

if(score >= 80){
  console.log('Great!')
}

if(score >= 80): 60を代入されたscoreが80以上なら

{cosole.log('Great!')}: コンソールにGreat!と表示してね

3~4行目

else{
  console.log('OK...')
}

else: それ以外は

{console.log('OK...')}: コンソールにOK...と表示してね

f:id:TomozQ:20201018164700p:plain

で、これもうちょっと簡単な書き方があります。

score >= 80 ? console.log('Great!') : console.log('OK...');

上と意味は同じですがこんな感じでも書けちゃいます。

ただ、可読性を考えると1つ目の方が読みやすかったりするんかなー？？

人によりますかね

そしてこの問題に付随して出てくるのが

論理演算子

「かつ」とか「もしくは」とか「ではない」とかってやつですね。

JavaScriptでも他言語と同じような表現です。

列挙しておきます。

同じである

かつ

もしくは

同じでない

みたいな感じです

ではこれを踏まえた上で例文

const score = 60;
const name = 'tomozqoo'

if(score >= 50 && name === 'tomozqoo'){
     console.log('Good job!')
   }

定数定義の部分と、if文内の処理は上記の例と同じなので解説は省略します

if(score >= 50 && name === 'tomozqoo')

まあここも解説不要ではあるかと存じますが

scoreが50以上かつnameがtomozqooであるなら

ということですね。

ではもう少し処理内容が多い例です

const signal = 'red';

if(signal === 'red'){
  console.log('Stop!');
}else if(signal === 'yellow'){
  console.log('Caution!');
}else if(signal === 'blue'){
  console.log('Go!');
}

新たに出てきたのが else if ですね

ifの条件ではなくこの条件なら・・・

みたいな使い方です。

そんなに難しくないですよね！

サクッといきます

signalが赤ならコンソールにStop!と表示してください

signalが黄ならコンソールにCaution!と表示してください

signalが青ならコンソールにGo!と表示してください

f:id:TomozQ:20201018164651p:plain

うん・・・簡単ちん！

そして、同じ結果を表示するのですが、この処理switch文でも書けちゃいます！

switch文

真上の例をswitch文でいきましょう。

switch文は

switch(){ //（）内の引数が
  case '': //何々のとき
    //処理内容
    break; //処理終了
  default: //それ以外は
    //処理内容
}

みたいな感じで書きます。

確かdefault内の処理にはbreakは不要です？

では例文

const signal = red;

switch(signal){
  case 'red' : 
    console.log('Stop!');
    break;
  case 'yellow' : 
    console.log('Caution!');
    break;
  case 'blue' : 
  case 'green' : 
    console.log('Go!');
    break;
  default:
    console.log('Wrong signal!');
}

解説していきます。

定数定義は大丈夫ですね

switch(signal){}

この中カッコ内にswitch文の処理を書いていきます。

今回は「signalが何々の時」で処理を分けたいので

（）内にはsignalを入れます。

そして

case 'red' : 
    console.log('Stop!');
    break;

この部分

case 'red' : :signalがredなら

console.log('Stop!') :コンソールにStop!と出力してください。

break; :処理終了

break;を入れないと処理が終わらないので気をつけてください！

その下yellow, blue, greenは同じ処理ですね。

あ、人によっては信号青を緑って言ったりするんでgreenも入ってます

処理内容が同じ場合には上記のように書けます。

default:
  console.log('Wrong signal!');

それ以外の場合の処理ということなので、今回はred, yellow, blue, green以外の処理をここに記述していきます。

つまり、red, yellow, blue, green以外の場合は、コンソールにWrong signal!と表示してねてことですね。

f:id:TomozQ:20201018164651p:plain

for文

次はfor文です。

for(数字を入れる変数を用意; その変数の幅を指定; 変数を増やしていく){
  //処理内容
}

これはちょっと説明下手かも

コメントにて苦情受け付けます

取り敢えず例文行ってみよう

for(let i =1; i<=10; i++){
  // console.log('hello + i');
  console.log(`hello ${i}`);
}

まずはlet i = 1

iという変数を用意して初期値を１にします。

i <= 10; :iは10以下であることを定義します。（1, 2, 3, 4, 5, 6, 7, 8, 9, 10）

i++; :処理を行うたびにiを1ずつ増やします。

ではどのように処理がされていくのか解説します。

まず、iに初期値である1が代入されます

iには1が代入されており10以下なので、{}内の処理が実行されます。

コンソールにhello 1と出力されます。

1回目の処理が実行されたので i++ ; でiが1増えます

iに2が代入されます。

iには2が代入されており10以下なので、{}内の処理が実行されます。

以下i = 10まで繰り返し

i = 11となったタイミングで i <= 10の条件から外れるので全ての処理が終了します。

ちなみに

console.log(`hello ${i}`);

の(`hello ${i}`)という書き方ですが

コメントアウトしてあるconsole.log('hello + i')と同じ結果が出力されます。

よく使われると思いますので覚えておられた方がよいのではと存じます。

while文

続いてはwhile文です。

while(){ //（）内の条件の間
  console.log(｀${hp} HP left!｀); //この処理を繰り返す
  hp -= 15;
}

では例文

let hp = 100;

while(hp > 0){
  console.log(｀${hp} HP left!｀);
  hp -= 15;
}

let hp = 100;

hpという変数に100を代入

while(hp > 0){}

hpが0より大きい限り繰り返す

console.log(｀${hp} HP left!｀);

コンソールに100HP leftと表示

hp -= 15;

hpから15を引いた数を自己代入

2周目は85, 3周目は70........

hpが10になったタイミングで15を引くとマイナスになってしまい、次の処理に入ろうとすると0より大きいという条件式から外れるので、処理が止まります。

テンプレートリテラルで使用しているバッククォートはマークダウンの都合上全角で書いています。

コピペする際には半角に直してくださいな

今回はここまで

次回は・・・またJS！

それではまた次回！

男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。

JavaScript備忘録

目次

今回もJavaScriptの記事になっています。

if文

switch文

for文

while文