【JavaScript ~ファイルの分割について~】勉強メモ⑤

JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。


ファイルの分割
-

- export


　クラスを他のファイルでも使用できるようにするには、<b>クラスの定義の後で
　`「export default クラス名」`</b>とすることで、そのクラスをエクスポート（出力）し、
　他のファイルへ渡すことが出来る。

```car.js
class Car{
  // 処理内容を記載
}
// 他のファイルでも使用できるように設定
export default Car;

```
<br>

- import

　他のファイルで定義されているクラスを使用するにはインポート（読込）をする。
　<b>使用するファイルの先頭で`「import クラス名 from "./ファイル名"」`</b>と
　書くことでインポートすることが出来る。
　なお、ファイル名の拡張子の「.js」は省略することが出来る。

```truck.js
import Car from "./car"

```
<br>

- 値のエクスポート

　エクスポートできるのはクラスだけではない。
　文字列や数値や関数など、どんな値でもエクスポートが可能。
　書き方は、同様に、
　<b>エクスポートする際は、`「export default 定数名」`とします</b>。
　<b>インポートする際は`「import 定数名 from "./ファイル名"」`とします</b>。

```sample1.js
const text = "Hello"
export default text;
```

```sample2.js
import text from "./sample1"
console.log(text);
```

```.text:出力結果
Hello
```
<br>

- 名前付きエクスポート

　デフォルトエクスポートは1ファイルに1つの値のみ使用可能ので、
　複数の値をエクスポートしたい場合は、名前付きエクスポートを使用する。

　名前付きエクスポートとは、defaultを書かずに、<b>名前を{ }で囲んで</b>エクスポートする書き方。
　書き方は、<b>`「import { 値の名前 } from "./ファイル名"」`</b>と{}で囲んで指定する。

```sample1.js
const car = new Car("トラック", "黒");
export {car};
```

```sample2.js
import {car} from "./sample1"
```

<br>

- 複数の定数やクラスを指定してエクスポート

　<b>`「export { 名前1, 名前2 }」`</b>という形で書くことにより、
　1つのファイルから複数のエクスポートが出来る。

```sample1.js
const car1 = new Car("トラック", "黒");
const car2 = new Car("バス", "白");
export {car1, car2};
```

```sample2.js
import {car1, car2} from "./sample1"
```

<br>

相対パス
-
- 同じディレクトリのファイル指定

　ファイルの指定は「./ファイル名」と記載して来たが、
　これは<b>相対パス</b>と言い、記述されているファイルからみた位置関係を示してる。

```.text:ディレクトリ/ファイル構成
// lsコマンドで、srcディレクトリの中身を確認
sample@sampleMBP src ~ % ls
car.js                script.js
truck.js              test.js
```
<br>

　ドット1つの「./」はファイルと同じディレクトリを意味する。
　相対パス"./car"は「script.js」と同じsrcディレクトリの中にある「car.js」ファイルを意味する。

```script.js
import {car1, car2} from "./car"
```
<br>

- 異なるディレクトリのファイル指定

　例：「script.js」で、dataディレクトリの「car.js」をインポートするときの相対パス

```.text:ディレクトリ/ファイル構成
// lsコマンドで、srcディレクトリの中身を確認
sample@sampleMBP src ~ % ls
data                script.js
test.js

// lsコマンドで、dataディレクトリの中身を確認
sample@sampleMBP data ~ % ls
car.js                truck.js
```

```script.js
import {car1, car2} from "./data/car"
```
<br>

- 1つ上の階層に戻る場合

　1つ上の階層に戻る場合は<b>ドット2つの「../」</b>を使用する。
　例：「car.js」でsampleディレクトリに入っている「test.js」をインポートする場合の相対パス

```.text:ディレクトリ/ファイル構成
// lsコマンドで、srcディレクトリの中身を確認
sample@sampleMBP src ~ % ls
data                script.js
sample

// lsコマンドで、dataディレクトリの中身を確認
sample@sampleMBP data ~ % ls
car.js                truck.js

// lsコマンドで、sampleディレクトリの中身を確認
sample@sampleMBP sample ~ % ls
test.js                
```

```car.js
import {car1, car2} from "../sample/car"
```
<br>

パッケージ
-
　JavaScriptの世界では、誰かが作った便利なプログラムがパッケージという形で公開されている。
　そして、これを自分のプログラムの中に組み込んで使うことが出来る。
　パッケージを自分のプログラムで使うためには、importを用いてパッケージをインポートする。
　書き方は、<b>`「import 定数名 from "パッケージ名"」`</b>

　パッケージの種類は下記のリンク先で確認して見ると良い。
　[人気npmパッケージ25本をサクッと紹介する](https://blog.kyabe.net/2017/12/npm-package-25.html)

<br>

過去投稿記事
-
[【JavaScript ~変数・定数、if文・switch文~】勉強メモ](https://qiita.com/k-yasuhiro/items/1fb63f0881faf67bcb29)
[【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②](https://qiita.com/k-yasuhiro/items/6625942cc901feb6bfdf)
[【JavaScript ~関数について~】勉強メモ③](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④](https://qiita.com/k-yasuhiro/items/52e3ebb79bb0248a7c5e)
[【JavaScript 読み込み】勉強メモ⑥](https://qiita.com/k-yasuhiro/items/fe3fc2bd7b14fe4f3968)
[【JavaScript ~配列のメソッド~】勉強メモ⑦](https://qiita.com/k-yasuhiro/private/279b7bb59f112f917c51)
[【JavaScript ~コールバック関数~】勉強メモ⑧](https://qiita.com/k-yasuhiro/private/ded7e2cad732774d059e)
[【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨](https://qiita.com/k-yasuhiro/items/7a72bf38d78b141d6fac)
[【JavaScript ~イベント~】勉強メモ⑩](https://qiita.com/k-yasuhiro/items/b0d4037d0edaae38a495)
[【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11](https://qiita.com/k-yasuhiro/items/fa586154cf7064eb7058)
[【JavaScript ~Mathオブジェクト~】勉強メモ12](https://qiita.com/k-yasuhiro/items/b931a15fb71322ee3cca)