ツクールMVのために覚えるJavaScript 〜変数/定数編〜
こんにちは、岩沢つぐみです。
2月って、日数が短いですよね。1月末からインフルエンザで倒れて、回復した後はJavaScriptをいじり続けていたら、記事を書く前に2月が終わっていました。とか言ってたら3月も終わってたよ！
さて、今回は「ツクールMVのために覚えるJavaScript 〜変数/定数編〜」と題して、ツクールMVで使用されているJavaScriptの基礎を書いていきます。指摘等はTwitterの方で受けるとして……。
本記事の対象は
- これからツクールMVのプラグインを作りたい/改造したいけど、JavaScriptを触ったことがない
- 一度は触ってみたけど、基礎の基礎がよくわからなくて投げた
なお先に断っておきますが、本記事は先にも述べた通りプラグインを作るうえで必須となるJavaScriptの基礎を書いていくものであり、ツクールMVでのシーン遷移やウィンドウの作成方法を解説する記事ではありません。また、ツクールMVのプラグイン作成も行いません。
目次
JavaScriptとは変数/定数とは
変数
定数
型とは
string型
number型
boolean型
object型
配列
連想配列
undefinedとnull
undefined
null
最後に
例で使用したコマンド
JavaScriptとは
まずは基本中の基本、JavaScriptとは何かを軽く説明していきます。専門色の強い内容はMDNや、とほほのWWW入門などの説明に委ねます。では、JavaScriptとは何か。プラグインの作成/改造に挑もうとしている方々なら一度ならず何度も聞いたことのあるであろう「プログラム言語」の一種です。C++、C#、Java、PHP、Peal、Python、Swift、Ruby（ツクールXP～VX ACEで使用されていたRGSS系の基となった言語）などの仲間ですね。仲間ですねなんて書くと、詳しい人に「一緒くたにするな！」と怒られそうですが。なお、本記事で取り上げているJavaScriptはJavaと名前が似ていますが、名前が似ている理由はあるようですが全くの別物と考えてください。
JavaScriptの大きな特徴はやはり、クラスベースではなくプロトタイプベースとなっていることでしょう。Javaのような言語はクラスベースと言って、Classという固まりの中に関連する処理を記述していくのが基本となります。対してJavaScriptはクラスという概念がなく、prototypeという「紐」を使って関連する処理を繋ぎます。そう、Scene_XXXやWindow_XXXの後についてくるprototypeです。
語弊を恐れずに言うなら、クラスベースは「教室という箱」の中に「生徒という処理」を入れ、プロトタイプベースは飼い主が「リード」を使って「犬という名の処理」を繋ぐ感じですね。クラスベースは限定された空間だから、名前を呼ぶだけで応答してくれます。プロトタイプベースは空間が限定されないため、関係しない人も含めて数多くいる鈴木さんのなかから「この」鈴木さんの犬のように特定する必要があるのです。なお、この例はざっくりと違いの感覚を掴むために使うのは構いませんが、「こういうものである」と覚えるのは危険です。
もう一つ、JavaScriptには忘れてはならない特徴が。それは非同期処理であるということ。
Javaなどは上から命令が書いてある順番に処理を行っていきます。途中で時間がかかる処理を行う場合、終了を待ってから続きを行うのです。しかしJavaScriptはサーバーとの接続など時間がかかる処理の場合、裏でそれを行いながら先に進み、裏で行っていた処理が完了したら結果を返してくるのです。この詳細は今回の趣旨から外れるので各自調べてみてください。
変数/定数とは
さて、本当に軽くJavaScriptとは何かを説明したところで、次は変数と呼ばれるものについてです。ついでに定数についても軽く触れます。ただし、今回はletについては触れません。
変数
変数とは、様々な値を入れておくための箱です。JavaScriptはJavaなどと違い、変数に値を入れる際に「型」を意識しません。これは型を気にする必要がないというメリットとともに、入っている値の型を保証できないというデメリットも持つことになります。なお、変数/定数名等に使えない予約語なるもの（functionやprototypeなど）や名前に利用できないパターンなどがありますが、以下ではそれらを適切に除外しているとします。 JavaScriptでは変数を「var 任意の変数名 = 入れたい値;」という記述方法で宣言（作成）します。rpg_XXX.jsの中身を調べると結構出てきますね。実際に変数を宣言（作成）したいときは以下のように記述するだけでいいです。
// 文字列を入れる場合
var str = "文字列";
// 数値を入れる場合
var num = 3.14;
boolean（trueまたはfalse）を入れる場合
var isBusy = false;
変数は以下のように自由に値を入れ替えることが可能です。その際、varをつける必要はありません。
// 変数の宣言
var variable1 = "new String.";
// 変数の中身を書き換え
variable1 = "new new String";
// 違う型も入れられるが、何が入っているかわかりにくくなるため、個人的に強く非推奨
variable1 = true;
定数
定数は変数と違い、一度入れた値を変えることがない場合に使います。宣言方法はvarではなくconstを使います。名前は変数と共用されるので、変数と同じ名前にすることはできません。不変である特徴を活かし、設定値などを宣言する際に使用するといいでしょう。
// 定数の宣言
const num = 0;
// エラーになる
num = 1;
// 変数と同じ名前で宣言することはできず、エラーになる
var num = 0;
// 定数は慣習的に大文字で宣言される
const STR = "定数の宣言時は大文字にしよう";
ただし、JavaScriptでconstを記述しているものは知る限りほとんど見かけないですね。定数を宣言する際は、varを使い、変数名を大文字にすることが多いかもしれません。それもそのはず、ECMAScript 2015（13.3.1 Let and Const Declarations）にて仕様が策定された比較的新しいものだからでしょう。それでも既にほとんどのブラウザの最新版はサポートしているので、定数は使って問題ないと思います。型とは
さて変数で軽く触れた型ですが、宣言時にはあまり意識しなくていいものの、使用する際はやはり意識することが重要ですので、触れておきます。今回はプリミティブ型とそれ以外の区別には触れません。また、functionはobjectの一種ですが、ここでは別に扱い、こちらも今回は触れません。
| 型名 | 説明 | 例 |
|---|---|---|
| string | 文字列を扱う型 | "文字列" |
| number | 数値を扱う型。多くの言語ではintやfloatなど細分化されているが、JSではこれ一つ | 3.141 |
| boolean | 真偽値。最終的にtrueかfalseになる | true |
| object | 配列や連想配列などの特殊な型 | 配列：[value1, value2] 連想配列 {key1:value1, key2:value2} |
| undefined | objectより特殊な型。変数等の未定義を示すもので、よほど特別な理由がない限り自分で宣言することはない | undefined |
| null | 特殊な型。変数は定義されているものの、中身がないことを示す。なんでも独自の型らしいが、型を調べるとobjectらしい | null |
| function | 関数。今回は触れない | |
| symbol | シンボル。ES6で追加されたが、よくわかっていないので触れない |
string型
stringは文字列型。「'」（シングルクォーテーション）か「"」（ダブルクォーテーション）で囲ったものはこの型になると思えばいいです。出力の際、囲っているクォーテーションは表示されません。どちらかのクォーテーションで囲った文字列の中で同じクォーテーションを通常の文字として使用する場合、エスケープという処理が必要になります。エスケープは「\」という文字を通常の文字として扱いたいクォーテーションの前に置きます。「\」自身のエスケープは「\\」と書きます。他にエスケープが必要な文字はAjaxTowerに表があります。こちらを参考にするといいでしょう。
var str = "文字列";
var str2 = 'シングルクォーテーションをエスケープ\'します';
var str3 = "このように書くと、" + "一つの文字列として扱われます";
// 12になる
var str4 = "1" + "2";
// 13になる
var str5 = "1" + 3;
number型
はてさて、この型は文字通り数値を扱うものゆえ、それほど書くことはないです。変数宣言時にクォーテーションで囲むことなく数値を記述すれば、完成です。
var num = 1;
var num2 = 3.14;
// num3には5が入る
var num3 = 2 + 3;
num3のように算術演算子を利用して、結果を入れることが可能です。代表的なのは以下。- +
- 加算……左の値に右の値を足す
- -
- 減算……左の値から右の値を引く
- *
- 乗算……左の値に右の値を掛ける
- /
- 除算……左の値を右の値で割る
- %
- 剰余……左の値を右の値で割った余り
boolean型
こちらは真偽値となり、最終的にtrue（真）かfalse（偽）となります。値を直接指定して条件分岐をしてもいいですが、そうすることはまずないと思います。
// これはあまりやらない
var bool = true;
if(bool) {
console.log(bool);
}
実際にはif文などの条件判定で使われます。
var num1 = 5;
var num2 = 3;
var bool = false;
// num1がnum2以上の場合trueになる
if(num1 >= num2) {
// この場合常にこちらが呼ばれる
bool = true;
} else {
// num2はnum1未満であるため呼ばれない
bool = false;
}
// 上のif文と同じ結果、のはず
bool = num1 >= num2;
// 結果はtrue
console.log(bool);
後述するnullが入っている場合、結果はfalseになります。undefinedは特殊で、歴史的に判定方法が特殊です（現在は他の値と同じように判定できますが）。このようなもののなにがtrueになり、なにがfalseになりそうなものかは、外部に簡潔でわかりやすいサイトがありましたので、そちらにリンクを貼ります。[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について written by phi
object型
ここでは配列と連想配列について書きます。配列
配列は「[]」で囲まれた中に「,（カンマ）」区切りで複数の値を入れることができるものです。値の型は特に制限がなく、上述した型のみならず配列や連想配列を入れることも可能です。また、同じ配列に複数の型を入れることも可能ですが、どこに何が入っているかわかりにくくなるため個人的には非推奨です。
var arr = [0, 1, 2, 3, 4];
// 一つの配列に複数の型を入れることも可能
var arr2 = [0, "文字列", true];
配列中身を取得するには「変数名[格納番号]」と記述します。格納番号は変数で指定することも可能です。配列の扱いで初心者が混乱しがちなのが、最初の要素を取得するには格納番号に0を指定することでしょう。うっかり1を指定すると2番目の要素が取得されます。
var arr = [1, 2, 3];
var num = 2;
//「1」が出力される
console.log(arr[0]);
// 「2」が出力される
console.log(arr[1]);
// 「3」が出力される
console.log(arr[num]);
連想配列
連想配列はキーと値のペアで構成され、「{}」で囲い、ペアを「,（カンマ）」で区切ります。ペアはキーと値の間に「:」を入れます。配列と異なりキーに任意の名前をつけることができるため、同じキー名に同一の型を入れる前提であれば、一つの変数に複数の型を入れても問題ないと思います。値の取得方法は配列と同じく「変数名[キー名]」と記述するか、「変数名.キー名」と記述します。ただし、キー名を変数で指定する場合、後者の記法はエラーになります。
var map = {key1:"value1", key2:"value2", key3:"value3"}
var k2 = "key2";
var k3 = "key3";
// 「value1」が出力される
console.log(map.key1);
// 「value2」が出力される
console.log(map[k2]);
// undefinedが返る
console.log(map.k3);
undefinedとnull
undefinedとnullを一括に説明していいか悩みましたが、undefined
undefinedは未定義（宣言されていない）状態のものを呼び出すとエラーで返ってくることで有名です。存在しない箱を探しているようなものですね。
var item;
// エラーになる
console.log(box);
ただし、undefinedそのものはエラーではありません。でも、無いものを呼び出そうとしたら怒られるのは当然です。そんな実装は見たことはありませんが、一応変数の中身にすることもできるようです。とりあえず、ツクールで触れるだけであればエラーでこの文字が出てきたら定義し忘れていると覚えておけばいいでしょう。大抵は定義忘れか入力間違いでお目にかかるものですから。
null
nullは個人的にundefinedと似ているように感じますが、実際は全くの別物です。こちらは定義済みであるものの、中身が存在しないことを示します。つまり、undefinedは箱がないのに箱を探し、nullは箱はあるものの存在しない中身を取り出そうとしている状態です。undefinedと異なり、宣言時などで明示的に示す場合もそれなりにあります。
var num = null;
// エラーではなくnullが返る
console.log(num);
// 25が返る
console.log(25 + num);
いわゆる「ぬるぽ」は中身がnullのものを呼び出そうとすることで発生するエラーです。その場合は、どこで中身が空になってしまっているか、コンソールに表示されるエラーを参考に、色々な場所で中身を呼び出してみるといいでしょう。
最後に
というわけで、今回は変数/定数とその型に焦点をあてました。こうやって書いてみると、慣れているつもりでも有耶無耶な箇所がボロボロでてくるので、知識の再確認にいいですね。元々は関数についても書こうと思っていたのですが、画像がないうえ、意外と量が多くなったので「1つの記事で説明する内容は絞ったほうがいい」とのアドバイスもありましたので、型までにしておきました。「ここの値はなんだろう？」と気になって中身を見た際、どういう内容が入っているか、少しでも理解できるようになってくれたら幸いです。ゆくゆくはプラグイン素材を出してくれるようになると信じて。いや、こういう記事書いてる人の知識と読みやすさはすごいわ。
例で使用したコマンド
- console.log(arg);
- コンソール画面にargの中身を出力する。
- if(boolean){}else{}
- 条件式。()内に最終的にbooleanとなるものを入れる。{}内にtrue時の処理を書く。elseの後の{}はfalse時の処理