JavaScript超入門 ② 変数とデータ型序章! 素人監修

素人監修とは

僕の素人の友人がブログ記事のみで内容が理解できたものをアップするというシリーズです!

とりあえず変数を使ってみよう!

変数とはデータを扱いやすくするためのラベルのようなものです。

例として下記のようなコードを実行してみましょう!

<script type="text/javascript">
      var text = "Hello World!";
      alert(text);
</script>


このコードを実行すると


前回扱ったalertは後ろの( )の中身を表示するプログラムだったはずなのに、textではなくHello World! と表示されていますね。

なぜ text ではなく Hello World! 表示されているのかというと、alertの上に書かれているコード

var text = "Hello World!";


で text に Hello World! を代入しているからなんですね。

変数は var 変数名 = 代入したい値 で変数を定義することができます。

=(イコール)が使われているので変数名と代入したい値がイコール(同じ)であると捉えてしまいがちですが、プログラムでは右辺を左辺代入するという意味になります。



データ型とは


プログラムにおいて切りはなすことのできない要素としてデータ型というのがあります。

JavaScriptでは大きく分けて6つのデータの型があります。

今回は序章として一般的なデータ型3種類をご紹介させていただきます。

次回の記事でさらに細かく説明させていただきます!

文字列 (String 型)


文字通り文章を表します。

先ほど例であげたHello World!はよくみたら (ダブルクォーテーショ) で囲まれていますよね!

これが文字列のルールです。 (ダブルクォーテーショ)で囲むことによって文字列型のデータだと認識されます。

(ダブルクォーテーション)以外にも (シングルクォーテーション)で囲んでも大丈夫です。

(ダブルクォーテーション)や   (シングルクォーテーション)で囲まないとエラーになってしまいますので忘れないようにしましょう!



数値 (Number 型)


文字通り数値を表します。

数値の特徴は文字列と違って計算をすることができます。

数値は文字列と違って ” や ’ で囲まないことで定義できます。

こんな感じです。

<script type="text/javascript">
      var number = 1 + 1;
      alert(number);
</script>


こんなコードがあったとします。

このコードを実行すると


このように 2 と表示されます。

ではこの 1 + 1を ”1 + 1″としたらどうなるのかというと


” で囲むことによって 1 + 1 という文字列となるので上記のような結果になります。

alert(1 + 1);のように直接書き込んでも計算することができます。

この場合も同様にalert(“1 + 1”); とすると結果は1 + 1 と表示されます。



オブジェクト(Object)の配列(Array)


オブジェクトには複数のデータ型が存在します。配列はその中の1つで簡潔にいうとリストです。

[ ] の中に複数のデータを格納することができます。

例えばこんな感じです。

var fruits = ["banana", "apple", "orange"];


上記を見ていただければまかると思いますが、各データを , カンマで区切っています。これでデータとデータの区切りを判断します。

仮に上記のデータをalertで表示してみると

<script type="text/javascript">
      var fruits = ["banana", "apple", "orange"];
      alert(fruits);
</script>




のようになります。

配列では変数の後に[インデックス番号]とすることで個別のデータを表示することができます。



インデックス番号とは0から順番に割り振られる配列の中でデータを識別するための番号です

var fruits = [“banana”, “apple”, “orange”];

であれば

banana → 0 apple → 1 orange → 2 

のようになります。


とにかく実践して見ましょう!

<script type="text/javascript">
      var fruits = ["banana", "apple", "orange"];
      alert(fruits[1]);
</script>


このコードを実行してみると


ちゃんとインデックス番号の1番に当たるappleが表示されていますね!

fruits[1]のような [  ]のことを添字と呼びます。


今回は簡単な変数に触れてみていかがでしたか?

次回以降の記事でさらに詳細な各データ型の扱い方を紹介させていただきますので楽しみにしていてください!

さらに次回からはalert以外に新しいコード console.log も紹介させていただきます!

デバック等なんだかんだで一番よく扱うものです笑

それでは次回もよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です