LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@meru_123

vueのimport、exportって何？

Posted at

export default { ... } は、Vueコンポーネントを他のファイルで使用できるようにエクスポートするための構文です。もしそのコンポーネントを他のファイルで使う予定がなければ、export defaultを省略することもできます。

例えば、Vueコンポーネントが単独で使われる場合、export defaultを使わなくても動作しますが、一般的にVueコンポーネントは別のファイルでインポートして使うことが多いため、export defaultは書いておく方が無難です。

export defaultを使わない場合:

もしコンポーネントが現在のファイル内でのみ使われ、他のファイルにインポートする予定がない場合、export defaultは省略できます。しかし、Vueではほとんどの場合、他のファイルでもそのコンポーネントを使うことになるため、export defaultを記述しておくのが一般的です。

例えば、コンポーネントが単独で使われる場合：

const MyComponent = {
  data() {
    return {
      message: "Hello, World!"
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  }
};

export default MyComponent;

まとめ：

  • 他のファイルでそのコンポーネントを使用する可能性がある場合は、export defaultを書いておく方が無難です。
  • 現在そのコンポーネントを単独で使うだけなら、省略しても問題ありませんが、export defaultを使うことで他のファイルでインポートできるようになり、再利用性が高まります。

基本的には、コンポーネントの再利用性を高めるために、export defaultを使っておく方が望ましいです。

料理に例えると、
export defaultはレシピを「他の人に渡せる形」にする作業に似ています。

  • export default: これは、作った料理を「レシピカード」にして渡すようなものです。これを使うと、他の人（別のファイル）でもそのレシピ（コンポーネント）を使って料理（コンポーネント）を作ることができます。もしレシピを渡さなければ、その料理はその場でしか食べられません。

  • 省略する場合: 料理を「その場でだけ食べる」ような感じです。他の人に渡さないで、その場だけで楽しむなら、レシピをわざわざ書かなくてもOK。でも、もし後でその料理を他の人に作ってもらいたい場合は、レシピを渡しておく必要があります。

つまり、**export default**は他の人が再利用できるように「レシピを渡す」という行為で、省略するということはそのレシピを渡さずに「その場でのみ食べる」という選択になります。

例

export defaultは、コンポーネントや関数、オブジェクトなどをエクスポートして、他のファイルで利用できるようにするために使います。以下にいくつかの例を挙げて、使い方を紹介します。

1. Vueコンポーネントのエクスポート

Vueコンポーネントを他のファイルでインポートして使用するためには、export defaultを使ってコンポーネントをエクスポートします。

// MyComponent.vue
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from MyComponent!',
    };
  },
};
</script>

このようにコンポーネントをエクスポートすることで、別のファイルでインポートして使用できます。

// App.vue
<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

2. 単一の関数のエクスポート

単一の関数をエクスポートする場合にもexport defaultを使います。この方法でエクスポートされた関数は、他のファイルでインポートして使用できます。

// utils.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

この関数を他のファイルでインポートして使うことができます。

// App.vue
import greet from './utils.js';

export default {
  mounted() {
    console.log(greet('John')); // "Hello, John!"
  },
};

3. オブジェクトのエクスポート

オブジェクトをエクスポートする場合も、export defaultを使って他のファイルでそのオブジェクトをインポートして使用します。

// config.js
export default {
  apiUrl: 'https://api.example.com',
  apiKey: '1234567890',
};

他のファイルでは、このオブジェクトをインポートしてアクセスできます。

// App.vue
import config from './config.js';

export default {
  mounted() {
    console.log(config.apiUrl); // "https://api.example.com"
    console.log(config.apiKey); // "1234567890"
  },
};

4. クラスのエクスポート

クラスをエクスポートして、他のファイルでインスタンスを作成する場合にもexport defaultを使います。

// Person.js
export default class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

このクラスを他のファイルでインポートして使います。

// App.vue
import Person from './Person.js';

export default {
  mounted() {
    const person = new Person('John', 30);
    console.log(person.greet()); // "Hello, my name is John and I am 30 years old."
  },
};

5. 設定ファイルやデータのエクスポート

設定情報やデータをエクスポートする場合にもexport defaultが使われます。例えば、JSON形式の設定ファイルやデータファイルをエクスポートすることができます。

// data.js
export default {
  users: [
    { name: 'Alice', age: 28 },
    { name: 'Bob', age: 34 },
  ],
};

このデータを他のファイルでインポートして利用できます。

// App.vue
import data from './data.js';

export default {
  mounted() {
    console.log(data.users); // [{ name: 'Alice', age: 28 }, { name: 'Bob', age: 34 }]
  },
};

まとめ：

export defaultは、コンポーネント、関数、オブジェクト、クラス、データなどをエクスポートして他のファイルでインポートできるようにするために使います。特にVueコンポーネントやユーティリティ関数など、プロジェクト内で再利用するためにはよく使う構文です。

他のファイルで使いたいものをexport defaultでエクスポートし、それをインポートすることで、コードの再利用やモジュール化がしやすくなります。

なぜ export default は1つだけなのか？

export defaultを使うと、そのファイルから 1つだけ を「デフォルト」としてエクスポートします。デフォルトエクスポートは、そのファイルの「主な」エクスポートとされるため、1つのファイルに複数のデフォルトエクスポートはできません。

