importとexportが全然分からんけど、どれだけわかりやすく書けるのか選手権を勝手に開催してみた
import?export?
React.jsの勉強を始めてみると，"import" と "export" が出てくる．なんやそれ？っていう疑問を持った僕が，ちょっと頑張って勉強して，なるべく落とし込んでみた記事です．
（軽い）Reactとは？
"React はユーザインターフェイスを構築するための、宣言型で効率的で柔軟な JavaScript ライブラリです。複雑な UI を、「コンポーネント」と呼ばれる小さく独立した部品から組み立てることができます。"
コンポーネント
複雑ないUIを、「コンポーネント」と呼ばれる小さく独立した部品から組み立てる
あーなんとなくやけど，ライブラリとかモジュール的な？もっと言えばクラス，関数的なものかな？みたいな印象でとりあえず進めておく．でもここで，「コンポーネントの細分化」が行われるらしい．なんで？
✔︎ 責務を明確にする（何おためのパーツなのか）
->何をするための部品なのか？どういう役割なのか？
✔︎ 大規模アプリでも管理しやすくするため
->小規模だとありがたみがわかりにくいけど，複雑化した時に見通しを持ちやすくなる！
✔︎ 再利用するため
->同じ機能だけど別のページで使われているものを再利用して使うことができる！
なるほど？
JavaScriptのモジュール機能
モジュールに分割して，必要な時に必要なものを呼び込みます．
pythonなどのような言語では当たり前だが，JavaScriptではES6から採用になったらしい．まぁ，そんなことは知らん．これが大事なことで，基本的には，1ファイル=1モジュールでやることになります．
そこで使われるimportやexportの種類に複数のものがあるそうです...
羅列しておきますね．
- default export, default import
- named export, named import
などなど...
"export"から"import"までまとめてみる
"export" ってなんか呼び出しとか輸入とかいろいろ持ってくる的な意味がありますよね．
基本的な構文(default)
HelloをHello.jsでexportして，App.jsでimportしてみる
const Hello = () => {
return (
<div>Hello React</div>
);
};
// Helloをexportする
export default Hello;
HelloをHello.jsでexportして，App.jsでimportする ↓↓
//import [exportしたもの] from [Hello.jsのURL];
import Hello from "./components/Hello.js";
function App() {
return (
<div>
<Hello/>
</div>
);
};
別名に変換するのやってみた構文（named）
同じく，HelloをHello.jsでexportして，App.js**でimportしてみる **
この時には，Hello =>helloReact に変換する
const Hello = () => {
return (
<div>Hello React</div>
);
};
// Helloをexportする
// named export
export { Hello as helloReact };
// または
// default export
export default Hello;
HelloをHello.jsでexportして，App.jsでimportする ↓↓
// import [exportしたもの] from [Hello.jsのURL];
// default import
import helloReact from "./components/Hello.js";
// または
// named import
import { Hello as helloReact } from "./components/Hello.js";
function App() {
return (
<div>
// helloReactで呼び出せる
<helloReact/>
</div>
);
};
ここでちょこっと説明！
Hello.jsexport { Hello as helloReact };でエキスポートした場合，下のApp.jsでは，
App.jsimport helloReact from "./components/Hello.js";で受け取れる．
もう一個説明！
Hello.jsexport default Hello;でエキスポートした場合，下のApp.jsでは，
App.jsimport { Hello as helloReact } from "./components/Hello.js";で受け取れる．
ちょっと重要なお話をしてみるよ
ここで，エントリーポイントってやつをちょっと頑張って解説してみる！
create-react-appしたときや他の人のreactを使ったコードを見てみるとコンポーネントファイルの中にindex.jsxやindex.tsxのようなindexファイルがあります．これはなんだろう？と思う人も多いかもしれませんが，いわゆるこれが "エントリーポイント" なのです．
これを簡単に言えば保管庫・中継役とかそういう感じで捉えてもいいかもしれません．
簡単なコードだとあまりありませんが，たとえば，コンポーネント数が30個！ の時とか，App.jsで30回のimportをしなければならないことになります．
くそめんどくせぇ...😭😭😭
また．これをいちいち呼び出していては，メインのコードの部分までの見通しが悪くなってしまいます．なので，これを一括でimportできるようにするのです！
めっちゃ画期的！✨✨✨
componentsの中身のリストが以下のようになっているとします...
- Component01.js
- Component02.js
:
:
- Component44.js
- Component45.js
これをApp.jsで，
import components01 from "./Components01"
import components02 from "./Components02"
:
:
import components44 from "./Components44"
import components45 from "./Components45"
//ここからメインコード
とはしたくないですよね...ということで！
これを置いておけるindex.jsxを作って仕舞えばいいんです！
そう．今ある``App.jsでのimport文をindex.jsx```に埋め込みます！
export {default as components01} from './Components01';
export {default as components02} from './Components02';
:
:
export {default as components44} from './Components44';
export {default as components45} from './Components45';
これをすることによって，App.jsでは，
import * from './index';
//ここからメインコード
で済むんです！45行と１行の差では全く可読性が変わってきます！
ちなみに アスタリスク（*） は，中身を全部読み込むって意味でいいです！
参考文献
Discussion