Web Design

【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

2021年7月11日

JavaScriptの入力
  • JavaScriptの入力について知りたい
  • 「変数について、使い方、種類を知りたい」

この記事はそんな方へ向けて書いています。

 この記事でわかること

JavaScriptの変数
変数の使い方
変数の3つの種類

 本記事の信頼性

2021年6月からWebデザインの職業訓練校で学習中(6ヶ月コース)
使用テキスト:HTML&CSS、JavaScriptのきほんのきほん
ブログ歴:2019年1月にWordPressで当ブログを開設(月間最高62,000PV、52,000円)

本記事では、職業訓練校で学んだJavaScriptの入力についてまとめました。

この記事を読むことで、JavaScriptの変数について、使い方、種類がわかります。

なおJavaScriptの出力については、【JavaScriptの出力】アラート、コンソールの使い方の基礎で解説しています。

こーいち
変数は重要事項です。

【JavaScriptの入力】変数の使い方、変数の3つの種類を解説

JavaScript基礎文法、入力

変数=データを格納しておく箱のようなものです。

変数について

さまざまな値を保持しておくJavaScriptの機能です。

記述例は、以下のとおり。

const 変数名 = ‘データ’;

=は、算数のイコールとは違う意味です。
=は「右側のものを左側の変数名に代入する」という意味。

変数を作成することを「定義する」という言い方をする場合もあります。

 一例を解説

index.html

<script>
 const test = 'おはようございます。';
 console.log(test);
</script>

//出力結果:おはようございます。

変数testを作り、値(データ=「おはようございます。」)を格納(代入)。

変数を出力するときは、シングルクォートもダブルクォートも不要。
開発者ツールに、console.logで変数testを出力できます。

 変数名のつけ方のルール

1文字目はアルファベットかアンダースコア(_)、ドル記号($)
2文字目以降は、上記に加えて数字も使える
大文字、小文字は利用できるが、区別される(たとえば「blog」と「Blog」は別の変数になる)

こーいち
注意点は、日本語などは利用できないことです。

変数の使い方の一例

文章中の「共通部分」をデータとして代入しておくと、合理的に作業ができます。

たとえば、下記敬称「さん」を「さま」に直すとき、3箇所の「さん」を「さま」に直します。

山田さん → 山田さま
林田さん → 林田さま
田島さん → 田島さま

もし1,000人分のデータを修正する場合、1,000箇所を直すことになります。

ただし、敬称「さん」を変数keiで書いていた場合は1箇所直すだけ。

たとえば、「さん」を「さま」に直したいなら変数keiを「さま」に変えるだけなので、1箇所だけで済むのです。

const kei = 'さん'; //ここを「さま」に直すだけ

'山田' + kei;
'林田' + kei;
'田島' + kei;

10,000人分を直す場合でも、一箇所、修正するだけです。

 記述例

index.html

<script>
 //敬称も含めて名前を出力する
 console.log('山田さん')
 console.log('林田さん')
 console.log('田島さん')

 //その後、敬称を直そうとすると、すべての敬称を変更する必要がある
 //変数keiを作成し、文字列「さん」を代入する
 const kei = 'さん';

 //敬称を、変数keiを使って、名前と変数keiを結合して出力
 console.log('山田' + kei);
 console.log('林田' + kei);
 console.log('田島' + kei);

 //敬称を直す場合、変数keiに代入している「さん」を直すだけでOK
</script>

クオテーション記号が必要な文字列と、必要ない数式、変数などをつなげるには「+」を使います。

例:console.log('山田' + kei);

加算演算子(+)が理解できませんでした。
計算するのか、加算するのか、よくわかりません。
下記記事でようやく「文字列、計算の+」の考え方が理解できました。
» 参考:文字列を連結する

こーいち
「=」が数学と同じ意味ではないことに、慣れないうちは違和感ですね。

変数の3つの種類について

 変数の定義方法3つ

var 変数名
let 変数名
const 変数名

【var】
Variable(可変という意味)の略称。
従来からあります(2010年以前の主流)。
変数の有効範囲が広いので、変数名が被らないよう注意が必要です。

