javascriptでimportするときに { 中括弧 } をつける時とつかない時があって釈然としない

javascript で import するときに{ 中括弧 } を使用するとき、しない時がある。その違いを調べてみた。

目次

defaultの有無

export default で書き出した値は、中括弧なしでimport できる。

export で書き出した値は、中括弧ありでimport する。

そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。

とのこと。

参考:ES2015のモジュール機能(import/export)

実際に動かしてみた

上記の参考とまんまだが、実際に動かしてみた。

export default "uchida hyakken";
export const firstNaMe = "hyakken";
export const lastName = "uchida";
import name, { firstNaMe, lastName } from "./export";

console.log("name", name); // name uchida hyakken
console.log("firstNaMe", firstNaMe); // firstNaMe hyakken
console.log("lastName", lastName); // lastName uchida

下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。

うん、動かすことで理解が深まった。

export / import を使いこなすことで、ファイル管理を楽にしていこう。

次に読むおすすめ記事

インストールしたreact のファイルを検分する

Angularとセットで使うことが多いmaterial UI をインストールする

Vue3のベースプロジェクトを作成したので、仕上げにhuskyを導入する

n の倍数で数値を丸める

JavaScriptでUnary plus (+)を使いかっこよくNumber型に変換する

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です