Vueの設定ファイルが読みたい...。JSの基礎を学びつつRails * Vueの設定ファイルを読んだ話

これは何？

RailsアプリにVueを組み込んで実装していますが、いまいち効率が良くない気がしました。
新しい設定ファイルの書き方を探していた時に見つけたこれちらの設定ファイルが読めなかったので、読み方を確かめがてら、jsの基本文法について学びました。

▼参考にした設定ファイル

import Vue from "vue";
import Hoge from './components/Hoge';
import Fuga from './components/Fuga';

export const components = {
  Hoge,
  Fuga
};

document.addEventListener("DOMContentLoaded", () => {
  let templates = document.querySelectorAll("[data-vue]");

  for (let el of templates) {
    let app = new Vue(components[el.dataset.vue]);
    app.$mount(el);
  }
});

このファイルで、これらのコンポーネントを読み込んでいます。

<%= javascript_include_tag webpack_asset_path('app.js') %>

<main>
  <div data-vue="Hoge"></div>
  <div data-vue="Fuga"></div>
</main>

なお、本記事の内容は主にMDNに出てきた内容と、こちらのYouTube動画の内容を元にまとめたものです。

マウントとは

既存のDOM要素をVue.jsが生成するDOM要素で置き換えること。引用した設定ファイルでもマウントをして、JSで生成した要素をビューに表示しています。

elプロパティによるマウント

Vueインスタンスを新規作成した際に、elで指定したDOM要素にvueで生成したコンポーネントを新規マウントさせる。

var vm = new Vue({
  el: '#app'
})

この場合は、新規作成したインスタンスを#appにマウントさせています。
なお、vmはVueModelの略で、Vue インスタンスの変数名としてよく使われます。

$mount() メソッドによるマウント

var vm = new Vue({
  // data: などいろいろ
})
vm.$mount(el)

こちらも、要素をマウントさせる書き方の一つです。elプロパティによるマウントと違い、新規作成以外の任意のタイミングでマウントできることが特徴です。

inport

別のJS（cssや画像のことも）ファイルから要素を取り込むときにimportで取り込みます。その時の書き方がたくさんあります。

名前付きインポート(named_import)

まずは、このように{}付きで書かれるパターン。これは「名前付きインポート」と言います。

import { hoge } from "./fuga.js"

この時、fuga.jsにはこのように書かれています。

fuga.js

const hoge = "変数の中身"
export { hoge }

このように、変数の宣言と同時にexport することもできる。

fuga.js

export const hoge = "変数の中身"
// export { hoge }

2つ以上一気にexport, importすることもできる。

import { hoge1, hoge2 } from "./fuga.js"

fuga.js

const hoge1 = "変数の中身1"
const hoge1 = "変数の中身1"

export { hoge1, hoge2 }

関数もexportできる。

fuga.js

function hello1(value) {
  console.log(value)
}

export function hello2(value) {
  console.log(value)
}

export { hello1 }

import { hello1, hello2 } from "./fuga.js"

hello1("こんにちは")
hello1("おはよう")

// consoleに”こんにちは”、”おはよう”と表示される

こんな風にすると、エイリアスがつけられる。

fuga.js

const hoge1 = "変数の中身1"
export { hoge1 }

import { hoge1 as ho } from "./fuga.js"
console.log(ho)

今回はimportする側でエイリアスをつけたが、exportする側でもエイリアスがつけられる。（わかりにくいので略）

デフォルトexport

named exportと書き方が違うのは２つ。１つは、export側でexport defaultと書くこと。

fuga.js

const hoge = "変数の中身"
export default hoge;

もう一つは、import側で{}を外すこと。

import hoge from "./fuga.js"

また、default exportがnamed exportと大きく違うのは、
default exportは１モジュールに対して1回しかexportを使うことができない。
つまり、これはできない。

fuga.js

const hoge1 = "変数の中身1"
const hoge2 = "変数の中身2"

export default hoge1;
export default hoge2;

また、default exportの場合、importする側では識別子（今回の場合、hoge1とかhoge2とか）に好きな名前を付けることができる。

fuga.js

const hoge = "変数の中身"
export default hoge;

import fuga from "./fuga.js"

これは、defaultがhogeという変数ではなく、評価された値（ここでは「変数の中身」という文字列）を読み込んでいるため。

関数の default export

関数もdefault exportできます。

fuga.js

function hello(value) {
  console.log(value)
}

export default hello;

import hello from "./fuga.js"

hello("こんにちは")

// consoleに”こんにちは”と表示される

好きな名前でimportもできます。

import hi from "./fuga.js"

hi("こんにちは")

// consoleに”こんにちは”と表示される

宣言と同時にexportするときは、識別子が不要です。
コンポーネントでよく見る形だわ。。。

fuga.js

// 無名関数(識別子がない)
export default function(value) {
  console.log(value)
}

import hello from "./fuga.js"

hello("こんにちは")

// consoleに”こんにちは”と表示される

el.dataset.vueについて

HTMLのdata-xxxプロパティに書かれている項目をel.dataset.xxxの形で取得できる。属性なので getAttribute() でも扱えるが、el.dataset.xxxはカスタムデータ属性専用のメソッド。

console.log(el.getAttribute('data-foo'));  // => "123"
console.log(el.dataset.foo);               // => "123"

▼参考：
data属性を扱うならdatasetで楽ちん。（DOMおれおれAdvent Calendar 2015 – 17日目）

連想配列のキー取得方法

最後に、JSでの連想配列でのキー取得方法について。
こんな連想配列があったら。。。

let member1 ={name:'太郎',age:'39',sex:'male'}

キーはこんな書き方で取得するそうです。

console.log(member1.name)
console.log(member1['name'])

▼JavaScriptでの連想配列(オブジェクトリテラル)の書き方・使い方について解説

改めて、最初のコードを読んでみる

さて、知識は集まったと思うので、改めて最初の設定ファイルを読んでみます。

import Vue from "vue";
import Hoge from './components/Hoge';
import Fuga from './components/Fuga';

export const components = {
  Hoge,
  Fuga
};

document.addEventListener("DOMContentLoaded", () => {
  let templates = document.querySelectorAll("[data-vue]");

  for (let el of templates) {
    let app = new Vue(components[el.dataset.vue]);
    app.$mount(el);
  }
});

まず、この部分は

import Hoge from './components/Hoge';
import Fuga from './components/Fuga';

デフォルトexportで、Hoge.js、Fuga.jsの評価された値をそれぞれ、Hoge、Fugaという変数で読み込んでいます。

そして、定義した変数を

export const components = {
  Hoge,
  Fuga
};

componentsという変数の中にいれ、宣言と同時にexportしています。

document.addEventListener("DOMContentLoaded", () => {
  let templates = document.querySelectorAll("[data-vue]"); // ★1

  for (let el of templates) { // ★2
    let app = new Vue(components[el.dataset.vue]); //★3
    app.$mount(el); // ★4
  }
});

★１で、コンテンツが読み込まれたときに、data-vue属性のついている要素をtemplates変数にそれぞれ格納し、

★2で、それぞれを変数elに格納しつつ宣言してforで回します。

最後に★3で、連想配列components から[el.dataset.vue]の内容（評価されたHoge.jsとFuga.jsの値）を取り出して、Vueインスタンスを作成し、

生成したVueインスタンスを、$mount()メソッドでel（data-vue="Hoge", data-vue="Hoge"のついた

要素）にマウントしています(★4)。

長かったですが、これでVue.jsの設定ファイルを読むことができました。