みなさんこんにちは。
JavaScriptの第二回目の講座です。
プログラミング言語では変数というものを必ず使います。また、使い方というものも決まっていて、そのルールというものを覚える必要があります。変数はプログラミング初心者の方が躓きやすいポイントです。変数はしっかりと理解しておかないと、あとから苦労します。
今回はJavaScriptにおける変数について徹底的に解説していきます。
これを読めば、あなたも変数についてしっかりと理解できるようになります。
- JavaScriptの基本を学びたい方
- JavaScriptの変数について学びたい方
- JavaScriptの基本がわからない方
JavaScriptの変数
変数とは？
まずは変数について解説していきます。
プログラミングにおける変数というのは、値を格納するための箱というイメージです。皆さんが中学校や高校でやる数学でいうと、未知数Xのような扱いとなります。
なぜ、変数を使うのか？その理由は以下の二つです。
- 数字や文字列などの値を代入した変数を使いまわすことが出来る。
- 値を変更したいときに一か所だけ変更するだけでよい。
この二つが主な利点です。
次のような例を見てみましょう。
let num = 10;
print("price1 :"+(800*num));
print("price2 : "+(3000*num));
print("price3 *"+(4000*num));$ node example.js
//実行結果
price1 : 8000
price2 : 30000
price3 : 40000実行結果は上のようになります。このとき、10という数字を変更したい、といった状況になったとき、ソースコードのように変数に代入する形にしておけば一か所だけを修正すればよい、ということになります。
もし、10という数字をそのまま使っていたら、三か所も修正する羽目になるのです。よって、変数というのはかなり重要なのです。
変数を宣言(定義)する
では、さっそく変数を使えるようにしていきます。
まずは変数を定義する必要があります。基本的に変数を宣言するのは最初に行うことが多いです。このような変数を定義することを初期化ともいいます。
const 変数名 = 値;
変数の宣言はこのように行います。変数名を左、値を右にすることで定義できます。
そして、JavaScriptの変数を定義するとき、変数の前に置く予約語があります。その予約語というが下の三つになります。予約語というのはJavaScriptのシステムで意味を持つキーワードになります。
- const
- let
- var
const 変数の宣言と代入
const とは何か？
まず最初にconstについて解説していきます。constは変数を宣言する予約語の一つです。
constで変数を定義したとき、同時に値を代入して初期化するのがルールです。このとき、定義した変数は再度値を代入することができない仕組みになっています。
よって、constで定義した変数はあたかも定数のように扱うことができるのです。
const prog = "プログラミング";
const bookTitle = "金持ち父さん貧乏父さん";
const animeTitle = "鬼滅の刃";constでエラーになる注意点
さきほど、constで宣言する変数について解説しました。ここでは、よくconstで初心者の方がエラーを起こす注意点を解説していきます。
constは基本的に「変数を定数として、プログラムの中で扱っていきたい」というところで使います。ですので、値を書き換えることができない仕様になっています。
なので、一度宣言した変数の値を変更した場合、エラーとなります。
次のような例がエラーとなる例です。
const animeTitle = "新世紀エヴァンゲリオン";
animeTitle = "鬼滅の刃";$ node error.js
//実行結果
TypeError: invalid assignment to const 'animeTitle'
実行するとわかりますが、エラーとなるはずです。constは基本的に宣言した時に値を代入してその後の値は不変のまま、というのがルールです。
再代入を試みると、上のようなエラーになるので注意してください。
const で変数を宣言しよう
では、実際にconstの例を見てみましょう。
const pi = 3.14 //円周率
const naiper = 2.7182 //数学 ネイピア数
const g = 9.8//重力加速度
const max=1000;//最大に設定したい数
const name="鬼舞辻無惨";//固有名詞
このように円周率やネイピア数、重力加速度といった定数と呼ばれる数字、最大の数字を定義する、固有名詞のような変わることのない値を代入するときなどに使うというのが基本的なconstの利用例になります。
const まとめ
では、constの事項をまとめます。
- constで定義した変数は値を変更することができない
- プログラムの中で、変更したくない値を格納したいときに便利
- 値が書き換わることが起こりえないので、開発やデバックがしやすい
let 変数の定義と代入
letとは？
続いて、変数宣言の二つ目のletについて解説していきます。
letで定義した変数はconstとは違い、何回でも再代入をしてもいい変数になります。値を何回も書き換える可能性がある、といった変数を宣言したい場合によく使われる予約語になります。
値を何回も代入することが可能、という部分以外は、基本的にconstと使い方は一緒になります。
let で宣言と初期化をしてみよう
では実際にletの例を見ていきましょう。
let num = 101;
let str = "株式投資";
このあたりはconstと違いはありません。
let primeNumber = 2;
primeNumber=11;
primeNumber=13;
let finProduct = "個別株";
finProduct = "外国株";
finProduct = "投資信託";
finProduct = "上場投資信託";
console.log(primeNumber);
console.log(finProduct);
上の例のように、一度宣言した変数に値を再代入することが出来ます。実行してみてもエラーはでません。これがletの例となります。
値を変数に代入するとき、値がどんどん上書きされていきます。この場合、最後に変数に代入されている値は以下のようになります。
$ node let2.js
//実行結果
13
上場投資信託実行結果のとおり、それぞれの変数に最後に格納されている値は最後に代入した値になります。
これはとても重要なので、しっかりと覚えておきましょう！
let 変数の代入
先ほどはletの基本的な扱い方を解説しました。
次はletのちょっとした使い方のコツを解説していきます。
例を見てみましょう。
let animeTitle;
let year;
animeTilte = "鬼滅の刃";
year=2021;先ほどの例と少し違いがあります。どこかわかるでしょうか？
letで変数を宣言したときに値を代入していないことに気づいたでしょう。
letは変数を宣言した時と同時に初期化をする必要がありません。例のように、変数を宣言した後に値を代入してもいいのです。
これは、constではできないことです。constは必ず、変数の宣言と初期化を同時に行わなければなりません。でないと、エラーが起こります。
letのまとめ
letのまとめに入ります。
- letで宣言した変数は再代入が出来る
- 変数の宣言と初期化は同時に行わなくてもよい
var 変数の定義と代入
varとは何か？
最後に三つ目の変数に関する予約語であるvarについて解説していきます。
varもletと同じく、値を再代入することのできる予約語です。基本的にはletと同じように使っていく予約語になっています。
また、varは昔からあるJavaScriptの変数に関する予約語です。なので、過去に開発された比較的古いシステムで使われていることが多いのです。逆に、constやletといった予約語は最近追加された新しい機能なのです。
varで変数を定義しよう
では、実際に変数を定義してみよう。
var num = 23;
var company = "株式会社";
var cashless;
cashless = "クレジットカード";基本的にはletと一緒の使い方という認識でオッケーです。
varに関する注意点
varという予約語があるのにもかかわらず、letやconstといった機能が何故追加されたのか疑問に思った方もいると思います。なぜ、この二つが追加されたのかというと、varには少々考えるべき問題があるからです。
例を見てみましょう。
var x = 11;
var x = 13;
var str = "varの問題点";
var str = "変数の再定義問題";
console.log(x);
console.log(str);このように、同じ名前の変数を定義できてしまう、ということがvarでは起こりえます。さらに、これを実行してみましょう。
$ node var.js
//実行結果
13
変数の再定義問題このように、同じ変数を定義した場合、最後に代入した値が反映されます。このような同じへ数を定義して使ってしまうのは後から問題が起こります。
このような問題を解消するべく、letやcosntが導入されたのです。
letやconstで同じ変数名の変数を定義すると、エラーが起こります。
このような問題から、今のJavaScriptでは変数を定義するときはvarを使うのではなく、新しく導入されたlet、constを使いましょう。
varのまとめ
ではvarのまとめに入りましょう。
- 昔からある変数を定義するための予約語
- 同じ変数名を定義することができてしまう
- 今のJavaScriptではvarを使うことは極力さけて、letやconstを使う
全体のまとめ
では、今回のまとめに入りましょう。
- constの機能と定義・初期化のやりかた
- letの機能と定義・初期化のやりかた
- varの機能と定義・初期化のやりかた
- varの問題点
今回はおもに変数について学びました。変数はすべての基本になります。しっかりと頭に入れておいてください。
今回はここまでとなります。お疲れさまでした。
参考文献