複数のエクスポートが必要な場合

もし複数の値（関数、クラス、オブジェクトなど）をエクスポートしたい場合は、export default ではなく、通常の export を使います。

例 1: export default と通常の export を使う

// utils.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

export function farewell(name) {
  return `Goodbye, ${name}!`;
}

このように、export default を使ってデフォルトエクスポートを1つだけ行い、さらに他の関数や値を通常の export でエクスポートすることができます。

インポート例:

// App.vue
import greet, { farewell } from './utils.js'; // `greet` はデフォルトインポート、`farewell` は名前付きインポート

export default {
  mounted() {
    console.log(greet('John')); // "Hello, John!"
    console.log(farewell('John')); // "Goodbye, John!"
  },
};

このように、1つのファイルに1つの export default と、複数の名前付きエクスポートを混ぜて使うことができます。

複数のデフォルトエクスポートができない理由

JavaScriptモジュールは、ファイルが1つの「主な」エクスポートを持つことを想定しているため、export default が複数存在すると、どれがそのモジュールの「主な」エクスポートなのかが不明確になります。このため、1つのファイルで1つの export default しか許可されていません。

まとめ

  • export default は1ファイルに1つだけです。
  • 複数の値をエクスポートしたい場合は、通常の export を使います。
  • export default は「主なエクスポート」を指定するために使い、他のエクスポートは名前付きエクスポートで管理します。

export の場合、名前は 統一する必要があります。具体的には、export でエクスポートする際の名前と、インポート時に使う名前は 一致 させる必要があります。

通常の export でのエクスポートとインポート

例 1: 名前が一致する場合

// utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

インポート時も同じ名前を使います：

// App.vue
import { greet } from './utils.js'; // `greet` はエクスポート時の名前と一致

export default {
  mounted() {
    console.log(greet('John')); // "Hello, John!"
  },
};

この場合、greet 関数の名前はエクスポート時とインポート時で一致しています。greet という名前でエクスポートし、その名前でインポートする必要があります。

例 2: 名前を変更した場合（別名でインポート）

export でエクスポートした名前をインポート時に変更することはできますが、その場合はインポート時に as を使って別名を付ける必要があります。

// utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

インポート時に名前を変更する場合：

// App.vue
import { greet as sayHello } from './utils.js'; // `greet` を `sayHello` としてインポート

export default {
  mounted() {
    console.log(sayHello('John')); // "Hello, John!"
  },
};

このように、greet としてエクスポートした関数を、sayHello という名前でインポートしています。as を使って名前を変更できます。

名前を一致させる必要がある場面

  1. エクスポート時の名前とインポート時の名前は一致させる必要があります。ただし、インポート時に as を使って別名を付けることはできます。

  2. 名前付きエクスポートの場合、エクスポートする名前とインポートする名前は基本的に一致しなければなりません。as を使えば名前の変更が可能です。

まとめ

  • export でエクスポートした関数や変数の名前は、インポート時に一致させる必要があります。
  • インポート時に as を使えば、名前を変更してインポートすることができます。

名前を一致させることで、コードの可読性やメンテナンス性が向上します。

import { aaa } from "@test/test"; と import aaa from "@test/test"; の違いについて、それぞれの構文の意味を説明します。

1. import { aaa } from "@test/test";

この形式は、名前付きインポートです。@test/testモジュールから、名前が aaa のエクスポートをインポートしています。ここで {} 内の aaa は、モジュールでエクスポートされた具体的な名前です。

使用例:

// @test/test.js
export const aaa = 'Hello';

// 別のファイルでインポート
import { aaa } from "@test/test"; // aaa という名前のエクスポートをインポート
console.log(aaa); // 'Hello'

この場合、@test/test.js モジュール内で名前付きエクスポートされた aaa をインポートしています。

2. import aaa from "@test/test";

この形式は、デフォルトインポートです。@test/testモジュールからデフォルトエクスポートされたものを、aaa という名前でインポートしています。

使用例:

// @test/test.js
export default 'Hello';

// 別のファイルでインポート
import aaa from "@test/test"; // デフォルトエクスポートを aaa としてインポート
console.log(aaa); // 'Hello'

この場合、@test/test.js モジュールで export default を使ってエクスポートされた値を aaa という名前でインポートしています。

{} の意味

  • 名前付きインポート (import { aaa } from "@test/test";) では、{} はモジュール内でエクスポートされている名前を指定します。複数の名前付きエクスポートをインポートする場合も {} 内でカンマ区切りで指定します。

例:

// @test/test.js
export const aaa = 'Hello';
export const bbb = 'World';

// 別のファイルでインポート
import { aaa, bbb } from "@test/test"; // aaa と bbb をインポート
console.log(aaa, bbb); // 'Hello' 'World'
  • デフォルトインポート (import aaa from "@test/test";) では、{} は使用せず、デフォルトエクスポートされた値を指定します。

まとめ

  • {} は 名前付きエクスポート をインポートするために使用され、モジュールから特定の名前を指定してインポートします。
  • デフォルトインポート は {} を使用せず、モジュールのデフォルトでエクスポートされた値をインポートします。
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?