サイト作りについて

サイト作りについての質問です。
複合条件（？）って言うんですかね。
カードゲームのカードの検索サイトを作りたいのですが。例えば画像のようなカードには
名前：青眼の白龍　属性：光　レベル：8　種族：ドラゴン　カードの種類：通常モンスター
みたいなテキストなどがあります。
で、複数のプルダウンやラジオボタン等で属性：光　レベル：8　種族：ドラゴン
みたいな感じで検索して画像のカードを表示させたいのです。
どのようなソースコード入力すればいいのでしょうか
また、言語としては、どれが一番適切でしょうか？
詳しい方ご教授の方をよろしくお願いします。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2020/10/15 17:44

案1.

単純な HTML + JavaScript で画面を実装
サーバー側の処理が不要なので管理しやすい

// 実装例
<form name=searcher>
<input name=条件1>
<input name=条件2>
<button type=submit>検索</button>
</form>
<script>
var カード情報一覧 = [ {名称:"XXX", 画像:"YYY.jpg", 条件1:"AAA", 条件2:"BBB", ..}, ... ];
document.forms['searcher'].addEventListener('submit', 検索処理, false);
function 検索処理(event) {
_ フォームから検索条件を読み取る();
_ 条件に一致するカード情報を探す();
_ 見つかったら画面内に結果を表示();
}
</script>

案2.
ブラウザ上で動作する JavaScript UI フレームワークを使い画面を実装
構造としては案1と同様なので、サーバー側の処理が不要
参考
https://jp.vuejs.org/

案3.
サーバー側で動作する JavaScript Web フレームワークを使い画面を実装
サーバーの環境整備やセキュリティ等の管理の手間が増える
通常はブラウザ上で動作する JavaScript も必要なので、案1や案2と併用することが多い
参考
https://expressjs.com/ja/

案4.
サーバー側で動作する Web サーバーのフレームワークを使い画面を実装
構造としては案3と同様
言語は一般的には Java / C# 等の重量級や PHP / Python 等の軽量級がよく使われるが、お好みでどうぞ。
ただし案1や案2と併用する場合、ブラウザ上は必ず JavaScript で書くので注意