残業申請のペーパーレスに伴い、残業食の注文状況を食堂で把握できるように、一覧画面を製作しました。こちらの講座📒の中で取り扱われていたモジュールバンドラのVite📒を用いた開発にトライして、形にしましたので紹介します。

　開発したものに関する説明と、モジュールバンドラの説明の２部構成でお届けします。

---

　

🚀開発したもの

　お弁当の注文状況と残業食の注文状況を日付と時刻で切り替えるアプリケーションです。

---

🐡残業食注文リスト（埋め込み）

アプリをタブで開くへのリンク

---

🐡アプリケーションの構成

---

①表示切替アプリケーション

　RaspberryPi4B（RaspiOS）上のApacheサーバーで起動しています。生のhtml+CSS+Javascriptで開発しており、こちらはモジュールバンドラは使用していません。

　森松カレンダーと時刻で表示内容(URL)を切り替えます。

---

②弁当注文リスト

　朝ラズパイで受け付けたスプレッドシート上の注文データを表示します。GASとスプレッドシートで実装しています。

---

③残業食注文リスト

　フロントエンドはモジュールバンドラのViteを使用しています。

　日付をURLパラメータで指定可能にしました。

　常に表示が変わる時計も製作しました。

　もちろんレスポンシブにも対応しています。

---

🚀モジュールバンドラ

🐡モジュールバンドラとは？

　複数のJavaScriptファイルを一つにまとめるツールです。これにより、依存関係が管理され、効率的なコードの配信が可能になります。モジュールバンドラは、モジュール同士の依存関係を解析し、一つのファイルにまとめることで、ブラウザのリクエスト回数を減らし、パフォーマンスを向上させます。

---

🐡具体的に何が便利なの？

　npmパッケージをフロントエンド開発で使用できることです。npmとはNode.jsのパッケージ管理ツールです。Node.jsはJavaScriptのランタイム（ブラウザ以外で動作させるようにしたもの）です。　

　WebPackやVIteを使用すると、このランタイム上で動くJavaScriptをブラウザで動くように変換してくれます（かなりざっくり行っていますが、間違っていないはず）。

　例えば、日付変換が簡単にできる「date-fns」を自分のフロントエンド開発プロジェクトで使用できます。

#npmコマンドによるdate-fnsのインストール
npm i date-fns

//date-fnsの使用例
//formatting.js
import {
  format,
  endOfMonth,
  startOfDay,
  startOfMonth,
  parseISO,
  isBefore,
} from "date-fns";
import { ja } from "date-fns/locale"; // 日本語ロケールをインポート

// 日付を「YYYY年MM月DD日（曜日）」形式にフォーマットする関数
export function formatToJPText(date) {
  return format(date, "yyyy年MM月dd日（E）", { locale: ja });
}
// 日付を「MM/DD（曜日）」形式にフォーマットする関数
export function formatToJPTextShort(date) {
  return format(date, "MM/dd（E）", { locale: ja });
}

---

　また、CSSモジュールを利用したスコープのあるクラスの適用が可能となります（同じクラス名をJSファイルをまたげば使いまわせます。衝突しません）。

　〇プロジェクト構造の例

my-project/
├── index.html
├── src/
│   ├── main.js
│   └── styles.module.css
├── package.json
└── vite.config.js

　〇src/styles.module.cssにスタイルを追加

.myClass {
  color: red;
}

　〇src/main.jsにコードを追加

import styles from './styles.module.css';

const element = document.createElement('div');
element.className = styles.myClass;
element.innerHTML = 'Hello, CSS Modules';

document.body.appendChild(element);

---

🐡次世代ビルドツールViteとは？

　WebPackなどの従来のバンドラは開発時も変更点があった場合は、毎回バンドルをしてブラウザで動作を確認する必要がありました。バンドルをすることで遅延が発生し、開発体験としては良いものではありませんでした。

　一方Viteでは、NativeESMという開発環境を使用しており、開発時はバンドルせずにNativeESMの機能を使用することでブラウザ上でJavaScriptを動作させます。これにより、バンドルによる遅延がなくなり、快適に開発できます。Firebaseなどの本番環境にデプロイするときだけバンドルすることになります。

//package.jsonの抜粋
"scripts": {
    "dev": "vite",//←開発時のNativeESMの起動命令
    "build": "vite build",//←デプロイ時のバンドル命令
    "preview": "vite preview"
  },
  
//実行コマンド
npm run dev　　//NativeESM起動
npm run build  //バンドル

---

🚀まとめ

　いかがだったでしょうか。モジュールバンドラについて、大まかに理解していただけたら幸いです。

　具体的なセットアップ方法や、ビルドの手順については、各自調べて手を動かして習得してください。

　普段GASでフロント周りを書いている方はご存じないかもしれませんが、現在のモダン開発においては、React、Vue、Nextなどのフレームワークを使用しない場合でも、モジュールバンドラを使用して、npmパッケージをプロジェクトに導入することが一般的です。

　また、Reactを使用している場合はモジュールバンドラは組み込まれていますし、Viteも使用したことがあるかもしれませんが、改めてどういうものか理解が進んだのではないかと思います。

　モジュールバンドラも含めたJavaScriptのビルドツールの詳細については、こちらの講座📒で手順も含めて大変分かり易く説明されていますので、興味がある方は学習してみてください。

　

←ホームに戻る