【新人教育 JavaScript】Lesson 02 〜 Meet Functions and Variables 〜

あらすじ

　このコラムはド素人でも生のJavaScriptを理解し、美しくかつ無駄のないソースコードを書けるようにするために作成している。理解しやすさのために牛歩戦術をとっているが、玄人の皆様にお詫び申し上げます。
　なお、この記事に関するソースコードはこちらでダウンロードできます。
（ ＊:タイトルのネタはLongman社出版の英語教科書『Look, listen and learn!』のLesson 1より ）

目次

No.	記事	キーワード
Lesson 01	JavaScript is Simple	JavaScriptとは
Lesson 02	Meet Functions and Variables(本記事)	関数と変数
Lesson 03	未定
Extra 01	jQuery or Not, That is the Question	jQueryの使用と比較

JavaScriptの変数

　　変数は情報を格納する容器みたいなもの。JavaScriptはC言語やJavaみたな静的型付け言語と違い、すべて型の変数は同じ容器に入れる。
　

変数を定義する実例

var foo = 123;//変数 foo に数値 123 を付与する
var bar = "abc";//変数 bar に文字列 abc を付与する
var baz;//空の変数 baz を作成する、もしこの時の baz を呼び出すと undefined と出力される
baz = "Hi!";//空の変数 baz に文字列 Hi! を付与する、その時呼び出すと Hi! が出力される

変数の接頭語(キーワード)と作用範囲

　JavaScriptの変数は型付け用の接頭語はないものの、変数の作用範囲の違いで、変数を宣言するための接頭語が主に３つある。

• var
• 書かない
• let

"var"キーワード

　varで始まる変数の宣言はJavaScriptで最も一般に使われている。varで宣言した変数の作用範囲は宣言以降のほとんどすべての領域。ただし、もしある関数の中にvarである変数を宣言した場合、別の関数でこの変数は使えない(エラーが出る)。(関数の定義は次の章で述べる)
　なお、同じ変数をvarで何回宣言しても、中身が変わることはない(varは冪等性ある?)。
>>例１：

var foo = "Foo";
// ここの"foo"変数は一番外側に宣言されている
// このスクリプトのすべての領域が使える(グローバル変数、大域変数とも呼ぶ)
function var_demo() {
  alert(foo);// Fooが表示される
  var bar = "Bar";
  alert(bar);// Bar
}
function var_demo2() {
  alert(foo);// Fooが表示される
  alert(bar);// Error log: Can't find variable: bar
  // こで処理が止まっちゃう
  alert(foo);// 表示されない
}
function var_demo3() {
  alert(foo);// Foo
  alert(baz);// undefined ここは接頭語なしで baz が宣言される
  var baz = "Baz";
  alert(baz);// Baz
}

キーワードなし

　JavaScriptの変数を宣言する際、接頭語なしで自動的宣言することができる。こうやって宣言された変数はグローバル変数(大域変数)になる。もしある変数を宣言や値を与えることをせず、そのまま使おうとする時、キーワードなしの宣言とみなす場合がある(中身はundefined)。ただし、ある関数の中で宣言したもの(キーワードの種類は関係ない)を、別の関数の中でキーワードなしで同名変数を直接引用することができない(値を与えることはできる。その時キーワードなしの宣言になる)(例１の３つ目の関数)
>>例２：

  function no_key_demo1() {
    foo = "Foo";
    alert(foo);// Foo
  }
  function no_key_demo2() {
    alert(foo);// もし別の関数が先に発動した場合、その関数で定義した foo の値になる
    //もしこの関数が先に発動した場合、エラー Can't find variable: foo が出る
  }
  function no_key_demo3() {
    foo = "Bar";
    alert(foo);// Bar
  }

　no_key_demo2() 以外の関数が先に発動した時：



no_key_demo2() が先に発動した時：

"let"キーワード

