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

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

ファイルの分割

• export

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

car.js

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

• import

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

truck.js

import Car from "./car"

• 値のエクスポート

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

sample1.js

const text = "Hello"
export default text;

sample2.js

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

出力結果

Hello

• 名前付きエクスポート

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

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

sample1.js

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

sample2.js

import {car} from "./sample1"

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

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

sample1.js

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

sample2.js

import {car1, car2} from "./sample1"

相対パス

• 同じディレクトリのファイル指定

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

ディレクトリ/ファイル構成

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

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

script.js

import {car1, car2} from "./car"

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

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

ディレクトリ/ファイル構成

// 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"

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

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

ディレクトリ/ファイル構成

// 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"

パッケージ

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

　パッケージの種類は下記のリンク先で確認して見ると良い。
　人気npmパッケージ25本をサクッと紹介する

過去投稿記事

【JavaScript ~変数・定数、if文・switch文~】勉強メモ
【JavaScript ~for文、配列、オブジェクトについて~】勉強メモ②
【JavaScript ~関数について~】勉強メモ③
【JavaScript ~クラスやインスタンス、メソッドについて~】勉強メモ④
【JavaScript 読み込み】勉強メモ⑥
【JavaScript ~配列のメソッド~】勉強メモ⑦
【JavaScript ~コールバック関数~】勉強メモ⑧
【JavaScript ~HTMLを置き換え、ダイアログボックス~】勉強メモ⑨
【JavaScript ~イベント~】勉強メモ⑩
【JavaScript ~イベント(入力内容を取得)とDateオブジェクト~】勉強メモ11
【JavaScript ~Mathオブジェクト~】勉強メモ12