jQuery Mobile から最新のフレームワークへの移行について

Question

jQuery Mobileを使ったウェブアプリを開発し、運用しています。
BPUCPhoto 写真データベースアプリ

jQuery Mobileは、バージョンアップが止まって久しいのですが、とうとう、Deprecated（利用を推奨せず）になることがOpenJS Foundationから正式に発表されてしまいました！！

最新のフレームワークに移行したいのですが、プログラムが膨大になっていて、どうしたものか途方に暮れています。

操作性を大事にしたい図鑑アプリなので、jQuery Mobile の、１つのhtmlファイルに多くのページを記述できてajaxで素早くページ遷移するところが気に入っています。

今までのjQuery Mobile のプログラム資産をできるだけ活かして、最新のフレームワークに移行するには、何を使えばいいでしょうか。

アドバイスをお願いします。

Answer 1

---

(引用)
マイケル・フェザーズは、テストのないコードをレガシーコードと定義している。
コードを実行し、意図したとおりに使われていることを検証する優れた自動ユニットテストに高い価値を置いているためだ。
これは私も同じである。

ウォード・カニンガムは技術的負債という単語を作った。
これは、開発中に学習した内容をコードに反映しなかったときに起こることを説明したものだ。
技術的負債以上に、開発を遅くしたり見積りを狂わせるものはほかにない。
１時間で終わるべきものが１日以上かかったり、ときには、１つの機能追加でおびただしい量のコード変更が必要になったりする。
コード品質の向上は変更のコストを下げ、見積りを予測可能なものにしてくれる。

技術的負債は、ほとんどの場合累積していく（例外はある）。
したがって、ほとんどの場合は、できるだけ早く技術的負債を返済するのが正しい選択だ。
技術的負債のあるシステムで開発者が作業すると、問題にぶつかる。
開発者は、何度も何度も技術的負債に遭遇し、そのたびにコストを払う。

『レガシーコードからの脱却』

元も子もないかもしれませんが、回答させていただきます。

こういったお話は、実際のコードを見てみないことには理想的な回答はできないように感じます。
実際のコードを見たとしても、本当に完璧な回答はできないように感じます。
(回答に従ってやってみたところで様々な壁にぶつかるような気がします)

「今までのjQuery Mobile のプログラム資産をできるだけ活かして、」
ですが、最初に引用した書籍の内容にもありますが、自動ユニットテストがあるのでしたら「資産」としても良いと思いますが、
そうでないのでしたら、「技術的負債」と解釈した方が良い気がします。

jQuery Mobileはプレゼンテーション層をサポートするフレームワークだと思いますので、
この層はユニットテストが難しく、おそらくユニットテスト自体が行われていないことがほとんどだと感じます。

現場で様々な案件をこなしてきた経験からすると、
既存のプログラムを「資産」として使おうとすると、負債に負債が積み重なって、
目も当てられないコードが出来上がるパターンしかありませんでした・・

「最新のフレームワークに移行したい」
のであれば、既存のコードは置いておいて、
一旦、素のままに最新のフレームワークを試してみるところから初めてみた方が、
結局は一番早いような気がします。

Comments

[yiwsk]

アドバイス、ありがとうございます。
素人プログラマーなので、「ユニットテスト」なるものの存在すら知りませんでした。

とりあえず、アドバイスに従って、追記機能のページを、Bootstrap5 で作成して見ようと思います。それでBootstrapを実践的に学ぶことができると思います。その上で、既存のプログラムをどうするか、検討してみます。

追加機能のページは、単体のページで機能するのでいいのですが、本体のプログラムは、一つのphpファイルにいくつかのページがあって、それを動的に切り替えて表示するSingle Page Applicationです。jQuery Mobileなら簡単にできるのですが、これをどうするかの問題があります。

各ページを <div id="○page"></div>で囲み、jQueryで、show(), hide()することで、jQuery Mobileなしでもできるかなと思っているのですが……。それなら、大幅な手直しなしで、Bootstrapに移行できそうな気がしています。ただ、Bootstrapで作る固定ヘッダーやnavbarを動的に変更できるのかなど、分からないことはたくさんあります。

調べてみると、Single Page Applicationを作成出来るフレームワークは沢山あるみたいですが、根本的に書き直すのは、やはり気が進みません。

何か知恵やアドバイスがあれば、お願いします。

[退会済みユーザー]

> 各ページを <div id="○page"></div>で囲み、jQueryで、show(), hide()することで、jQuery Mobileなしでもできるかなと思っているのですが……。それなら、大幅な手直しなしで、Bootstrapに移行できそうな気がしています。

そういうことでしたら、素のJavaScriptでも良いのかもしれませんね。
次のリンクも参考にしてみたらいかがでしょうか。

You might not need jQuery(機械翻訳「jQueryは必要ないかもしれません。」)
https://youmightnotneedjquery.com

(jQueryも安心できるのかわからないと思っております・・)

> 調べてみると、Single Page Applicationを作成出来るフレームワークは沢山あるみたいですが、根本的に書き直すのは、やはり気が進みません。

わかります。
せっかく作ったものですし。
(「操作性を大事にしたい図鑑アプリ」「〜ところが気に入っています」こういう感覚は良いことだと思いました)

でも、おそらく今のSingle Page ApplicationはjQuery Mobileとは別物のように思います。
「jQuery Mobileなしでもできるかな」とのことですので、無理に別のフレームワークを採用しなくても良いのではないかと思いました。
できるだけ何かのフレームワークに依存しないように修正していけばそれで十分と思いました。

Webのフロントエンドというところは技術が廃れるのも早くて大変ですよね・・