自社サービス
自社開発のSaaS
画面 jQueryBootstrap → Vue 3InertiaTailwind CSS
- どんなシステム
- 外部の10サービスとつながり、毎晩自動で動く業務の仕組み（画面約75）
- 難しかった点
- 10の外部サービスとの連携を、すべて動く状態のまま移した
- 引き継いだもの
- 利用者に配布済みのURLを、切らずに移した
- いま
- Laravel・PHP 8.4で稼働している
jQueryとBootstrap 3の画面を、Vue 3・Tailwind CSSへ
状況を相談する（無料・オンライン）jQuery・Bootstrap・Vue 2のサポート状況（2026年10月時点）
-
Bootstrap 3 のサポートが終わりました。出典：getbootstrap.com
-
Vue 2 のサポートが終わりました。出典：vuejs.org
-
jQueryでサポートされているのは 4系だけです。3系は重大なセキュリティ修正とバグ修正だけで、1系・2系はサポートの対象外です。出典：jquery.com
版を上げると消えるもの
| 古い書き方 | 新しい版では |
|---|---|
.size() | jQuery 3.0 で削除。.length を使う |
$(img).load(fn)・.unload()・.error() | jQuery 3.0 で削除。.on("load", fn) を使う |
$.trim()・$.isArray()・$.parseJSON() | jQuery 4.0 で削除。String.prototype.trim・Array.isArray・JSON.parse を使う |
| Glyphicons | Bootstrap 4 で削除 |
.panel・.well | Bootstrap 4 で削除。.card に置き換え |
.col-md-6 | Bootstrap 4 でグリッドの段が1つずれ、.col-lg-6 に相当 |
古い画面で起きやすいこと
- jQueryの版上げで止まるプラグイン
typeahead.js（Bloodhound）や bootstrap-select のような jQuery プラグインが、新しい jQuery・Bootstrap で動くかを1つずつ確かめます。
- 同じDOM操作が画面ごとにコピーされている
$("#id").html(...)のような処理が画面ごとに書かれていて、1か所を直しても他の画面は古いまま残ります。 - Bootstrap 4への置き換えは全画面に及ぶ
グリッドの段・パネル・アイコンの書き方がすべて変わります。
移す先
- Vue 3（Composition API・単一ファイルコンポーネント）＋ Inertia
- ルーティングと認可は Laravel に置いたまま、画面だけをコンポーネントにします。
- Vite・Tailwind CSS
- ビルドは Vite、見た目は Tailwind CSS のユーティリティクラスで書きます。
移行の事例
医療・ヘルスケア企業
学習・キャリア支援サイト
画面 jQueryBootstrap → Vue 3InertiaTailwind CSS
- どんなシステム
- 会員がログインして使う、学習と求人のサイト
- 難しかった点
- 移行と同時に、49画面をデザインから刷新した
- 引き継いだもの
- 会員のパスワードはそのままに、日中に切り替えた
- いま
- 開発約8週間で切り替え、いまも改善を続けている
よくある質問
PHPはそのままで、画面だけ作り替えられますか？
画面だけの作り替えはお受けしていません。PHPの移行・作り直しと一緒にお受けしています。
Vue 2で作った画面も対象ですか？
はい。PHPの移行・作り直しと一緒にお受けします。
デザインも変えられますか？
はい。事例の学習・キャリア支援サイトでは、移行と同時に49画面をデザインから刷新しました。
