変数とデータ型を理解しよう

JavaScriptでは、処理に使う値へ名前を付けて保存できます。この保存場所を変数と呼びます。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

constで変数を作る

再代入しない値にはconstを使います。

const siteName = 'Web整備室';
const articleCount = 10;

console.log(siteName);
console.log(articleCount);

const、変数名、=、保存する値の順に記述します。文字列はクォートで囲み、数値は囲みません。

letで変更できる変数を作る

後から別の値を代入する場合はletを使います。

let currentPage = 1;
console.log(currentPage);

currentPage = 2;
console.log(currentPage);

constへ再代入するとエラーになります。まずはconstを基本とし、再代入が必要な場合だけletを選びます。

基本的なデータ型

文字列と数値

const title = 'JavaScript入門';
const price = 3000;

console.log(typeof title);
console.log(typeof price);

typeofを使うと、値の型を確認できます。文字列はstring、数値はnumberと表示されます。

真偽値

真偽値は、正しいか間違っているか、開いているか閉じているかなど、二つの状態を表します。

const isPublished = true;
const isMenuOpen = false;

nullとundefined

const selectedArticle = null;
let userName;

console.log(selectedArticle);
console.log(userName);

nullは「値がない」と明示した値です。宣言後に値を代入していない変数はundefinedになります。同じものではないため区別します。

変数名の付け方

変数名から役割を判断できるようにします。

const publishedArticleCount = 12;
const isLoggedIn = true;

xやdataだけではなく、何の値か伝わる名前を付けます。JavaScriptでは、二語目以降の先頭を大文字にするcamelCaseがよく使われます。

まとめ

値を保存するときはconstを基本とし、再代入が必要な場合はletを使います。文字列、数値、真偽値、nullなどは用途が異なるため、Consoleで型と値を確認しながら進めましょう。

次の記事では、保存した値を演算子で計算・比較します。