1. shtwangy

    Posted

    shtwangy
Changes in title
+React モジュールのimport、exportについて
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,119 @@
+##モジュール化について
+- 他言語では昔からある概念
+- JavaScriptではES2015(ES6)から採用
+- 基本的に1ファイル=1モジュール
+- 任意の場所で読み込んで使用できる
+
+##モジュール化のメリット
+1. 分割統治できる<br/>大規模プログラムでも管理しやすくなる
+2. 任意の場所で読み込める<br/>必要なものを必要な分だけ
+3. 再利用できる<br/>何度も同じコードを書かなくていい
+
+##名前付き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;
+```