JavaScript基本【複数のファイル操作＆npmパッケージの使い方】

１つのjsファイルに全ての処理を詰め込んでしまうと、膨大で保守性の悪いものになってしまう可能性があります。

そこで、複数ファイルに分けてjsファイルを管理する必要が出てきます。

export default クラス名;

これで他のファイルでこのクラスが使用できるようになります。

これは定数や関数などでも同じで、

export default 定数名;
export default 関数名;

とすることで、他ファイルから読み込み(import)できるようになります。

※実際にこのように２行書くとエラーになるので注意！！詳しくは名前付きエクスポート参照

import 名称 from "./ファイル名称";

同じ階層にあるファイル内のクラスの呼び出しはこれでOKです。

基本的に、相対パスを使用していきます。

１つ上の階層にある場合は、

import 名称 from "../ファイル名称";

１つ上の階層の中のフォルダ内にある場合は、

import 名称 from "../フォルダ名/ファイル名称";

という形で記述していきます。

上記のdefaultを使用したエクスポートは１つまでしかできません。

複数エクスポートしたい対象がある場合は、名前付きエクスポートを使用する必要があります。

■エクスポート

export { 名称１,名称2};

■インポート

import {名称1,名称2} from "パス";

このように　{　}　で囲むことで名前付きエクスポートが可能になります。

複数ある場合はコンマで区切ります。

import 名称 from "パッケージ名";

とすることで、外部の便利なパッケージを使用することができます。

ただし、npmパッケージを使用する際は、「node.js」のインストールされている環境が用意されていることが前提になりますので注意が必要です！！

SuzuBlog