leaning diary Rails

【Learning Diary43】RailsでReact×TypeScriptを使う(インストール編)

【Learning Diary43】RailsでReact×TypeScriptを使う(インストール編)

 

RailsアプリでReactを使う場合の挙動を確認したく、小さな試作アプリを作成することにしました。

 

以下の記事がわかりやすく、参考に進めさせていただきます。

 

参照:Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails）

 

Railsのバージョンを確認

Rails7が使える状態であることを確認します。

 

❯ rails -v
Rails 7.0.4.3

 

アプリを作成

 

❯ rails new react_test_app -d postgresql --css=tailwind --javascript=esbuild

 

DBはポスグレ、Cssはtailwind、Javascriptはesbuildを指定します。

 

Tailwind CSS: CSSフレームワーク。Bootstrapより細かいデザインが可能。

esbuild:フロントエンドのコード変換+バンドルツール。

 

esbuildはTypeScriptの拡張子である.tsxをサポートしています。

 

esbuildは非常に高速なJavaScript/TypeScriptのバンドラおよびコンパイラであり、.tsxのファイルを処理することも得意としています。

 

そのため、上記のコマンドでViewにTSXを使える状態でセットアップできます。

作成されたpackage.jsonの内容を確認します。

 

ちゃんと、esbuild app/javascript/*.* が含まれていました。

 

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^8.0.0-beta.1",
    "autoprefixer": "^10.4.16",
    "esbuild": "^0.19.7",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
  }
}

 

Reactを使う準備

yarnコマンドでreactを使用する準備をします。

 

yarnは、JavaScriptパッケージマネージャーでJavaScriptおよびNode.js用のパッケージを管理するためのツールです。

 

❯ yarn add react react-dom
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
├─ react-dom@18.2.0
└─ react@18.2.0
info All dependencies
├─ js-tokens@4.0.0
├─ react-dom@18.2.0
├─ react@18.2.0
└─ scheduler@0.23.0
✨  Done in 2.45s.

 

あわせてコントローラーを作成します。

 

❯ rails g controller home index
      create  app/controllers/home_controller.rb
       route  get 'home/index'
      invoke  erb
      create    app/views/home
      create    app/views/home/index.html.erb
      invoke  test_unit
      create    test/controllers/home_controller_test.rb
      invoke  helper
      create    app/helpers/home_helper.rb
      invoke    test_unit

 

tailwind.config.js ファイルを開き、slimとtsxを読み込むための設定もします。

 

slimは、Rubyのテンプレートエンジンの1つで、特にRailsプロジェクトで広く使われています。

 

SLIMはHTMLをより簡潔に記述できるようにデザインされており、通常のHTMLよりも記述がシンプルで、見やすくなります。

 

# tailwind.config.js

module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
    './app/views/**/*.html.slim',
    './app/javascript/**/*.tsx'
  ]
}

 

次はviewでreactが表示されるようにしてみたいと思います。

-leaning diary, Rails