JavaScript ファイルを ReactJS にインポートする

このチュートリアルでは、import/export (ES6 モジュール) と default エクスポートを使用して JavaScript ファイルを ReactJS にインポートする方法を示します。

JavaScript ファイルを ReactJS にインポートする

ネイティブの ES6 モジュール システムを使用して、JavaScript ファイルを別の JavaScript ファイルに含めることができます。 これにより、さまざまな JavaScript ファイル間で コード モジュール性 と コード共有 を作成できます。

JavaScript include や Node JS require など、JS ファイルを含めるいくつかの手法があります。

ネイティブの ES6 モジュール システムは、コードをいくつかのファイルとディレクトリに分割するメカニズムを提供し、コードの個々の部分がすべて通信できることを保証します。

React では、次の 2つの方法のいずれかで JS ファイルをインポートできます。

1. インポート/エクスポート を使用 | ES6 モジュール
2. Default エクスポートを使用する

import/export (ES6 モジュール) を使用して JS ファイルを ReactJS にインポートする

ES6 メソッドを使用してインポートおよびエクスポートすることから始めましょう。 ただし、最初に、以下にリストされているメソッドと定数を helper.js というファイルに作成します。

export function greetFunction(name) {
  return `Hello, ${name}`;
}
export const appMessage = 'Hello World! Welcome to DefltStack!';

export キーワードを前に使用して、関数と変数が他のファイルで使用される可能性があることを宣言したことがわかります。

構文：

import {object1, object2, ...} from 'filename.js'

別のファイルを作成し、main.js という名前を付けて、次のコードをその中に貼り付けます。

import {appMessage, greetFunction} from './helper.js';

export default function App() {
  const greetDelftStack = greetFunction('DelftStack');
  return (
    <Fragment>
      {appMessage}
      <br>
      {greetDelftStack}
    </Fragment>
  )
}

出力：

Hello World! Welcome to DefltStack!
Hello, DelftStack

最初の行の中括弧内に greetFunction と appMessage を定義することで、helper.js からそれらをインポートしています。 この行の後に同じファイルで定義されているため、インポートされたオブジェクトを使用できるようになりました。

その後、両方のオブジェクトの出力がコンソールに記録されました。

Default エクスポートを使用して JS ファイルを ReactJS にインポートする

default キーワードを使用すると、ファイルから 1つのオブジェクトを自動的にエクスポートできます。 なぜこれが重要なのですか？ イラストを見てみましょう。 helper.js の function greetingFunction(name) の前に default を追加して、default エクスポートにします。

export default function greetFunction(name) {
  return `Hello, ${name}`;
}

次のように main.js にインポートできます。

import anyFnName from './helper.js';
export default function App() {
  const greetDelftStack = anyFnName('DelftStack');
  return (
    <main>
      {greetDelftStack}
    </main>
  )
}

出力：

Hello, DelftStack

正確なプロセスは以前と同じように動作します。 AnyFnName は default エクスポート中に helper.js からインポートされます。 helper.js に anyFnName がないため、default エクスポートは greetFunction() であり、この場合はランダムな名前としてエクスポートされます。

これらのサンプル コードのデモ ここ と練習を見つけることができます。 ただし、最初に、ES6 モジュールを利用する際にユーザーが留意すべきいくつかの重要な ES6 モジュール関連の側面について説明しましょう。

• default エクスポートをインポートするときは、中括弧を削除する必要があります。 そのようなエクスポートが存在しないというエラーが生成されます。
• 1つのファイルに複数のエクスポートが存在する場合があります。 ただし、ファイルは 1つの default エクスポートしか持つことができません。
• エイリアス名を使用して標準エクスポートをインポートすることはできません。 したがって、通常のエクスポートをインポートするときは、同じ名前を使用する必要があります。
• default と通常のエクスポートをブレンドできます。 たとえば、名前付きエクスポートまたは標準エクスポートの場合、デフォルトのエクスポートには use {} と leave {} を使用します。
• * を使用して、モジュールの内容をインポートできます。 モジュールは、すべてのエクスポートにアクセスするための namespace として使用されます。
• ファイルの最後ですべてのオブジェクトを同時にエクスポートできます。

したがって、JavaScript ファイルを ReactJS にインポートするには、上記の方法のいずれかを選択できます。