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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ruby on Rails

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

JavaScript

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

React.js

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

Q&A

解決済

1回答

1700閲覧

JavaScriptフレームワークを使う場合の構成について

cava

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Ruby on Rails

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

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2018/05/13 14:18

前提・実現したいこと

勉強のために、JavaScript フレームワークをつかったアプリケーションを作成したいと考えています。
しかし、SSR、SPA どちらでも、どのように使えばいいかわかっておりません。

はじめは TODO アプリや掲示板をつくることから始めようと思っていますが、
その場合のバックエンドの構成はどのようになるのでしょうか。

バックエンドのルーティングとか気になります。

もし可能なら、Vue/React + Rails/Sinatra/Laravel あたりを例に教えていただけますと幸いです。

気になるところ?

  1. SPA の場合は、どのパスにアクセスしても同じ view を返すようにするのか。もしそうなら、どうやって各処理の api を叩くのか。
  2. SSR の場合は、api は必要ないのか。

補足情報(FW/ツールのバージョンなど)

  • React.js
  • Vue.js
  • Laravel
  • Ruby on Rails
  • Sinatra

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

あたりを例に教えていただけますと幸いです。

ご自分で各フレームワークのチュートリアルをこなして下さい。

  1. SPA の場合は、どのパスにアクセスしても同じ view を返すようにするのか。もしそうなら、どうやって各処理の api を叩くのか。

SPAは従来通りHTML・CSS・JavaScript(以下JS)でページを組み立てます。
SPA(JSフレームワーク)の場合ではJS部分の比重が大きくなります。

JSフレームワークはテンプレート文字列と、特定スコープ内の変数を利用して動的にDOMツリーを組み立てます。
この変数はオブザーバパターンにより拡張された変数で、フレームワークが提供している方法を用いて変数を変更すると、即座にDOMがあるべき姿に書き換わります(データバインディング)

APIの使い方はAjax通信で後付けで取りにいきます。
そのAjax通信で得た値をJSフレームワーク指定の方法で変数に反映してやることでDOMの更新を促します。

  1. SSR の場合は、api は必要ないのか。

SPAはDOMを描画する為のプラモデルのようなものです。
ランナーからニッパーで切り離し、ヤスリをかけ、着色してようやく完成という作業を全てJSが行う為、
DOMの生成に時間が掛かったりSEOで悪影響が出る可能性があります。

従ってそのページのDOMが組み上がった状態を初期状態として渡してやることで、
これらの問題を解消することが目的です。

しかしどの道他のページの情報をアレもこれも盛り込むわけにはいきませんので、
結局裏でAPI対してAjax通信を飛ばして変数を動的に書き換える仕組みが必要になります。

投稿2018/05/13 23:20

miyabi-sun

総合スコア21158

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

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

cava

2018/07/22 17:03

なるほど。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問