広告 Write

【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」の違いと使い分け方法

変数の使い方

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

  1. 変数の値を変更する必要がない → const
  2. 変更や追記の必要がある → let
  3. スコープをプログラム全域（グローバル変数）にする必要がある → 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の初歩的な知識「数値や文字列」については、下記記事で解説しています。

以上です。

P.S. JavaScriptの変数を実際に使ってみることで慣れていきましょう。

関連記事【JavaScript入門】初心者向けに「基礎文法」を完全まとめ
関連記事【職業訓練Webデザイン】40代、未経験でも慣れてきた3つの理由

-Write