leaning diary Rails

【Learning Diary45】RailsでReact×TypeScriptを使う(ルーティング・レンダリング編)

【Learning Diary45】RailsでReact×TypeScriptを使う(ルーティング・レンダリング編)

 

先日インストールまで済んだので、今回は実際にjsファイルをtsxに編集したり、reactで出力させる設定をしてみます。

application.js

まず、app/javascript/配下にある「application.js」をみてみます。

 

# app/javascript/application.js

// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"

 

コメントにあるとおり、application.jsはビルドされる JS ファイルのエントリーポイントとなるファイルです。

 

既にコントローラーと紐づけされています。

import "@hotwired/turbo-rails"

Hotwireとは、Rails 7で導入されたSPA的なWebページを開発するためのフレームワークです。

 

SPAとは、読み込んだWebページ上のスクリプトがサーバとの通信を行い、ページを遷移させずに必要なデータのみを更新させる方式です。

 

参照:シングルページアプリケーション 【SPA】 Single Page Application

 

HotwireはHTML Over The Wireの略で、TurboやStimulusなどのJavaScriptライブラリから構成されています。

 

今回はこの application.js にReactを載せていきます。

 

ルーティングを確認

config/routes.rb を確認します。

 

rails g controller home index を実行しているので、get 'home/index' が定義されています。

 

Rails.application.routes.draw do
  get 'home/index'
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end

 

上記のルーティングでは、ルート(/)にアクセスすると、home コントローラーの index メソッドが呼ばれます。

 

view は、app/views/home/index.html.erbが描画されます。

application.html.erb

続いて、application.html.erb を編集します。

 

application.html.erbファイルは、Railsアプリケーションの全てのビューで共通して表示されるHTMLの骨組みを定義します。

 

このファイルを使用することで、アプリケーション全体の外観や共通のコンポーネントを一括で管理できます。

 

bodyに <div id="root"></div>  を追加します。

 

# app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>ReactTestApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>
    <div id="root"></div>
    <%= yield %>
  </body>
</html>

 

<div id="root"></div> は通常、JavaScriptフレームワークやライブラリが利用するための特定の要素です。

 

特に、React.jsやVue.jsなどのフロントエンドのライブラリやフレームワークでよく見られます。

 

これにより、RailsアプリケーションがクライアントサイドのJavaScriptと統合され、動的なユーザーインターフェースやSPAの開発が容易になります。

 

ReactやVueなどのライブラリは、HTMLのこの特定の要素内でアプリケーションを描画することが一般的です。

 

この要素には通常、JavaScriptコードによって生成された動的なコンテンツが表示されます。

 

要するに、<div id="root"></div> はクライアントサイドのJavaScriptがアプリケーションのビューを描画するための場所を指定しています。

 

アプリケーションがReactやVueを使用している場合、この要素はそれらのフレームワークによって管理され、動的なコンテンツがここに描画されます。

application.jsをapplication.jsxに変更

最初に確認した application.js について、 拡張子を変更しapplication.jsx とします。

 

あわせて、ファイルの中身もjsxでの記述に変更します。

 

# 4行目まで削除
// Entry point for the build script in your package.json
import "@hotwired/turbo-rails"
import "./controllers"

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return (
    <h1>Hello React!</h1>
  )
}

const root = document.getElementById('root');
if (!root) {
  throw new Error('No root element');
}
createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

Reactのレンダリングを確認したいので、index.html.erbの内容を削除します。

 

(デフォルト記述されている以下の2行を削除し、空の状態にします。)

 

# app/views/home/index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

 

上記まで修正すると、root(/)へのアクセスでReactで作成されたページが表示されるようになります。

 

以降は、エンドポイントとなる application.jsx を起点にファイルを作成していくと良いそうです。

 

今回は以下の記事を参考に施策させていただきました。

 

とても勉強になりました、感謝いたします。

 

参照:Railsにesbuildを使ってReactを導入する(Dockerで構築)

 

-leaning diary, Rails
-, ,