勉強記録（2024/09/13）分割代入とブラケット記法

使用教材

https://www.sbcr.jp/product/4815615758/

職業訓練校で使用していたもの。
引き続きこちら。

勉強内容

ブラケット記法での記述ミス

続き。

const lists = [
    {
        name: 'イチゴ',
        img: 'strawberry',
        price: 450,
    },
    {
        name: 'ライム',
        img: 'lime',
        price: 400,
    },
    {
        name: 'マンゴー',
        img: 'mango',
        price: 450,
    },
    {
        name: 'レモン',
        img: 'lemon',
        price: 400,
    },
    {
        name: 'イチジク',
        img: 'fig',
        price: 550,
    },
    {
        name: 'リンゴ',
        img: 'apple',
        price: 450,
    },
];

こんな感じで複数のオブジェクトをひとまとめにして、一旦画像だけを呼び出し。

エラーが出た。「定義できない」らしい

コードはこれ。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i][img]}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

一つずつ検証。
まず教材通り（↓）にやってみる。と、ちゃんと出た。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i].img}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

つまりブラケット記法での指定方法に問題がある。
よく見ると[img]が '' でくくられてない。

for(let i = 0; i < lists.length; i++){
    const content = `<div><img src="images/${lists[i]['img']}.jpg" alt=""></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

↑のように直したらきちんと出た。単純ミス！
関数にするか文字列にするかで、処理が大きく変わってしまうんだなあ。
その後、商品名や金額も問題なく出た。

分割代入

さらに省略。
ただ消しただけ（''を付けたまま）だと文字扱いされるため、当然ダメ。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const content = `<div><img src="images/${'img'}.jpg" alt=""><h2>${'name'}</h2><p>${'price'}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

画像も文字も出てない

教材通り（↓）にしてみるとちゃんと出た。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const content = `<div><img src="images/${img}.jpg" alt=""><h2>${name}</h2><p>${price}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

調べた感じ、分割代入にはドット記法もブラケット記法もない？みたい。

【JavaScript】プログラミング初心者が知っておくべきオブジェクトのこと【9選】 | フロントエンドRPG

JavaScriptの分割代入が便利 - 箱のプログラミング日記。

分割代入で定数にキーを格納して呼び出せるか

ブラケット記法だとドット記法と違って、定数にキーを格納して呼び出せるけど、分割代入ではできるのか検証。

for(let i = 0; i < lists.length; i++){
    const {name, img, price} = lists[i];
    const key = name; //追加
    const content = `<div><img src="images/${img}.jpg" alt=""><h2>${key}<!--変更--></h2><p>${price}円</p></div>`;
    menu.insertAdjacentHTML('afterbegin', content);
}

出た！

出た！
ということは分割代入できるのであれば、それを使ったほうが綺麗かつ楽に書けるってことだ。どんどん活用していこう。

というわけで今日の分終わり。