estimate-calculator-plugin/ ├── assets/ │ ├── build/ │ │ ├── node_modules/ # npmモジュール(Viteやその他依存) │ │ │ └── * # インストールされたvite環境ファイル │ │ ├── package-lock.json # npm依存管理ファイル(自動生成) │ │ ├── package.json # プロジェクトのnpm設定・依存管理 │ │ └── vite.config.js # Viteのビルド設定ファイル │ ├── src/ │ │ ├── js/ │ │ │ ├── common/ │ │ │ │ ├── changeCurrency.js # 通貨設定切り替え時の処理 │ │ │ │ ├── constants.js # 定数(PHPから渡された値) │ │ │ │ ├── dom.js # DOM情報の操作管理用 │ │ │ │ ├── handler.js # イベント管理 │ │ │ │ ├── tooltip.js # tooltip表示調整用 │ │ │ │ └── utils.js # 共通ユーティリティ │ │ │ ├── logic/ │ │ │ │ ├── product.js # 商品の計算・登録 │ │ │ │ └── shipping.js # 運送会社候補の計算 │ │ │ ├── store/ │ │ │ │ └── state.js # アプリ内状態を保持 │ │ │ └── main.js # 全体の処理管理 │ │ └── scss/ # SCSSファイル置き場 │ ├── img/ # 画像ファイル置き場 │ ├── css/ │ │ └── estimate-calc-script.css # 基本スタイル │ └── js/ │ └── estimate-calc-script.js # 基本スクリプト(Viteでビルド後に生成される単一JSファイル(出力先)) ├── includes/ │ ├── admin/ │ │ └── menu.php │ │ └── admin-loader.php # ファイルローダー │ ├── config/ │ │ ├── options/ │ │ │ ├── estimate.php │ │ │ ├── settings.php │ │ │ ├── shipping-list.php │ │ │ ├── rate.php │ │ │ ├── fields.php │ │ │ └── options-loader.php # ファイルローダー(サブ) │ │ ├── menu-config.php │ │ ├── global.php │ │ ├── translations.php │ │ └── config-loader.php # ファイルローダー │ ├── hooks/ │ │ └── ajax-fetch.php # 外部リクエストの処理(原則このプラグインのJavaScriptから受け取り) │ └── lib/ │ ├── api-template-loader.php # テンプレートファイル読み込み関数 │ └── lib-loader.php # ファイルローダー ├── templates/ │ ├── admin/ │ │ └── form-main.php │ └── form/ │ ├── section-items-add.php │ ├── section-items-viewer.php │ ├── section-shipping-search.php │ ├── section-shipping-viewer.php │ ├── section-total-viewer.php │ ├── form-note-ja.php │ ├── form-note-en.php │ ├── form-note-zh.php │ └── form-note-zh_tw.php ├── estimate-calculator-plugin.php # プラグイン本体 └── readme.txt # このファイル ------------------------------------------------------------------------------ buildツールの説明 # build/node_modules/ # └─ npmがインストールしたパッケージのディレクトリ。 # ここにViteやプラグイン、その他依存ライブラリが入る。 # 手動で編集しない。 # build/package-lock.json # └─ npmの依存関係バージョンを固定するファイル。 # チーム開発での依存性の整合性を保つために自動生成される。 # build/package.json # └─ npmプロジェクトの設定ファイル。 # 依存モジュールやスクリプトコマンド、プロジェクト情報を管理。 # build/vite.config.js # └─ Viteのビルド設定ファイル。 # エントリーポイントや出力ファイル名、ビルド先ディレクトリなどを定義。 # ここで出力ファイル名を 'estimate-calc-script.js' に設定する。 ------------------------------------------------------------------------------ estimate-calc-script.jsの設計思想 [product.js, shipping.js] 商品登録、運送会社検索 ↓ [state.js] の state を更新 ↓ [dom.js] stateの情報をフォームに反映 stateを状態とし、DOM内は表示専用とする。 (あくまで、stateを更新⇒stateの情報をDOMに反映。の順番) ------------------------------------------------------------------------------