　先ほど紹介した２つの宣言の仕方、変数はグローバル変数になりやすいので、変数名を使い切ってしまう可能性が出ていた。letキーワードを使えば、変数の作用範囲を制限することができる。
　しかしletキーワードはJavaScript 1.7の新機能であるため、サポートするブラウザーが少なく(Safariはサポートしていない)、出現頻度も低い。ただし、使い方はさほど困難ではない。
　letの作用範囲は宣言した{}の内部である。宣言を行った{}の内部さらに{}がある場合、内部の{}でも同じ変数は使える。
>>例３：

  function let_demo1() {
    let foo = "Foo";
    alert(foo);// Foo
    { // ここの　"{}"　は for、if 文などの "{}" も可
      alert(foo);// Foo
      let bar = "Bar"
      alert(bar)// Bar
    }
    alert(bar)// エラー: bar is not defined
  }

Safariはletをサポートしていないため、ChromeでDemoする：

変数の豆知識

変数の命名

　JavaScriptの変数の命名は比較的に自由である、英数字、$と_は使える。ただし、英字、$と_から始まる必要がある(つまり数字から始めることはできない)。また、$や_一つのみの変数名は許されていない。なお、一部のライブラリでは$に別の役割を与えたので、$から始まる変数名は良くない。
　またJavaScriptはその名前のように、オフィシャルで勧められた命名法(変数も関数も)はキャメル式(複合語の中の単語の頭文字を大きくする)である。しかし、あまりにこれに拘ると、JavaScriptの組み込み関数と間違われ、下手すると組み込み関数を上書きしてしまうので、気をつけましょう。
　個人的な意見であるが、ソースコードを読む人にわかるようにするには、スネーク式(単語の間をアンダーバーで間隔する)を勧める。
　そして言うまでもないが、英語以外の文字(日本語ローマ字、中国語ピンインとか)の使用はやめよう。

定数の宣言

　JavaScriptでは定数(中身が変えられない「変数」)も宣言できる。定数を使う時はconstキーワードを使う。

  const FOO = "Foo"// 定数は全文大文字で書く方がベター
  function const_demo() {
    alert(FOO);// Foo
    FOO = "Bar";// 定数は変えられないが、ここはエラーも出ない(出るブラウザーがある)
    alert(FOO);// Foo
  }

変数の型を確認

　JavaScriptの変数は宣言する時型は全部undefinedである。値を付与するとその値の型になる、違う型の値が付与するたびに、型も変えてしまう。変数の型を確認するにはtypeof演算子を用いる(演算子についてはまた後日)。

  var foo;
  function typeof_demo() {
    alert(foo);// undefined
    alert(typeof foo);// undefined
    foo = "Foo";
    alert(foo);// Foo
    alert(typeof foo);// string
    foo = 123;
    alert(foo);// 123
    alert(typeof foo);// number
    foo = 1.23
    alert(foo);// 1.23
    alert(typeof foo);// number　(JavaScriptは整数小数問わず number 型である)
    foo = true;
    alert(foo);// true
    alert(typeof foo);// boolean
  }

　

　JavaScript変数の型については、こちらの記事は詳しく記述している。

JavaScriptの関数

関数とは

　JavaScriptの関数は重複利用可能な手続きの集合である。Ruby、Python、Javaなどのメソッド(method)と同じものと理解すれば結構である。
　JavaScriptでは関数を定義する際、functionキーワードを使う。
　また、JavaScriptの関数はインデントを用いず、{}で囲んでいる。
　例えば前のLessonで出た以下の関数：

  function alert_3_times() {//　ここは関数の宣言
    alert('Hello World!');// ここは関数が行う手続き
    alert('Javascript is Awesome!');
    alert('See You Later ;)');
  }// 必ず括弧を閉じる

　この関数のように、関数は主に4つのパーツで作られている。

• 関数宣言：キーワードfunction
• 関数名：上記関数ではalert_3_time;(使い捨ての無名関数も存在するが、ここでは割愛する)
• 引数：関数名の後の括弧とその中の記述；上記関数では引数はないので()だけ書く
• 関数本体：一連の処理手続き、{}の中に記述する

　関数を一度作成したら、何度でも呼び出せる。関数を呼び出すには、関数名と引数だけ書けばいい。なお、関数の中で自分を呼び出すこと(再帰/recursion)もできる。

JavaScriptの組み込み関数

