Reactを学ぶIX〜importとexport〜


## ■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Reactの基礎知識が増える
・ importとexportの理解とモジュールについて

## ■ モジュール化とは

##### <font color="red">→ 大きなものをいくつかにモジュール毎に分割して管理する</font>

・ 他のJavaScript以外の言語では昔からある概念

・ JavaScriptではES2015（ES6）から採用

・ 基本的に1ファイルに1モジュール

・ モジュールを作ったら、任意の場所でモジュールを読み込んで使用できる

## ■ モジュール化の効果

![スクリーンショット 2020-11-13 15.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/1501aaa0-23b0-eb60-7d94-71c41fce1542.png)

Reactは、このモジュールの概念を強く意識して作られています。
Reactのコンポーネントを作ったらそれが1個のモジュールになっており、それを必要な所で読み込んだり・・・
コンポーネントを分ける事で管理をしやすくしたり・・・
同じUIの所であれば、それを何度も何度も使い回して使ったり・・・
Reactとモジュールの関係はお互いに強く結びついていると言えます

## ■ モジュールを作る

モジュールを作る時は、exportを使います。exportは<font color="red">名前付きexport</font>と<font color="red">名前なしexport</font>の2種類あります

####・ 名前付きexport
→ 1つのモジュールから複数の関数をexportできるが、クラスはexportできない

```javascript:src/index.js

// 関数を用いる
export function foo() {
    return (<h1>Foooo</h1>)
}

// 或いはアロー関数を使う
export const Bar = () => {
    return (<h1>Baaaar</h1>)
}
```

exportした`foo`という関数を別の所で使ったり、`Bar`という関数をimportして別の所で使うことができます

####・ 名前なし（default）export

→ 1ファイル（1モジュール）1つだけexportし、ES6で推奨されているexport方法です

```javascript:src/Foo.js
export default function Foo() {
    return (<h1>Fooooo</h1>)
}
```

アロー関数の場合は、`export default const hoge`の様な書き方はできませんので
先にアロー関数で宣言してからexportします

```javascript:src/Bar.js
const Bar = () => {
    return (<h1>Baaaar</h1>)
}
export default Bar
```

そして、名前なしexportであれば、クラスもexportすることができます

```javascript:src/Hoge.js

// Fugaというクラスを継承したHogeというクラスを作ってexportする

export default class Hoge extends Fuga {
    render() {
        return (<h1>Hoge</h1>)
    }
}
```

## ■ import

importする方法は3つあり、モジュール全体をimport・モジュールの一部をimport・別名でimportする方法があります

####・ モジュール全体のimport
→ 名前なし(default)exportしたモジュールをimportする時に使う

```react:src/Blog.js
import React from `react`;
import Article from "./Article";

// npmで管理しているreactパッケージの中のReactというモジュールをimportしている
// ArticleファイルからArticleというモジュールをipmortしている
```

```react:src/Article.js
const Article = (props) => {
    return (<div>Articleです！</div>)
};
export default Article
```

####・ 関数ごとのimport
→ 名前付きexportされたモジュールをimportする時に使う

```react:src/Hoge.js
import { Foo, Bar } from "./FooBar";

// {}内にimportした関数名を記述
// FooBarというファイルから、FooとBarをimportする
```

```react:src/FooBar.js
export function Foo() {
    return (<h1>Foooo</h1>)
}
export const Bar = () => {
    return (<h1>Baaaar</h1>)
}

// 名前付きexportなので、1ファイルで2つのモジュールがexportされている
```

####・ 別名import
→ importする時は、export元の名前を使うのが一般的だが、別名（エイリアス）をつけてimportできる
・ モジュール全体なら`*as name`
・ モジュールの一部なら`{ A as B }`

```react:src/Blog.js
import React from 'react';
import * as AnotherName from './Article' // ① AnotherNameという名前でArticleのモジュールをimportする
import { Foo as MyFoo } from './FooBar'  // ② FooBarファイルからFooという関数をMyFooという名前でimportする
```

## ■ 例

① 以前のプロジェクトを流用します。まず、src内に新規ディレクトリを作ります

![スクリーンショット 2020-11-14 15.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/16c5bd15-4070-d6ca-5995-5696bac1a222.png)

![スクリーンショット 2020-11-14 15.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/a46805e4-e272-f661-3753-4657c15f1ff1.png)

② 作成した新規ディレクトリの中に、`FooBar.jsx`というファイルを作成して、名前付き関数を2つ記述します

```react:FooBar.jsx
import React from 'react'

export function Foo() {
    return(<h2>Foooo</h2>)
}
export const Bar = () => {
    return(<h2>Baaar</h2>)
}

// FooBar.jsxからは、2つ関数をexportしていることになる
```

③ 作成した新規ディレクトリの中に、`Hoge.jsx`というファイルを作成して、クラスコンポーネントをexportします

```react:Hoge.jsx
import React from 'react'

export default class Hoge extends React.Component {
    render() {
        return(<h2>Hogeeee</h2>)
    }
}
```

④ `Blog.jsx`で先程作ったモジュールをimportしていきます

```react:Blog.jsx
import { Foo, Bar } from './components/FooBar' // 名前付きexport

// 参照先が相対パス（現在変更しているファイル目線）になるので注意
```

⑤ 名前なしクラスの`Hoge.jsx`もimportしていきます

```react:Blog.jsx
import Hoge from './components/Hoge'
```

⑥ これらのコンポーネントを並べて実際に使ってみます

```react:Blog.jsx
render () {
  return(
    <>
        <Article title={"Reactの使い方"} isPublished={this.state.isPublished} toggle={() => this.togglePublished()} count={this.state.count} />
        <Foo />
        <Bar />
        <Hoge />
    </>    
  );
}
```

![確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/0237598f-f7e8-2f83-b998-22ad0746ef35.png)


Foo関数とBar関数、hogeクラスを表示することができました

⑦ 別名importで`FooBar`を読み込むには、以下の書き方をします

```react:Blog.jsx
import * as FooBar from './components/FooBar' // FooBarとい名前でファイル全体をimportする

// 中略

render () {
  return(
    <>
        <Article title={"Reactの使い方"} isPublished={this.state.isPublished} toggle={() => this.togglePublished()} count={this.state.count} />
        <FooBar.Foo />
        <FooBar.Bar />
        <Hoge />
    </>    
  );
}

// FooBarの中のFoo関数とBar関数を読み込む

```