変数と計算

変数とは

「変数」は文字列や数値に名前をつけて,後から使用できるようにするもの.

プログラミングでは,ある部分で計算などして導出した値を別の部分で使用することが多い.

その際,毎回同じ計算を行うと不便であるため,1 回計算した結果に名前をつけておき別の部分でそのまま使えるようにする.

💡 Key Point

変数には自分で名前をつけるが,「何の値なのか」がわかるように名前をつけることが極めて重要!!

変数のルール

プログラミングで使用する値には「数値」「文字列」などの型が存在する.

  • 「数値」は数学で扱う数と同様に計算できる.
  • 「文字列」は開発者が決めたメッセージやキーワードなどである.英語でも日本語でも扱うことができ,'(シングルクォーテーション)か"(ダブルクオーテーション)で囲む必要がある.
  • 変数名の先頭が数字になるパターンは NG!
const number1 = 100;
const number2 = 200;
const text1 = 'hello';
const text2 = 'world';
const 3text = 'JavaScript'; // NG

💡 Key Point

シングルクォーテーションとダブルクオーテーションはどちらでも良いが統一しよう!

数値の計算

数値は数学と同様に四則演算を行うことができる.

const number1 = 1 + 9; // 10
const number2 = 1 - 5; // -4
const number3 = 2 * 4; //  8
const number4 = 10 / 2; //  5
const number5 = 10 % 3; //  1

文字列の結合

文字列は「+」の計算を行うことができる.この場合は数学と異なり,前後の文字列が連結される.

const number1 = 100;
const number2 = 200;
const text1 = "hello";
const text2 = "world";
const sum1 = number1 + number2; // 300
const sum2 = text1 + text2; // helloworld

💡 Key Point

1'1'は異なるッ!

NG ワード

変数名には使用できない単語が存在する

構文で使用するもの,将来的に使われるもの,など

  • if」「for」など

このような単語は「予約語」と呼ばれる.

  • 「MDN javascript 予約語」で検索!!
  • 引っかかる場合は少ないので今は気にしなくて OK!

練習

以下の処理を JavaScript で実装しよう!

  • 100」と「200」の数値をそれぞれ変数に入れ,加算した結果をalert()で表示.
  • G's」と「ACADEMY」の文字列をそれぞれ変数に入れ,つなげてalert()で表示.
  • js_practice.htmlに記述しよう!

動作確認

それぞれ「300」と「G'sACADEMY」が表示されれば OK!

補足

JavaScript における変数の定義には「const」「let」「var」の 3 種類が存在する.

基本的にはconstを使用し,どうしてもな場合にletを使用すれば良いだろう.

const hoge = 100;
const hoge = 200; // エラー(同じ名前で定義するのはNG)
hoge = 300; // エラー(異なる値を入れ直すのはNG)

// 後から上書きできる変数
let fuga = 1000;
let fuga = 2000; // エラー(同じ名前で定義するのはNG)
fuga = 3000; // OK(予期せぬ値が入ってしまう場合があるので注意)

// むかしあったやつ(使わないほうが良い)
var piyo = 99999;
var piyo = 88888; // OK(あぶない)
piyo = 77777; // OK(あぶない)