#概要
この記事では、JavaScriptの変数・定数の定義と文字列の連結など、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。
#目次
#そもそもJavaScriptとは
JavaScriptとは、プログラミング言語の一つであり、フロントエンド・サーバーサイド両方の開発が可能です。もともと、フロントエンドの開発が主でしたが、現在はサーバー側でも開発できるソフトが存在するため、JavaScriptだけでフロントもサーバーも開発できるようになりました。
この辺の歴史には紆余曲折があるのですが、ここでは割愛します。
JavaScriptを用いることで、WEBページの動作や、WEBアプリ・スマホアプリ・ゲームの開発ができます。あのメルカリもJavaScriptを用いて作られたサービスです。
最も一般的な使われ方は、WEBページに動きをつけることです。いくつかの画像をスライドさせて表示したり、バナー広告など表示するサイドバーを出し入れしたりできます。
Reactなどのフレームワークが豊富で、これらのフレームワークを使うことで、時間を短縮して作りたいモノを完成させることができます。
#文字の出力
「console.log()」を用いるとコンソールに文字を出力することができます。
()の中に出力したい文字を書きます。文字列を出力する場合は、**‘ (シングルクォーテーション)もしくは” (ダブルクォーテーション)**で囲まなくてはいけません。数値を出力する場合は、クォーテーションで囲む必要はありません。
また、数値は足し算や引き算などの計算もすることができます。()の中に計算式を書くとコンソールには計算結果が表示されます。
文末の「; (セミコロン)」はなくてもいいらしいのですが、書いておいた方がコードの可読性は上がりますよね。
console.log('Hello World');
//Hello World
console.log("Hello World");
///Hello World
console.log(10);
//10
console.log(3 + 2);
//5
//で書いている部分は、コメントアウトされます。//に続く部分は、コメントとなり、プログラムは無視され実行されません。
コードの説明や、メモする際に使います。今回は、コンソールへの出力結果をコメントアウトの部分に書いています。
演算子は、「+」の他に以下のものが使えます。
-
- : 引き算
-
- : 掛け算
- / : 割り算
- % : 割り算の余り
#定数と変数
定数・変数とは、値を入れることができる箱のようなものです。
定数や変数に入れた値は、定数や変数の名前で取り出すことができます。
定数・変数には3種類あります。
- 定数 : const
- 変数 : let
- 変数 : var
それぞれ特徴が違うので、みていきましょう。
##定数 const
定数はconst 定数 = 値と書くことで定義できます。
「const」は変数を定義するという宣言で、「=」は左辺を右辺に代入するという意味です。
文末の；を忘れないようにしましょう。
値が代入された定数を出力すると、コンソールには代入された値が出力されます。定数はクォーテーションで囲みません。
const number = 7;
console.log(number);
//出力結果 : 7
constは一度代入した値を変更することができません。より専門的にいうと「再定義できないし、再代入できない」と言えます。代入と再定義については、次の変数のところで説明します。
代入された値を変更できないことはデメリットのように感じられますが、予期せぬ値の変更を防ぐことができるので安全なコードを書くことができます。
##変数 let
let 変数 = 値と書くことで、変数letを定義することができます。
let number = 7;
console.log(number);
//出力結果 : 7
letは、一度代入した値を更新することができます。より専門的にいうと、「再定義はできないが、再代入はできる」と言えます。
では、letで定義した変数を更新してみましょう。
一度定義した変数は、変数 = 新しい値とすることで更新することができます。letは必要ありません。
再定義したい場合は、もう一度let 変数 = 値とすればい良いのですが、letでは、再定義することができないので、エラーになります。
let number = 7;
console.log(number);
//出力結果 : 7
//変数を更新
number = 10;
console.log(number);
//出力結果 : 10
//変数を再定義
let number = 100;
console.log(number);
//出力結果 : エラー
letではこのように、変数の値を再代入することができます。constでこれを行おうとするとエラーになります。
##変数 var
var 変数 = 値と書くことで、変数varを定義することができます。
var number = 7;
console.log(number);
//出力結果 : 7
varは、一度代入した値を更新することができるのに加え、同じ変数名で定義することもできます。より専門的にいうと、「再定義もできるし、再代入もできる」と言えます。
var number = 7;
console.log(number);
//出力結果 : 7
//変数を更新
number = 10;
console.log(number);
//出力結果 : 10
//変数を再定義
var number = 100;
console.log(number);
//出力結果 : 100
このようにvarは、letではできなかった再定義ができるようになります。
実はこの再定義できるというのは、バグの原因になりうるので最近はほとんど使われていないようです。
varを用いると容易に書き換えられてしまうので、複数人で開発を進める際に他の人がある変数名を使っていることを知らずに、それと同じ変数名を使うということが起こりうるからです。
このような理由からも、varはあまり使うべきではありません。
##変数の更新でよく使う表現
変数を更新する際には、既に定義している変数を右辺に用いて更新することもできます。
let number = 5;
console.log(number);
//出力結果 : 5
//numberに1を足してnumberを更新
number = number + 1;
console.log(number);
//出力結果 : 6
number = number + 1というような処理はよく使われます。
このような、変数を更新する際によく使われる表現には、省略した書き方が存在します。
以下のように省略して書くことができます。
| 標準 | 省略形 | 1だけ変化させる場合の省略形 |
|---|---|---|
| x = x + 1 | x += 1 | x++ |
| x = x – 1 | x -= 1 | x-- |
| x = x * 1 | x *= 1 | - |
| x = x / 1 | x /= 1 | - |
| x = x %1 | x %= 1 | - |
1だけ値を足したり引いたりする処理は、非常によく使われるので、特別な省略の仕方があります。
#文字列の連結
+は数値の計算だけではなく、文字列同士を連結することもできます。
console.log('4' + '6');
//出力結果 : 46
console.log(4 + 6);
//出力結果 : 10
##テンプレートリテラル
「+」を用いずに文字列や定数・変数の値を連結する方法が「テンプレートリテラル」です。テンプレートリテラルを用いると定数や変数を文字列の中に埋め込むことができます。
文字列の中で「${定数}」とすることで文字列の中に定数や変数を埋め込み、連結することできます。複数の変数や定数を埋め込むことも可能です。
注意点としては文字列全体は、** (バッククォーテーション)**で囲まなくてはなりません。今までの’ ”`ではエラーとなってしまうので気を付けましょう。
const name = 'Taichi';
console.log(`My name is ${name}.`);
//出力結果 : My name is Taichi.
#まとめ
今回は、JavaScriptの基本中の基本である変数と定数を中心にまとめてみました。
実は、浅いところしか説明できていないので、もっと深い話はまた別の機会にまとめてみたいの思います。
読んでいただき、ありがとうございました。では。