cybozu developer network

カテゴリー内の他の記事

はじめようJavaScript第3回 JavaScriptの文法 変数といろいろな値について

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう JavaScript


(著者:kintone エバンジェリスト 村濱 一樹

プログラムを書く上では「変数」はかかせません。内容としては地味ではありますが、概念を理解しておけばこれからJavaScriptを学習する上で役に立ちます。

変数とは

変数は、プログラムの中の値を保持するために使います。JavaScriptでは下記のように変数に数字や文字などを代入することができます。(これを変数宣言といいます。)

これは x に数値 1 を代入します、という意味で、変数宣言は例のように let をつける必要があります。
変数の値は変更することができますが、下記のように再び let をつけて再定義することはできません。


コンソールに表示させてみた例が下記です。

ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/

※記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じてご利用ください。

ここでは変数を意図的に使いましたが、一度しか利用しない値なら、変数にいれる必要はありません。

ただし、計算結果など使いまわしたい値がある場合に、変数に代入しておくと、楽になります。
例) 消費税計算

数値や文字列以外の値

変数に代入できるものは数値や文字列だけではありません。JavaScriptでは下記のような値を扱うことができます。
今後サンプルを通して数値や文字列以外の値も学ぶので、現時点で全て覚える必要はありません。まずは前述の例の通り、数値と文字列から使いこなすようにしましょう。
このように、プログラム上で利用できる値のことを「リテラル」といいます。

  • 数値
    123 などの整数、0.123 などの小数を扱えます。マイナス値ももちろん使えます。
  • 文字列
    abc や はじめようJavaScript など。実際に利用するときにはシングルクォーテーション ' ' やダブルクォーテーション " " で括る必要があります。
  • 真偽値(ブーリアン値)
    true (真) と false(偽) のみ。「はい、いいえ」「Yes、No」のように、二通りしかない値です。
  • 配列
    ['apple', 'orange', 'banana'] のように宣言します。複数の値を一度に扱うことができます。具体的な使い方は今後学んでいきます。
  • オブジェクト
    {a: 100, b:200, c:300} のように宣言します。配列同様、複数の値を一度に扱うことができます。具体的な使い方は今後学んでいきます。

実際に、上記のリテラルをコンソールに表示してみると下記の様になります。
https://jsfiddle.net/kintone/j5wtgsxb/1/

変数と文字列の取扱の注意点

変数を使う場合、クォーテーションで変数を囲んでしまうと変数名自体が文字列として認識されてしまうので注意してください。

定数

定数は const キーワードを用いて定義します。 let で定義する変数と同様に値を保持することができます。
定数の値は再代入による変更や、再宣言ができません。しかし、定数を使用することで「コードの途中でうっかり値を変更してしまう」というミスを減らすことができます。
基本的には const を使い、const で実装できないときのみ let を使いましょう。

もっと詳しくしりたい場合は

長くなるので必要最低限の説明になりましたが、もっと詳しく知りたい場合は下記のリンクを参考にしたり、ご自身で調べて見るのがいいでしょう。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types

まとめ

まずは数値と文字列の使い方を覚えておけば問題ありません。他にもいろいろなデータが扱えるのだな、程度に頭の片隅に置いといてください。気楽にいきましょう。

  • 変数を使って値を保持できる。
  • JavaScriptで扱えるデータの種類(リテラル)は様々である。

<<はじめようJavaScript第2回 かんたんなプログラムを書いてみよう | はじめようJavaScript第4回 JavaScriptの基本機能 条件分岐が書けるif文 その1>>

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
遠藤泰史

例) 消費税計算にてzを掛けてますが、変数はxなので答えが出ません。

Avatar
cybozu Development team

遠藤泰史 様
お世話になっております。cybozu developer network 事務局です。

ご指摘いただきありがとうございます。該当記述を修正いたしました。
お手数をおかけしまして申し訳ありませんが、ご確認お願いします。

今後ともcybozu developer networkよろしくお願いします。

サインインしてコメントを残してください。