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】モジュールの使用

Posted at

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
入門JavaScriptプログラミング

Reactの勉強を指定いてimportとexportがよくわからなかったため

#モジュールの場所を指定
importを使うときは、「何を」、「どこから」を指定する。

基本構文
import X from Y
項目 説明
X インポートするもの
Y モジュールの場所

import myFunc from './my_format.js'

参考:入門JavaScriptプログラミング

モジュールの場所とモジュールから何をインポートするかを指定するには文字リテラルを使う

以下は無効

const MyModule='./my.js'
import myFunc from MyModule;

ということでYのところは絶対に文字列

以下は同等

import myVal from './src/file'
import myVal from './src/file.js'

参考:入門JavaScriptプログラミング

##Yのファイル拡張子を省略した場合
ファイル拡張子が着いていないパスは、index.jsを含んでいるディレクトリを表す。

// ./src/file.jsと ./src/file/indes.jsの両方と一致
import myVla from './src/file';

// ./src/file.jsのみと一致
import myVal from './src/file.js'

参考:入門JavaScriptプログラミング

まぁ絶対パスを書いていれば安心。

###ここまでのまとめ

構文は上記
モジュールの場所は文字列で指定
場所は拡張子の省略もできるけど、普通に拡張子まで書いたほうが今は無難

#モジュールから値をインポート

./src/exam/file.js
export default function exam(num){console.log(num)}
import A from './src/exam/file.js'

ここでは./src/exam/file.jsの関数をAという名前でインポートしている

デフォルトエクスポートは好きな名前でインポートできる。

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?