初心者による初心者向けJavaScriptの5つの型

はじめに

この記事はGizumoエンジニア Advent Calendar 2015の16日目の記事です。

今回はJavaScriptにおける5つの型ということで書かせていただきます。
目的は
私が教わった内容がとても参考になったため、より自分の中での理解度を深たいというのと、これから勉強する人へ少しでもヒントになれば嬉しいなと思っています。
まずは…
JavaScriptとはなんでしょうか？

JavaScript - ウィキペディア
すみませんがこちらを参考でお願いします。。。

それでは本題に入ります。

5つの型とはどんなものがある？

それが
・String型
・Number型
・Array型
・Object型
・Function型
こちら5つになりますね、上から見ていきましょう！！！

String型（文字列）

この型は文字列を入れるときに使います。 str と書いてます。
例 (//以下はコメントになります)

var str = "バイエルン"; //""で囲った部分を文字列と認識する
console.log(str);     //console.log()は()の中の状態をコンソールで確認できる

この状態でコンソールを確認すると文字列として認識されたバイエルンが str の中身だと確認できます。
ちょっとした応用で

var str = "バイエルン" + "ミュンヘン"; //+を使うことで文字列を結合できる。
console.log(str);

結果はバイエルンミュンヘンとつながって返ってきます。
注意
・文字は"　"か'　'でしっかりと囲みましょう。

ちなみにバイエルンミュンヘンは海外のサッカーチームで完全に好みで書いてますのでおつきあいください♪

Number型（数字）

文字の次は数字です。numとしておきます。
例

var num = 10;
console.log (num);

これをコンソールで見てみると、、、結果は10が返ってきます。
再び応用で

var num = 10,
    num_1 = num + num;
console.log(num);
console.log(num_1);

この場合の結果は20になります。
numの方は10なのでnum_1の方にはnum+numがおこなわれ20が値として返ってきます。
このように・足す(+)・引く(―)・かける(＊)・割る(/)などの計算もできます。
注意
・数字として扱うときは文字列のように" "等で囲わないように！！
仮に囲った場合は文字列になってしまうので10+10(結合)になるので1010が結果になります。

Array型（配列）

次は配列の型になります。
配列の書き方は[ ]の中をカンマでつないで書いていきます。
説明が下手なので早速形の紹介から！
例

var array = [0, 1, 2, 3];
console.log(array);

結果は[0, 1, 2, 3, ]←このような形で返ってきますね！
これを配列と呼び[ ]の中に複数の値を入れることができます。さらにこの値は個別に呼び出すことができます。
応用を今回は文字列で！！

var array = [”野球”, ”サッカー”, ”テニス”, ”バスケ”];
console.log(array[1]);　　//[1]をつけて個別に指定します

まず結果はサッカーが返ってきます。
このように配列は[ ]内の区切りを左から0,1,2,3・・・と数えるのでarray[1]とするとサッカーが返ってきますね。

Object型（オブジェクト）

だんだん複雑になってきました。次はオブジェクトです。
Object={key: val}が基本形になり{　}内にオブジェクトに対する情報を入れることができます。
今回は私の大好きなバイエルン選手集を例をやらせていただきます(笑)

var Bayern = {
        "name": "マルティネス",  //名前
        "position": "MF",　　　　//ポジション
        "uniformNumber": "8",　　//背番号
        "nationality": "スペイン" //国籍
    };

このように選手一人一人の情報を持たせられます。でもこれでは選手集とは言えませんね…
しかしここに配列を応用することで見え方が変わります。

var Bayern = [{
        "name": "マルティネス",
        "position": "MF",
        "uniformNumber": "8",
        "nationality": "スペイン"
    },{
        "name": "ロッベン",
        "position": "FW",
        "uniformNumber": "10",
        "nationality": "オランダ"
    },{
        "name": "ラーム"
        "position": "DF",
        "uniformNumber": "21",
        "nationality": "ドイツ"
    }];
    console.log(Bayern);

このような結果になりました！！！

Bayernの中に三選手が格納できました。
このようにオブジェクト(選手)を配列で並べることで選手集のようになりました。(ホントはもっとたくさんの選手を紹介したかったですが割愛します
)
さらに選手データや情報の詳細を見たい時は下のように記述すると

console.log(Bayern[1]);
console.log(Bayern[1].position); // .で下の階層につないでいきます。

うまく個別で取れました。
このように配列のやり方にパスで指定することで個別にデータにアクセスできます。
なので配列の[1]番目と、その中のpositionのデータが分かります。

（こんな選手しらねーとかなると思いますが、自分の好きなものに置き換えてやると楽しくできると気がします笑）

Function型（関数）

最後は関数の型です。
まず関数とは…簡単に言うと定められた処理を実行して結果を返す一連の命令のことです。
じゃあまずは簡単なアラームを出せという命令文を書いてきましょう。

 function Alert()//定義　{
              alert("Hello"); //処理
          };
          Alert();//実行

このように定義したものを実行する仕組みになっています。それで実行される処理を{　}の中に書くと処理結果が返ってきます。
この結果ダイアログボックスにHelloの文字が呼ばれるはずです。
さらに関数には引数というものが設定できるので使い方も知っておきましょう。
引数はAlertの後ろについている( )に書きます。では、引数を使った簡単な計算を例でやってみましょう。

function Calculation(x, y){
             answer = x + y ;
         };
         Calculation(10, 20);
         console.log(answer);

この場合のanswerは30になります。
なんとなくイメージが付きますかね？引数は複数設定することができ、x = 第一引数とy = 第二引数と呼びます。
実行側の値はそのまま引数に戻り値として返ってきますので、answer = 10＋20　と処理がされるとわかりますね。計算式は上にもあるように引き算や割り算なんかもちゃんとできます。
関数を使う際は、どこの処理がどの順番で行われているのかを注意してみていきましょう。
より理解度が深まると思います。

だいぶ説明が下手ですが以上がJavaScriptにおける5つの型になります。
ついでにバイエルンの勉強にもなりました(笑)

まとめ

まず説明文などなど言葉足らずで伝わりにくいと思いますが、少しでも言いたいことが分かればいいなと思います。
そして、今回は自分の頭の中の言葉を文にして説明する難しさを実感し、より深く理解している必要があると感じれてすごく勉強になりました。
まだまだ不足部分が多いと思われますので、表現方法や書き方などなど改善箇所ありましたら教えてもらえると幸いです。
最後までありがとうございました。