JavaScript

【超初心者 JavaScript】変数の使い方と解説

【超初心者 JavaScript】変数の使い方と解説

変数とは何か

変数とは数値や文字列に名前を付けて分かりやすくするものです。

例えば全く同じ缶ジュースが二本あったとして、一本だけ開けるという処理をプログラミングしたい時に、名前を付けていた方が管理出来て分かりやすいですよね?

プログラミングにおいて、この変数をかなり使う事になるので必ず覚えないといけません。

Naza
例えが下手

 

 

変数の宣言

変数を使う時の宣言方法には大きく分けて3つあります。

・var
・let
・const


この3つの使い分けは以下の様になります。

ポイント

var:値の再代入が可能 同じ変数名での再定義が可能
let:値の再代入が可能 同じ変数名での再定義が不可能
const:値の再代入が不可能 同じ変数名での再定義が不可能

 

Naza
まったく意味が分からん

 

全然オッケーです。色々試していくうちに慣れてくるので、今のところは微妙な違いがあるのかくらいの認識で大丈夫です。


変数の定義

変数の定義の流れは3ステップで行います。

① var,let,const の中から1つ選んで宣言する

まずは宣言方法を選びましょう。

用途によって使い分けた方が良いのですが、どれを使って良いか分からない人は var を使うのは控えましょう。

var は自由度が高すぎて、予期せぬエラーが発生する可能性があるのでオススメしません。


基本的に const でエラーが発生する場合は let で宣言する!といった感覚で大丈夫です。

 

②変数の名前の自分で決める

変数の名前は自分で決めることが出来ますが、いくつかルールがあります。

注意

NG例
数字から始まる名前:1name など
全部数字で決める名前:12345 など
既に存在している名前:var, let, const など


これらのルールを守った上で名前を決めましょう。

③使いたい値を代入する

変数の名前を決めた後は、代入する値を設定します。

これは、数値や文字列や計算式を代入する事が可能です。

ポイント

数値:1 など
文字列:"ロボット" など
計算式:1+2 など

 

変数の定義の仕方は、この様な流れになります。

 

変数を使う

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

Webブラウザで文字や数値を表示させる方法についてはこちらで解説しています。

【超初心者 JavaScript】Webブラウザで文字や数値を表示させる
【超初心者 JavaScript】Webブラウザで文字や数値を表示させる

目次1 HTMLの枠組みにJavaScriptで記入する方法2 JavaScriptで数字や文字を書いてみる3 まとめ HTMLの枠組みにJavaScriptで記入する方法   HTMLを使 ...

続きを見る

 

変数で数値を代入

まずは変数を定義します。

let eye = 1;
document.write( eye );

①宣言をします。ここでは let としています。

②変数の名前を決めます。 eye という名前を付けました。

③値を代入します。 = 1 と記入して、 eye という名前にという数値を入れます。

そしたら document.write() ;の中に定義した eye を記入して実行します。

実行結果

1


これで変数を使えたと思います。

文字列を代入

続いて、変数に文字列を代入してみます。

文字列はダブルクォーテーション"又はシングルクォーテーション'で囲みます。

let name = "Naza";
document.write( name );

let で宣言。

name という名前をつける。

"Naza"という文字を代入する。

 

実行結果

Naza


変数で文字列も代入出来ましたね。

 

計算式を代入

変数に計算式も代入する事が出来ます。便利ですね。

let eyes = 1 + 1;
document.write( eyes );

let で宣言。

eyes という名前を付ける。

1 + 1 という計算式を代入する。

 

実行結果

2


計算もやってくれます。

 

 

変数で定義した数値で計算式を代入

ここまでやった変数の定義で応用してみます。

let eye = 1;
let eyes = eye + eye;
document.write( eyes );


eye という数値を定義します。

eyes eye を使った計算式を代入します。

 

実行結果

2


難しい事をやっている様に見えるかもしれませんが、1+1=2という式に名前を付けただけですね。

名前や数値を入れ替えて色々応用してみればすぐに慣れるはずです!


まとめ

今回は変数の使い方について解説しました。

変数はとても大事なので、早めに使いこなしたいものです!

最後まで読んでいただきありがとうございます。

以上。

-JavaScript

© 2021 Nazaブログ