![注意点(バージョン等)
この発表で出てくるサンプルコードや紹介するサンプルリポジトリは以下のバー
ジョンでテストを行っています。
15
# ruby -v
ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux]
# rails -v
Rails 6.1.4
# node -v
v16.5.0
※おそらく ruby2系、Rails は5系以上で webpacker が使えるバージョンであれば問題ないと思います。
※他詳しいライブラリのバージョンなどはサンプルリポジトリの Dockerfile、Gemfile、package.json をご確認ください。](https://image.slidesharecdn.com/railsreacttswebweseektechconf10-210820031149/85/RailsxReactxTS-web-weseek-tech-conf-10-15-320.jpg)
![Rails から React への props の渡し方
- Props が大量に増えたらどうなる？？？
28
type Prefecture = '東京都' | '京都府' | '大阪府' | '北海道'
type Props = {
username: string
email: string
age: number
prefecture: Prefecture
address: string
prefectureList: Prefecture[]
}
const ProfileForm: React.VFC<Props> = (props) => {
※ ベタにこんなに props 渡さず、モデルを渡したりすると思いますが、あくまでも例](https://image.slidesharecdn.com/railsreacttswebweseektechconf10-210820031149/85/RailsxReactxTS-web-weseek-tech-conf-10-28-320.jpg)
![Rails から React への props の渡し方
- Controller
30
class SampleController < ApplicationController
def index
@prefecture_list = Prefecture.pluck(:name)
# ["東京都", "京都府", "大阪府", "北海道"]
@user = User.find_by(name: 'haruhiko')
# id: 1,
# name: "haruhiko",
# email: "haruhiko@weseek.co.jp",
# age: 30,
# address: "高田馬場",
# prefecture_id: 1,
# created_at: Fri, 13 Aug 2021 00:40:29.546785000 UTC +00:00,
# updated_at: Fri, 13 Aug 2021 00:40:29.546785000 UTC +00:00
end
end](https://image.slidesharecdn.com/railsreacttswebweseektechconf10-210820031149/85/RailsxReactxTS-web-weseek-tech-conf-10-30-320.jpg)
![Rails から React への props の渡し方
34
json.user do
json.extract! @user, :username, :email, :age, :address
json.prefecture @user.prefecture.name
end
json.prefectureList @prefecture_list
type PrefectureName = '東京都' | '京都府' | '大阪府' | '北海道'
type User = { username: string; email: string; age: number; prefecture: PrefectureName; address: string }
type Props = { user: User; prefectureList: PrefectureName[] }
const ProfileForm: React.VFC<Props> = ({ user, prefecrureList }) => {
- 実際にはこんな感じにコンポーネント側で Rails のモデルに対応する
ViewModel みたいなものを定義するはず
- Jbuilder 側も以下のように必要なものだけを extract! などを使って指定](https://image.slidesharecdn.com/railsreacttswebweseektechconf10-210820031149/85/RailsxReactxTS-web-weseek-tech-conf-10-34-320.jpg)
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
- 1. Rails×React×TS で作る WEBアプリ入門 WESEEK Tech Conference #10
- 2. 会社概要 株式会社WESEEK 所在地 ● 本社：〒169-0051東京都新宿区西早稲田2-20-15高田馬場アクセス10F ● サテライトオフィス：〒874-0838大分県別府市荘園9-1 ルーデンス荘園305 Lead with the web -Webで未来をリードする- 2
- 3. 現在の主な事業 1. 通信大手企業の業務フロー自動化プロジェクト 2. ソーシャルゲームの受託開発 3. 自社発オープンソースプロダクト「GROWI」「GROWI.cloud」の開発 3
- 4. GROWIとは 4 快適な情報共有を、全ての人へ ● OSSとして公開している情報共有ツール(ナレッジベース) ● エンジニアに馴染みのあるMarkdown形式で記述可能 ● 柔軟な階層構造での情報管理が可能
- 5. GROWI.cloudとは 情報共有をもっと身近に、もっと手軽に ● OSSであるGROWIを専門的知識がなくても簡単に運用・管理できる、 法人・個人向けの商用サービス ● エンタープライズプランの導入事例 ○ インターネットマルチフィード株式会社様 ○ 株式会社エイチーム様 ○ 株式会社HIKKY(VR法人HIKKY)様 5
- 6. 質問の受付方法について ● Zoomのチャット機能で、発表中も随時質問を受け付けます ○ メッセージの送信先設定は「全員」で！ ● 発表終了後に10分程度、質疑応答の時間を設けています 6
- 8. 本日の発表 8
- 10. 自己紹介 大谷 東彦 Otani Haruhiko 10 2015年にWESEEKに入社 React/Vue/Anguler、Rails/Node、 Kubernetes ...etc なんでもやります。 最近は React 周りを触ることが多いです。 業務 @sasuganaryuseki
- 11. アジェンダ 1. はじめに ○ この構成の何がうれしいのか 2. 環境構築 ○ React(react-rails) 導入 ○ TypeScript 導入 3. Tips ○ Rails から React コンポーネントへの props の渡し方 ○ おすすめのディレクトリ構成 i. components 配下 4. アーキテクチャについて ○ Rails の上に React を乗せる場合 ○ Rails と React を別々に分離する場合 5. 質疑応答 11
- 13. この構成の何がうれしいのか - 基本的に Rails アプリケーションを作成することになる - Rails の機能のほとんどをベースに React を使うことになる - 既存の Rails アプリケーションにちょい足しすることもできる - 既存の Rails の知識がほぼすべて活かすことができる - Rails の認証基盤がそのまま利用できる 13
- 14. 環境構築 ～rails new から react、ts導入まで～ 14
- 15. 注意点(バージョン等) この発表で出てくるサンプルコードや紹介するサンプルリポジトリは以下のバー ジョンでテストを行っています。 15 # ruby -v ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux] # rails -v Rails 6.1.4 # node -v v16.5.0 ※おそらく ruby2系、Rails は5系以上で webpacker が使えるバージョンであれば問題ないと思います。 ※他詳しいライブラリのバージョンなどはサンプルリポジトリの Dockerfile、Gemfile、package.json をご確認ください。
- 16. Rails プロジェクトを用意(rails new) - webpacker さえ動けば既存の Rails プロジェクトでもおｋ - もちろんまっさらから rails new してもおｋ - 実際に自分が今回用に rails new をしたのは以下 - https://github.com/haruhikonyan/rails-devcontainer/tree/rails6.1.4-and-ruby3.0.2-and-mysql - VSCode と Docker 実行環境さえあればすぐに始められる devcontainer で構築 16 $ git clone https://github.com/haruhikonyan/rails-devcontainer -b rails6.1.4-and-ruby3.0.2-and-mysql
- 17. devcontainer ? - devcontainer については rails と合せてググると自分の書いた解説記事が出 てきたりします https://qiita.com/haruhikonyan/items/b5b04c168d3f9de0e210 17
- 18. React(react-rails)導入 - https://github.com/reactjs/react-rails - Get started with Webpacker 18 # edit Gemfile gem ‘react-rails’ ←追加 # bundle install # rails webpacker:install # rails webpacker:install:react # rails generate react:install # rails g react:component HelloWorld greeting:string 上記実行したものが以下コミットhttps://github.com/haruhikonyan/rails- devcontainer/commit/7bb2358ce47edc029ed1bf10dd11467cccb656cf
- 19. React(react-rails)導入 - Gemfile, Gemfile.lock - react-rails を導入したための差分 - app/javascript/components/HelloWorld.js - rails g react:component HelloWorld コマンドにて作成されたサンプルコンポーネント - app/javascript/packs/application.js, server_rendering.js, babel.config.js, config/webpacker.yml - webpacker 上で React を使うために必要な設定など - app/javascript/packs/hello_react.jsx - react-rails を使わない場合のコンポーネント例 - package.json, yarn.lock - React を利用するのに必要な npm package が追加された差分 19
- 20. TypeScript 導入 - https://github.com/reactjs/react-rails - typescript-support 20 # rails webpacker:install:typescript # mv app/javascript/components/HelloWorld.js app/javascript/components/HelloWorld.tsx # edit app/javascript/components/HelloWorld.tsx tsx かつFCコンポーネントに修正 # yarn remove babel-plugin-transform-react-remove-prop-types prop-types # rm app/javascript/packs/hello_react.jsx 上記実行したものが以下コミットhttps://github.com/haruhikonyan/rails- devcontainer/commit/655dc59bdb839f0c76fa32db29925d2eb4b24659 ※ 実施したことをわかりやすくするため edit コマンドなどを使っていますが VSCode などのエディタ上での操作で問題ないです
- 21. TypeScript 導入 - app/javascript/components/HelloWorld.js → HelloWorld.tsx - jsx のクラスコンポーネントから tsx のファンクションコンポーネントへ修正 - babel.config.js, config/webpacker.yml, tsconfig.json - TypeScriptを利用するための設定 - tsconfig には "allowSyntheticDefaultImports": true の追加 - import React from "react" の書式を可能にするため - デフォルトだと import * as React from 'react' - package.json, yarn.lock - Typescript を利用するのに必要な npm package が追加された差分 - 不要なライブラリの削除 - babel-plugin-transform-react-remove-prop-types - prop-types 21
- 22. React コンポーネント render テスト - localhost:3000/sample/index にブラウザでアクセス 22 # rails g controller Sample index # edit app/views/sample/index.html.erb <h1>Sample#index</h1> <p>Find me in app/views/sample/index.html.erb</p> <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %> ←追加 # rails s -b 0.0.0.0 … Listening on http://0.0.0.0:3000
- 23. react_component について - 指定ディレクトリ配下に置いたコンポーネントの名前で紐づけていい感じ ReactDOM.render してくれる - デフォルトだと app/javascript/components - app/javascript/packs/application.js - var componentRequireContext = require.context("components", true); 23 - react_component(react-rails)のメリット - erb(テンプレート)の render したい場所に直接直感的に書ける - erb に書けるため、Rails から props を渡すのが容易 - 記述量が少ない - あえてデメリットを挙げるなら - Component の定義との紐づけがべた書きの文字列になってしまう <%# .erb %> <%= react_component("Hello", { name: "React" }) %>
- 24. react_component について - react_componentメソッド(react-rails) を使わない場合 - ReactDOM.render を js ファイル側に書かなければいけない - render する場所の指定が直観的ではない - Rails 側から props を動的に渡すのが若干困難 - 記述量が多い 24 const Hello = props => <div>Hello {props.name}!</div> document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <Hello name="React" />, document.body.appendChild(document.createElement('div')), ) })
- 26. Rails から React への props の渡し方 26
- 27. Rails から React への props の渡し方 - react-rails が用意してくれる react_component というヘルパー - 第2引数に ruby の hash(書式だけみると JavaScript の Object と一緒) を渡す 27 <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %> type Props = { greeting: string } const HelloWorld: React.VFC<Props> = ({ greeting }) => <>Greetings: {greeting}</> - 受け取るコンポーネント側はこんな感じ
- 28. Rails から React への props の渡し方 - Props が大量に増えたらどうなる？？？ 28 type Prefecture = '東京都' | '京都府' | '大阪府' | '北海道' type Props = { username: string email: string age: number prefecture: Prefecture address: string prefectureList: Prefecture[] } const ProfileForm: React.VFC<Props> = (props) => { ※ ベタにこんなに props 渡さず、モデルを渡したりすると思いますが、あくまでも例
- 29. Rails から React への props の渡し方 - サンプル用に Prefecture, User モデルを定義 29 rails g model Prefecture name:string rails g model User name:string email:string age:integer address:string prefecture:references rails db:migrate - データ投入 rails c > Prefecture.create(name: '東京都') > Prefecture.create(name: '京都府') > Prefecture.create(name: '大阪府') > Prefecture.create(name: '北海道') > User.create(name: 'haruhiko', email: '[email protected]', age: 30, address: '高田馬場', prefecture: Prefecture.first)
- 30. Rails から React への props の渡し方 - Controller 30 class SampleController < ApplicationController def index @prefecture_list = Prefecture.pluck(:name) # ["東京都", "京都府", "大阪府", "北海道"] @user = User.find_by(name: 'haruhiko') # id: 1, # name: "haruhiko", # email: "[email protected]", # age: 30, # address: "高田馬場", # prefecture_id: 1, # created_at: Fri, 13 Aug 2021 00:40:29.546785000 UTC +00:00, # updated_at: Fri, 13 Aug 2021 00:40:29.546785000 UTC +00:00 end end
- 31. Rails から React への props の渡し方 - View 31 <%= react_component("ProfileForm", { username: @user.username, email: @user.email, age: @user.age, prefecture: @user.prefecture.name, address: @user.address, prefectureList: @prefecture_list }) %> - props が増えたり中身が複雑になればなるほどテンプレートがごちゃごちゃする
- 32. Rails から React への props の渡し方 - そこで登場するのが JSON を成形するための Jbuilder 32 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.7'
- 33. Rails から React への props の渡し方 - Props として渡す JSON をテンプレートを直接汚すことなく書くことができる - Jbuilder という専用の gem に props の成形という責務を移譲 33 # /app/views/sample/_profile_component.json.jbuilder json.username @user.username json.email @user.email json.age @user.age json.address @user.address json.prefecture @user.prefecture json.prefectureList @prefecture_list <%= react_component("ProfileForm", render(template: 'sample/_profile_component.json')) %>
- 34. Rails から React への props の渡し方 34 json.user do json.extract! @user, :username, :email, :age, :address json.prefecture @user.prefecture.name end json.prefectureList @prefecture_list type PrefectureName = '東京都' | '京都府' | '大阪府' | '北海道' type User = { username: string; email: string; age: number; prefecture: PrefectureName; address: string } type Props = { user: User; prefectureList: PrefectureName[] } const ProfileForm: React.VFC<Props> = ({ user, prefecrureList }) => { - 実際にはこんな感じにコンポーネント側で Rails のモデルに対応する ViewModel みたいなものを定義するはず - Jbuilder 側も以下のように必要なものだけを extract! などを使って指定
- 35. Rails から React への props の渡し方 35 <%= react_component("ProfileForm", { user: @user, prefectureList: @prefecture_list }) %> - 実は Rails のモデルインスタンスをそのまま渡すことも可能 - しかしこうしてしまうと、実際に表示には使わないカラムの情報まで HTML や JS に埋め込まれてしまう - created_at とか - 最悪情報漏洩にもつながる - 必ず Jbuilder を通して必要なものだけを渡すようにすることが重要
- 36. おすすめのディレクトリ構成 36
- 37. おすすめのディレクトリ構成 - 基本的には Rails 標準及び、webpacker:install して出来た通りに使っている - 中でも必要だと思い独自に作成したディレクトリの紹介 - /app/javascript/components 配下 37
- 38. components 配下 - デフォルトだと /app/javascript/components のみ - 最初は中に何となくのディレクトリを切って適当にコンポーネントを入れていた - そこそこ無秩序に増えるディレクトリやコンポーネントの数々 - components の配下に新しく以下ディレクトリを追加 - pages - commons 38
- 39. components/pages 配下 - pages 配下に置いたものは原則 erb からのみ呼び出す - いわゆるコンポーネントとしての部品ではなく page 全体を構成するもの - 通常 MPA である Rails ではあるが、React を使った SPA みたいな動きをするページの root になるようなコンポーネント - next.js における pages 配下に配置されるようなコンポーネント - pages 配下に置いたコンポーネントと同名のディレクトリを切ることもある - 配下にはそのディレクトリ名のコンポーネントからしか呼び出されないことが確定して いるようなコンポーネントを置く - pages/UserForm.tsx - pages/UserForm/UserNameFormInput.tsx 39
- 40. components/commons 配下 - あらゆるerb、コンポーネントから一部品として呼ばれるコンポーネント - commons/badge/UseBadge.tsx 40
- 41. components 配下 - 二つのディレクトリを設けることで何となくコンポーネントの役割がわかる ようになった - ただし厳密なルールは明文化などはされてない - しようと思ったが雰囲気で入れてるみたいなものがあってうまくいかなかった - 迷ったらチーム内で相談し合意を取る - リファクタは恐れずやっていく 41
- 43. Rails の上に React を乗せる場合 (この構成) 43
- 44. この構成の何がうれしいのか(再) - 基本的に Rails アプリケーションを作成することになる - Rails の機能のほとんどをベースに React を使うことになる - 既存の Rails アプリケーションにちょい足しすることもできる - 既存の Rails の知識がほぼすべて活かすことができる - Rails の認証基盤がそのまま利用できる 44
- 45. この構成のツラいところ - Rails の上に React という全く別の物が乗る - Ruby ではなく JavaScript のライブラリ - Rails の弱いところである View 層 - それを補うはずだった Webpacker 特有の諸々 45 - Next.js といった フロントエンド フレームワークが原則使えない - SPA が作りづらい
- 46. Rails と React を別々に分離する場合 46
- 47. この構成の何がうれしいのか - 互いに得意なことへ徹することができる - Rails では API の提供に集中 - フロントはモダンなフロントエンドフレームワークの利用ができる - 評判の良くない Webpacker を触る必要が無い - 生の Webpack もそれはそれでツラいが。。。 - バックエンド/フロントエンドの分業が容易 47
- 48. この構成のツラいところ - 構成が分離されている - リポジトリが増えたり、ディレクトリが増えたりする - Rails と フロントエンド二つの技術を使うので学習コストが高い（かも）しれない - 分業が出来てもコミュニケーションコストが増えることもある - 認証が必要な場合工夫が必要になる 48
- 49. 質疑応答 49
- 50. お知らせ① 次回のWESEEK Tech Conf 50
- 51. お知らせ② GROWIについて GROWIのOSS開発に参加しませんか？ GROWI は、WESEEKが開発を行いMITライセンスで公開している オープンソースソフトウェアです。 開発を手伝っていただけるエンジニアの方を募集しております。 詳しくはGROWI公式サイトのJOIN USをご覧ください。 https://growi.org/ja/#joinus 51
Editor's Notes
- #11: なんでもやった結果特殊な事情が無い限りフロントエンドはReact(Next,js)、バックエンドはRailsが一番良いと思っている
- #12: さらっと
- #13: 開発環境構築までで本番デプロイの方法などは触れません
- #15: 開発環境構築までで本番デプロイの方法などは触れません
- #16: せっかくなので新しいバージョンで サンプルで触ってる分には問題ありませんでした 基本的に新しいバージョンでも問題ないと思ってますが、使用するライブラリによっては対応してなかったり どこに落とし穴があるかわからないので試す際は自己責任で。。。 rails 6.0.3 ruby 2.7.4
- #17: どんな方法で Rails プロジェクトを用意しても良いです 自分の場合はローカルPCにあれこれインストールしたくないので基本的にはすべてdocker上でやっています ここに書いてあるリポジトリをcloneしてこのブランチをcheckoutし VSCode で開けばすぐに rails new した状態が開けます
- #18: weseek ではほとんどのプロジェクトがこの devcontainer で開発しています ただの宣伝ですが自分の解説記事が出てきたりします この検索結果はスライド作成時8/10の自分の環境時点のものです
- #19: react-rails という gem を install してから webpacker を経由して react をインストール サンプルのコンポーネントを作成 差分開いて軽く説明
- #21: ここでお好みでrails new 時点で最初から入っている js ファイル群をtsに変換してもよい 差分を見て軽く説明 prop-types 関連は ts だとデフォで型が付くので不要
- #23: サンプルページを作成し、react_component メソッドでコンポーネントを render
- #28: greeting という string を一つだけ受け取るシンプルなコンポーネント
- #29: さっきのは一つだけだからよかったけどいろんな props をたくさん受け取るコンポーネントがあったとします 普通こんなコンポーネント設計はせず、都道府県リスト以外は User モデルとして Rails のモデルと同じような VirwModel的なものを定義して渡すことになると思いますが あくまでもこれは例として
- #30: 上はコントローラ User や Prefecture モデルを定義するのをサボったためただの配列と struct になっています コントローラで取得したデータをインスタンス変数に入れて 下の erb で受け取り、react_component の第2引数でそれぞれ props に対応させて渡すみたいなことが発生します
- #31: 上はコントローラ User や Prefecture モデルを定義するのをサボったためただの配列と struct になっています コントローラで取得したデータをインスタンス変数に入れて 下の erb で受け取り、react_component の第2引数でそれぞれ props に対応させて渡すみたいなことが発生します
- #32: 上はコントローラ User や Prefecture モデルを定義するのをサボったためただの配列と struct になっています コントローラで取得したデータをインスタンス変数に入れて 下の erb で受け取り、react_component の第2引数でそれぞれ props に対応させて渡すみたいなことが発生します
- #33: みんな大好き？かはわかりませんが Jbuilder rails new したらデフォルトで入っていた jbuilder
- #34: サンプルじゃあまり恩恵がわからないが erb などに直接書かず、json の成形は Jbuilder という専用の gem に責務を移譲することができるのは良いと思う
- #38: 紹介といっても1つなんですが基本的にはデフォルトのまま使っており、今回の話に関係あるようなものとして components 配下は若干工夫をしています railsの中としてservicesなどのディレクトリを作ったりはしていますが今回関係ないので割愛します
- #39: 迷ったらみんなにヒアリング
- #40: next(nuxt)的な知見 とあるフォームページ全体を構成する UserForm コンポーネントがあり、その中からしか呼ばれないものは UserForm ディレクトリを切りその中にいれる ちなみに nextjs だとページが作成されちゃうのでこの方法は取れません
- #41: あらゆるところから呼ばれるようなものは commons 配下に 画像のバッジは実際に使ってる UseBadge 利用状況みたいなものの表示にいたるところで呼ばれています
- #43: rails の上にそのまま react が乗っかってる構成は個人的には好きじゃないみたいなそんな話