【デイトラ学習記録】DAY9 データ型、演算子、型変換、変数宣言と代入 – フロントエンド開発編

データ型、演算子、型変換、変数宣言と代入 Webアプリ開発コースフロントエンド開発編

フロントエンド領域の開発を学んでキャリアの幅を広げよう

今回はJavaScriptのデータ型、演算子、型変換、変数宣言と代入について学習しました。

普段Web制作でもJavaScript は使っているので、新しい学びの部分だけ掻い摘んでキャッチアップしました。

三項演算子

簡潔な条件分岐の記述方法。
通常の if else 文を一行で表現できる構文で使用頻度が高いので重要💡

JavaScript

let age = 18;
let message = (age >= 20) ? "成人です" : "未成年です";
console.log(message); 

// "未成年です"

論理演算子 &&（AND）や ||（OR）を使った場合に、評価が不要な場合は後続の条件や式をスキップする仕組みです。(スキップされた場合には、false が返ります。)

※素のJSでは使う頻度が少ないが、Reactではよく使うらしい

JavaScript

let age = 20;
let isAdult = (age >= 18) && true;
console.log(isAdult); 

// true

上記は、isAdult = (age >= 18) && true;の左側の条件の結果が true のため、右がに進み true が返る

JavaScript

let age = 20;
let isAdult = (age >= 18) && "成人です！";
console.log(isAdult); 

// "成人です！"

上記は、isAdult = (age >= 18) && true;の左側の条件の結果が true のため、右がに進み “成人です！” が返る

JavaScript

let age = 10;
let isAdult = (age >= 18) && "成人です！";
console.log(isAdult); 

// false

上記は、isAdult = (age >= 18) && true;の左側の条件の結果が false のため、右がスキップされる。スキップされた場合には、false が返ります。)

JavaScript

let styNum = "42"
let intNum = parseInt(strNum); // 文字列から数値への明示的な変換

console.log(intNum); // 42

JavaScript

let floatNum = parseFloat("3.14"); // 文字列から数値への明示的な変換

console.log(floatNum); // 3.14

さきほどの parseInt を使うと、3 が返る

JavaScript

let floatNum = parseInt("3.14"); // 文字列から数値への明示的な変換

console.log(floatNum); // 3

JavaScript

let boolVal = Boolean(0); // 数値から真偽値への暗黙的な変換

console.log(boolVal); // false

JavaScript

let strBool = String(true); // 真偽値から文字列への明示的な変換

console.log(strBool); // true

Web制作では、型をあまり意識しなくても問題なく進められることが多いですが、扱うデータの量が増えたり、そのデータの扱いが重要になったりするフロントエンド開発においては、型の重要性がさらに増すのではないかと感じました。