17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Rails7を構築してみる

Last updated at Posted at 2022-01-05

Rails7がリリースされたので、ざっくり立ち上げまで試してた。

Rail7をインストール

$ mkdir trial-rais7
$ cd trial-rais7/

# rubyのバージョンを2.7以上にする
$ rbenv local 2.7.2 
$ ruby -v
ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [x86_64-darwin19]

$ touch Gemfile

Gemfileを以下のように作成する

Gemfile
source "https://rubygems.org"
ruby "2.7.2"
gem "rails", "~> 7.0.0"
$ bundle install

$ rails -v
Rails 7.0.0

Rails7プロジェククトを構築

# mysql2のインストールが落ちることがあるので、パスを通しておくのが吉
$ bundle config --local build.mysql2 --with-opt-dir="$(brew --prefix openssl)"

# 今回はmysqlとtailwindを使う
$ rails new . --css=tailwind --database=mysql --force

$ rails db:create
$ rails db:migrate

起動

$ rails s
* Puma version: 5.5.2 (ruby 2.7.2-p137) ("Zawgyi")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 9571
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

Ruby on Rails 2022-01-05 11-21-37.png

daisy UIをインストール

見た目を簡単にいい感じにできるうよに。tailwind製のUIコンポーネントをインストールする・

# daisyuiをインストール
$ yarn add daisyui
config/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  :
  :
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('daisyui'),    // ← 追記する
  ],
}

テーマを設定する

app/views/layouts/application.html.erb
<html data-theme="retro" >  // data-theme="retro" でテーマを選ぶ
  <head>
    :
  </head>

  <body>
    :   
  </body>
</html>

model(ページ)を作ってみる

サクッとscaffoldで作ってみる。
food(食べもの)とkind(種別)をつくってみる。

$ rails g scaffold kind name:string
$ rails g scaffold food name:string kind:references price:integer memo:text is_deleted:boolean deleted_at:datetime

$ rails db:migrate

# foremanで起動する
$ foreman start -f Procfile.dev
11:38:01 web.1  | started with pid 9947
11:38:01 css.1  | started with pid 9948
11:38:02 web.1  | => Booting Puma
11:38:02 web.1  | => Rails 7.0.0 application starting in development 
11:38:02 web.1  | => Run `bin/rails server --help` for more startup options
11:38:02 web.1  | Puma starting in single mode...
11:38:02 web.1  | * Puma version: 5.5.2 (ruby 2.7.2-p137) ("Zawgyi")
11:38:02 web.1  | *  Min threads: 5
11:38:02 web.1  | *  Max threads: 5
11:38:02 web.1  | *  Environment: development
11:38:02 web.1  | *          PID: 9947
11:38:02 web.1  | * Listening on http://127.0.0.1:3000
11:38:02 web.1  | * Listening on http://[::1]:3000
11:38:02 web.1  | Use Ctrl-C to stop

UIもある程度自動でつくってくれるので便利ですね。

ezgif-7-d2cbdc56e5.gif

最後に

試した部分はRails6とほとんど一緒なので、次回はrails7特有の機能を試してみる

今回のソースコード:

参考

17
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?