前回の続きと、この講義の役割
前回のF-06では、非同期処理を順序立てて書くためのasyncとawait、そして失敗を受け止めるtry・catchを学びました。ここまで扱ってきたコードは、どれも1つの画面に収まる短いものでした。しかし実際のアプリは、数十から数百ものファイルでできています。その大量のファイルをどう分けて、どうつなぐのか。この分割と接続を支える仕組みが、今回のテーマであるモジュールです。
このスライドのポイント
- 前回F-06: 非同期処理を読みやすく書くasync・await、失敗を受け止めるtry・catch
- ここまでのコードは1画面に収まる短いものだった
- 実際のアプリは数十〜数百のファイルでできている
- その分割と接続の土台がモジュール
モジュール・export・importの定義
用語を定義します。モジュールとは、1つのファイルを1つの単位として扱う、コードのまとまりのことです。そのファイルの機能を外へ公開する印がexport、他のファイルが公開したものを取り込む文がimportです。ファイルの先頭に並ぶimportの列は、いわば「このファイルが何に頼っているか」の一覧表になります。exportで送り出し、importで受け取る。この2つの働きで、離れたファイル同士が1つのアプリとして結び付きます。
このスライドのポイント
- モジュール: 1ファイルを1単位として扱うコードのまとまり
- export: このファイルの機能を外へ公開する印
- import: 他のファイルが公開したものを取り込む文
- ファイル先頭のimport群 = 「このファイルが何に頼っているか」の一覧
なぜ必要か
この仕組みを知らないと、何に困るのでしょうか。AIが生成した複数ファイルのプロジェクトで、ある機能が一体どのファイルで定義されているのかを、追えなくなります。B-04で見たフォルダツリーの中を、あてもなく探し回ることになるのです。また、「見つからない」というエラーが出たとき、それがimportのパスの誤り、つまりB-05で扱った相対パスの間違いなのか、それとも別の原因なのかを、自分では切り分けられなくなります。
このスライドのポイント
- 知らないと: AIが生成した複数ファイルのプロジェクトで、機能がどこで定義されたか追えない
- B-04のフォルダツリーの中をあてもなく探すことになる
- 「見つからない」エラーが、パスの誤り（B-05の相対パス）か別原因かを切り分けられない
構造——公開する側と取り込む側
構造を図で見てみます。ここでは2つのファイルを考えます。片方のtax.jsは、税込を計算する関数をexportして外へ公開する側です。もう片方のapp.jsは、その関数をimportして取り込み、自分の中で使う側です。矢印は「公開する側」から「取り込む側」への一方向で流れます。公開する側と使う側が、はっきりと役割で分かれている。これがモジュールの基本の形です。
このスライドのポイント
- 2ファイルの関係で考える
- tax.js: 税込計算の関数をexportして公開する側
- app.js: その関数をimportして取り込み、使う側
- 矢印は「公開する側 → 取り込む側」の一方向
具体例——ファイルをまたぐ再利用
具体例で考えます。E-07で作った税込計算の関数を思い出してください。この関数を、tax.jsという1つのファイルにまとめて置いておきます。すると、経費画面のファイルからも、請求書画面のファイルからも、同じ関数をimportして使えるようになります。同じ計算を、それぞれの画面で何度も書き直す必要はありません。1か所にまとめて公開し、必要なファイルがそれを取り込む。関数の再利用が、ファイルの垣根を越えて効いてくるわけです。
このスライドのポイント
- E-07で作った税込計算の関数をtax.jsに置く
- 経費画面のファイルからも、請求書画面のファイルからもimportして使える
- 同じ計算を何度も書き直さなくてよい
- 1か所にまとめて公開し、必要なファイルが取り込む
技術サンプルカード
サンプルコードを見ます。上のtax.jsでは、taxIncludedという関数をexportで公開しています。下のapp.jsでは、そのtaxIncludedをimportで受け取り、1000を渡して呼び出すと、1100が返ります。読み方の要点は2つです。1つ目は、exportした名前を、そのままimportで受け取っている点。2つ目は、取り込み先を示す「./tax.js」が、B-05で学んだ相対パスである点です。
混同しやすい概念
混同しやすい2つを区別します。1つは、importそのものが失敗する場合です。これはパスや名前の書き間違いが原因で、ファイルを読み込む時点で起きます。もう1つは、取り込んだ関数の中身に誤りがある場合です。これは実際にその関数を実行した時点で起きます。エラーが読み込みの時点で出たのか、それとも実行の時点で出たのかを見れば、どちらの問題なのかを見分けられます。
このスライドのポイント
- importの失敗 = パスや名前の誤り。読み込み時に起きる
- 関数の中身の誤り = 実行時に起きる
- エラーが「読み込み時」か「実行時」かで、どちらの問題かを見分ける
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIに機能の追加を頼むときは、「その機能はどのファイルに置きますか」「既存のどのファイルからimportしますか」を、先に確認しましょう。置き場所と接続先がはっきりすれば、変更が及ぶ範囲が見えてきます。そのうえで、A-04で身につけた差分確認を、ファイル単位で行ってください。どのファイルが新しく増え、どのファイルが書き換わったのかを、1つずつ確かめる習慣が、事故を防ぎます。
このスライドのポイント
- AIに機能追加を頼むときの確認: 「どのファイルに置きますか」「既存のどのファイルからimportしますか」
- 置き場所と接続先がはっきりすれば、変更の範囲が見える
- A-04の差分確認を、ファイル単位で行う
一問一答とまとめ
最後に一問一答です。他のファイルの機能を取り込む文は、何でしょうか。……答えはimportです。公開する側はexportでしたね。30秒でまとめます。モジュールは1ファイルを1単位とするまとまりで、exportで公開し、importで取り込む。ファイル先頭のimportは、そのファイルが何に頼っているかの一覧でした。次回のF-08では、世界中の他人が書いたコードを部品として取り込む仕組み、npmへ進みます。関連資料は「Git・GitHub 完全入門」と「リファクタリング指示文50」です。
このスライドのポイント
- 一問一答: 他ファイルの機能を取り込む文は？ → import（公開する側はexport）
- 30秒まとめ: モジュール=1ファイル1単位、exportで公開・importで取り込み、先頭のimportは依存の一覧
- 次回F-08: 世界中の他人のコードを部品として取り込むnpmへ
- 関連資料: 「Git・GitHub 完全入門」「リファクタリング指示文50」
