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

vue-js-prograshi(プロぐらし)-kv Vue.js
記事内に広告が含まれていることがあります。

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>
補足

.vueや.jsのファイルをimportする場合、ファイルの拡張子「.vue」や「.js」を省略することができます。

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を省略してコンポーネントを呼び出す下記の処理が何をしているかを理解するには3つ抑えるべきポイントがあります。

export default {
  components:{
    コンポーネント名: ()=>import('ファイルパス')
  }
}
ポイント
  1. プロパティ名の省略
  2. import関数
  3. アロー関数


プロパティ名の省略

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

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

<script>
import Test from "./Test" 

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

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

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

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

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

合わせて読みたい

プロパティ名と値をとるオブジェクトにおいて、値となる変数の名前をプロパティ名として使う場合に、プロパティ名を省略する方法を「shorthand property(ショートハンドプロパティ)」と呼びます。

JavaScriptの書き方でVueでも頻繁に使う便利な表記方法です。詳細については下記をご参考ください。

【JavaScript】shorthand propertyとは何か?


import関数

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

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

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

import('ファイルパス')

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

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

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

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

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

合わせて読みたい

importでファイルを指定して読み込めるのは、export defaultで指定してある内容です。詳細については下記をご参考ください。

【Vue】import fromとexport defaultの使い方を実例で解説|外部の.js&.vueファイルの読み込み。別ファイル間とのデータ・変数・関数の受け渡し


アロー関数

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

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

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

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

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

「()=>import(‘ファイルパス’)」はreturnしてないじゃないか?と思うかもしれませんが、アロー関数では、処理を1つの式で記述できる場合は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という機能を使っているので、上記のような関数処理が表示されます。

タイトルとURLをコピーしました