質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

524閲覧

Webサイトで大量の商品情報を表示して絞り込む

beginnerprogram

総合スコア1

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/11/12 18:20

前提・実現したいこと

初めて質問させていただきます。
プログラム以前の問題について質問です。

現在、フロントエンド部分の(ほぼHTMLとCSSのみ)のサイト運用をしています。
バックエンドの商品管理やシステム等は全く関りのない別業者です。

今回、いつもの更新しているページに「おすすめの商品一覧」を掲載することになりました。
機能は、
・商品(掲載商品は決まっている)が100個表示されている状態(ページャーで最大20商品ずつ表示)
・絞り込みで商品の表示数が変わる(色合い・サイズ・素材など)
・絞り込み後、再度20個ずつページャーで表示される
となります。

商品は既にシステムに登録されていますが、商品名称や画像が一部変わるため、
新しく商品情報を入力し直す必要があります。
また、バックエンド側に相談することは難しいです。

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

現在の自分の知識では、HTMLに100個の商品情報を記入。
各商品にdata属性を付け、jqueryで出し分け。
と考えていました。

しかし、100個の情報をHTMLで記述していくのはおかしい(現実的でない?)
と思ったのですが、この場合JSONなどを使うべきでしょうか?

HTMLとCSS以外の知識がそれほど無いため最適な方法が分かりません。

試したこと

調べる際は
「商品一覧 hmtl 制作」「商品一覧 JSON 管理」
などといった検索ワードで検索していますが、
検索の方法が悪いようで、解決に至りません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

100個の情報をHTMLで記述していくのはおかしい(現実的でない?)

と思ったのですが、この場合JSONなどを使うべきでしょうか?

高々 100 アイテム程度なら、固定で記述されていても現実的だと思いますよ。
メンテナンス性も適切に設計/コーディングしてやればデータ構造として外に持つ場合とそれほど変わらないです。
*html 自体がマークアップ言語なので。

ただ、私なら「商品(掲載商品は決まっている)」の管理は DB を使いたいので、何としてでもバックエンドと連携を図るかなぁ。。。

投稿2021/11/12 22:05

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2021/11/12 22:32

表示内容が変化しないならともかく (それでも100個はどうかと思いますが)、検索して絞り込んで20個ずつページングするのに固定で記述はあり得ないと思います。
退会済みユーザー

退会済みユーザー

2021/11/12 22:55

あり得ない根拠を示してください。 回答にも書きましたが html はマークアップ言語なので、JSON や XML で表現できることはそれなりに表現可能です。
Zuishin

2021/11/13 00:08 編集

バックエンドと連携が取れないという元々の条件がおかしいので、HTML 埋め込みも一考の余地はありますね。 しかしそうするとゴチャゴチャするので、編集時には別ファイルに分け、ビルド時に合成、または表示の際に読み込みしたいところではあります。 ただ、担当者にそれを開発・メンテナンスする技術が無いのであれば、難しいことを言っても仕方がないので、現実問題としてやっぱり HTML 埋め込みに落ち着くのかもしれません。 > 何としてでもバックエンドと連携を図るかなぁ。。。 これがベストでしょうね。クライアントを通じて話ができないはずがないと思うんですが。
beginnerprogram

2021/11/13 13:06

回答いただきありがとうございます! 100程度ならばhtmlでも問題ないのですね。 皆様がおっしゃっている通り、やはりバックエンドとの連携が最適ではありますよね・・・ バックエンドは現在のシステムを提供して終わり、 といった感じなので連携しづらいところはあるのですが、 相談してみようと思います。 ありがとうございました。
guest

0

バックエンド側に相談することは難しいです。

この時点でできることってほぼないです。
仰るようにJSONやXMLなどで外に出すくらいでしょうね。

などといった検索ワードで検索していますが、

「商品一覧」という固定過ぎるキーワードはかえって見つからなくなります。
単に「JavaScript JSON 取得」とかで良いのではないでしょうか。
それが出来たらJSONの内容を考えて商品一覧っぽくするのはあくまで作りたい人の仕事です。


ただ「商品管理システム」と言うからには「商品情報を管理する仕組み」がどこかにあるわけで、二重管理になるには頂けないような気がします。システムで更新して設改廃があった場合にそのおすすめ商品も更新しなければならないわけですから。
多少お金かけても「商品情報に”おすすめフラグ”をつける」「”おすすめフラグ”がついた商品情報を取得する(ページングのため指定数のみ)」ような仕組み(ここはAPIで良いと思う)があった方が後々楽になるのでは。

投稿2021/11/12 20:24

m.ts10806

総合スコア80861

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

beginnerprogram

2021/11/13 13:06

回答いただきありがとうございます! 知識不足なものでJSONやXML以外にももしかしたら 方法はあるのか?と思っていました。 また、二重管理の問題についてもその通りですね。 まずは相談をしてみて、その後に対応を決めようと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問