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

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

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

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

JavaScript

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

jQuery

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

Q&A

解決済

6回答

817閲覧

フロントエンドとサーバーサイドの分担について

yiwsk

総合スコア38

PHP

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

JavaScript

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

jQuery

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

0グッド

3クリップ

投稿2020/04/25 20:54

編集2020/04/25 20:56

フロントエンドjavascript,jquery、サーバーエンドphp,mySQLでウェブアプリを開発しています。

例えば、動的にデータベースと連携したセレクトボックスを作るとします。
その際、

(1)サーバーサイドはデータの提供だけを行い、フロントエンドでセレクトボックスを作る
(2)サーバーサイドで、セレクトボックスを作ってしまって、フロントエンドでは、それを書き出すだけにする

のどちらがいいのか、迷っています。

(1)のメリットは、通信量が少ない、デバッグがしやすい、ユーザーが爆発的に増えたとき、処理が分散される 等
(2)のメリットは、プログラム資産を秘匿できる、しっかりクラスを設計すれば、フロントサイドのプログラミングが楽 等

今は、両方が混在していて、どちらかにスタイルを統一しようと思っているのですが、どちらが有利なのか、判断しかねています。

今後は、通信はどんどんと速く、大容量になるので、プログラム資産の保護のために、サーバーサイドでできるだけ処理をして、フロントエンドでは、それを書き出すだけにした方がいいのかなという方向に傾きつつあるのですが、皆さんは思われますか?

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

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

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

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

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

guest

回答6

0

プロジェクトの人員形態(技術領域や習熟度)や方針によります。

通信量含めたパフォーマンスは大して変わらないと思います。
なぜなら書き出すHTMLは同じだから。
JavaScriptでガンガン書き換えるようなものだとまた別ですけどね。

基本的には「View側にはロジックは書かない」ようにすべきとは思いますが、
例えば、セレクトボックスに利用する値、検索結果のデータをDBから取得してループする程度はViewに書いても問題ないと思いますし、各種テンプレートエンジンを利用する際でもそれくらいは書きます。
要件により、条件分岐を書くこともありますね。

挙げられた例だと1)ですね。

2)もなくはないです。ほとんどJavaSciptでHTMLを構成する場合、サーバーサイドから非同期通信でデータを得て返ってきた情報を元に画面を作りますが、JavaScriptでHTMLを描画するのはそれなりに負荷がかかり、パフォーマンス的にはサーバーサイドからHTMLそのまま返した方が速くなります。
サーバーサイドから返すHTMLもサーバーサイドの言語にそのまま書くのではなくテンプレートエンジン使うことが多いかと思います。

投稿2020/04/25 21:25

m.ts10806

総合スコア80854

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

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

yiwsk

2020/04/25 22:23 編集

ありがとうございます。 やっぱり、「View側にはロジックは書かない」が原則なのですね。なんとなく、そう思っていましたが、確信が持てました。 ただ、例がセレクトボックスだったので、その程度なら、(1)だということでしょうか? 「パフォーマンス的にはサーバーサイドからHTMLそのまま返した方が速くなります」ということなので、(2)が好ましいが、セレクトボックス程度なら、(1)でやる方が多いという理解でいいですか? 当初、jqueryでセレクトボックスを動的に作っていた際、画面がもたつくことがあったので、試しに、サーバーサイドでHTMLを作り、それをフロントエンドで書き出したところ、爆速化して驚きました。そのセレクトボックスはそうそう内容が変わらないので、さらにそのHTMLをwebStorageに保存して、再利用するようにしています。 基本的には、できるだけサーバーサイドでHTMLまでつくるべきだが、小さなものなら、フロントエンドでサッサとやってしまうこともある、ということでしょうか?
m.ts10806

2020/04/25 23:37

いえ、質問に例示されていたのがセレクトボックスであったため、倣っただけです。 結局ブラウザはサーバー側からの出力をすべて待ってから処理を開始するので、どっちでも変わりません。 ただ、なるべく分離すべきで、Viewのコードが見通し悪くならないようにView側でループや分岐は最小限におさえるべきとは思います。 View側というのはあくまで「テンプレートエンジン」のことであって、JavaScriptではなく、厳密にはサーバーサイドの仕組みにはなりますけどね。 あくまで「コード上の役割を明確に分担させましょう」という方針になると思います。
guest

0

今は、両方が混在していて、どちらかにスタイルを統一しようと思っているのですが

どちらも方針としてありです。「HTMLでフォームを全部作ってしまう」のも、「サーバサイドはAPIに専念して、HTMLはすべてJavaScriptで生成」というのも、プロジェクトとして成立します。

投稿2020/04/25 23:32

maisumakun

総合スコア145201

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

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

0

皆さんの回答を拝見しましたが、SPA という言葉が出てないので、参戦です。

フロントエンドjavascript,jquery、サーバーエンドphp,mySQLでウェブアプリを開発しています。

