JavaScriptでサイト改修はいくらかかるか：計算機、フィルター、マイページ
JavaScript はブラウザ上でサイトを動かす言語です。ページを再読み込みせずカートが変わり、料金が計算され、カタログが絞り込まれ、マイページが開きます。オーナーは「競合と同じ計算機」や「12項目のフィルター」を頼み、見積もりが $300 から $40 000 まで幅広く、妥当か判断しづらいことがあります。以下は 2026 年に最も多い3種類の改修の現実的な予算幅、作業内容、プラグインで足りる場合、フロントエンド開発者が必要な場合、納品後の隠れコストです。
- シンプルな計算機（3-7項目、クライアント側の式）- $300-1 500、2-7日
- 複雑な計算機（PDF、メール、CRM、複数ステップ）- $2 000-8 000、2-5週間
- カタログフィルター（再読み込みなし、最大500 SKU）- $800-3 000、1-2週間
- 大規模フィルター（1万+商品、AJAX、SEO）- $3 000-12 000、3-6週間
- マイページ（ログイン、CMSで3-5セクション）- $3 000-15 000、3-8週間
- SPAマイページ（React/Vue、API、ロール）- $15 000-60 000+、2-5ヶ月
- 価格の主因 - 「JavaScriptそのもの」ではなく、バックエンド・データ・デザインの組み合わせ
オーナーにとっての「JavaScript改修」とは
JavaScript改修はプラグインカタログからウィジェットを入れることではなく、訪問者のブラウザで動くコードを書く・直すことです。サーバー（PHP、Django、Node.js）が HTML とデータを返し、JS がクリックに反応し、計算・絞り込み・API呼び出しを行います。
「インタラクティブにして」とまとめられがちな3つの典型依頼：
| 改修 | 顧客が見るもの | ロジックの場所 |
|---|---|---|
| 計算機 | 入力、スライダー、合計、「注文」ボタン | 多くはJSのみ、時に+API |
| フィルター | チェック、価格帯、白画面なしの並べ替え | JS + サーバーまたはキャッシュ |
| マイページ | ログイン、注文、書類、プロフィール | JS（React/Vue）+ backend + DB |
重要： 計算機とマイページは同じ見積もりにできません。別プロダクトです。
サイト内計算機：種類と予算
シンプル（$300-1 500）
想定： サービスLP、配送、リフォーム - 3-7項目、既知の計算式。画面に結果、フォームに合計を反映。
含む： レイアウト、ブラウザ内計算、基本バリデーション、レスポンシブ。
期間： 営業日2-7日。
中程度（$1 500-4 000）
8-15項目、連動、複数プラン、PDF、担当者メール、CRM連携。
期間： 1-3週間。
複雑（$4 000-15 000+）
B2B契約価格、ERP/API連携、多通貨、ロール、法的意味のあるPDF。backend必須 - 秘密価格をJSだけに置けません（DevToolsで見える）。
期間： 3-8週間。
表：2026 計算機の目安
| レベル | 予算 | 期間 | backend |
|---|---|---|---|
| シンプル | $300-1 500 | 2-7日 | 不要 |
| 中程度 | $1 500-4 000 | 1-3週 | 一部 |
| 複雑 | $4 000-15 000+ | 3-8週 | 必要 |
| コンフィギュレータ | $10 000-40 000+ | 2-4ヶ月 | 必要 |
カタログフィルター：種類と予算
クライアント側（$500-2 000）
最大 200-500 商品を1ページに載せ、JSで表示/非表示。
AJAX（$2 000-8 000）
サーバーへリクエスト、ページネーション、SEO向けURL。PHP/WordPress/Django のAPI、MySQL のインデックス。
期間： 2-4週間。
大規模（$8 000-25 000+）
1万+ SKU、ファセット、検索、キャッシュ、SSR。公開後 SEO監査。
マイページ：種類と予算
CMS上の軽量アカウント（$3 000-12 000）
WordPress、Bitrix、OpenCart - ログイン、注文、プロフィール。期間： 3-6週間。
カスタムフロント（$12 000-35 000）
React/Vue + REST API。ロール、リアルタイム状態、ファイルアップロード。VPS へデプロイ。
期間： 6-12週間。
エンタープライズ / SaaS（$35 000-150 000+）
サブスク、課金、マルチテナント、ERP、モバイルアプリと同一API。
価格に最も効く要因
- 既存backend - APIで3-5倍になりやすい。
- デザインと HTML - 独自UIは高い。CSS もセット。
- 連携 - CRM、ERP、決済：各 $500-3 000+。
- レガシーコード - 整理に20-40%。
- SEOと速度 - SSR、lazy load：+$1 000-5 000。
- 保守 - 開発費の10-15%または月 $300-600。
プラグイン、ノーコード、カスタムJS
| タスク | プラグイン | カスタムJS |
|---|---|---|
| スライダー、タブ | 多くは十分 | 過剰 |
| 簡単な計算機 | Calconic、WPプラグイン | 独自ロジック |
| WooCommerceフィルター | フィルタープラグイン | 1万+ SKU |
| 標準アカウント | WooCommerce | B2B、ERP |
| SPA、リアルタイム | 不可 | 必須 |
まだ改修が不要なケース
- 仮説が未検証 - 計算機やフィルターを顧客が実際に使うか不明なら、まずはシンプルなフォームやノーコードツールでリードを集め、データが取れてからカスタム開発に進む方が安い。
- トラフィックとカタログが小規模 - 商品十数点、月数件のリードでは複雑なAJAXフィルターやSPAマイページは回収できない。プラグインか手作業で十分。
- プラットフォームが近く変わる - 数ヶ月以内にエンジン移行やリニューアルの予定があるなら、カスタム開発は回収前に無駄になる。
- 保守できる人がいない - CMS更新や連携先APIの変更後にJSを直す人がいないなら、「勝手に壊れない」シンプルな構成の方が安全。
- データが未整備 - カタログの属性が埋まっていない段階では12項目フィルターは機能しない。先にデータ、次にコード。
納品後の隠れコスト
VPS ホスティング、ライセンス、監視、CMS更新後の回帰テスト、フィルター用のカタログデータ（$500-2 000）。
発注前チェックリスト
- ユーザーシナリオをステップで記述。
- データの出所（コード、DB、API）。
- SKU/ユーザー/計算量。
- モバイル比率。
- コードの所有とリポジトリ。
- 検収可能な基準（5-10項目）。
- 保証と修正回数。
まとめ
JS改修は $300（簡単な計算機）から数万ドル（マイページ・大規模カタログ）まで。見積もりは frontend/backend/連携の内訳を要求し、秘密価格をブラウザだけに置かない。ターンキーで比較し、保守を見込む。フィルターからポータルへ成長する段階で WordPressからの移行 をAPIスタックで検討。
開発、AI導入、サイト保守など、ご案件に合わせたサポートが必要な場合 - お問い合わせください。
よくある質問
プログラマーなしで計算機は作れるか？
一部は可能 - ビルダーやWPプラグインで簡単な式（月 $0-50）。開発者が必要なのは CRM/ERP価格、法的PDF、非公開の式。ノーコードの節約は $2 000+ の作り直しになりがち。
1万商品のフィルターが200より高い理由は？
200 なら1ページに載せブラウザで絞れる。1万 ではサーバー問い合わせ、インデックス、キャッシュ、クローラ向けURL、負荷試験が必要。カタログ属性の欠落はデータ問題でJSのせいではない。
WordPressアカウントは本格的なマイページか？
B2C なら多くの場合十分。B2B でロールと個別価格があるとWPはすぐ限界。JS+APIの方がプラグイン地獄より安いことが多い。WordPressとプログラマーが必要なとき を参照。
2026年のJavaScript開発の時給は？
目安： $40-80/時 - CIS・東欧のフリーランス；$80-120/時 - 西欧のシニア React/Vue；$100-150/時 - 米国フリーランス（リモート）、シニア frontend；$150-220/時 - 米国の代理店（PM・QA 込み）。代理店は 固定パッケージ で管理・QA に 30-50% の上乗せ。時給より固定見積もり - ストーリーポイントまたは要件固定：「3 000 SKU の AJAX フィルター」= $4 500 固定（CIS/東欧）または $8 000-12 000（米国）の方が「終わるまで40時間」より信頼できる。
JS改修が新規Django/Reactサイトより安いのはいつ？
局所的な作業： LPの計算機1つ、既存WooCommerceのフィルター、アカウント2画面の修正。新規サイトの方が得： 業務プラグイン多数、WP更新のたびJSが壊れる、web+モバイル共通API、年間パッチ予算が Django開発（$15 000-40 000）に近い。2年TCO で比較。
この記事の用語
CRM — Customer Relationship Management — 顧客関係管理
SKU — Stock Keeping Unit — 在庫管理単位
backend — server-side logic, APIs and data layer — サーバー側ロジック・API・データ層
ERP — Enterprise Resource Planning — 基幹業務システム
OpenCart — open-source PHP e-commerce platform — オープンソースのPHP ECプラットフォーム
REST API — HTTP API that exposes resources via URLs and verbs — URLとHTTPメソッドで資源を公開するAPI
SSR — Server-Side Rendering — サーバーサイドレンダリング
VPS — Virtual Private Server — 仮想専用サーバー
B2B — Business to Business — 企業間取引
SPA — Single Page Application — シングルページアプリケーション
frontend — client-side UI of a site or app — サイトやアプリのクライアント側
B2C — Business to Consumer — 企業対消費者