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

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

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

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

React.js

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

Q&A

解決済

2回答

288閲覧

Rails5とReact.jsでの開発で、viewの動きをすべてReactに委ねたい

dwayne_johnson

総合スコア86

Ruby on Rails 5

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

React.js

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

0グッド

0クリップ

投稿2018/02/07 14:51

掲題の通りです。

Rails5とReact.jsを併用する場合に、無難に開発を進めていくのですが、viewを表示する段階になり、かならずRailsのviewを読み込み、htmlの要素をすべて表示してからでないとReactの書き出しが行えません。

これだと、Reactの良さが全くでないと思うのですが...

viewの動きをすべてReactに委ねたい場合、どうすればよいのでしょうか?
どなたかよろしくお願いします。

現状

javascript

1document.addEventListener('DOMContentLoaded', () => { 2 ReactDOM.render( 3 <App />, 4 document.getElementById('header'), 5 ) 6})

これを、

React.js

1ReactDOM.render( 2 <App />, 3 document.getElementById('header'), 4 ) 5

これだけで済むようにしたい。

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

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

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

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

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

guest

回答2

0

サーバサイドレンダリングの技術が必要になりそうです。
react-railsreact_on_railsというジェムが一般的のようですね。
http://masaru-tech.hateblo.jp/entry/2017/08/20/235545

投稿2018/02/08 00:14

sakapun

総合スコア888

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

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

0

ベストアンサー

RailsもReactも関係なく、純粋にJavaScriptとしての問題で、document.getElementByIdはDOMが存在しなければnullを返してしまいます。Reactといえども、最終的にDOM要素へ書き出す以上、書き出すべきDOM要素は「表示してからでないと」処理できません。

どうしてもDOMContentLoadedを待たせたくなければ、このJavaScriptを<body>の最下部など、id="header"の要素より後に持っていってください。

全部Reactでやるなら、Turbolinksは確実に不要ですので、止めてしまいましょう。

投稿2018/02/07 22:43

maisumakun

総合スコア145123

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

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

dwayne_johnson

2018/02/10 13:47

そうですね、「DOM要素を表示してからでないと」ということは認識していたのですが、body内で読み込むというのは基本的な手段でありながら、忘れていました。ありがとうございます!助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問