【ゼロからはじめるプログラミング】JavaScript学習 #3

ゼロからはじめるプログラミング講座の第十六回です。今回は参照と変数について解説していきます。参照と変数は説明することが多いので複数回に渡って必要なときに追加で説明していくことになると思います。

変数を知ろう。
練習問題を解いてみよう。

変数を知ろう。

前回参照エラーが出たところをもう一度見てみましょう。

alert(no);

これが何故エラーになるのか、それは参照先がないからです。アラートの中身がnoですがこれは”no”ではありません。この様に”文字列”でない文字は変数です。

変数とは

なんでもはいる入れ物です。

中学生になったら学ぶ法的式の「X = 」エックスイコール。これがまずは変数を理解するのに役立つイメージだと思います。

このXはどんな文字でも使えます。今回は「no = 」ノーイコールです。

先ほどエラーが出たコードを少し編集するのでコピペで動かしてみてください。
test.js

no = "変数に入れるものはコレ"
alert(no);

今回はエラーがでずにアラートに「変数に入れるものはコレ」と出ました。

1行目を見て分かるように変数noに「変数に…」を入れたから今回は参照エラーが出ませんでした。参照できるものが存在していてアラートがそれを表示しました。

次に変数の作り方を説明します。

var 変数名 = 入れるもの
var hoge = 10
var huga = "10"

今さっきno = “変数に入れるものはコレ”とvarをつけずに変数を作っていたのに今回は頭にvarをつけています。varをつけるのとつけないとじゃ意味が変わってきます。

詳しくはその都度説明していきますが、varは変数宣言のときに使います。

変数宣言ってなに

変数を新たに作るときに作るぞ！と宣言することです。

そして変数宣言がない場合は、既存の同名の変数の中身を変更します。

まぁ今はまだ変数を作るときには必ず頭にvarをつけると覚えてください。

あと変数宣言のときのルールですが

var 変数名 = 入れるもの

入れるものは何でもかんでも入れられます。

変数名だけルールがあります。

1文字目は数字以外の文字。
予約語と同名にしない。

1文字目は数字が使えません。「1a」はダメですが「a」は大丈夫です。

予約語とはJavaScriptが命令として認識する単語です。たとえば「var」「console」「+」などなどです。もし動作が思うようにいかなかったら予約語を使ってしまっているのかもしれないと疑ってください。

一部が入っているだけの場合は大丈夫です。例えば「vars」「console2」などです。

「＝」は代入演算子

と言います。代入演算子の意味は「右辺を左辺に入れる」です。

なのでvar a = bという変数があったとします。

aはbを参照していてaイコールbですが、bイコールaではありません。

var a = 7 + 3

aは7+3ですが、

7+3はaではありません。

この先JavaScriptの勉強を進めていくと混乱してくると思うのですがとにかく「右辺を左辺に入れる」とだけ覚えておいてください。

次は変数宣言をせずに変数の中身を変えてみましょう。

test.js

var foo = 1
console.log(foo) // 1
foo = 10
console.log(foo) // 10

これを走らせてみてください。

1
10

と表示されましたね。変数宣言がない場合は、既存の同名の変数の中身を変更するのでこのように中身を変更できました。

コードにある「//」はコメントアウトというもので、それ以降の文字はスルーされます。一時的にコードを無効化したいときや説明を入れたいときにはコメントアウトでスルーさせましょう。

それとプログラミングではコードが左から右へ、上から下へ読み込まれていきます。

当たり前のように思われるかもしれませんが、コードの実行順というのは凄く重要で扱うのが難しいものです。変数が使えるようになったことで離れた場所で変数を呼び出してくることが増えると思いますが、これが思うように動いてくれないことが多々あります。

コードの実行順の話のついでにこれを動かしてみてください。

test.js

var foo = 1
console.log(foo) // 1
foo = 10
console.log(no)
console.log(foo) // 10

1
ReferenceError: no is not defined

コードはエラーが出るとそこで止まってしまいます。

これも予想通りでしたか？やりますねェ！

練習問題を解いてみよう。

ではさっそく変数を作ってみたりしましょう。

変数aを作り中身に数値10を入れてコンソールでaを表示しなさい。
変数aの中身を数字の10に変えてコンソールでaを表示しなさい。
変数bを宣言してコンソールでbを表示しなさい。
変数bの中身に数値1を入れてコンソールでbを表示しなさい。

正解するとこうなります。

10
10
undefined
1

解答例はこうです（マウスオーバーで表示）

  var a = 10
  console.log(a)
  a = "10"
  console.log(a)
  var b
  console.log(b)
  b = 1
  console.log(b)

全問正解しましたか？3問目は解説していませんでしたが変数宣言するときは必ず値を入れる必要はありません。後々値を入れる箱をあらかじめ作っておくだけです。

そして中身がないのに参照エラーは出ません。代わりにundefined未定義が出ます。

未定義の場合はエラーではなく処理は止まりません。

お疲れ様でした。変数はまだまだ解説することがあるので解説必要があるときにその都度やっていきます。次回は関数について学びます。

次も頑張って記事を作るのでチャレンジしてください！

JavaScript #1/#2/#3/#4/#5/#6/#7/#8/#9/#10/#11/#12/#13/#14/#15/#16/#17/#18/#19/#20