10
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

React モジュールのimport、exportについて

モジュール化について

  • 他言語では昔からある概念
  • JavaScriptではES2015(ES6)から採用
  • 基本的に1ファイル=1モジュール
  • 任意の場所で読み込んで使用できる

モジュール化のメリット

  1. 分割統治できる
    大規模プログラムでも管理しやすくなる
  2. 任意の場所で読み込める
    必要なものを必要な分だけ
  3. 再利用できる
    何度も同じコードを書かなくていい

名前付きexport

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

index.js
export function Foo() {
  return (
    <h1>FOO</h1>
  );
}
export const Bar = () => {
  return (
    <h1>BAR</h1>
  );
}

名前なし(default)export

  • 1ファイル(1モジュール) 1export
  • ES6で推奨されているexport方法
  • アロー関数は宣言後にexport
  • クラスをexportできる
Foo.js
export default function Foo() {
  return (
    <h1>FOO</h1>
  );
}
Bar.js
const Bar = () => {
  return (
    <h1>BAR</h1>
  );
}
export default Bar;
Hoge.js
export default class Hoge extends Fuga {
  render() {
    return (
      <h1>Hoge</h1>
    );
  }
}

モジュール全体のimport

  • 名前なし(default)exportしたモジュールをimportする
  • モジュール全体のimport
Blog.jsx
import React from 'react';
import Article from "./Article";
Article.jsx
const Article = (props) => {
  return (
    <div>Article</div>
  );
}
export default Article;

関数ごとのimport

  • 名前付きexportされたモジュールをimportする
  • {}内にimportしたい関数名
Hoge.js
import { Foo, Bar } from "./FooBar";
FooBar.js
export function Foo() {
  return (
    <h1>FOO</h1>
  );
}
export const Bar = () => {
  return (
    <h1>BAR</h1>
  );
}

別名import

  • 別名(エイリアス)をつけてimportできる
  • モジュール全体なら * as name
  • モジュール一部なら A as B
Blog.jsx
import React from 'react';
import * as AnotherName from './Article';
import { Foo as MyFoo } from './FooBar';
Article.js
const Article = (props) => {
  return (
    <div>Article</div>
  );
}
export default Article;
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?