本記事では、JavaScriptで変数を使う方法とサンプルを作って実行するところまでを目的としています。
JavaScriptは基本的にはブラウザがあれば使うことができます。
なので、実行環境構築は不要で、ブラウザのみで学習していけます。
サーバーサイドのプログラムとして、Node.jsを使ってJavaScriptを動かすことも可能です。
今回はブラウザを使用して、プログラムを書いていきます。
実際にプログラムを書いてみましょう。
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年 |
constが使えるブラウザ・OSバージョン
同じように参考にさせていただいたサイトから表を作ってみました。
こちらも5年前のブラウザを対象にすることがない限りは、使えそうです。
| ブラウザまたはOS | 対応バージョン | 対応バージョンリリース年 |
|---|---|---|
| Chorme | バージョン21以上 | |
| FireFox | バージョン36以上 | |
| Opera | バージョン9以上 | |
| Safari | バージョン5.1以上 | |
| Edge | バージョン12以上 | |
| Android | Android5以上なら使える | 2015年 |
| iOS | SafariとChormeでiOS10以上は使える | 2016年 |
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は開発環境を作らずにブラウザのみでも学習していけるので、プログラミングを手軽に始めるのにちょうどいいかもしれません。
今回のサンプルもエディタとブラウザで簡単にできましたね。是非、いろいろ調べて作成してみてください。
コメント