吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【JS入門】JavaScript言語についてと変数について

2018年1月11日 / category : javascript

JavaScriptをこれから学ぼうと思っている人に向けて、記事を書こうと思ったがなかなかキーボードが進まない。
何から話せば良いか難しい。

まず、そもそもJavaScriptっていう言語って何?
というと、Webページでマウスオーバー時に画像を変える処理をしたり・・・という具合になってしまいそうだが、あえてもう少し深いところから話すと、Ecma International(エクマ・インターナショナル)という団体が、ECMAScript(エクマスクリプト)という言語を策定し、それをブラウザエンジンに実装されたものがJavaScriptとなります。

ECMAScriptの歴史は長く、1997年6月に初版(ECMA-262)が発表されて、現在は2015年に採択された第6版(ECMA-262 第6版)になっています。
第6版のことを、「ECMAScript 6」「ES6」または「ES2015」などと呼んでいます。
ちなみに、第2版は1998年6月、第3版は1999年12月、第4版は放棄となっており、WebページにJavaScriptが多く使われ始めてきた頃には、第5.1版(2011年6月)になっていました。
そのため、2015年に採択されたES6とES5の比較という記事を多く目にします。

JavaScriptにもバージョンが存在します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/New_in_JavaScript#JavaScript_versions
これを見ると、最新のバージョンは1.8.5のようです。

では、ES6と対応ブラウザについて触れておきましょう。
現在Web制作の案件では、対応ブラウザはどうなっているでしょうか。私が担当する案件ではIE11以上が多くなってきました。
ただ、大手のコーポレートサイトなどはまだまだIE10を捨てきれないのが現状かもしれません。
IE11以上であれば、ES6は問題なく対応していると思って大丈夫・・・と言いたいところですが、アロー関数が使えないなどまだまだ厳しいかもしれません。

そうなると2015年に採択されたES6がまだ実務で使えない・・・というのが現状?
私の場合、JavaScriptの実装をES6を使用したTypeScriptで開発し、JavaScriptに出力する際にES5で出力するという方法で使用しています。
(TypeScriptの話は、別の機会にしたいと思います。)

それでは具体的にコードを見ながらJavaScriptの話しを進めていきます。
まず、下準備としてhtmlファイルを用意します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="./js/test.js"></script>
</body>
</html>

index.htmlと同階層にjsフォルダを作成し、その中にtest.jsファイルを生成します。
このtest.jsに次のようなコードを記述してみましょう。

test.js
var str = 'お腹減った';
console.log(str);

index.htmlをブラウザでアクセスし、コンドール画面を見ると「お腹減った」という文字列が出ていると思います。
2行の短いコードですが細かく見ていきます。

var str = 'お腹減った';

この1行では、strという文字列を変数名として、変数を宣言し「お腹減った」という文字列を変数strに代入しています。
変数という言葉が出てきたので、まずは変数について説明します。

変数とは

変数について聞かれた時によく例えられるのは「箱」です。
上のコードの場合、strという名前の箱(変数)を用意したことになります。箱(変数)を用意することを「宣言する」という表現をします。
変数を宣言しただけでは、その箱(変数)は空の状態です。上のコードでは「お腹減った」という文字列を代入(箱の中に入れる)していますので、箱(変数)の中には「お腹減った」という文字列が入った状態になります。

プログラムの世界では、次のように左辺と右辺を「=」で繋げた場合、右辺を左辺に代入するというプログラムになります。

左辺 = 右辺

上のコードでは、左辺が「var str」、右辺が「’お腹減った’」となります。
右辺の「’お腹減った’」は文字列、左辺の「str」は変数の名前(箱の名前)と先ほど解説しました。左辺にある「var」はなんでしょうか。

変数を宣言するときは、varというキーワードを頭につける必要があります。

var 変数名;

先ほども言いましたが、宣言しただけでは空の状態です。(箱の中に何も入っていない状態)
変数には値を代入することができ、代入する場合は「=」で代入します。

var 変数名 = 値;

この変数名には、命名規則があります。

変数名の命名規則

1.変数名は、必ずアルファベットもしくは、アンダーバー(_)かドル記号($)から始めなければいけません。

test.js
var str = 'お腹減った'; //OK
var _num = 100; //OK
var $boolean = true; //OK
var 0a = 'NG'; //NG 数字から始まっている

2.アンダーバー(_)とドル記号($)以外の記号は使用できない。

test.js
var #ng = 'NG'; //NG
var ng+ = 'NG'; //NG

3.日本語は使用できるが推奨できない。

test.js
var テキスト = 'テキストです。'; //OK

プログラムを日本語で書くことは一般的ではありませんので、推奨できません。

4.予約語を使用することができない。

test.js
var else = '予約語です。'; //NG 予約語のためNG
var function = '予約語です。'; //NG 予約語のためNG

言語が既に用意している単語を予約語と言います。その予約語を変数名として使用することはできません。
予約語の一覧はこちらで確認することができます。

5.全て大文字にすることは推奨できない。

test.js
var STR = 'テキスト'; //OK

NGではありませんが、一般的に全て大文字にする場合は、後ほど説明する定数を宣言する際に使われるため、変数名では避けたほうが良いでしょう。

以上が、変数名の命名規則になります。
続いて、変数の値について解説します。

変数の値について

最初に記述したサンプルコードの1行目、

var str = 'お腹減った';

こちらを例に解説します。
前にも説明した通り、strを変数名として変数を宣言し「お腹減った」の文字列を代入しています。
このコードを細かくすると、次のような2行になります。

test.js
var str; //str変数を宣言
str = 'お腹減った'; //str変数に「お腹減った」の文字列を代入

2行目の代入の処理を違う値に変更して繰り返してみます。

test.js
var str;
str = 'お腹減った';
str = 'お肉が食べたい'; //「お肉が食べたい」の文字列をstr変数に再度代入
console.log(str);

これを実行すると、コンソール画面に「お肉が食べたい」と表示されます。
最初の値「お腹減った」から「お肉が食べたい」に値が変更されたことになります。変数の値は後から変更することができます。

続いて次のようなコードはどうでしょうか。

test.js
var str;
str = 'お腹減った';
str = 1000;
console.log(str);

コンソール画面を見ると1000と出ています。前回のコードと値が変わっただけですので想像はできたかと思いますが、この代入は推奨されません。
なぜか、という解説を次の記事で解説したいと思います。