それなりブログ

とあるWebエンジニアのそれなりのブログ、JavaScript/Node.js/Python/PHP/ゲーム作成 など

ページの一部を後でJS化する場合どうするか

例えば、元々はサーバサイドでHTMLを生成して返していただけのページで:

  • 「次に進む」リンクでのページネーションを「もっと読む」へ変更したい。
  • 初期表示で数列表示されているテキストフィールドを「+」ボタンで増やせるようにしたい。

このような要望が後で発生し、
一部を JavaScript で書き直さざるを得ないケースは良くあることだと思います。

これ、どういう設計で対応するのが一番いいのかなー、と結論は出ていないのですが、とりあえずまとめてみます。
(アドバイス貰えるかもしれないし)

描画はJSでのみ行う

正攻法です。

動的に変更する可能性があるHTMLは、クライアントサイドのJSのみで描画します。
もしサーバサイドのデータが必要な場合は、別途 Web-API を作成します。

例えば、「もっと読む」なら、現在サーバサイドのテンプレートで描画しているリスト部分を削除し、対応する Web-API を作り、それを Ajax で呼ぶことで DOM を生成する JS を書き、サーバ側によるHTML描画が終了した時点でその JS を呼ぶようにする、という対応です。

問題は特に無いと思いますが、手間が掛かります。

部分的なHTMLを返すWeb-APIを作成する

Web-API で「部分的なHTML文字列」そのものを返すようにし、Ajax で取得します。

メリットは、サーバサイドのテンプレートシステムをそのまま使えること、クライアントJSをあまり知らなくても大丈夫なこと、などです。

デメリットは、汎用性の低いWeb-APIを作る必要があるということ、部分的に呼び出した部分に対し更にJSで加工する必要が発生するとカオスになること、などです。

以上だった。

2 パターンしか思いつきませんでした。

もっと他の(悪い)パターンがあった気がするんだが..

追記: ページ全体をAjaxで取得してJSでスクレイピングする

ごアドバイスをいただいた。

一時しのぎ的ではありますが、非常に手軽で、また後の設計に影響を与えずに動かすことができるので、使える機会は多いと思いました。



コメントを残す

メールアドレスが公開されることはありません。

Categories

Archives