Zenn
😺

[Javascript]エスケープ文字,演算子,制御構造(if | switch | while | for)

2024/09/16に公開
JavaScript
プログラミング
tech

学習した目的

  • メイン業務はインフラ周りですが、TerraformやCloudFormationだけでなく、汎用プログラムも扱えるようになりたいと考え学習しています。自分なりの整理、備忘録としての記事のため、見にくい場合はすみませんmm

本記事を読み終わった時のゴール

  • 基本的なデータ型,演算子の使い方をある程度イメージできること。
  • 基礎的な制御構造の仕組みが頭の中でイメージできること。
     

主な演算子

■算術演算子

  • 数学的な計算を行うための演算子。
記号 意味
+ 加算
- 減算
* 乗算
/ 除算
% 剰余
** べき乗

■複合代入演算子

  • 代入と演算を同時に行う際に使用。
記号 意味
+= 左辺と右辺の値を加算した結果を代入
-= 左辺から右辺の値を減産した結果を代入
*= 左辺と右辺の値を乗算した結果を代入
/= 左辺の値を右辺の値で除算した結果を代入
%= 左辺の値を右辺の値で除算し、その余りを代入。
**= 左辺の値を右辺の値で冪乗した結果を代入

■比較演算子

  • 二つの値を比較し、その結果が真(true)か偽(false)かを返す演算子。
記号 意味
a == b aとbが等しい
a === b aとbが厳密に等しい(データ型まで識別)
a != b aとbは等しくない
a !== b aとbは厳密に等しくない(データ型まで識別)
a < b aはbより小さい
a > b aはbより大きい
a <= b aはb以下
a => b aはb以上

■論理演算子

  • 真（true）と偽（false）の二通りの状態を取る真偽値の間で行われる演算の際に使用される
記号 意味
a && b a & b(論理積)
a
!a aがfalseのときtrue、aがtrueのときfalse

■その他

  • 条件(三項)演算子
記号 意味
(a == b) ? 1 : 0 trueなら1,falseなら0を返す
  • null合体演算子
記号 意味
a ?? b aがnull or undefinedにbを返す

エスケープシーケンス

  • 文字列内で特殊文字を表現したい場合や、文字列の中で通常は文字列の終わりや区切りと解釈されるような文字を使用したいときに使用される処理
