Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

es6のexportとimportについて

More than 3 years have passed since last update.

import/exportとは

ES6で追加になった構文です。

まだ完全にサポート出来ていないブラウザもありますが、標準になりつつあります。
フロントエンドの技術を学ぼうとすると、ほとんどのサイトでimport/exportが使える前提で話しているので避けては通れぬ道です。

ただ、初見の方ではイマイチ挙動が把握しにくいと思ったので自分の知見をまとめてみました。
(間違い等ありましたらビシバシご指摘ください。orz)

サンプル

Module.js
export let Person = "太郎";
export let Dog = "ポチ";
export let Cat = "タマ";

export default Person;
App.js
import Default from './Module.js'; //「default」で指定した変数を取得(変数名は自由)
import {
  Person,//変数名を指定して取得(変数名は固定)
  Dog,//変数名を指定して取得(変数名は固定)
  Cat//変数名を指定して取得(変数名は固定)
} from './Module.js';
import * as All from './Module.js';//全ての変数を含んだオブジェクトを取得(変数名は自由)

console.log(Default);//太郎
console.log(Person);//太郎
console.log(Dog);//ポチ
console.log(Cat);//タマ
console.log(All);
/*
Object {
  Person: "太郎",
  Dog: "ポチ", 
  Cat: "タマ", 
  default: "太郎", 
  ...
}*/

上記のように取得されます。

以下の書き方だと

App.js
import {
  Taro,
  Pochi,
  Tama
} from './Module.js';
console.log(Taro);//undefined
console.log(Pochi);//undefined
console.log(Tama);//undefined

となってしまいます。

これは
import {...} from 'xxx';
という構文が
xxxのファイルの中に存在する変数名を指定することで読み出しているので、存在しない変数名を指定してもUndefinedになってしまいます。

import側で変数名を変えたい場合はasを使って以下のようにする必要があります。

App.js
import {
  Person as Taro,
  Dog as Pochi,
  Cat as Tama
} from './Module.js';
console.log(Taro);//太郎
console.log(Pochi);//ポチ
console.log(Tama);//タマ

import/exportにはいろんな書き方がありますが、基礎がわかればすぐに使いこなせると思います。
もちろん、文字列だけではなくObjectc配列もexport出来るのでかなり有能です!!

ただ、ブラウザによってはサポートしていない構文があるので、babel+gulp+webpack等でトランスパイルする必要があります。

そちらも頑張って覚えましょう。

じゃあの。

bakira
主にjavaを使ったサーバーサイドのWebシステムの開発をしています。 今はQiitaへの投稿はやめて個人技術ブログにせっせと日々投稿しています。 フロントサイドについても、ちょいちょいやっています。 今年はインフラ構築知識を伸ばすことが目標。 目指せフルスタックエンジニア!
https://bakira.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away