　JavaScriptは使いやすいように、いろんな組み込み関数が存在する。先回のLessonから使っているalert()関数もその一つである。それらの関数は宣言や定義をせず、名前さえ知っていれば使える。また、単語一つで使える組み込み関数と別に、それらの関数をオブジェクトに収納して、オブジェクトから関数を呼び出せる仕組みもある。その仕組みは組み込みオブジェクトとして知られている。オブジェクトの使い方については、また後日話します。

関数の引数

　JavaScriptの関数の引数は関数名に次ぐ()の中に記入する、その括弧の間の変数がこの関数の引数になる(別の関数も、関数の外側の処理も、その変数を触ることができない)。
>>例４：

<script type="text/javascript">
  function arg_demo1(foo) {　
    alert(foo);// 括弧の間入れたものを表示する
  }
  function arg_demo2(foo) {
    alert(foo);// 括弧の間入れたものを表示する
    alert(foo*2);// 括弧の間入れた数字を２掛けて表示する
  }
</script>

<!-- このボタン押すと、"FooBar"が表示される -->
<button onclick="arg_demo1('FooBar');">argument Demo</button>

<!-- このボタン押すと、123と246が表示される -->
<button onclick="arg_demo2(123);">argument Demo2</button>

　上記のソースコードの中、arg_demo1関数を呼び出すとき、引数のFooBarは''で囲んでいた。それはJavaScriptで文字列を扱うときの要注意である。JavaScriptで文字列を扱うときは必ず""か''で囲むこと。もし外側が""を使ったとき、中の文字列は''にする。もちろん、逆も可能である。

　関数の引数は複数個持つこともできる。複数の引数を使う場合、各引数の間で,で区切る。また、関数の引数の部分にbaz = 'Baz'のような値を付与する書き方をすると、この値の初期値を決めることができる。
>>例５：

<script type="text/javascript">
  function arg_demo2(foo,bar,baz = "Baz") {
    //ここでもしこの関数を呼び出す時引数は２個しか与えていない
    //bazが"Baz"という初期値になる
    alert(foo);
    alert(bar);
    alert(baz);
  }
</script>
<!-- alert: Foo,Bar,Baz -->
<button onclick="arg_demo2('Foo','Bar');">argument Demo 1</button>

<!-- alert: Foo,Bar,FooBar -->
<button onclick="arg_demo2('Foo','Bar','FooBar');">argument Demo 2</button>

関数の戻り値

　JavaScriptの関数は引数がで値を代入することができる、当たり前のように、戻り値を返すこともできる。ただし、引数は複数個与えられるが、戻り値は基本１つしかない。
>>例６：

<script type="text/javascript">
  function return_demo() {
    var foo = "Foo";
    return foo;
  }
</script>

<!-- alert:Foo  -->
<button onclick="alert(return_demo());">return Demo</button>

解説：ここ関数return_demo()の戻り値fooの値"Foo"がalert()に渡され、表示される。

関数の再帰

　JavaScriptの関数は関数中の手続きで、自分を呼び出すことができる。ただ、エンドポイントを定めないと無限の再帰になってしまうので、使用する際は気を使ったほうがいい。
　基本JavaScriptの関数は手続きが終わった時点で自動的に終わるが、再帰などを使うとき、途中で止めようとする時はreturnを使う。
>>例７：

<script type="text/javascript">
  function rec_demo(foo) {
    alert(foo);
    foo--;// foo の値が１減る
    if (foo === 0) {// もし foo が０になった場合
      return;// 関数を終了させる
    }
    rec_demo(foo);
  }
</script>
<!-- 5,4,3,2,1の順で表示される -->
<button onclick="rec_demo(5)">Recursion Demo</button>

要点復習

• JSの変数は殆どvarで宣言しているが、接頭語なしやletでの宣言もある。
• JSの変数はそれぞれ作用範囲がある、それを無視するとエラーが出る。
• JSは組み込み関数たくさん持っているが、自分で関数を書く時はfunctionを使う。
• 関数は複数の引数が使えるが、戻り値は基本１つのみ。

以上でした。お疲れ様です。

『Look, listen and learn!』の主人公:SandyとSue。
目次へ戻る