JS初めてのJavaScript

Day 1変数と値 — データを入れる箱

文字列の連結と演算子

文字列の連結とテンプレートリテラルを対比し、算術演算子と比較の前ふりを知る。

文字列をつなげる(連結)

文字列どうしは + でつなげられます。これを連結(れんけつ)と呼びます。あいさつ文に名前を差し込む、といった使い方が定番です。

JAVASCRIPT
const name = "太郎";
const message = "こんにちは、" + name + "さん";
console.log(message); // こんにちは、太郎さん
+ で文字列と変数の中身をつなげる

テンプレートリテラル(もっと読みやすい書き方)

+ をたくさん並べると読みにくくなります。そこで便利なのがテンプレートリテラルです。バッククォート(`)で全体を囲み、変数を差し込みたい場所に ${ } と書きます。文章の中に穴を開けて値をはめ込むイメージです。

+ で連結(つなぎ目が多くて読みにくい)

JAVASCRIPT
const name = "太郎";
const age = 20;
const text = "こんにちは、" + name + "さん(" + age + "歳)";

テンプレートリテラル(文章がそのまま読める)

JAVASCRIPT
const name = "太郎";
const age = 20;
const text = `こんにちは、${name}さん(${age}歳)`;

${ } の中身は値になる

${ } の中には変数だけでなく、age + 1 のような計算も書けます。例えば `来年は${age + 1}歳です` と書くと、${age + 1} の部分が計算され「来年は21歳です」になります。${ } は「ここに値をはめ込む穴」だと覚えてください。

算術演算子(計算の記号)

数値の計算には算術演算子(えんざんし)を使います。多くは学校の算数と同じですが、記号が少し違うものと、見慣れないものが一つあります。

  • + 足し算、- 引き算
  • * かけ算(×ではなくアスタリスク)、/ わり算(÷ではなくスラッシュ)
  • % 余り(わり算のあまり)。例: 7 % 3 は 1
JAVASCRIPT
console.log(3 + 5); // 8
console.log(10 / 2); // 5
console.log(7 % 3); // 1(7を3で割った余り)
% は「余り」。奇数か偶数かの判定などによく使う

比較の前ふり

計算だけでなく、値どうしを比べることもよくあります。「等しいか」「大きいか」を調べると、結果は true か false の真偽値になります。ここでは「比べると真偽値が返る」ことだけ知っておけば十分で、詳しくは次のDayで扱います。

JAVASCRIPT
console.log(3 > 5);   // false(3は5より大きくない)
console.log(10 === 10); // true(等しい。=== は「等しいか」の比較)
比較の結果は true か false になる。=== は等しいかの比較(次のDayで詳しく)

AIにはこう聞く

「この + で書いた文字列連結を、テンプレートリテラルに書き換えて。どこが読みやすくなったか説明して」と頼むと、2つの書き方の違いが体でわかります。

読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。

理解度チェック

答えられれば、面接で説明できる状態に一歩近づきます。

Q1

テンプレートリテラルの説明として正しいものはどれですか。

Q2

console.log(7 % 3) の結果はどれですか。

Q3

文字列の連結(+)とテンプレートリテラルの違いを、どちらが読みやすいかの理由も含めて説明してください。

記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。