varについては覚えなくてもOK。
なぜなら、3つの変数の中でもっとも古いvarを使うべきケースはほぼ無いから。

ただ、ネット記事にはまだvarを使ったものが多いため、それらの記事を読む場合はvarの理解が必要です。

【let】
比較的、最近追加された方法。
有効範囲が狭いため、変数名が被りにくく使い勝手が良いです。

プログラムを使っていて変わる可能性があるものに使います。

たとえば、ゲームのクリック加算など。

【const】
有効範囲が狭く、変更不可の変数です。

もっとも使いやすい変数です。
なぜなら、使い方が限られているから。

変数は使い方が限定されているほうが使いやすいです。
逆に、使い方が自由なほど予期せぬ問題が増えたります。

constは定数で、追記や変更もできないです。

こーいち
基本はconstで作っておいて、エラーや不具合に気づいたらletに切り替えるのが良いですね。

» 参考:JavaScriptで書く「var,let,const」の違いと使い分け方法

変数の使い方

 変数の有効範囲(スコープという)が狭い順に使います。

① 変数の値を変更する必要がない → const
② 変更や追記の必要がある → let
③ スコープをプログラム全域(グローバル変数)にする必要がある → var

ゆえに、「const → let → var」の順番で使えばOKです。

メモ:ローカル変数

関数の中でつくった変数のこと。
ローカル変数は、関数のブロック内でのみ有効です。

関数については、JavaScriptの関数の書き方と使い方【引数と戻り値について】で詳しく解説しています。

変数の追記についての記述例

加算代入演算子(+=)を使います。
以下のように省略して書けます。

A = A + B

A += B

記述例は、以下のとおり。

index.html

<script>
 let mozi = '<p>'
 mozi += 'おはようございます。';
 mozi += '<p>'
 console.log(mozi);
</script>

【解説】
letで変数moziを作り、文字列「<p>」を代入。
変数moziに、文字列「おはようございます。」を+=で追記。
さらに変数moziに、文字列「</p>」を+=追記。
開発者ツールには「<p>おはようございます。<p>」が出力される。

こーいち
変数letにしたのは、変数moziの値が変わるからですね。

» 参考:JavaScriptによる加算代入(+=)について現役エンジニアが解説【初心者向け】

変数を計算するさまざまな方法

再代入について

answer = answer +100 ;

上記は次のように書けます。

answer += 100 ;

「=」の前に「+」を書くことで、「今ある変数に計算をして、同じ変数に再代入する」という動作を行えます。

それぞれの演算で可能です。

answer += 100 ; //加算
answer ー= 100 ; //減算
answer ✴︎= 100 ; //乗算
answer / = 100 ; //徐算

インクリメントデクリメント

加算代入演算子「answer += 100 ;」は、もっと簡単に書くことができます。

answer ++;

これを「インクリメント(Increment=増加)」といいます。
逆に1ずつ減算する「デクリメント(Decrement)」もあります。

answer ーー;

なお、乗算と除算はありません。
なぜなら、計算しても意味がないから。

インクリメント、デクリメントは「for構文」でよく使われます。
»【JavaScript】繰り返しの処理を行うfor構文の書き方

まとめ:JavaScriptの変数の使い方に慣れよう

JavaScriptの入力

変数はさまざまな場面で活用されます。
変数を使うと、文字列や数値をプログラムの中で繰り返して使えるので便利です。

変数の種類はとっつきにくいですが、使い方をマスターして損はありません。
使う順番と特性は使っているうちに慣れます。

なおJavaScriptの初歩的な知識「数値や文字列」については、下記記事で解説しています。

JavaScriptの数値
【JavaScriptの数値】概要から様々な計算例をまとめました
JavaScript文字列
【JavaScriptの文字列】概要から連結・結合をまとめました
こーいち
変数を実際に使ってみることで慣れていきましょう。

こーいちより

P.S. JavaScriptの変数の使い方に慣れよう。

関連記事【JavaScript入門】初心者向けに基礎から文法をまとめました
関連記事【未経験】Webデザインの独学は難しい3つの理由【解決策あり】

-Web Design

Copyright © Blog Chronicle , All Rights Reserved.