☰
kazugramming Let's program together

JavaScript〜変数〜

Javascript

こんにちはkazutoです。今回はJavaScriptの変数について解説していきます。変数は簡単に説明するとただの箱です。

変数とは❓

プログラミング学習を始めたら、どの言語でも必ず変数という概念が出てきます。しかし変数自体の意味は変わらないので覚えてしまえば、次あなたが学習したい言語の取得が楽になります。

変数とは、値を格納する箱です。予め決まっている値などを格納しておきたい時に使います。

  • kazutoという名前
  • 消費税10%
  • 今日の日付

上記などが上がると思います。プログラムを書いていく中で処理などを保持しておきたい時などにも変数で留めておく場合もあります。

なので、

変数＝決まったものを格納しないといけないというわけではないです。このような考えだと、「なぜこの値を変数に定義をするの❓状態」に陥ってしまいます。したがって、変数を定義する際は、ちゃんと考えて定義しましょう。

変数の宣言方法

それでは実際に変数を定義してみましょう。

Javascriptの変数定義には変数名の前に「変数ですよ‼️」という証拠を見せる必要があります。以下のような事を、変数宣言といいます。

var 変数名　= 値;
let 変数名　= 値;
const 変数名 =値;

では公式にしたがって変数を定義してみましょう。

var name = "kazuto";
let age = 10;
const price=20000;

Rubyの変数定義とは違い、Javascriptの場合、

  • var
  • let
  • const

と変数の前に上記を書く必要があります。なお、再代入をする際には変数名だけ書けば良いです。(constは再代入はできないです。)

var name = "kazuto";
let age= 10;
name= "jun"
age = 20
  • var
  • let

を記述をするのは変数宣言(最初)した時です。再代入をする際に記述してしまうとエラーが出てしまいますので覚えておきましょう。
なおvarを使った変数宣言は古い記述の仕方なので基本はletを使いましょう。

constは再代入はできないです。理由は、定数だからです。続いて定数について解説していきます。

定数とは❓

定数とは、値の再代入を禁止する変数宣言の手法です。正直、他の変数宣言とあまり変わらないです。
値の再代入ができないというポイント押さえていただければ問題は無いです。

定数を使う理由としては

  • letと使い分けて可読性を上げる
  • 変数の重複を防ぐ

などです。

JavaScriptでは、多くの変数が必要になってきます。やはり変数が多いほど管理をするのが難しくなってきます。

その中で、値が動かない変数を定数として変数宣言をしてあげれば、コードの可読性が向上します。

なのでconstの特性を積極的に活用しましょう。

具体的なシチュエーションとしては

  • 消費税
  • 日にち
  • 円周率などの公式

などが上がります。

問題:消費税を求めよう

最後に問題です。
1コ１００円（税抜き）のりんごに消費税を追加してみよう。

ヒント

  • 消費税=1.1
  • 値が動かないものを代入をするのは❓
  • 変数の前に何を記述するか❓

計算式があるので少し大変ですが、少し自分で考えてみましょう
「JavaScript　四則演算」とググれば出てくるのでわからなかったらググりましょう。

解答

let fruit= "りんご";
let  price= 100
const consumptionTax=1.1;
const applePrice= Math.floor( price*consumptionTax)
console.log(`${fruit}は１個${applePrice}円です`)
りんごは１個１１０です

以上が解答になります。少し応用してみたので、みなさんが気になりそうな所を解説していきます。

const consumptionTax=1.1;

消費税(10%)をconsumptionTaxという定数に代入しています。
消費税はいきなり増税、減税などは起こらないので定数にしました。

consumptionTaxとTとしてつなげる書き方をキャメルケースという記述方法になります。JavaScriptではキャメルケースでメソッドや変数などが記述されています。なのでこの機会で覚えましょう。

const applePrice= Math.floor( price*consumptionTax)

applePriceにりんご(税込み)の価格を代入しています。
*は乗算を意味します。
Math.floorは、()の中の数を整数に直しています。

console.log(`${fruit}は１個${applePrice}円です`)

console.log()で出力しています。
“はテンプレートリテラルという記述方法です。定数や変数を埋め込んだりする際に使用します。
${}とする事テンプレートリテラル内で定数や変数を埋め込ます。
Rubyでいう変数展開みたいなものです。

以上が解答になります。

まとめ：Javascript~変数~

今回はJavascriptの変数について解説しました。
変数は他のプログラミング言語でも出てくるので覚えましょう。
ポイントは、

  • 変数
  • 定数
  • 変数宣言
  • 定数は代入できない

変数、定数の使い分けは悩み場面があると思いますが徐々に慣れてきますので積極的に変数定義していきましょう。

HOME >  Javascript >  JavaScript〜変数〜