JavaScriptちゃんと学習中。
ほぼ自分の勉強メモです。
過度な期待はしないでください。
ファイルの分割
- export
クラスを他のファイルでも使用できるようにするには、クラスの定義の後で
「export default クラス名」とすることで、そのクラスをエクスポート（出力）し、
他のファイルへ渡すことが出来る。
class Car{
// 処理内容を記載
}
// 他のファイルでも使用できるように設定
export default Car;
- import
他のファイルで定義されているクラスを使用するにはインポート（読込）をする。
使用するファイルの先頭で「import クラス名 from "./ファイル名"」と
書くことでインポートすることが出来る。
なお、ファイル名の拡張子の「.js」は省略することが出来る。
import Car from "./car"
- 値のエクスポート
エクスポートできるのはクラスだけではない。
文字列や数値や関数など、どんな値でもエクスポートが可能。
書き方は、同様に、
エクスポートする際は、「export default 定数名」とします。
インポートする際は「import 定数名 from "./ファイル名"」とします。
const text = "Hello"
export default text;
import text from "./sample1"
console.log(text);
Hello
- 名前付きエクスポート
デフォルトエクスポートは1ファイルに1つの値のみ使用可能ので、
複数の値をエクスポートしたい場合は、名前付きエクスポートを使用する。
名前付きエクスポートとは、defaultを書かずに、名前を{ }で囲んでエクスポートする書き方。
書き方は、「import { 値の名前 } from "./ファイル名"」と{}で囲んで指定する。
const car = new Car("トラック", "黒");
export {car};
import {car} from "./sample1"
- 複数の定数やクラスを指定してエクスポート
「export { 名前1, 名前2 }」という形で書くことにより、
1つのファイルから複数のエクスポートが出来る。
const car1 = new Car("トラック", "黒");
const car2 = new Car("バス", "白");
export {car1, car2};
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」ファイルを意味する。
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
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
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