JavaScript入門として、基礎的なところから扱っていきましょう。
ここでは、変数とデータ型、型変換と型強制について扱って扱ってみようと思います。
実行環境とファイル構成はこちらでやったものを引き続き使っていきます。
ではやっていきましょう。
変数とデータ型
前回使った実行環境のscript.jsファイルをテキストエディタで開いて、次のコードを書いてみます。
var firstName = 'エドワード';
console.log(firstName);前回はconsole.log()に直接文字列を入れて、JavaScriptコンソールに表示しました。
ここでは、まず変数を利用して、そこに文字列を代入しています。
変数を利用するには、変数を宣言する必要があります。最初にvarと書いて変数名を定義します。（varと宣言しなくても実際にはJavaScriptでは機能しますが、グローバル変数と区別する為に宣言しておきましょう。Pythonでは宣言はしませんでしたね）
var 変数名 = 文字列や数値など
ここではfirstNameという変数名にして、エドワードという文字列を代入しました。文字列はクォーテーションで囲む必要があります。ダブルクォーテーションでも動きますが、シングルクォーテーションで囲むのが良いとされています。（ちなみに、エドワードは鋼の錬金術師の主人公の名前）
この変数をconsole.log()に代入して実行します。
このスクリプトをインポートしたindex.htmlを開いて実行してみましょう。
ブラウザのJavaScriptコンソールを開くと、「エドワード」と表示されています。
変数はデータの入れ物とよく言われます。このように変数を定義してデータを渡して一連の処理ややりとりなどをしたものを、この中で一時的に保存するのが変数の役割です。
なお、JavaScriptは新仕様としてECMAScript 6（ES6）から変数の宣言も新しくなっています。
ここでは、varを使った宣言を使って行きますが、これに限らず新仕様のES6も今後は必要となってきます。このES6の仕様については、また別の機会で扱います。
データ型
ここでは変数に文字列を代入しましたが、変数に代入できるデータ型は次のようなものがあります。
- 文字列型（String）- クォートで囲まれた0個以上の文字の集合
- 数値型（Number）- 整数、浮動小数点数
- 真偽型（Boolean）- true（真）/false（偽）
- 特殊型 – 未定義（Undefined）/空（Null）
- シンボル型（Symbol）- シンボルを表す
最後のシンボル型はECMAScript2015の新規格で導入されたもので、これはまた別の機械に触れることにします。
コードを書いてみると次のようになります。
var lastName = 'エルリック'; // 文字列型
var age = 16; // 数値型
var isHuman = true; // 真偽型
console.log(isHuman);コードをこのように書き換えてブラウザを更新してみると、console.log()にはisHumanしか代入していないので、trueのみが表示されるはずです。
次のようにも書くことができます。
var job;
console.log(job);
job = '国家錬金術師';
console.log(job);最初は、varで変数を宣言するまででとどめています。ちなみに変数は、カンマで区切って複数宣言することもできます。
そして、あとでこの変数に文字列を定義しています。
実行してJavaScriptコンソールを見てみましょう。
最初のconsole.log()には、値が入っていないのでundefinedと表示されています。代入されたものは内容が表示されています。
変数の書き方
変数は自由に宣言することができますが、ちょっとだけ書き方のルールがあります。
例で示しておきます。
var _16years = 16;
var brotherName = 'Edward and Alphonse';
// var if = 20;変数は文字かアンダースコア、ドル記号で書き始めます。最初の例のように数字で書き始めたい場合などはアンダースコア（_）を冒頭につけるなどして変数を作ります。
複数の単語を組み合わせて変数を作る場合は、先頭の単語の文字は小文字、以降の単語の冒頭は大文字にして結合します。こういう書き方をキャメルケースと言います。
コメントアウトした「if」の場合などは、JavaScriptで使われている予約語で、変数に使うことができません。予約語には、break、case、catch、delete、do、else、default、class、for、import、returnなど30個数以上あります。
MDNのページに予約語がまとめられています。
仕様の変更によって将来的に増えることもありますので、どんなものがあるか見ておくといいでしょう。
型の変換と強制
変数の型変換と型強制について見ていきます。
JavaScriptは変数のデータ型を処理に合わせて扱います。次のコードを見てみましょう。
var firstName = 'エドワード';
var age = 16;
console.log(firstName + ' ' + age);文字列型と数値型を合わせてconsole.log()で表示しようとしていますが、JavaScriptは数値を文字に合わせて表示してくれます。
JavaScriptコンソールをみるとこうなります。
何も問題なく、表示されているのがわかります。
同様に、これまでの内容を含めてまとめてコードにしてみましょう。
var firstName = 'エドワード';
var lastName = 'エルリック';
var age = 16;
var job, isHomenCruz;
job = '国家錬金術師';
isHomenCruz = false;
console.log(firstName + ' ' + lastName + ' は ' + age + ' 歳の ' + job + 'です。 ホムンクルス? ' + isHomenCruz);JavaScriptコンソールで表示してみるとこうなります。
これらが型の強制になりますが、次に型の変換をみてみましょう。
先ほどのコードをちょっと変えてみます。
var firstName = 'エドワード';
var age = 16;
var job, isHomenCruz;
job = '国家錬金術師';
isHomenCruz = false;
age = '16歳';
job = '軍の狗';
alert(firstName + ' は ' + age + ' の ' + job + 'です。 ホムンクルス? ' + isHomenCruz);先ほどの変数定義のコードの下に、同じ変数を使って再度追加しています。ageは数値でしたが、文字列で再定義、jobは違う表記にしています。
同じ変数がありますが、これを実行するとどう表現されるのかということになります。
ここではconsole.log()ではなく、alert()を使って、ポップアップ表示させてみます。
実行するとこのように表示されます。
JavaScriptコンソールには表示されず、ブラウザにポップアップ表示されているのがわかります。
内容は、新たに書き込んだ変数が表示されているのがわかります。OKボタンをクリックすれば閉じることができます。閉じるまではブラウザは処理中ということになっています。
今度は次のようなコードを用意してみます。
var firstName = 'エドワード';
var lastName = prompt('ラストネームは何？');
console.log(firstName + ' ' + lastName);console.log()でfirstNameとlastNameを表示するコードですが、firstNameはこれまでと同様に定義されていますが、lastNameに関してはちょっと違うことをやっています。
prompt()は、ユーザーの入力を受け付けるために、ダイアログを表示するものです。ここではダイアログで表示させたい文字列を引数に指定して、名前は何か聞いています。戻り値は入力された文字列が返ってくることになります。
実行してみましょう。
ブラウザ上にダイアログがポップアップ表示されて、入力が促されます。
ダイアログボックスに名前を入力してみます。
「エルリック」と入力して、OKボタンをクリックします。
コンソールに表示されているのが確認できました。
コメントの書き方
上のコードで、コメントを書いた部分がありましたので、ここでJavaScriptでのコメントの書き方をまとめておきます。
コメントは、スクリプトの動作に関係しないメモ的な情報で、コードの概要の説明を書くことで他人がコードを読んで内容を把握しやすくしたり、メンテナンス時の説明などに利用できます。
コメントには3つの書き方があります。
- // 1行コメント
- /* 複数行コメント */
- /** ドキュメンテーションコメント */
// これは単一行のコメントで、文末までをコメントとみなします。
/*
これは複数行のコメントです。
囲まれたブロックをコメントとみなします。
*/ドキュメンテーションコメントはクラスなどの直前にその役割を記述するもので特定のルールがあります。専用のツールで抽出することで、ドキュメントの仕様書を自動生成したりすることができます。これはまた別の機会に触れることにしましょう。
コメントは、コードのメモだけでなく、スクリプトを一旦無効にしてコードを動きをみたりすることにも使います。コメントを無効化することをコメントアウト、再び有効化することをコメントインといいます。プログラミングを書いている時によく利用する方法でもあります。
まとめ
ここではJavaScriptの変数とデータ型について扱いました。
変数には書き方のルールがあります。データ型には、文字列型、数値型、真偽型、特殊型、シンボル型という違いがあります。
JavaScriptでは、変数は処理の中で型の強制があったり変換がされたりします。
コメントの書き方もコーディング時に便利なので理解しておきましょう。
