javascript(jQuery)で始めるプログラム基礎 2

前回は、はじめてプログラムを触る方向けに、データの入出力を試してみました。その過程で、変数や文字の連結なども開設しました。
今日は、javascriptでよく使う、文字以外のデータに関して紹介します。
javascriptは、様々なデータを扱う事が出来ます。
例えば数字の1と、文字の"1"は、我々にとってはどちらも1である事にかわりは無いのですが、プログラムの場合、数字の1と文字の"1"は、別物の扱いになります。
なお、プログラムで扱えるデータの種類をデータ型と言ったりします。

var hako = "文字のデータです";

上記の変数hakoには、「データ型が(文字のデータです)という、文字列のデータが入っている」と称します。

1.データ型が数値のデータ

数値とは、数字のことです。
使うときや変数への代入は、「"」や「'」でくくらずに使います。
数値のデータの特徴は、四則演算を始めとした計算ができる事です。
例えば、以下のコードは数字の5を出力します。

console.log( 3 + 2);

以上のコードは、console.logの中で直接数値を計算していますが、変数を使ったとしても、同様に計算されます。
以下のコードは、10を出力します。

var kazu = 5;

console.log(kazu + 5);
//->10を出力


足し算以外の計算も、以下の様に問題なく行う事ができます。
各々、何が出力されるか確認しておきましょう。

//引き算
var kazu_a = 6;
var kazu_b =5;
console.log( kazu_a - kazu_b);
//->1を出力

//掛け算
var kazu_c = 2;
var kazu_d =4;
console.log( kazu_c * kazu_d);
//->8を出力

//割り算
var kazu_e = 9;
var kazu_f =3;
console.log( kazu_e * kazu_f);
//->3を出力


引き算は、普通に「-」マイナスを、
掛け算は、「*」(アスタリスク)、割り算は、「/」(スラッシュ)で、数値を繋ぎます。

また、日常生活ではあまり使うことの少ない、剰余算というものもあります。
剰余算は、何かの数字を、何かの数字で割った時のあまりを取得します。

つまり、5を2で割った時の剰余算は、1が出力されます。
剰余算は%で数字を繋ぎます。

//剰余算
var kazu_g = 5;
var kazu_h = 2;
console.log(kazu_g % kazu_h)
//->1を出力

剰余算を、どこでどの様に使うかは、今はまだ難しいので、ひとまずこんなものがある事を知っておく程度で大丈夫です。

2.データ型が文字列のデータ

文字列は、もうすでに使っています。普通に文字のことです。
データを使うときは、「"」や「'」で括って使います。
すでに試した様に、「+」でつなぐことで連結させる事ができます。
数値の時の様に、文字同士で四則演算させることはできません。
なので、以下のコードは、想定した様に動きません。

console.log("1" + "1");
//->11

以上のコードは、「11」が出てきます。
この場合、1を「"」で各々括っているので、数値ではなく文字列としての1として扱います。
文字列を+でつなぐと、足し算ではなく連結ですので、「11」となります。

この様に、自分が扱っているのが、数値なのか文字列なのかをしっかり認識した上でプログラムを書き進めないと、思わぬエラーに見舞われてしまいますので、意識しておく事が必要です。


3.データ型が真偽値のデータ

今まで紹介した、数値と文字列は、開発者が自由に値を入れる事ができました。
が、次に紹介する真偽値は、あらかじめ値が決められています。
真偽値は、「true」と「false」という二つの値を持ちます。
主に条件分岐の条件の判定などに使われます。条件分岐については、別の記事で詳しく書きますが、ある条件の時のみに処理を行いたい時に使います。

「true」の時は処理をする。
「false」の時は処理をしない。

この様なプログラムを書く事ができます。
また、もともと値が二つしかないので、onかoffかを切り替えたい時などにも使いやすいです。
例えば、jQueryのスライドショーのプラグインで、「ランダムにスライドする」というオプションがあったとして、そのオプションでランダムにするなら「true」を、しないなら「false」を指定する様になっていたります。


4.配列について

データ型ではないのですが、一緒に解説します。
今まで説明した変数の使い方だと、一つの変数に対して、一つのデータしか格納する事が出来ません。
ですが、配列を使うと、一つの変数に対して複数のデータを入れる事が出来ます。
配列は、いくつか定義方法があるのですが、単純なのは以下の方法です。

var hairetu = [データ,データ,データ.......];

この様に、「[」と「]」の中に、データを「,」で区切って格納します。
この時、文字列を入れるなら「"」で括ります。
以下の様に書いていきます。

var hairetu = ["データその1", "データその2", "データその3"];
console.log(hairetu);
//->array(3)と表示、クリックすると中身を表示

array(3)は、arrayが配列であるという意味です。(3)は、三つのデータが入っている事を表します。
今回は、三つのデータを全部まとめて出力しましたが、一つずつ取得することも可能です。
配列名[何番目]
この様な形で何番目の所に、数値で、順番を指定します。
それでは、一つめのデータである文字列「データその1」を取得してみます。

console.log(hairetu[1]);
//->データその2が表示

一つめのデータが欲しいので、数値の1を入れたのに、出力されたのは2番めのデータです。
なぜでしょうか?

現実の世界で数を数えるときは、
「1、2、3、4・・・・」
の様に、1から始るのが普通です。
しかし、プログラムの世界では、
「0、1、2、3、・・・・」
この様に、0からスタートするのが普通です。

よって、今回のサンプルで、一つめのデータを出力するときは、以下の様に0番目を指定します。

console.log(hairetu[0]);
//->データその1が表示

プログラムの世界では、0番めから数えるという事を覚えておいてください。

配列は、複数のデータを一気に処理したいときなどに便利です。
一つの変数名(配列名)の中に、0,2,3,4と、順番にデータが入っています。
例えば、クラス名簿みたいなものを作って、それを一気に出力するときなどに使うと便利です。

4.オブジェクトについて

配列が、データを順番に格納されているのに対して、順番ではなく、一つ一つ名前をつけて格納されているのがオブジェクトです。

連続する順番で格納されるのが、配列、
名前で格納されるのが、オブジェクトです。
この名前のことを、「キー」と呼んだりします。
さらに、実際に格納される値を、「バリュー」と呼んだりします。

オブジェクトも、配列同様様々な定義方法がありますが、以下の様に定義できます。

var obj = { "animal": "cat", "age": 4, "color": "blue" };
console.log(obj);
//->Objectと表示、クリックすると中身を表示

こちらも、データを一つずつ出力する事が可能です。

console.log(obj["animal"]);
//->catが出力

この様に、変数名(オブジェクト名)["キー"]で出力可能です。
それとは別に、

console.log(obj.animal);
//->catが出力

この様な形でも同様に出力できます。

さらに、オブジェクトを突き詰めていくと、「オブジェクト思考」という現代のプログラムの書き方のベースな考え方まで入っていくのですが、とりあえず今は、「キーとバリューで値を記録できる物」という認識で大丈夫です。


5.まとめ

今回は、プログラムで使うデータ型についてと、配列、オブジェクトについてでした。
実は、データ型はもっとたくさんあるのですが、今回はわかりやすい数値と文字列と真偽値を紹介しました。他のデータ型は、別の機会に覚えておけば良いと思います。
ひとまず、プログラムで扱うデータには、「型」があるという事は認識しておいてください。
また、配列やオブジェクトも、変数と合わせてよく使うので、覚えておけると良いでしょう。

次回は、分岐に関してです。