しまぶーさん モダンJavaScript講座など参考
https://youtu.be/De9PH3EAz7c
モジュール
コードを1ファイルにまとめ影響範囲を限定したもの
- プログラムの再利用がしやすい
- 同一命名をファイルごと定義可能
- 機能ごとに分割など管理が容易になる
- 別スコープに
importexportできる
name.js
// nameをexport
export const name = "タナカ";
index.js
// name.jsのnameを取り入れる
import { name } from "./name.js";
document.body.textContent = name;
HTML
<!DOCTYPE html>
<html lang="js">
<body></body>
<!-- type="module"でモジュールと認識 -->
<script src="./index.js" type="module">
</script>
</html>
モジュールの書き方2種(ES Modules/CommonJS)
- ESモジュール方式 ←現在の主流
エクスポート
module.js
// 宣言時に export
export const foo = "foo";
export fonction hello(){conosole.log("hello")};
// またはまとめてexport
export {foo, hello};
インポート
main.js
import {foo, hello} from "./module.js"
foo; // "foo"
bar(); // console=> "hello"
ESモジュールはHTMLのどこにおいても最後に評価される(遅延評価)ので、
<script src="...">でのjsファイル読み込みをどこでもできる。※head内とか
HEML
<!DOCTYPE html>
<html lang="ja">
<head>
<title>test</title>
<!-- ここで読み込んでも末尾まで読んでから実行 -->
<script src="./module.js" type="modules"></script>
</head>
<body></body>
</html>
-
Common JS方式
Node.jsで使われてきた方式。 -
module.exportsexportsでエクスポート/インポート
module.js
const name = "aaa";
// exports.〇〇でエクスポート
exports.name = name;
exports.add = (a, b) => a + b;
main.js
// require("moduleのパス")で受け取り
const myModule = require("./module");
// module.〇〇で使用
console.log(myModule.name); // aaa
console.log(myModule.add(1, 2)); // 3
※ Nodeで実行する場合、そのままだとES形式と認識されて実行できない。
※ プロジェクト直下でnpm init -yしてpackage.jsonを作成し、"type": "commonjs";を記載する。
パッケージ
- パッケージとはモジュールと依存関係をまとめたもの
-
npmを使い管理する
- モジュール間の依存関係管理
- インストール／アンインストール
使い方
- npmで各種パッケージをインストール
-
.jsにimport
JS
// 例
import axios from 'axios';
import chalk from 'chalk';
ビルド
- 開発したコードを実行環境が実行できるためにコンパイルやバンドルすること。(再編して最適化するイメージ)
- ビルドはモジュールバンドラが担う
- vite
- webpack
- など