1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScript ファイルの分割

Last updated at Posted at 2021-07-17

#ファイルの分割

コードの量が増えてくると1つのファイルで管理するのが大変になるので、
複数のファイルでコードを管理することがあります。

そして、複数のファイルを関連付けし、必要な値を渡す必要があります。

渡す方法がこちらです。

まず、クラスを渡す側の記述。
export default クラス名;
これをクラスの定義部分の後ろに置くことにより、そのクラスをエクスポート(出力)し、
他のファイルへ渡すことができます。

次にクラスを受け取る側の記述。
クラスを受け取る、つまり読み込み(インポート)をします。

ファイルの先頭で、import クラス名 from "./ファイル名";を書きます。
このファイル名の.jsは省略できます。

インポートやエクスポートするのはクラスだけではなく、
変数や定数もできます。書き方は同じです。

#デフォルトエクスポート

export defaultはデフォルトエクスポートと呼ばれ、default export 値で
読み込まれます。なので、エクスポートの名前とインポートの名前が違っても問題ありません。
しかし、1つのファイルで1つしか使うことができません。
2つの値をエクスポートする時は以下で記述する名前付きエクスポートを使う必要があります。

#名前付きエクスポート

名前付きエクスポートをする時は、 export {名前}; import {値の名前} from "./ファイル名";
を使います。
2つの値をする時は名前1,名前2を使いましょう。

#相対パス

ディレクトリの構成を考えてみましょう。

例えば、 ./A/Bだと
./A/は同じディレクトリ内のAに移動する。
そして、その後のBを指定します。

../だと一つ上の階層に移動します。

#パッケージ

JavaScriptでは他の誰かが作ったプログラムを組み込むことができます。
このプログラムをパッケージと言います。

例えば、chalkだとコンソールの出力の文字に色を付けることができます。
また、readline-syncはコンソールに値を入力できます。

import 定数名 from "パッケージ名";これを使い、インポートします。

readline-syncを文字列を使う時はreadlineSync.question(質問文)の様に記述して下さい。
しかし、整数を使う時はreadlineSync.questionInt(質問文)を使うようにして下さい。

#最後に

初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き
ありがとうございました。もし、ご指摘等がございましたらよろしくお願い致します。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?