tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【JavaScript】default export と default import について

モジュールの読み込み時によく見かける {}
そうでないものの違いがわからなかったのでまとめてみました。
今回は default export と default import について。

import React from "react";
import { BookDescription } from "./BookDescription";

default export (名前なしexport)

  • 他のファイルで利用するために export を宣言する
  • アロー関数だとファイルの最後にexport default (関数名)を追記
  • 名前付き関数だと関数宣言時にexport defaultを追記
//アロー関数
const Title = (props) => {
  return <h2>{props.title}</h2>
}
export default Title;
//名前付き関数
export default function Title(props) {
  return <h2>{props.title}</h2>
}

default import (名前なしimport)

  • default export で指定した名前を import 時につける
  • default export でファイルごと読み込む時は ファイル名も同じ名前であることが多い
// Title.jsx
~~~
export default Title;
// App.jsx

import Title from ".Title";

おわり

この辺り意外とこんがらがっているので改めて整理できてよかったです。
明日は名前付きのexport import についての記事を書こうとおもいます。

おしまい