見出し画像

#040　フロントサイド（6）：JavaScript入門3（変数）

KINO↓

変数とは何か？

変数は、プログラミングにおいて「値を格納する箱」のようなものです。この箱には、名前を付けておき、後でその名前を使って中に入れた値を取り出したり変更したりすることができます。

変数のイメージ

  • 変数 (左側の箱):

    • 大きな箱は変数 applePrice を表しています。

    • 変数は値を格納するための「箱」のようなものです。

  • 値 (右側の円):

    • 赤い円は値 100 を表しています。

    • これは変数に代入される具体的なデータです。

  • 代入の矢印:

    • 矢印は代入操作を表しています。

    • 値が変数に「入れられる」様子を示しています。

  • 代入後の状態:

    • 箱の中に赤い 100 が表示されています。

    • これは代入が完了し、変数が値を保持している状態を示しています。

  • コード表現:

    • 図の下部に let applePrice = 100; というコードが書かれています。

    • これは図で表現されている操作を実際のJavaScriptコードで示しています。

変数の宣言と値の代入

変数の宣言

変数を使うためには、まずその箱を作る必要があります。これを「変数の宣言」と言います。JavaScriptでは、var、let、constの3つのキーワードを使って変数を宣言できます。
varはそのスコープの曖昧さや再宣言可能などの問題により、予期せぬバグが発生しやすいため、非推奨とされています。
代わりに、letやconstを使用することで、スコープが明確になり、変数の上書きや意図しない動作を防ぐことができます。これにより、コードの安全性と可読性が向上します。

varについて

  • 再代入: 可能

  • 再宣言: 可能

  • スコープ: 関数スコープ

メリット

  • 再宣言可能: 同じスコープ内で再宣言できるため、意図せず変数を上書きしてしまうことが少なくなります。

  • 広い互換性: 古いコードや全てのブラウザで互換性があります。

デメリット

  • スコープが曖昧: 意図しない場所で変数が上書きされることがあります。

  • 再宣言によるバグ: 再宣言可能なため、意図せず同じ名前の変数を上書きしてしまうことがあります。

function varExample() {
    var x = 10;  // 変数を宣言して値を代入
    if (true) {
        var x = 20;  // 同じスコープ内で再宣言可能
        console.log(x);  // 出力: 20
    }
    console.log(x);  // 出力: 20
}
varExample();

letについて

  • 再代入: 可能

  • 再宣言: 不可

  • スコープ: ブロックスコープ

メリット

  • スコープが明確: ブロックスコープなので、ブロック内でのみ変数が有効であり、変数の上書きのリスクが減ります。

  • 再宣言不可: 同じスコープ内で再宣言できないため、変数の上書きによるバグが減ります。

デメリット

  • 一部の古いブラウザで非対応: letは比較的新しい機能なので、古いブラウザではサポートされていないことがあります。

function letExample() {
    let y = 10;  // 変数を宣言して値を代入
    if (true) {
        let y = 20;  // ブロック内でのみ有効な新しい変数
        console.log(y);  // 出力: 20
    }
    console.log(y);  // 出力: 10
}
letExample();

constについて

  • 再代入: 不可

  • 再宣言: 不可

  • スコープ: ブロックスコープ

メリット

  • 再代入不可: 定数として扱うため、値が変更されることがなく、意図しない変更が防げます。

  • スコープが明確: ブロックスコープなので、変数が意図しない場所で上書きされることがありません。

デメリット

  • 再代入不可: 一度値を設定すると変更できないため、変数の値を変更する必要がある場合には不便です。

  • 一部の古いブラウザで非対応: constも比較的新しい機能なので、古いブラウザではサポートされていないことがあります。

function constExample() {
    const z = 10;  // 定数を宣言して値を代入
    // z = 20;  // エラー: 再代入不可
    console.log(z);  // 出力: 10

    if (true) {
        const z = 20;  // ブロック内でのみ有効な新しい定数
        console.log(z);  // 出力: 20
    }
    console.log(z);  // 出力: 10
}
constExample();

サンプルソース

HTMLファイル：index3.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScript変数サンプル</title>
    <script src="app.js" defer></script>
</head>
<body>
    <h1>買い物リスト</h1>
    <div id="shopping-list"></div>
    <div id="total"></div>
</body>
</html>

JavaScriptファイル ：app3.js

// 商品の価格を変数に保存
let applePrice = 100;
let bananaPrice = 80;
let orangePrice = 120;

// 購入する個数を変数に保存
let appleCount = 3;
let bananaCount = 2;
let orangeCount = 1;

// 合計金額を計算
let totalPrice = (applePrice * appleCount) + (bananaPrice * bananaCount) + (orangePrice * orangeCount);

// 買い物リストをHTML要素に追加
let shoppingList = document.getElementById('shopping-list');
shoppingList.innerHTML = `
    <p>りんご: ${applePrice}円 × ${appleCount}個</p>
    <p>バナナ: ${bananaPrice}円 × ${bananaCount}個</p>
    <p>オレンジ: ${orangePrice}円 × ${orangeCount}個</p>
`;

// 合計金額をHTML要素に追加
let totalElement = document.getElementById('total');
totalElement.innerHTML = `<strong>合計: ${totalPrice}円</strong>`;

コードの説明

  1. 変数の宣言と代入:

    • let キーワードを使って変数を宣言します。

    • 例: let applePrice = 100; は、applePrice という名前の箱を作り、その中に 100 という値を入れています。

  2. 計算:

    • 変数を使って計算を行います。

    • totalPrice は、各商品の価格と個数を掛けて合計しています。

  3. テンプレートリテラル:

    • ` (バッククォート) で囲まれた部分がテンプレートリテラルです。

    • ${変数名} の形で変数の値を文字列の中に埋め込めます。

  4. DOM操作:

    • document.getElementById('id名') でHTML要素を取得します。

    • innerHTML プロパティを使って、HTML要素の中身を変更します。

実行結果

表示

終わりに

少し長くなったので、ここで一旦お話をクローズさせて頂きます。
自分自身の学習記録帳のため、乱雑な文章になっている可能性があります。
申し訳ございません。

最後までお読みいただき、ありがとうございます。
私も皆さんのnoteを拝見させて頂いて、多くの気づきを得ています。
本当に感謝🙏です。
今後ともよろしくお願いします。

この記事が気に入ったらサポートをしてみませんか？