【Vue】componentsの中の()=>import(‘ ‘)とは何か？import fromを省略してコンポーネントを呼び出す方法を実例で解説

Vueではコンポーネントを呼び出すときに、import fromで指定した.vueファイルをモジュールとして読み込んで、componentsタグの中でコンポーネントとして登録する処理を行います。

通常この記述は2行になりますが、これを1行で省略して書くことができます。

componentsの中で見かける()=>import(' ')がそれに当たります。

ここでは、import fromを省略してコンポーネントを呼び出す方法を実例で解説しています。

通常のコンポーネントの呼び出し

通常、あるファイルの中でコンポーネントを呼び出す場合は、まず、対象となるファイルにモジュール名をつけてimportします。

import モジュール名 from 'ファイルパス'

続いて、読み込んだモジュールをexport defaultの中のcomponentsオブジェクトでコンポーネントとして登録します。

export default {
  components:{
    モジュール名
  }
}

このように、コンポーネントの呼び出しを2段階で行うのが一般的です。

import fromを省略してコンポーネントを呼び出す方法

import fromを省略してコンポーネントを呼び出す方法は簡単です。それは、componentsでコンポーネントを定義するときに、合わせてimportもしてしまうという方法です。

export default {
  components:{
    コンポーネント名: ()=>import('ファイルパス')
  }
}

この記述だけで、指定した.vueファイルをコンポーネントとして登録することができます。

実例

import fromを使う場合

例えば、親コンポーネントの中で、同じ階層にあるTest.vueというコンポーネントを読み込む場合は以下のようになります。

<template>
    <Test />
</template>

<script>
//①import fromでモジュールとして読み込む
import Test from "./Test" 

export default {
  //②コンポーネントとして登録
  components:{
    Test
  }
}
</script>

import Test from "./Test" 

import Test from "./Test.vue" 

import fromを省略する場合

上記の処理をimport fromを省略して記述すると以下のようになります。

<template>
    <Test />
</template>

<script>
export default {
  components:{
    Test: ()=>import('./Test')
  }
}
</script>

これで、問題なく動きます。

何をしているのか？（動作原理）

import fromを省略してコンポーネントを呼び出す下記の処理が何をしているかを理解するには３つ抑えるべきポイントがあります。

export default {
  components:{
    コンポーネント名: ()=>import('ファイルパス')
  }
}

プロパティ名の省略

import fromを使った.vueコンポーネントの読み込みで、通常よく見かけるのは、componentsの中で、読み込んだモジュール名だけを記述している方法です。

例えば以下の例であれば「Test」とだけ記載してあります。

<script>
import Test from "./Test" 

export default {
  components:{
    Test
  }
}
</script>

実はこの記述は、モジュール名をコンポーネント名として使う場合にできる省略表記です。

本来は以下のようになっています。

export default {
  components:{
    コンポーネント名: モジュール名
  }
}

つまり、左側に「コンポーネント名」を記載して、右側でその値を指定できるということです。

import関数

2つ目の重要なポイントは「import関数」です。

通常外部のファイルの内容をインポートするときは「import from」という文を使いますが、もう一つimport関数という関数も用意されています。

以下のようにするとファイルの内容を読み込みます。

import('ファイルパス')

一般的には、次のようにして読み込んだ内容を変数などに代入します。

var 変数名 = import('ファイルパス')

これを活用したのが、import fromを省略してコンポーネントを定義する方法です。

コンポーネント名: ()=>import('ファイルパス')

上記のようにすることで、import関数を使って、ファイルの内容を読み込み、その内容をそのままコンポーネントとなるプロパティの値に設定しています。

アロー関数

３つ目の重要なポイントは「アロー関数」です。

importの部分を見ると、ただ「import(‘ファイルパス’)」とするだけでなく、「()=>import(‘ファイルパス’)」というように、関数として処理しています。

コンポーネント名: ()=>import('ファイルパス')

import関数自体はファイルの中を読み込むだけです。読み込んだ結果を値として戻すためには「return（戻り値）」が必要です。

「return」させるためには関数としてimport()を実行する必要があります。

「()=>import(‘ファイルパス’)」はreturnしてないじゃないか？と思うかもしれませんが、アロー関数では、処理を１つの式で記述できる場合はreturnを省略することができます。

つまり、上記は以下と同じです。

コンポーネント名: () => { return import('ファイルパス') }

なお、アロー関数はfunctionを省略した書き方です。functionを省略しない場合は以下のようになります。

コンポーネント名: function(){ return import('ファイルパス') }

関数ではなく、単にimport()を実行するとどうなるか？

関数ではなく単にimport()を実行すると戻り値が無いので次のようなエラーが発生します。

console.log( import('./test') )

Failed to compile.

./src/components/HelloWorld.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=script&lang=js&)
Module not found: Error: [CaseSensitivePathsPlugin] `C:\Users\documents\projects\vue\vue2-local\src\components\test.vue` does not match the corresponding path on disk `Test.vue`.

コンパイルに失敗しました。モジュールが見つかりません（Module not found: Error: [CaseSensitivePathsPlugin]）という内容です。

なお、関数の中でimport()を戻り値とした場合は以下のようになります。

console.log(()=> import('./Test'))

ƒ () {
  return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./Test */ "./src/components/Test.vue"));
}

エラーにはなりません。コンパイルにwebpackという機能を使っているので、上記のような関数処理が表示されます。