HTMLの動的生成方法について

Question

前提・実現したいこと

異なる入力画面を大量に作ろうとしています。
内容ですが、各画面表示する項目は違うのですが、作りはどれも一緒です。​
​
なるべくコーディング量を抑えたいので、1つ汎用的なHTMLを作り、各画面に表示する項目はDBなど（※）外部で管理して、リクエスト毎に画面を生成するというようなことをしたいです。​
（※）現場の特性上、モジュールをリリースしようとすると手間ですが、DBは好きにいじれるので、DBを使いたいという背景があります。​
​
ゼロから作ろうにも当方知識不足で思いつかなかったので、​
どこかでうまくいっている仕組みを踏襲したいと考えております。​
どなたかご存知の方いらっしゃれば教えていただけますでしょうか。

開発言語などもまだ未選定で、この課題次第が解決できる言語にしようと思います。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

どこかでうまくいっている仕組みを踏襲したい

割とどのようにも作れるので、「まずやってみることから」ではないでしょうか。

DB使いたい
↓
どうやったら使えるか。どういう言語なら使えるか
（ここまで落とし込めば調べれば幾らでも出てくる）

1つ汎用的なHTMLを作り、各画面に表示する項目はDBなど（※）外部で管理して、リクエスト毎に画面を生成するというようなことをしたいです。​

汎用的＝テンプレート
↓
テンプレート的に画面を生成したい
↓
どうやったらHTMLをテンプレート化できるか、どういう言語なら使えるか
（ここまで落とし込めば調べれば幾らでも出てくる）

---

必要なのはいきなり手法を求めることではなく、要件を細分化することからだと思います。
細分化できればそれぞれ調べるのはそこまで難しいことではないですし、個々の検証に割く時間や労力もある程度は見えるものかと思います。
それらをどう組み合わせるかはまた考えれば良いことで、部品が何もできてない状態で考えることではないと思います。

要件の細分化、調査、検証

そこから選定です。

Comments

[TetraUser]

ご回答ありがとうございます。そうですね。他の方から頂いた知識をいかしつつ、作ってみようと思います。

[m.ts10806]

作るのは後です。
Howではなく、What,Whyから。

Answer 2

yambejpさんの回答通り、
フロントエンドフレームワークやライブラリを使用するのが一番かと思いますが、

ゼロから作ろうにも当方知識不足で思いつかなかったので

を踏まえて、自作するなら必要な知識と技術を少しだけ回答させていただきます。

SPAを理解する。

本質問のように、一ページ完結で、複数ページがあるようにする実装のことを、
Single Page Applicationと言います。
知識と、どういうものなのかは勉強は必須です。

JavaScriptは必須

これができないと、動的もクソもないので、必要です。
また、自作ではなく、フレームワークを使う上でも、必須となります。

DOMコントロール含めネイティブJSは卓越していかねばならない

jQuery少し使える程度では、壁はかなり大きくなるでしょう。
ネイティブもガッツリ使いこなせていないと、難しくなってくると思います。

Ajax処理、API連携はかなり使うことになる

基本的にはフロントエンドからはDBに直接つなぐことはしません。（そして多くの場合できない）
なぜなら、セキュリティもクソもないからです。
（JSONPという技術も存在するが・・・）
なので、API連携はかなり使うことになるので、習得しておきましょう。

ページ履歴処理を自作する

これはSPAであることと、自作ならば、かなり大変なものになります。
戻るボタンや更新ボタン押下時の挙動など、コントロールするには、履歴をコントロールすることが必要不可欠です。
locationやhistoryオブジェクトとお友達になることが秘訣になります。

まだまだありますが、以上です。

Comments

[TetraUser]

詳細な情報ありがとうございます。頂いたトピックを深掘りし実際に作ってみます。

Answer 3

vueやreactなどテンプレートを利用できるjsライブラリで運用するとよいでしょう

Comments

[TetraUser]

ご回答ありがとうございます。教えて頂いたもので実際に作っていこうと思います。