X-HACK

【2日目】変数について

JavaScript, tutorials1 min read

豆知識

説明を簡潔にするため

注意事項

説明を簡潔にするため、「現時点では重要でない概念」「初学者のうちは気にしなくて良い情報」という部分はあえて飛ばしています。正確な内容については、書籍か MDN web docsを参照してください。

コードが出てきたら「必ず」1日目に使用したデベロッパー・ツールのコンソールタブで実行する癖をつけてください。これは必ず実施してください。

用語集

  • 変数
  • キーワード
  • var, let, const
  • SyntaxError

コードは必ずコンソールタブで実際に動かして検証しよう

サンプルコードが出てきたら「必ず」1日目に使用したデベロッパー・ツールのコンソールタブで実行する癖をつけてください。 JavaScript習得のためにやっていただきたいトレーニングの一環ですので、必ず実施してください。

そして、「質問」を積極的にしてください。

質問するには

  1. 自分の頭で文章を理解しようと努めて
  2. 理解できない箇所を認識し
  3. それを言語化する

と言うプロセスが必要で、このプロセスが学習には効果的です。積極的に質問しましょう! どんな些細な質問でも大丈夫です。安心して質問してください!

変数とは?

データを一時的に保管しておくための「箱」のような物をイメージして下さい。変数には好きな「名前」をつけることができます。変数を「識別子」と呼ぶこともありますので覚えておいてください。 02day 01

https://media.prod.mdn.mozit.cloud/attachments/2016/07/12/13506/fff6c759c689be5d4d25f35f7e6f0e5a/boxes.png (参照元:MDN web docs)

変数の使い方

変数を使用するためには、まずは変数を作ります。より正確には、「変数を宣言する」といいます。そのためには var キーワードに続けて変数名を書きます。

1var a = 100; // a という名前の変数を宣言し 100 という値を入れる

変数名のルール

  • 変数名に使用できる文字は英数字と _ (アンダースコア) $ (ダラー) の記号
  • 変数名はアルファベット(a-z, A-Z) または _ (アンダースコア) $ (ダラー) から始めること
  • 変数を数字(0-9)から始めるとエラーになります

変数を使用するときは

以下のように書きます

1var hoge = 500 // hoge という変数に 500 という値を格納
2var $a = 1000 // $a という変数に 1000 という値を格納
3var _abc = 999 // _abc という変数に 999 という値を格納

大文字と小文字は区別される

1var a = 100
2var A = 200
3// a と A は別の変数として宣言される

よくある間違い(エラーになることをコンソールで確認してください)

1var myFirstName = 100
2console.log(myFirstname) // N -> n と打ってしまい、エラーになる

【重要】変数には意味のある名前をつける

試しにコードを書くような場合は上記の例のように適当な(意味のない)変数名をつけても問題ありません。ただし、通常は出来るだけ意味のある変数名をつけたほうが良いでしょう。 名前があるとコードの意味を理解しやすくなります。どんな値が格納されているかの説明にもなるので、変数にはパッと見たときにそのデータが何か分かる名前をつけるようにしましょう。

1var price = 500 // 値段
2var age = 34 // 年齢
3var box_count = 5 // 箱の数

変数には様々なデータが格納できる

格納(= 保持)です。箱にデータを入れるイメージなので、変数にデータを入れることを「格納」と表現することが多いです。

  • 'JavaScript'や'プログラミング'といった文字も格納できます
  • truefalseなどの「真偽値」も格納できます
  • 配列やオブジェクト、関数なども格納できます
1var name = 松田信介 // 文字
2var age = 34 // 数値
3var is_programmer = true // 真偽値
4var favorite_foods = ['焼肉', '寿司'] // 配列
5var result = 79 * 38 / 0.5 // 計算結果

Uncaught SyntaxError とは?

JavaScriptの構文に違反したコードを書いてみましょう。

1var a =; alert // ;(コロン)がおかしな所に入っている
2var 1_name = 100 // 変数名のつけ方がおかしい

 JavaScript構文として解釈できないコードが実行されると、下記のようなエラーが出ます。このエラーは単純な書き間違いが原因です。コードをよく見て冷静に間違いを見つけ修正しましょう。 02day 02 02day 03

変数だけを宣言し、後から値を入れる書き方ができる

宣言と値の格納は分けることもできます

1var name
2var age
3name = '松田信介'
4age = 34

一度に複数の変数を宣言することができる

カンマ記号で区切ることで複数の変数を一度に宣言できます。

1// この書き方もOK
2var name, age, job_name, company_name, birthday
1// こちらの書き方もOK 宣言と同時に初期化(値のセット)しています
2var name = '松田信介', age = 34, company_name = '株式会社X-HACK', birthday = '1985-04-13'

02day 04

変数の中身は書き換えることができる

varで宣言した変数の中身は他のデータで書き換えることも可能です。

1var price = 500 // 値段
2var tax = 0.10 // 消費税
3var postage = 120 // 送料
4price = price + (price * tax) // 消費税込みの値段を計算した結果を price へ再度格納
5price = price + postage // 送料込みの値段を計算

今は説明しない内容

1. varletconstについて

2. 変数のスコープについて

変数を宣言するキーワードはvar以外にもletconstなどのキーワードがあります。それぞれ使い方が異なります。変数のスコープを説明する会で触れますので、今の時点では「var以外にもletconstで変数を宣言してもいいんだなー」くらいに理解しておいてください。

3. 数値、真偽値、配列やオブジェクトなどのデータ型について

データには「型」があります。数値や文字列、配列などのデータ型があり、それぞれ扱いが異なります。まずは「数値」と「文字」はデータ型が違うと覚えておいてください。

4. 動的型付けについて

5. グローバルオブジェクトについて

6. 文字コードについて

7. 変数の巻き上げについて

まとめ:varとは何か?

  • var変数を宣言するためのキーワード
  • 変数に使える文字は決まっている
  • 大文字と小文字は区別される
  • var以外にもletconstというキーワードがある
  • varを使って宣言した変数の中身は書き換えることができる

varについての詳しい解説はこちら

参考資料

変数についてより正確な内容を知りたい場合、下記の二つの記事を参考にしてください


次回はこちら JavaScript道場:3日目 / データ型と二進法について