記号 意味
\b バックスペース(直前の文字を消去)
\t 水平タブ(一般的に使用される横にtabスペースが入る)
\v 垂直タブ(縦方向のスペースのためあまり使用されない。)
\n(windows:\r\n) 改行(行の終わりを示す)
\f 改ページ
\' シングルクォーテーション
\" ダブルクォーテーション
\` バッククォート
\\ バックスラッシュ
\0(ゼロ) NULL文字

 

制御構造とは?

コードがどの順番で実行されるかを制御するための構文や命令のこと。
以下は、どのプログラミング言語でも共通の概念。

1.順次構造 (Sequential Structure)

  • プログラムの命令が書かれた順番に従って一つずつ実行される最も基本的な構造。
    コードが上から下へと順に実行される。

2.選択構造 (Selection Structures)

  • 条件分岐を使って、プログラムの実行フローを変更する。
  • 代表的な例はif,switchなどで、特定の条件を満たす場合に限り、特定のコードブロックを実行する。

3.繰り返し構造 (Repetition Structures)

  • 特定のコードブロックを条件が満たされるまで、または指定された回数だけ繰り返し実行する。
  • for,whileなどがこれに該当する。
     

条件分岐

■if~else

if_else.js
let n = 1

if(n < 100) {
    document.write(`<p>変数${n}は100未満である。</p>`);
}
else{
    document.write(`<p>変数${n}は100以上である。</p>`);
}

■else~if

else_if.js
let num = 8;

if(num === 10){
    document.write("<p>10と同一</p>");
}
else if(num === "10"){
    document.write("<p>10と厳密に同一</p>");
}
else if(num === 9) {
    document.write("<p>9と厳密に同一</p>");
}
else{
    document.write("<p>どれにも当てはまらない。</p>");
}

■その他if文

  • ネストされたif文
nest_if.js
let n1 = "Harry ";
let n2 = "Potter";

if(n1 === "Harry"){
    if(n2 === "Potter"){
        document.write(`<p>${n1}${n2}</p>`);
    }
}
  • 論理積との組み合わせ
and_or.js
let n3 = "Java";
let n4 = "Script";

if(n3 === "Java" && n4 === "Script"){
    document.write(`<p>開発言語は${n3}${n4}に決定した。</p>`)
}

■switch

  • caseごとに処理内容を書き、該当するcaseの処理を書く。
  • どのcaseにも当てはまらない場合はdefaultで処理される。
switch.js
let num = 3;
        
switch(num){
    case 1:
        document.write("<p>case1</p>");
        break;
    
    case 2:
        document.write("<p>case2</p>");
        break;
    
    case 3:
        document.write("<p>case3</p>");
        break;
    
    default:
        document.write("<p>other</p>");
        break;
}

 

繰り返し処理

■while

  • 通常
while.js
let i = 0

while(i < 3){
    document.write(`<p>繰り返し処理中(${i})</p>`);
    i++;
}
  • break
while_break.js
let i = 0;
// breakによる処理でループを抜ける。(ループを途中停止)
while(i < 5){
    document.write(`<p>繰り返し処理中(${i})</p>`);
    i++;

    if(i == 4){
        break;
    }
}
  • continue
while_continue.js
let i = 0;

while(i < 5){
    i++;
    // contiuneでループの先頭に戻す
    // そのループの現在の反復をスキップし、次の反復に直ちに進むために使われる
    if(i == 3){
        continue;
    }
    document.write(`<p>繰り返し処理中(${i})</p>`);
}
  • 無限
while_infinity_loop.js
et i = 0
// 無限ループ(ブラウザで表示されないので基本的に使用されない処理)
while(true){
    document.write(`<p>繰り返し処理中(${i})</p>`);
    i++;
}

■for

  • for文の処理をテンプレートリテラルを用いて表示
for.js
for(let i = 0 ; i < 5 ; i++ ){
    document.write(`<p>for文の処理だよ(${i})</p>`);
}
  • 閏年を表示する処理
for_leap_year.js
// 1900年から2024年までの間で閏年を表示
for(let i = 1900 ; i <= 2024 ; i++){
    // 第一条件として4で割り切れること
    if(i%4 == 0){
        // 第二条件として100で割り切れるなら通常は閏年から外れるが、400で割り切れる値は例外的に閏年。
        if(i%100 !== 0 || i%400 == 0){
            document.write(`<p>${i}</p>`);
        }
    }
}
  • for文で素数を表示する処理
for_prime.js
for(let n = 2; n <= 100 ; n++){ // 外側のループ。100まで1ずつ増やす。
    let divisors = 0; // 約数として定義する変数の値を0に設定
    
    // 外側のループがnの値を2から100まで進めるごとに、内側のループはそのnに対して1からnまでの各iで割り切れるかを試す。
    // これにより、nの約数を全て洗い出すことが可能。
    for(let i = 1; i <= n ; i++){
        if(n % i == 0){ // 外側のループで設定したnに対して内側ループiが割り切れるなら
        divisors++ // 約数のカウントを増やす
        }
    }

    if(divisors == 2){ // 約数が2と等しいということは素数ということだから
        document.writes(`<p>${n}<p/>`) //素数を表示
    }
}

// 処理順序
/* 
①外側ループでnの値を1加算する。
②①の処理でループが行われる間で内側ループの処理が走る
 - 約数かどうかを確かめるための変数(i)をn以下の値で1ずつ増やす。
 - nに対してiで割り切れるかどうか(約数になり得るか）を割り算しながら確かめる。
 - 割り切れた(約数になると判断出来る)場合、約数の実数として`divisors`の値を`n`(外側ループの処理中の値)以下の範囲で1ずつ加算する。
③`divisors`(約数)が2の場合は素数のため、素数という条件を満たす場合は値を表示する。
以降は繰り返し
 */


// 細分化した外側ループと内側ループの関係性 
/* 
外側ループが`n=6`の時点での内側のループ
i = 1のとき: 6 % 1 == 0は真（割り切れる）/ 約数のカウント+1
i = 2のとき: 6 % 2 == 0も真（割り切れる) / 約数のカウント+1
i = 3のとき: 6 % 3 == 0も真（割り切れる）/ 約数のカウント+1
i = 4のとき: 6 % 4 != 0は偽（割り切れない）/ 約数のカウント±0
i = 5のとき: 6 % 5 != 0も偽（割り切れない）/ 約数のカウント±0
i = 6のとき: 6 % 6 == 0は真（割り切れる）/ 約数のカウント+1
※約数が4つ存在するため、6は素数でない事が分かる
*/

 

参考

https://book.impress.co.jp/books/1122101168

GitHubで編集を提案

Discussion