import文とrequire文の違い

公開日:2019-03-06
最終更新:2019-03-06

概要

サーバーサイドマンだった自分が4月からフロントエンドも触り始めるので、javascriptのキャッチアップをしていた。
そのときに、import文とrequire文の動作で1時間近く詰まったので、備忘

やりたかったこと

expressを利用して、起動させてからの状態を持っているオブジェクトへの操作のために、singletonのオブジェクトとして扱いたかった。

なので状態を持つclassを定義し、外から利用できるようにしていた。

export default new Hoge();

ハマりポイント

このクラスは状態を持っていた。

class Hoge{  
  constructor(){  
    this.hoge = [];  
  }  
  get hoge(){  
    return this.hoge;  
  }  
}

呼び出し元ではrequireで呼び出してhogeプロパティにアクセスしようとしていたが、常にundefinedで意図しない動作になる。
import文を利用するとアクセスできたので不思議に思っていた。

結論

当時のimportrequireの利用方法は以下だった

import hoge from './hoge'  
//...  
const hoge2 = require('./hoge');

結局オブジェクトの中身を出力してみるのが分かりやすい

import hoge from './hoge'  
console.log(hoge);//Hoge {hoge:[]}  
const hoge2 = require('./hoge');  
console.log(hoge2);//{default: Hoge{hoge:[]}}

requrieで定義したインスタンスのプロパティにアクセスするためには、hoge2.default.hogeでアクセスしないといけなかった。

export defaultよりもmodule.exports使うのが一般的なのかしら。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@anizozinaの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする