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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

17858閲覧

サーバーサイドレンダリングとは?

Hassan

総合スコア14

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

5クリップ

投稿2015/12/10 15:37

react-railsでサーバーサイドレンダリング!
といった記事をよく見かけるのですが、
サーバーサイドレンダリングとはつまりどういうことですか?

ルーティングをRailsが受け持つということかなと思ったんですけど、どうでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Hassanさんご自身が質問欄に掲載されたリンク先で紹介されている下記ページの説明が分かりやすいのではないかと思いますが、既にご確認済みでしたか?

[なぜ仮想DOMという概念が俺達の魂を震えさせるのか](http://qiita.com/mizchi/items/4d25bc26def1719d52e6)

WWW (World Wide Web) システムで表示されるページは、一般的には画面がHTML等で構成されています。
ボタンクリックなどによりページを更新する場合、たとえそれが一文字のみの変更であっても、サーバ側で生成された 1ページ分のHTML を再度受信してレンダリングし直す(画面遷移する)というのが本来の仕組みでした。

しかし、画面デザインの高度化に伴いページを構成するデータ量が膨大になってしまったため、毎回ページ全量のデータを転送していてはあまりにも遅いので、変更の必要な部分のみ を差し替えるという技術が使われるようになりました。
HTMLはツリー構造なので、該当箇所を特定できれば JavaScript等で部分的に差し替えることができます。もっとも、全てを自力で実装すると大変なので、最近では jQuery のようなライブラリを使用するのが一般的です。

とはいえ、この方式では jQuery を使ったとしても、変更前後のHTMLの差分を人間が予め準備して、ロジックの中にHTMLのパッチ処理を埋め込んで行く必要があります。また、時系列で刻々と変化してゆくHTMLのパッチを生成しなければならないだけでなく、複雑なロジックをプレゼンテーション層側に実装する必要が生じるために従来の設計手法がそのまま適用できず、ロジックが複雑な場合には設計もテストも非常に難しいです。つまり、速度のために設計を犠牲にしている事になります。

そこで 仮想DOM の登場です。

このHTMLの生成する元となるツリー構造は、生のDOM(HTMLのインスタンス)である必要はなく、DOMと1対1に対応する単純な構造体で表現し、それを仮想DOMと呼びます。

単純なJSの構造体なので、基本的に仮想DOM実装はブラウザ環境である必要がなく、node.jsやピュアなV8でも仮想DOMの構築とdiff生成までは可能です。

そうです、サーバーサイドで、HTTPリクエストに応えてHTMLを返却する操作そのものです。

Virtual DOMに基づいたフレームワークを使えば、この「古くて新しい考え方」でアプリケーションを記述することが可能になるのです。多くのサーバーサイドエンジニアが慣れ親しんだそれです。しかも、パフォーマンスは最適化された上でね!

これが最初に述べた、「設計と速度が両立する」という言葉の意味するところです。

以上を簡単にまとめると、サーバーサイドレンダリング とは、近年、高速化のためにjQuery等を使用してフロントサイドで実施していた HTMLの構築 を、仮想DOM というフレームワークを用いることで再び サーバーサイドで実施 することで、「設計と速度を両立」させる手法ということができると思います。

少し別の角度で説明すると…

サーバーサイドで、いわゆる MVC モデルで構築する際に、従来は Rails の規約優先のポリシーに則ることで設計・実装を容易にするというアプローチが取られて来ました。
それが近年では高速化のために、View の機能の大部分を jQuery等を利用してフロントサイドで実装する方式が注目されていました。
しかし、設計やテストの困難という新たな壁を克服するための新たなアプローチとして、React.js というライブラリを用い Viewの部分を仮想DOMを利用してComponent化 することで、高速性を維持したまま従来の設計手法を適用できるようにする方式が大きな注目を集めているということだと思います。

よかったら、下記ページもご参考になさってください。

[React.jsとは](http://qiita.com/koba04/items/4d13caf5ab4507974bf0)

投稿2015/12/12 11:21

pi-chan

総合スコア5936

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問