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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

9934閲覧

SPAで、バックエンドとフロントエンドのデータの受け渡し時のデータ整形処理のタイミングについて

y214

総合スコア33

Webサイト

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/02/22 01:37

質問の概要

バックエンドとフロントエンドでデータを受け渡す時、どちらでどこまでデータを整形するべきかいつもわからなくなります。
皆さんはどの様に考えているのでしょうか?
以下の2つの例についてお考えをお聞かせください。

例1. データの流れが フロントエンド -> バックエンドの場合

例えば、フォーム入力画面にて、フロントエンドからバックエンドにデータを送ってDBに登録する処理があったとします。
皆さんはどのような考えで実装されていますか?

  1. フロントエンドでデータ整形
    (フロントエンド側でバックエンドが扱いやすいデータに整形したあとjsonにし、バックエンドはそのデータをただDBに突っ込む)
  2. バックエンドでデータ整形
    (フロントエンドではフォーム入力値をそのまま jsonにし、バックエンド側で整形処理をしてDBに突っ込む)

例2. データの流れが バックエンド -> フロントエンドの場合

例えば、DBからデータを取得して画面に表示する場合、
皆さんはどのような考えで実装されていますか?

  1. フロントエンドでデータ整形
    (バックエンドから取得した生のjsonデータをフロントエンド側で整形してブラウザに表示させる)
  2. バックエンドでデータ整形
    (バックエンド側にてフロントエンドで表示しやすいようにデータを整形し、フロントエンドはバックエンドから取得したデータをただブラウザに表示させる。)

ご教授よろしくお願い致します。m(_ _)m

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

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

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

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

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

guest

回答1

0

SPAに限らず、Webアプリケーション全般に言えるのですが、大前提として「フロントエンドから送られてくるデータは信用するな」「バックエンドの処理は絶対」というのがあります。

フロントエンドは様々な環境(OSやWebブラウザ、通信環境など)から利用される可能性があるので、正常なデータが送られてくる保証はどこにもありません。悪意を持った人が改ざんしたデータやセキュリティホールをつくデータ(SQLインジェクションなど)を送ってくる可能性もあります。悪意がなくとも全環境で検証するのは不可能なので、意図しないデータが送られてくる可能性は大いにありえます。
逆にバックエンドは環境が一定ですので、同じ入力値だったら同じ結果が返ってくることが期待できます。

フロントエンド -> バックエンド

フロントエンドから送られてくるデータはユーザが自由に入力でき、極端に言えばバリデーション処理そのものを無効化したり、データが改ざんされて送られてくる可能性も大いにあり得ます。JavaScriptの場合、Webブラウザによって対応状況がまちまちなので加工したデータが意図しないデータになる可能性も捨てきれません。
特にデータベースにデータを登録する際にはバックエンド側で必ずバリデーション処理を行うので、フロントエンドから送られてくるデータは無加工のデータの方がバリデーション処理やデータ整形がやりやすいと思います。

フロントエンドでバリデーション処理を実装するな、という意味ではありません。通常利用する場合は、クライアントサイドでバリデーション処理した方が無駄な通信が発生しませんし、ユーザ的にも優しいです。(せっかく色々入力し終えて送信ボタンを押したら入力エラーって出て来たらイラっとしますよね?)

バックエンド -> フロントエンド

データベースから取得したデータを本当にそのまま出力すると、テーブル構造などクライアントサイドで簡単に予測され、セキュリティ的によろしくないので、そのまま出力することはありません。
通信を最低限に抑えるという意味からも、必要最小限のデータになるようにします。

何かしらのフレームワーク(AngularやReactなど)を使っている場合、フロントエンドでのデータ整形は比較的簡単だと思われますので、フロントエンドで整形します。
jQueryで自力でDOM操作する場合は無加工のデータだとしんどいのである程度バックエンドで加工した方がいいと思いますが…
またフロントエンドで展開するのがしんどいデータ(例えばforが何重にも重なっていたりするデータ)や複雑なデータは端末のスペック依存となり表示速度にも関わりますので、そういう場合はある程度バックエンド加工した方がよいと思います。

投稿2017/02/22 03:01

編集2017/02/22 03:52
nayuneko

総合スコア133

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問