さまざまなimportをマスターしよう

前回のレッスンでは、インポートとエクスポートの基本について学びました。
このレッスンでは、それらの使い方についてさらにくわしく学んでいきましょう！

export default と import

export default（エクスポート デフォルト）は、名前をつけずに関数を外部に公開する機能です。

そのファイルの「メイン」を指定するみたいなもので、一つのファイルで export default は1回しか使えないんだよ！

export default する

ファイル内で 1 回だけ、export defaultを使って、関数や変数、クラスを外部に公開できます。

export default function greet() {
  console.log("Hello!");
}

importする

export defaultで公開された要素をインポートするときは、{}を使わずに自分の好きな名前でインポートできます。

import greeting from "./functions.js";

greeting(); // これで "Hello!" と表示される

named exportは決められた名前で公開するけど、default exportは名前は決めずに「好きな名前で使ってね！」っていう感じで公開するってとこが違いだよ。だから、エクスポートの方法によってimportの書き方もそれぞれ合わせて使うから、しっかりと理解して上手に使っていこうね！

💡公開されているライブラリーをインポートする

公開されているライブラリーを使いたい場合はまず、ライブラリーをインストールする必要があります。

ライブラリーをインストールする

npm（Node Package Manager）というものを使ってライブラリーをインストールすることが多いです。

npm install ライブラリー名

インポートする

インストールした後、そのライブラリーをインポートして使います。

import 変数名 from "ライブラリー名";

ライブラリによっては名前付きでエクスポートされているものもあるので、その場合は{}を使ってインポートします。

import {
  名前1,
  名前2,
} from "ライブラリー名";

これで、ライブラリーの機能を使うことができるよ！