Vue.jsのv-forで分割代入をする

7844 ワード
Vue.js JavaScript es6 ECMAScript InternetExplorer JavaScript テキストリンク

Vue.js の v-for ディレクティブでオブジェクトの分割代入のようなことをしたいと思ったのですが、「Vue.js 分割代入」や「v-for 分割代入」のように検索してもヒットせず、英語で「Vue.js Destructuring assignment」と調べたところ、Vue.js quick tip: Using destructuring assignment in for loops という記事を見つけました。

分割代入イメージ
<ul>
  <li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
</ul>

記事によれば v-for ディレクティブ内でも分割代入が使えるとのことだったので、試してみました。

v-for ディレクティブで分割代入を使ってみる

Vue.jsを試すのに一番お手軽なCDN版を使って試してみました。

テストページ

v-for-destructuring-assignment.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue.js v-for 分割代入テスト</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="{name, price} in products">{{ name }} - {{ price }}</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    (function () {
      'use strict';

      var app = new Vue({
        el: '#app',
        data: {
          products: [
            { name: 'Product 1', price: 300 },
            { name: 'Product 2', price: 100 },
            { name: 'Product 3', price: 200 }
          ]
        }
      });
    })();
  </script>
</body>
</html>

モダンブラウザであれば、このようなリストが表示されます

気になったところ

Vue.js 公式ドキュメントに記載がない(テストコードはある)

公式ドキュメントの リストレンダリング — Vue.js には分割代入に関する記載がないのですが、vuejs/vue (GitHub)のテストコードには分割代入に関するテストがありました(if (supportsDestructuring) に続くブロック)。
実際にテストコードを実行することはしませんでしたが、 Vue.js としては v-for ディレクティブ内での分割代入(オブジェクトの分割代入だけでなく、配列の分割代入も)をサポートしているのではないかと思われます。

CDN版Vue.js & Internet Explorer 11の組み合わせでは使えない

Vue.js quick tip: Using destructuring assignment in for loops の記事に、「ES6の機能を使っているのでIEではサポートしていない」のような記述があることに気づきました。

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality (ignoring the fact, that old browsers, which almost nobody uses, don't support those features - namely IE).

テストコードの supportsDestructuring の定義を見ても、分割代入構文をサポートしている場合にのみテストを実行しているように見えます。
(この supportsDestructuring
ですが、以前にQiitaに書いた【JavaScript】ES6やES2017の構文が使えるか判定する方法の記事と同じ方法で分割代入構文が使えるか判定しているようです)

実際、上に記載したHTML(テストページ、CDN版Vue.jsを使用)をIE11に読み込ませたところ、リストを表示することができませんでした。
ですので、CDN版Vue.js & IE11の組み合わせでは分割代入を使わないようにする必要があります。

IE11でも動くv-for
<ul>
  <li v-for="product in products">{{ product.name }} - {{ product.price }}</li>
</ul>

テンプレートをコンパイルする場合はInternet Explorer 11でもOK

webpack + vue-loader の場合、*.vue ファイル中のテンプレートをビルド時に JavaScript に変換するので、バンドルされた .js を Babel でES5にトランスパイルすればIE11でも問題なく動作しました。

まとめ

  • Vue.js の v-for ディレクティブでも分割代入構文は使える
    • 公式ドキュメントに記載がないので使用は自己責任で
    • CDN版Vue.js & Internet Explorer 11の組み合わせでは正常に動作しないので注意