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

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

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

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

React.js

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

Q&A

解決済

1回答

253閲覧

Rails5でのReact.jsのDOMの読み込みに手間がかかってしまう

dwayne_johnson

総合スコア86

Ruby on Rails 5

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

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

React.js

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

0グッド

0クリップ

投稿2018/02/03 00:07

前提・実現したいこと

Rails5とReact.jsを併用してコメント機能を実装しようと考えています。

Railsにてviewを呼び出し、その呼び出したviewの中にReactのコンポーネントを入れています。
しかし現状として、DOMを一回ロードし、その後に指定したDOMを追加しなければ表示できません。

まぁRailsでviewを書き出している以上、当たり前なのかもしれませんが、この手間を省きたいです。
つまり、以下のように書けるようにしたいです。

現状

app/views/index.html.erb

1<%= javascript_pack_tag 'index', 'data-turbolinks-track': 'reload' %> 2<div id="app"></div>

app/javascripts/packs/index.js

1import React, { Component } from 'react' 2import ReactDOM from 'react-dom' 3 4class CommentList extends Component { 5 //中身は省略 6} 7 8// DOMロード後に指定したDOMを追加 9document.addEventListener('DOMContentLoaded', () => { 10 ReactDOM.render( 11 <CommentList />, 12 document.getElementById('app') 13 ) 14})

このように書きたい

app/javascripts/packs/index.js

1import React, { Component } from 'react' 2import ReactDOM from 'react-dom' 3 4class CommentList extends Component { 5 //中身は省略 6} 7 8//ここから変更点 9  ReactDOM.render( 10 <CommentList />, 11 document.getElementById('app') 12 )

Rails5とReact.jsでの開発

Rails5とReact.jsで開発していく場合、このようにDOMロード後に指定したDOMを追加するしか方法はないのでしょうか?
それとも、何か良い方法があるのでしょうか?

ご教授いただければ幸いです。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

こちらの質問で、解決しました。
https://teratail.com/questions/112512

投稿2018/02/18 01:22

dwayne_johnson

総合スコア86

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問