この内容から、Webアプリ構築技法の分類でいうと Ajax ということになるかと思います。
しかし、最近では、 SPA (Single Page Application)というのが流行っています。
SPA では Ajax と異なり、サーバから最初のHTML/javascriptを受信したあとは API 呼び出ししかしません。イメージ的にはクライアント側のブラウザ上にアプリケーションがダウンロードされて動作する感じです。
ユーザインタフェースのためのHTMLの内容はすべて Javascript でDOM経由で構築することになります。
サーバサイドからの動的なHTML生成は一切なくなります。また、技術的にHTML5と密接に絡んでおり、リッチなユーザインタフェースを提供することが可能です。たとえば、オフラインでの編集や、編集中のテキストボックスの内容がリロードされても消えないなどの機能が実装可能です。
歴史的には Ajax 対RIAという時代があったのですが、HTML5+SPA の出現で、RIAは駆逐されました。

(1)サーバーサイドはデータの提供だけを行い、フロントエンドでセレクトボックスを作る

(2)サーバーサイドで、セレクトボックスを作ってしまって、フロントエンドでは、それを書き出すだけにする

のどちらがいいのか、迷っています。

SPAでは、PHPでは一切のHTML生成は行わず、API経由でのデータの提供しかしなくなります。PHPでビジネスロジック層を REST APIサーバとして書いて、クライアント Javascript でプレゼンテーション層を書くことになります。

Ajax を完全に否定しているわけではありません。SPAについて、まったく初めてであれば、ハードルが高いのも事実だと思います。
ただ、個人的には今から新しくWebアプリケーションを開発されるのであれば、SPAとの比較をしてからアーキテクチャを決定されることをおすすめします。

投稿2020/04/26 00:58

mit0223

総合スコア3401

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

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

yiwsk

2020/04/29 03:51

ありがとうございます。確かに敷居が高そうですが、面白そうです。 今のプロジェクトが落ち着いたら、次のプロジェクトで是非挑戦してみます。 ありがとうございました。
guest

0

ベストアンサー

(1)サーバーサイドはデータの提供だけを行い、フロントエンドでセレクトボックスを作る

(2)サーバーサイドで、セレクトボックスを作ってしまって、フロントエンドでは、それを書き出すだけにする

個人的には、2)が99%で、1)が1%です。
以下、これを取る理由です。

  1. ... 端末のメモリ使用量を少なく出来ることで、ある程度スペックが低くてもラグなく読み込める。
  2. ... サーバー側とユーザー側で同じような出力をするならサーバー側の方が圧倒的に早い。
  3. ... 一気に整形したほうが楽。他で使う時も同様の処理が共通化できる。
  4. ... なんとなく。2)がめんどくさいと思った時に。
  5. or 2) ... 場所によって、大まかな出力は同じだが、細かな出力が違う場合の対応に対する労力とリターン。

1)を使ったことは、実際、Laravelを使ったときでは1回くらいしかありません。
それも今では、2)に置き換えてますが。

個人開発なので、そこらへんは自由に融通できますが、もし所属団体がある場合は聞いてみたほうが良いと思います。

投稿2020/04/25 21:30

編集2020/04/25 21:38
kyoya0819

総合スコア10429

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

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

yiwsk

2020/04/25 22:25 編集

ありがとうございます。やっぱり(2)なんですね。 動的なwebページの作り方を勉強した当初、サンプルプログラムのほとんど(私が見た限り全て)が、フロントエンドだったので、最初はそうしていました。でも、(2)に書き換えようかなと思っているところです。 ありがとうございます。
kyoya0819

2020/04/25 22:25

自分の場合は、ほぼ確実に2です。 以下現在で、実装したコードの中で1を使ったものはおそらくないです。 (うろ覚え
yiwsk

2020/04/25 22:27

ありがとうございます。確信ができてきました。
kyoya0819

2020/04/26 00:35

どうしても、ユーザー側の端末のスペックを上げることはできないけれど、サーバー側だったら、金払えばスペックあげられるでしょ。というのも個人的にはあります。 最終的には、どんなFWなどを使っていくのか・どんなサービスを運営していくのかというのがかなり重要です。頑張ってください。
guest

0

皆さん、色々なご意見や情報提供、ありがとうございました。
今後の方針に確信が持てました。
サーバーサイドにできるだけ仕事をさせるように、既存のプログラムを改編していくことにします。

投稿2020/04/29 03:55

yiwsk

総合スコア38

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

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

0

おはようございます。日曜プログラマです。
最近、javascriptが活気ずいていますね。

自分は、サーバーサイドではmysql+PHPでJSON形式でデータのみを吐き出す、
Vue.jsでインターフェイスを作成するという流れで勉強しています。

PHP8でJIT対応すると高速化されるらしいので、サーバーサイドで処理を各機会が増えると
思います・・・。というか楽しみでもあります。

色々選択できて迷いますね・・。

投稿2020/04/25 21:18

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

yiwsk

2020/04/25 21:52

早速の解答、ありがとうございます。私も、趣味と実用性を兼ねて、ウェブアプリを開発している日曜プログラマーです。プロは、サーバーサイドとフロントエンドで違うエンジニアが担当しているのかなと思うのですが、私は一人で両方するので、どうしようかなと悩んでいます。 今はユーザーが少ないので、どっちでもあまり変わらないのですが、退職後は、これまで作ってきた資産を活かして、若者と一緒にベンチャー化しようという壮大な夢があります。 私も、できるだけサーバーサイドの処理の割合を大きくしようかなと思っているのですが、万が一、ベンチャーが大当たりして、ユーザーが爆発的に増えたらどうなるのかなと、要らぬ心配(?)をしている次第です。(笑)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問