# ES2015 の import / export

[参考コード](https://codesandbox.io/s/3837184lkm)

### index.js (読み込む側)

```javascript
import React from "react";
import { render } from "react-dom";

import { var1, function1, ReactComponent } from "./module";

console.log(var1);
function1();

render(<ReactComponent />, document.getElementById("root"));
```

### module.js (出力する側)

```javascript
import React from "react";

export const var1 = "string";

export const function1 = () => console.log("this is function1");

export const ReactComponent = () => <h2>name</h2>;
```

## import は別ファイルに切り出した JavaScript (module) から変数、関数、クラス等を読み込むための宣言

変数、関数、クラス等を、別ファイルに切り出し、それを読みこむために import を使う。また出力する側では export をしておく。

* 出力する側で変数、関数、クラスの前に `export` をつける。
* 読み込む側では、`import` {名前} `from` 'ファイル名' とする。
* この場合のファイル名は、`hello` のように、拡張子をつけなくていい。
* あとは普通に使う。

## module

JavaScript におけるモジュールとは、別ファイルに切り分けられた変数、関数、クラス等のこと。これを用いるために import / export を使う。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://super-yusuke.gitbook.io/udemy-course/meteno-react-app/es2015-no-import-export.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.