es6のexportとimportについて

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等でトランスパイルする必要があります。

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

じゃあの。