📚

module(import/export)ってなんなん?

2021/06/02に公開

React

JavaScript

TypeScript

tech

はじめに

Reactで開発を進めているとimportとかexportとか、まるで息をするかのように頻繁に使用すると思います。初心者だとしても、参考にするコードが至る所にありますし「なんとなくノリで・・・」importしていませんか?「多分こう書けばいいんでしょ?」ってexportしていませんか?...僕はしてました。

きちんと理解した上で使用するべきなのは間違い無いので、ここにメモを残します。

Module機能とは

モジュール機能ってなんでしょうか?実はこれReactの機能ではなくJavaScriptの機能です。

何のためのファイルなのかはっきりさせるため。
コードの保守性を高め、管理しやすくするため。
ファイルを再利用しやすくするため。

という理由から、1ファイル1モジュール(コンポーネント)に分割して、
使いたい時に使いたいものだけ持ってきて利用するために、import exportを使います。
大体以下のような感じで使用していきます。

// つくったコンポーネントを export(他のファイルからよびだせるように)して・・・・
export const Card = ({title}) => {
    return <h1>{title}</h1>
}

// import(このファイルで受け取って)して、Cardコンポーネントを使えるようにして....
import Card from './components/Card'

const CardList = () => {
    return (
        <>
	    <Card title={1つ目} />   {/* つかう! */}
	    <Card title={2つ目} />   {/* つかう! */}
	    <Card title={3つ目} />   {/* つかう! */}
	</>
    )
};

// CardListも別ファイルで使用できるようにexport
export default CardList;

Default export/import

名前なしexport、importと呼ばれることもあり、default言うだけあってJSが推奨している方法。

Default export

default exportは1モジュールにつき、1つしかつくれません。
ファイルの末尾に、以下のように記載してエクスポートします。

export default コンポーネント名;

注意しておくべきことは、defaultという名前をつけてエクスポートをしていると言う点です。

以下のCardを例にとり、ものすごく長ったらしく説明をすると・・・
「CardコンポーネントをCardという名前ではなく、defaultという名前でexportしますね!defaultという名前が気に入らないなら、importするときに勝手に別名つけていいよ!!」です。

const Card = ({title}) => {
    return <h1>{title}</h1>
}

export default Card;　// ココ!!!

Default import

default importは、1モジュールにいくつまで。という制限はありません。（あたりまえですね）
ファイルの先頭で、以下のようにしてインポートを行います。

import コンポーネント名(自由) from 'ファイルパス'

ここで注意すべきことは、コンポーネント名はつけたい名前をつけることができる。という点です。
(慣習としては、そのコンポーネントの元々の名前をつけます。)

以下のCardを例に、(実際はしないでしょうが)こんな風にもできます・・・・
「importしたCardコンポーネントはdefaultという名前でexportされているから、自由に名前が変更できる。そうだTomとして使おう。」です。

import Tom from './components/Card'

const CardList = () => {
    return (
        <>
	    <Tom title={1つ目} />
	    <Tom title={2つ目} /> 
	    <Tom title={3つ目} /> 
	</>
    )
};

名前付き export/import

デフォルトの名前なしとは違い、その名の通り、名前をつけた状態でexport importします。
1ファイル内にエクスポートしたいコンポーネントや関数、型等が複数あった時は名前付きを使ってエクスポートします。

名前付き export

名前付き exportは1モジュールにつき1つ。の制限はありません。好きなだけエクスポートしてください。名前付き exportの方法は大きく2つあります。

エクスポートしたい関数等の先頭にひとつづつexportとつける。
エクスポートしたい関数をファイル末尾でまとめてexportする。

です。もちろん「この関数はexportしなくていいや。」みたいなこともできます・・・

1つづつexport

export const hello = () => console.log('hello!!')
export const bonjour = () => console.log('bonjour!!')
export const ciao = () => console.log('ciao!!')
const ohayo = () => console.log('ohayo!!') // ohayoだけexportされていない

まとめてexport

const hello = () => console.log('hello!!')
const bonjour = () => console.log('bonjour!!')
const ciao = () => console.log('ciao!!')
const ohayo = () => console.log('ohayo!!')

export { hello, bonjour, ciao };　// ohayoだけexportされていない

名前付き import

名前付き importではexportの際に決めた関数名を記載してインポートする必要があります。
ファイルの先頭で、以下のようにしてインポートを行います。( { }を忘れずに...)

import { 関数名(固定) } from 'ファイルパス'

コンマで繋げば、複数一気にimportすることができます。

import { hello, bonjour, ciao } from './greetings'

//　インポートしたものをつかう
hello();       // hello!!
bonjour();     // bonjour!!
ciao();        // ciao!!

名前の変更

名前付き import 名前付き exportでは関数宣言時とは異なる名前を指定してインポート・エクスポートすることができます。いずれも asを用いて別名を指定できます。

// インポート時
import { 元の名前 as 別の名前 } from 'ファイルパス';

// エクスポート時
export { 元の名前 as 別の名前 };

インポートが大量になってくると、汎用的な名称のコンポーネントや関数、型などは名前が被りがちになってしまいます。そんなときにasを利用してください・・・

import { 
    hello as english,
    bonjour as french,
    ciao as italian
} from './greeting'

// 名称を変更してインポートしたものをつかう
english();     // hello!!
french();      // bonjour!!
italian();     // ciao!!

モジュールオブジェクト

上記のようにインポートしても全く問題ないのですが、対象ファイルの中にある全てのエクスポートを取得して、モジュールオブジェクトを作成することで、より簡潔に複数の機能を利用することができます。

// インポート時
import * as モジュールオブジェクト名(自由) from 'ファイルパス'
// 使用時
モジュールオブジェクト名.関数名();

たとえば先ほどまでのgreeting達をモジュールオブジェクトにすると・・・

import * as greeting from './greeting';

greeting.hello();     // hello!!
greeting.bonjour();   // bonjour!!
greeting.ciao();      // ciao!!

さいごに

とても基本的なことだとは思いますが冒頭でも言った通り「ノリでやってた」感がいなめませんでした。あやふやな基礎はしっかり固めてがんばりましょう!!!(....がんばります!!!!)