読者です 読者をやめる 読者になる 読者になる

JavaScript勉強会

JavaScriptの学習日記

3.2 入力内容に応じて動作を変更する 《変数》 【読書メモ】

JavaScript 読書メモ

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第3章を読んでみます。

 

jsstudy.hatenablog.com

 

今日はJavaScriptの変数について学びます。

「変数」(variable)は、データを入れておく「箱」「容器」みたいなものです。

 

変数 (プログラミング) - Wikipedia

プログラミングにおいて、変数(へんすう、variable)とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。

 

変数とは

(p.71)

ある行で得られたデータ――今回の実習でいえばpromptメソッドのリターンの内容――を次の行以降でも使いたい場合は、そのデータを保存しておく必要があります。

その、保存のために使うのが「変数」です。

 

変数の使い方にはパターンがあります。

1) 変数を「定義する

2) 変数にデータを「代入する

3-a) 変数からデータを「読み出す

3-b) 変数のデータを「書き換える

 

1) 変数を「定義する」

何かデータを保存したいときは、まず変数を定義します。

var answer

varに続けて半角スペース、その後に変数の名前(変数名)を書けば、その変数名を持つ変数が定義できます。

このコードの場合、「answerという名前の変数」を定義していることになります。

 

変数名のつけ方

  1. 文字か、アンダースコア(_)、ダラーマーク($)、数字がしよう可能。その他の記号(「-」「=」など)は使えない
  2. 1文字目に数字は使えない
  3. 予約語は使えない

 

予約語とは

予約語とは、JavaScript言語自体ですでに使われている単語のことです。

→「if」「else」「for」「var」など、JavaScriptの構文で使われている単語が予約語です。

 

developer.mozilla.org

 

アルファベットの大文字・小文字を区別する

JavaScriptはアルファベットの大文字・小文字を区別します。

たとえば、「myName」と「myname」は、違う変数として扱われます。

var myName; // 大文字のN
var myname; // 小文字のn

 

変数の使用例

以下の内容を「index.html」というファイル名で保存して、Chromeで開きます。

<html>
<head>
    <meta charset="UTF-8">
    <title>3-02_var</title>
</head>
<body>
    <p id="result">ここに計算結果を表示します。</p>
    <script>
        var x = 10;
        var y = 20;
        var z;
        z = x + y;
        document.getElementById('result').textContent = z;
    </script>
</body>
</html>

 

 

「ここに計算結果を表示します。」という部分が書き換わって、「30」と表示されます。

上記のプログラムで「x」「y」「z」という3つの変数を使いました。

 

代入演算子(=)

(p.72)

「=」は、右側のデータを左側の変数やプロパティなどに代入する役割をする記号で、「代入演算子」と呼ばれています。

 

var x;

x = 10;

と書くと、変数xに10を入れることができます。

 

変数に保存された内容で動作を切り替える

(p.77)

プロンプトダイアログボックスに入力された文字を変数に保存して、変数の内容が「yes」ならアラートダイアログボックスを表示してみます。

 

以下の内容を「index.html」というファイル名で保存して、ブラウザーで開きます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>3-02_var</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>入力内容に応じて動作を変更する</h1>
<h2>変数に保存された内容で動作を切り替える</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
    <p>ブラウザのコンソールを開いてください。</p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
var answer = window.prompt('ヘルプを見ますか?');
if(answer === 'yes') {
    window.alert('タップでジャンプ、障害物をよけます。');
}
</script>
</body>
</html>

 

入力を求めるプロンプトダイアログボックスが表示されたら「yes」と入力して[OK]ボタンをクリックしてみます。

f:id:jsstudy:20170312122011p:plain

 

すると、アラートダイアログボックスが表示されました。

f:id:jsstudy:20170312122019p:plain

 

これで、上記プログラムの変数「answer」について、動作確認ができました。

 

比較演算子

(p.79)

===のように、その記号の左側と右側を比較するものは「比較演算子」と呼ばれています。

===の場合は左右が同じであれば評価結果がtrueになります。

 

2つのデータが同じか違うか、比較する機能が「比較演算子」です。

JavaScriptの比較演算子には、「==」と「===」という2種類が用意されています。

 

developer.mozilla.org

 

  1. 「==」→ 「等価演算子
  2. 「===」→ 「厳密等価演算子

 

「==」よりも「===」の方が、より厳しく審査します。

 

(例)以下のJavaScriptプログラムを実行してみます。

<html>
<head>
    <meta charset="UTF-8">
    <title>3-02_var</title>
</head>
<body>
    <p>「==」と「===」の違いをテスト</p>
    <script>
        var intNum = 10; // 10という数値
        var strNum = '10'; // 「10」という文字列
        if (intNum == strNum) {
            window.alert('==で比較すると同じ')
        } else {
            window.alert('==で比較すると違う')
        }
        if (intNum === strNum) {
            window.alert('===で比較すると同じ')
        } else {
            window.alert('===で比較すると違う')
        }
    </script>
</body>
</html>

 

最初に「==」で比較した結果が、アラートダイアログボックスで表示されます。

f:id:jsstudy:20170312124114p:plain

 

次に「===」で比較した結果が、アラートダイアログボックスで表示されます。

f:id:jsstudy:20170312124149p:plain

 

10という数値と文字列があった場合、

「==」では、同じ内容のデータと評価されましたが、

「===」では、違う内容のデータと評価されました。

 

これは、数値型と文字型の「型」の違いを無視するか、判別するかの違いです。

 

厳密に審査する「===」では型が違っているとダメですが、

緩い審査を行う「==」では型の違いは無視するので同じに扱われる、という比較結果になります。

 

データの「型」(文字型とか数値型など)の違いまで判定したい場合は「===」を使えばOKですね。

 

型とは

型はデータの種類、分類です。

 

developer.mozilla.org

 

データ型

最新の ECMAScript 標準化では以下の 7 つの型が定義されています :

6 つのデータ型はプリミティブ型です:

  1. 真偽値 (Boolean)。 true または false.
  2. null。null 値を意味する特殊なキーワードです。JavaScript は大文字・小文字を区別するため、null は Null や NULL などとは異なります。
  3. undefined。値が未定義のトップレベルプロパティ。
  4. 数値 (Number)。 42 や 3.14159 など。
  5. 文字列 (String)。 "Howdy" など。
  6. シンボル (Symbol)(ECMAScript 6 の新機能)。 インスタンスが固有で不変となるデータ型。

そして オブジェクト (Object)。

 

JavaScriptでは7種類の型が用意されています。

  1. 数値型 (Number)
  2. 文字列型 (String)
  3. 論理型 (Boolean)
  4. null型
  5. undefined型
  6. シンボル型 (Symbol)
  7. オブジェクト型 (Object)

いろいろあるんですね。

 

まとめ

  • プログラムの中でデータを保存するには「変数」という入れ物を使う。
  • 変数は「var」で宣言する。
  • 代入演算子「=」
  • 比較演算子「==」「===」
  • JavScriptの型(データの種類)は、7種類に分類されている。