BACK
|Vanilla Javascript

Javascriptの基礎 Vol.1 変数、データタイプ、セミコロン

Vanilla Javascript　バニラジャバスクリプト

Javascriptの変数とデータタイプ

まず最初におさらいしたいのが、変数とデータタイプです。筆者にとってプログラミングのアブストラクトはレゴブロックや積木のような物で、形の異なるブロックの一つ一つが組み立て可能で、上手に組み立てて小さいピースから大きな物を作るというイメージです。組み立てるピースがあってないと組み立てられなかったり、途中で壊れちゃうと思ってください。変数とデータタイプとは、レゴの色とか形とかと言ったベーシックな部分ですね。大まかには似てるんですが、言語によってちょっとずつルールが違います。例えばジャバスクリプトではスペースは無視されますが、パイソンではスペースの有無が意味を持つのでプログラムが動かなくなったりします。

変数とは何か？

例えば計算式の中で誰かの名前が何回か出てくるとします。「John」が何回も出てくるのに、毎回Johnとタイプしても良いのですが、やっぱりJohnじゃなくてPeterにしよう！となった際に変数を使ってないと１０箇所全て書き直しです. 変数を使っていれば１箇所の書き換えで全てが変わってくれるので、後から変更する可能性が少しでもあれば変数を設定しておくことが大事です。

var name = 'John'
var sentence =  name + 'とは聞いたことがありますか？' + '一般的には西洋の男性の名前を指しますが、一番人気のある名前なので、一家に一人という皮肉的なジョークがあり Where is ' +　name + '? というと、トイレばどこ？という意味になります。'

console.log(sentence)

また変数が数字であると、変数を使って計算ができます。

var myNumber = 10

myNumber = myNumber + 10

console.log(muNumber)
//結果は２０

という風にレゴブロックを組み立てる際のフレキシブルなピースを自分で作ると思ってください。 変数を設定する時には、「これを今から変数として扱いますよ」とジャバスクリプトエンジンにお知らせする必要があります。それを英語ではdeclaring（宣言）と言い、昔はvarという宣言方法しかなかなく、変数がその後変化可能であろうが、ストリングであろうが数字であろうが全てこれを使っていました。しかし、そのファイル内のどこにあってもvarで宣言したものが同じものとしてコンピュータが認識するので、宣言した変数をプログラマーが忘れてしまい、同じ変数を別のところで宣言したりして、見つけにくいバグを作っていました。

最近ではletとconstとという宣言方法が作られ、宣言したエリアでしか使えないもの、そして変更可能、不可能という変数の宣言方法が誕生。経験値の高いプログラマーだとvarは基本は使わないように、と教えることが多いです。バグを解決するために、宣言してる場所を間違えてることがありますが、なるべくvarに変えて解決するよりかはどこで宣言するべきか考えなさいよ、ということです。筆者も急ぎの際にvarで解決することがありますが、自分がどこのどの部分をどうプログラミングしているのかはとても大事なことですので、なるべくletとconstで解決することをお勧めします。

基礎編なので、後々に触れますが、一旦ここではvarは忘れて、この二点に注目しましょう。

  1. 変更可能　 = let
  2. 変更不可能 = const
const name = 'John';
let age = 19;
age = age + 1;

const sentence = name + 'さんは来年' + age + '才ですが、名前は' + name + 'のままです。';

console.log(sentence);
//結果は「Johnさんは来年20才ですが、名前はJohnのままです。」

また、変数に設定するルールというのがあるので、そこもしっかりおさえましょう！

  1. 大文字が入ってても良いけど、大文字から始められない
  2. Javascriptがリザーブしてる文字列は変数にはできない。（例えばtrue/false）
  3. 数字が入ってても良いけど、数字から始められない
let myName = 'John' //OK!
let Myname = 'John' //error

let true = 'John' //error
let myTrue = 'John' //OK!

let 1name = 'John' //error
let name1 = 'John' //OK!

