Day 1・変数と値 — データを入れる箱
文字列の連結と演算子
文字列の連結とテンプレートリテラルを対比し、算術演算子と比較の前ふりを知る。
文字列をつなげる(連結)
文字列どうしは + でつなげられます。これを連結(れんけつ)と呼びます。あいさつ文に名前を差し込む、といった使い方が定番です。
const name = "太郎";
const message = "こんにちは、" + name + "さん";
console.log(message); // こんにちは、太郎さんテンプレートリテラル(もっと読みやすい書き方)
+ をたくさん並べると読みにくくなります。そこで便利なのがテンプレートリテラルです。バッククォート(`)で全体を囲み、変数を差し込みたい場所に ${ } と書きます。文章の中に穴を開けて値をはめ込むイメージです。
+ で連結(つなぎ目が多くて読みにくい)
const name = "太郎";
const age = 20;
const text = "こんにちは、" + name + "さん(" + age + "歳)";テンプレートリテラル(文章がそのまま読める)
const name = "太郎";
const age = 20;
const text = `こんにちは、${name}さん(${age}歳)`;${ } の中身は値になる
${ } の中には変数だけでなく、age + 1 のような計算も書けます。例えば `来年は${age + 1}歳です` と書くと、${age + 1} の部分が計算され「来年は21歳です」になります。${ } は「ここに値をはめ込む穴」だと覚えてください。
算術演算子(計算の記号)
数値の計算には算術演算子(えんざんし)を使います。多くは学校の算数と同じですが、記号が少し違うものと、見慣れないものが一つあります。
- + 足し算、- 引き算
- * かけ算(×ではなくアスタリスク)、/ わり算(÷ではなくスラッシュ)
- % 余り(わり算のあまり)。例: 7 % 3 は 1
console.log(3 + 5); // 8
console.log(10 / 2); // 5
console.log(7 % 3); // 1(7を3で割った余り)比較の前ふり
計算だけでなく、値どうしを比べることもよくあります。「等しいか」「大きいか」を調べると、結果は true か false の真偽値になります。ここでは「比べると真偽値が返る」ことだけ知っておけば十分で、詳しくは次のDayで扱います。
console.log(3 > 5); // false(3は5より大きくない)
console.log(10 === 10); // true(等しい。=== は「等しいか」の比較)AIにはこう聞く
「この + で書いた文字列連結を、テンプレートリテラルに書き換えて。どこが読みやすくなったか説明して」と頼むと、2つの書き方の違いが体でわかります。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
テンプレートリテラルの説明として正しいものはどれですか。
console.log(7 % 3) の結果はどれですか。
文字列の連結(+)とテンプレートリテラルの違いを、どちらが読みやすいかの理由も含めて説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。