Reactを学ぶIX〜importとexport〜

■ はじめに

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

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

■ モジュール化とは

→ 大きなものをいくつかにモジュール毎に分割して管理する

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

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

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

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

■ モジュール化の効果

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

■ モジュールを作る

モジュールを作る時は、exportを使います。exportは名前付きexportと名前なしexportの2種類あります

・ 名前付きexport

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

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方法です

src/Foo.js

export default function Foo() {
    return (<h1>Fooooo</h1>)
}

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

src/Bar.js

const Bar = () => {
    return (<h1>Baaaar</h1>)
}
export default Bar

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

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する時に使う

src/Blog.js

import React from `react`;
import Article from "./Article";

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

src/Article.js

const Article = (props) => {
    return (<div>Articleです！</div>)
};
export default Article

・ 関数ごとのimport

→ 名前付きexportされたモジュールをimportする時に使う

src/Hoge.js

import { Foo, Bar } from "./FooBar";

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

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 }

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内に新規ディレクトリを作ります

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

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します

Hoge.jsx

import React from 'react'

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

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

Blog.jsx

import { Foo, Bar } from './components/FooBar' // 名前付きexport

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

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

Blog.jsx

import Hoge from './components/Hoge'

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

Blog.jsx

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

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

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

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関数を読み込む