データタイプ

変数にいれるデータが数字なのか、それとも名詞とか文章なのかとか、人間も無意識にチェックはしていますが、ジャバスクリプトには全て日常的に使うわけではないと思いますが、８つのデータタイプがあります。他の言語では宣言する時に指定する必要のある言語もありますが、ジャバスクリプトは指定する必要がないので、変更可能にしておけばデータタイプもいかようにも変更できます。なので何も考えずに変数を宣言していっても問題はありません。ただし、データベースを使う時や、バグ解決する時に必要になるので、おさらいだけしておきましょう。

  1. number：数字（小数点が入ったものも含む）一般ですが、整数の長さに決まりがあり、＋ー２の５３乗までで、それ以上だとbigintと認識
  2. bigint：ナンバーより長い整数全般
  3. string: 文字列。文章だろうが、短い名詞だろうがストリングと言えば文字全般。シングルクオテーション、ダブルクオテーション（'こちらもストリング' , "どちらもストリング"）のどちらかに囲まれている必要がある。但しジャバスクリプトの場合数字を文字列として認識でき、クオテーションに囲まれてても計算が可能。
  4. boolean: trueかfalseと入力する必要があり、イエスとノーの意味合いに近い。
  5. null: なんの値も入っていない場合、もしくは値を入れないでおきます、と宣言する時に使うことも有
  6. undefined: なんの値も入ってないという意味ではnullと一緒だが、ブラウザやサーバーが与えるデータタイプで、nullはこちらが設定してる場合。
  7. symbol: ユニークなシンボルの値をSymbol('ユニークストリング')という風に定義でき、変数は一緒にできないけど、ストリングの値が一緒でもPCが一緒と認識しない特別なストリングを作ることができる。
  8. object: それ以外の全て。ジャバスクリプトの場合はアレイ（配列）もオブジェクトとして認識

実際に変数にtypeOfをつけるとデータタイプをリターンしてくれます。

let myString = '私のストリング';
console.log(typeof myString)
//String

if(typeOf myString === 'string'){
    console.log('this data type is string');
};

という風に、データタイプでコンディションを書いたりできるので、知っておくべき知識です。

セミコロン

知ってる方も多いと思いますが、セミコロンはジャバスクリプトの「。」のようなものです。筆者も調べるまで深くは知らなかったのですが、セミコロン「；」は昔はJSでは必須でした。最近はラインを変えれば読み込まれない、という風に習い、実際にそうしてるプログラマーも多いです。しかし、厳密にはセミコロンがないことでたまにコンピュータが計算間違えをしますので、よく注意してくださいね。通常はセミコロンはつけて、と言ってる人も多いです。筆者もセミコロンをつけるのが基本的に好きではありません。でもつけないとエラーを起こしかねないので、知らないでセミコロンを全て取り払うのは危険です。（筆者もこのバグを解決するのに何時間とかけた経験あり）。

一つのルールを覚えておきましょう。ジャバスクリプトはセミコロンがついてない場合に、セミコロンを自動的につけます。セミコロンがなくても動くというわけではないのです。なので、変なところでセミコロンをつける可能性があります。例えば、、、

(() => {
  return
  {
    color: 'white'
  }
})()

この場合、JSがリターンの後にすぐセミコロンをつけてしまい、エラーがでます。筆者も経験あり。 ですので、セミコロンをつけない、というのは結構上級編です。もしくはバグを解決する時にセミコロンをいつも頭に入れておく必要があるでしょう。

解決策

(() => {
  return {
    color: 'white'
  }
})();

セミコロンがないとなんともコードは綺麗に見えます。ですので、筆者はバグが出ようがセミコロンを外してますが、上司に「つけて」って言われたら理由がある＋嫌がる派がいて、派閥があるということだけ頭に入れておきましょう。

*Flamingod NewsはアメリカITの最新のニュースを日本語で紹介します。
...

Follow us @FlamingodN