[JavaScript入門]変数と定数を使ってみよう

本記事では、JavaScriptで変数を使う方法とサンプルを作って実行するところまでを目的としています。

JavaScriptは基本的にはブラウザがあれば使うことができます。
なので、実行環境構築は不要で、ブラウザのみで学習していけます。

サーバーサイドのプログラムとして、Node.jsを使ってJavaScriptを動かすことも可能です。
今回はブラウザを使用して、プログラムを書いていきます。

実際にプログラムを書いてみましょう。

JavaScriptの変数(let)とは？
JavaScriptの定数(const)は?
let, constが使えないブラウザは？
1. letが使えるブラウザ・OSバージョン
2. constが使えるブラウザ・OSバージョン
JavaScriptで変数を使ってみよう
1. 解説
動作確認しよう
おわりに

JavaScriptの変数(let)とは？

変数についての基本的な説明はこちらを、ご覧ください。

【プログラミング入門】プログラミングの変数について【初心者向け】

本記事では、初心者の方に向けてプログラミングで使用する変数について、基礎的な内容を書いています。変数の概要と、実際にコードで書く場合のイメージ、変数名を付け方について注意点を記載しています。変数とは？一言でいうと、変数とは値を入れておく場所...

JavaScriptで変数を使うときはletを使用します。
letは2015年以降、ES6の仕様が決まってからブラウザに実装されて順次使えるようになっていったので、昔のブラウザで使う場合にはvarを使う必要があります。

変数名の命名は下記のルールがあります。

・変数名の先頭はアルファベットかアンダースコア (_)かドル記号 ($) から始まる。
・変数名の先頭に続く文字は数字 (0-9) も使える。
・JavaScriptは大文字・小文字を区別する。
・JavaScript1.5からはUnicodeに対応しているので、変数名として日本語も使える。

参考：MDN – 変数

JavaScriptの定数(const)は?

constは定数です。値が変わらないものはconstに入れます。
同じスコープ内でconstに入っている値を変えようとするとエラーになります。

constもES6の仕様策定後にブラウザに実装されていったので、昔のブラウザでは使えません。

let, constが使えないブラウザは？

現在の最新ブラウザなら使えるようですが、以下の場合は使えないようです。

letが使えるブラウザ・OSバージョン

参考にさせていただいたサイトから表を作ってみました。(ちょっと見方があっているのか不安ですが…)
4年も前のブラウザを対象にすることがない限りは、使って良さそうです。

ブラウザまたはOS	対応バージョン	対応バージョンリリース年
Chorme	バージョン49以上	2016年
FireFox	バージョン44以上	2016年
Opera	バージョン17以上
Safari	バージョン10以上
Edge	バージョン14以上
Android	Android5以上なら使える	2015年
iOS	SafariとChormeでiOS11以上は使える	2017年

参考URL:

let | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

let - JavaScript | MDN

The let declaration declares a block-scoped local variable, optionally initializing it to a value.

constが使えるブラウザ・OSバージョン

同じように参考にさせていただいたサイトから表を作ってみました。
こちらも5年前のブラウザを対象にすることがない限りは、使えそうです。

ブラウザまたはOS	対応バージョン	対応バージョンリリース年
Chorme	バージョン21以上
FireFox	バージョン36以上
Opera	バージョン9以上
Safari	バージョン5.1以上
Edge	バージョン12以上
Android	Android5以上なら使える	2015年
iOS	SafariとChormeでiOS10以上は使える	2016年

参考URL:

const | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

const - JavaScript | MDN

The const declaration creates block-scoped constants, much like variables declared using the let keyword. The value of a constant can't be changed through rea...

JavaScriptで変数を使ってみよう

それでは実際に変数と定数を使用して、処理を書いてみましょう。
下記ファイルをhello.htmlという名前で作成した後に保存してください。

<html>
  <head>
    <title>hello javascript</title>
    <script>
      window.onload = function() {
        const helloText = "hello, world";
        let a = 10;
        let b = 20;

        alert(helloText);
        alert("aとbを足すと.. " + (a + b));
      }
    </script>
  </head>
  <body>
  </body>
</html>

解説

htmlファイルのscriptタグにjavascriptのコードを埋め込みました。
window.onloadはユーザーがページを開いたときに処理することができるイベントです。

このように書いて、無名関数に処理を書くと書いた処理をページを開いたときに行ってくれます。

window.onload = function() {
  // ... ページを開いたときに行いたい処理 ...
}

今回行っている処理は下記になります。
定数(const)をhelloTextという名前で定義して、”hello, world”という文字列を設定しています。
その後に変数(let)をaとbという名前で定義して、それぞれ10と20を格納しています。

alertは画面にアラート形式でメッセージを表示してくれる関数です。
引数として渡した内容を画面に表示してくれます。

最初にhelloTextの定数に入れた内容を表示して、次にa + bの結果を表示するようにしてみました。

動作確認しよう

作ったファイル(hello.html)をダブルクリックなどで開きます。
.htmlの拡張子がついているので、ブラウザと関連づけられてブラウザで開くと思います。

下記のように「hello, world」が表示された後に、OKボタンを押すとa + bの結果が表示されることが確認できました。

おわりに

今回はJavaScriptの変数と定数を見ていきました。
varを使うことは、ほとんど無くなってきたように思いますが、もし使う場合は2015年以前リリースされたブラウザの場合は気をつけたほうがよさそうです。

JavaScriptは開発環境を作らずにブラウザのみでも学習していけるので、プログラミングを手軽に始めるのにちょうどいいかもしれません。
今回のサンプルもエディタとブラウザで簡単にできましたね。是非、いろいろ調べて作成してみてください。