htmlの動的作成時の方法について

Question

質問です。

データ内容によってページ自体のHTMLを書くプログラムがあるんですが
その際のセオリーや処理速度についてお伺いしたいです。

・文字列操作でHTMLソースを描く

・XMLオブジェクトを作成しそこに必要な項目を入れて最後にString変換

のどちらが一般的でしょうか？

Comments

[miyabi_pudding]

> データ内容によって
これは、データベースのことですか？

聞きたいことは、
> セオリーや処理速度
ですか？
それとも、
> どちらが一般的でしょうか？
でしょうか？

[match_takakoma]

回答ありがとうございます。
仰る通りで
ネットワークフォルダにあるAceessのDBを元に動的にページを作り出しています。
またWebスクレイピングした内容を再構成したりする場合です。
処理速度と一般的な話
両方ですね。
言語によってかわるとはおもいますが
JscriptとPythonどちらとも環境によって使い分けている状況です。

[miyabi_pudding]

ここは回答欄ではありません。
質問修正依頼のコメント欄です。

ふむ・・・。
ざっくりとした回答しかできませんが、回答試みてみます。

Answer 1

SPA的なことですか？
HTMLを受けて流し込んでも、JSONで受けて展開してもどちらでもよいでしょう

Comments

[match_takakoma]

ありがとうございます。
自分がやっていることはSPAというのですね。

Answer 2

あくまで、セオリーや一般的というものは存在せず、（流行りはある）あくまで案件によって最適なものを選ぶべきと思ってください。

いくつかパターンを提示します。

サーバーサイドプログラムを使う

PHP、Ruby、Pythonなどを使い、
サーバーサイドテクノロジーを使い、DBから情報を受け取り、
そのままその言語で最適化したものをHTMLに埋め込んだりする形で最終的にブラウザにHTMLを返して表示する方法です。
各言語で、Webサイト構築用のフレームワークが存在するので、使うと、より効率的に構築ができるでしょう。

メリット

• 表示速度がエンドユーザーの環境によらないことが多い
• 基本的に、サーバー側でHTMLを組んでから返すため、表示に必要なものが不足することがない
• あらゆるファイルの吐き出しなども、サーバーのセキュリティが担保されている前提なので、様々な処理を行うことができる

デメリット

• サーバー側でHTMLを組むため、組んでいる間はHTMLを返せないため、その分初期表示が遅くなることがある
• サーバー側の負担は大きくなる
• バックエンドエンジニアも、ある程度HTMLやフロント面に精通している必要がある

フロントエンドフレームワークを使う

React.jsや、Vue.js、Angularなどの、フロントエンドフレームワーク、ライブラリを使う方法です。
データベースに直接アクセスはできないので、
サーバーサイドとAPIで連携して、情報を取得、表示、と基本的には行なっていきます。

メリット

• DB情報を引っ張る時など、必要なものに限定できるので（各機能別にAPIを用意することが多い）表示が非常に高速になることが多い
• 表示面でのコントロールが非常にしやすい
• SPA構築を基本的にサポートしているものがほとんどで、SPAでやるなら特に、情報の再取得をせずページ遷移を行えるので、これまた表示が高速
• 上記理由からサーバー負担が少ない
• シームレスなページ遷移の実現が容易
• 統合的に統一的に、処理を行えるため、修正やリファクタリングなどが非常にしやすい。（下手したらリファクタリング必要なくできる）

デメリット

• Web面以外での習得が必要な場合が多く（コマンドラインや、TypeScriptなど）、学習コストが高くなりがち
• 表示速度が、エンドユーザーの実行環境に依存することがほとんど
• SPAで実装する場合は特に、サーバー側のアパッチの設定などが、厄介な場合がある。
• DB情報などは、常にAPIを介す必要がある
• ファイルコントロールなどのセキュリティが必要な処理は行えない。（サーバー側に処理を投げる必要）

他にもメリット、デメリットなど、方法や手法は存在しますが、
キリがないので、ここまでにします。

ちなみに、

・文字列操作でHTMLソースを描く
・XMLオブジェクトを作成しそこに必要な項目を入れて最後にString変換

は、あまりやりません。
（それが必要な箇所ならやる。必要なパターンももちろんある）
して、実は、JavaScriptって、文字列コントロール苦手だったりするので、
それだったら、DOM使った方がいいです。
（それでも文字列操作の方が早かったりするが、動的に非常にしずらいため、後に苦労する）

Comments

[match_takakoma]

自分がやろうとするのはフロントエンドフレームワークの方だと思います。
React.jsを勉強したいと思います。
ソースを書き変えるよりDOM操作の方がいいのですね。ありがとうございます！

[miyabi_pudding]

> ソースを書き変えるよりDOM操作の方がいい

あくまで、状況や要件によりけりなので、
テキスト置換でやる時も必要な時もありますので、あしからず・・・。

まぁ、フロントフレームワーク使えば、わざわざ自身で置換したりはほとんど発生しなくなります。