基礎

import / exportとモジュール

なぜ学ぶか： AIが作るプロジェクトは何十個ものファイルに分かれています。ファイル同士をつなぐのがimport / export。まずは2つのファイルのやり取りを見てください。

まずはこの例を見てみましょう

// ===== utils.ts =====
export function greet(name: string) {   // export = 外に公開する
  return "こんにちは、" + name + "さん";
}

// ===== page.tsx（別のファイル）=====
import { greet } from "./utils";        // ./utils から greet を借りる

greet("Ada");

exportで公開して、importで借りる。ファイル同士はこれでつながっています。

export＝外に公開する

exportを付けたものだけが、他のファイルから使えます。付いていないものは、そのファイル専用です。

import＝借りてくる

波カッコの中が「借りるもの」、fromの後ろが「どこから」です。例では./utils（隣のファイル）からgreetを借りています。

fromのパスは3種類

"./utils"は隣のファイル、"react"のような裸の名前はnpmの部品、"@/components/..."はsrc/フォルダへの近道です。

ファイルは先頭から読む

importの並びは「このファイルが何に頼っているか」の目次。中身を読む前にここを見ると、全体がつかみやすいです。

ステップ 1 / 3

← カリキュラム一覧へ戻る

※ カリキュラムの内容はAIが生成しており、誤りが含まれる場合があります。正確な情報は公式ドキュメント等でご確認ください。