オブジェクトの分割代入(Destructuring assignment)

はじめに

分割代入(Destructuring assignment)とは 配列やオブジェクトのプロパティを解体して、その値を個別変数に含めることができるJavaScript表現式です。

分割代入の適用前

以下のコードを見ると、this.feeds[i]オブジェクトが何回も使われています。
こんなのを見るとthis.feeds[i]を一つの変数に抜き出しておきたいわけです。
こんな時に分割代入にて綺麗なコードにすることができます。

    renderView = () => {
      if(this.store.hasFeeds) {
        for(let i = (this.store.currentPage - 1) * 0; i < this.store.currentPage * 10; i++) {
          this.addHtml(`
            <div class="p-6 ${this.feeds[i].read ? 'bg-red-500' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
              <div class="flex">
                <div class="flex-auto">
                  <a href="#/show/this.feeds[i].id">${this.feeds[i].title}</a>  
                </div>
                <div class="text-center text-sm">
                  <div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">${this.feeds[i].comments_count}</div>
                </div>
              </div>
              <div class="flex mt-3">
                <div class="grid grid-cols-3 text-sm text-gray-500">
                  <div><i class="fas fa-user mr-1"></i>${this.feeds[i].user}</div>
                  <div><i class="fas fa-heart mr-1"></i>${this.feeds[i].points}</div>
                  <div><i class="far fa-clock mr-1"></i>${this.feeds[i].time_ago}</div>
                </div>  
              </div>
            </div>    
          `);
      }
    }

分割代入の適用後

分割代入にて左の変数を定義し、定義した各各の変数に右のオブジェクトを割り当てることができます。
身苦しかった重複だらけのコードが分割代入を使って綺麗なコードになりました。

    renderView = () => {
      if(this.store.hasFeeds) {
        for(let i = (this.store.currentPage - 1) * 0; i < this.store.currentPage * 10; i++) {
          // 分割代入(destructuring assignment)
          const {id, title, comments_count, user, points, time_ago, read} = this.store.getFeed(i);
          this.addHtml(`
            <div class="p-6 ${read ? 'bg-red-500' : 'bg-white'} mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
              <div class="flex">
                <div class="flex-auto">
                  <a href="#/show/${id}">${title}</a>  
                </div>
                <div class="text-center text-sm">
                  <div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">${comments_count}</div>
                </div>
              </div>
              <div class="flex mt-3">
                <div class="grid grid-cols-3 text-sm text-gray-500">
                  <div><i class="fas fa-user mr-1"></i>${user}</div>
                  <div><i class="fas fa-heart mr-1"></i>${points}</div>
                  <div><i class="far fa-clock mr-1"></i>${time_ago}</div>
                </div>  
              </div>
            </div>    
          `);
      }
    }

this.store.getFeed(i) の値は以下。

const {id, title, comments_count, user, points, time_ago, read}
定義した変数の値です。オブジェクトのvalueがkeyと同じ名前の変数に割り当てられることがわかります。

注意点としては、
変数の並び順は関係ないですが変数名とオブジェクトのキー名が一致しなければなりません。