JavaScriptの数値（Number）の基本と実践サンプルコード
JavaScriptでは、整数も小数もすべて「Number」型として扱われます。この記事では、数値変数の定義方法と、それらを使った簡単な演算の例を、動作するHTMLサンプルコードとともに紹介します。
サンプルコード
以下は、JavaScriptで数値を扱う基本的な例です。整数（22、99）と小数（1.523）を変数に格納し、ボタンをクリックすると画面に表示する仕組みになっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample{
font-size: 18px;
font-weight: 500;
color: red;
}
</style>
</head>
<body>
<h1>JavaScript Numbers</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、JavaScriptの数値が表示されます
</h3>
<script>
let sampleEle = document.querySelector(".sample");
let a =22;
let b = 1.523;
let c = 99;
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = 'a = ' + a + '<br>';
sampleEle.innerHTML += 'b =' + b + '<br>';
sampleEle.innerHTML += 'c = ' + c + '<br>';
sampleEle.innerHTML += 'a + c = ' + (a+c) + '<br>';
});
</script>
</body>
</html>コードのポイント
- letによる変数宣言：
let a = 22;のように、整数と小数を区別せずにそのまま代入できます。 - addEventListener： ボタンのクリックイベントを検知し、処理を実行します。
- innerHTMLでの表示： 各変数の値と、
a + cの加算結果を順番に出力しています。
実行結果
ページを開いた直後の状態：
「CLICK HERE」ボタンをクリックすると、次のように各数値の値と加算結果が表示されます。
まとめ
このように、JavaScriptの数値は特別な型指定なしに整数・小数どちらも扱え、文字列との連結によって簡単に画面へ出力できます。(a + c) のように括弧で囲むことで、文字列連結よりも先に数値演算が行われる点にも注意しましょう。
-
JavaScriptのunescape()関数とは？使い方とサンプルコードをわかりやすく解説
JavaScriptのunescape()関数は、escape()関数によってエンコードされた文字列をデコード（元に戻す）ための関数です。ただし、この関数はECMAScript v3以降で非推奨（deprecated）とされており、現在では代わりにdecodeURI()やdecodeURIComponent()を使用することが推奨されています。レガシーなコードの理解や保守の際に役立つ知識なので、ここで基本的な動作を確認しておきましょう。unescape()関数の基本的な使い方以下のコードは、unescape()関数を使ってエンコードされたURL文字列をデコードする例です。ボタンをクリックすると
-
JavaScriptにおける継承の基本を具体例で解説
JavaScriptは、クラスベースではなくプロトタイプベースのオブジェクト指向言語です。そのため、継承はprototype（プロトタイプ）オブジェクトを通じて実現されます。コンストラクタ関数のprototypeプロパティにメソッドやプロパティを追加すると、そのコンストラクタから生成されたすべてのインスタンスが、それらを共有して利用できるようになります。 プロトタイプによる継承の仕組み JavaScriptでは、インスタンスからプロパティやメソッドが参照されるとき、まずオブジェクト自身を検索し、見つからなければプロトタイプチェーンをたどって上位のオブジェクトへと探しに行きます。これにより、各イ