【React.js】別ファイルに関数をまとめてexportsを利用して呼び出す。

開発環境

React.js

概要

React.jsで関数を共通化して別ファイルにまとめたときに、HTMLのscriptタグを使い呼び出すのは面倒だと思いました。JavaScriptのexportsを使い呼び出すことができることを知りましたので、備忘録として記事に残しておきます。

import.jsとexport.jsファイルを作成

import.jsからexport.jsの関数を呼び出していきます。

export.js

exports.criminalIsKogoro = function () {
  console.log("犯人は毛利小五郎");
}

exports.detectiveCriminal = function (name) {
  console.log("犯人は" + name);
}

const criminalIsAgasa = function () {
  console.log("犯人は阿笠だ");
}

比較するためにcriminalIsAgasaだけはexportsしないようにしておきます。

import.js

import exportFunction from 'export.jsのパスを記述'
// または
// var exportFunction = require('export.jsのパスを記述');

exportFunction.criminalIsKogoro; // "犯人は毛利小五郎"
exportFunction.detectiveCriminal("元太"); //"犯人は元太"
exportFunction.criminalIsAgasa; // error. exportFunction.criminalIsAgasa is not a function

このようにexportsをしておかないと外部のファイルから読み込むことができないことが分かりました。

参考