🎉

[JS, TS] import, export, constについて

1 min read

はじめまして

Zennデビューです。eitchesです。
最近は独学でReactを触っています。

よくimportってこんな書き方しますよね。

1. import firebase from 'firebase/app'
2. import { auth } from 'firebase/app'

これってfirebaseとかauthをexportしてるからimportできると思うのですが、
どのような形でexportしたらどのような形でimportできるのか
曖昧なまま学習を進めてしまっていて、いざ実装!となったときに少し詰まってしまいました。

今回得られた知見を備忘録として残しておきます。

前提コード

※面倒なので ~/を起点とします

firebase.utils.js

~/firebase.utils.js
import firebase from 'firebase/app'
import 'firebase/auth'

const provider = new firebase.auth.GoogleAuthProvider()

export const auth = firebase.auth()

export const signInWithGoogle = () => auth.signInWithPopup(provider)

export default firebase

importで呼び出し

component.jsx

~/component.jsx
import React from 'react'
// 正しい参照方法
import firebase from '~/firebase.utils.js'
import { auth, signInWithGoogle } from '~/firebase.utils.js'

// 参照不可(export defaultのため {} は不要)
// import { firebase } from '~/firebase.utils.js

// 参照不可(export defaultではないので {} が必要)
// import auth from '~/firebase.utils.js'
// import signInWithGoogle from '~/firebase.utils.js'
 
// 参照不可(exportしていない)
// import provider from '~/firebase.utils.js'
// import { provider } from '~/firebase.utils.js'


const hoge = () => (
  // 正しい参照方法
  <button type='button' onClick={signInWithGoogle}>Text</button>
  
  // 参照不可(firebaseとsignInWithGoogleは独立している)
  // <button type='button' onClick={firebase.signInWithGoogle}>Text</button>
)

結論

  1. export default XXXimport XXX from '...' として呼び出す
  2. export const YYYimport { YYY } from '...' として呼び出す
  3. export XXXexport default YYY において、 XXXとYYYは独立している
    => XXX.YYYとして呼び出せない(上記の firebase.signInWithGoogle