-----------2020/08/17追記---------
今はテンプレートリポジトリ使ってます。含まれているものも本記事とは大分変わっています。
https://github.com/nyshk97/rails_heroku_template
-----------2020/05/08追記---------
APIとして使うときはこっち。
【Docker, BFF】Railsプロジェクト作成時にやることまとめ
------------追記終わり--------------
Railでプロジェクトを作成する時に（ほぼ）毎回やることをまとめて、今後の開発スピードの向上を狙います。
データベースはローカル、本番共にPostreSQL、インフラはHerokuを使います。
端末はMac、OSはMojaveです。
ちなみに、記事通りに作ったところ、全部で67分かかりました。
好きなバージョンのRailsをインストール
$ gem install rails
上記で最新版のRailsがインストールされます。バージョンを指定してインストールしたい場合は、gem install rails -v 5.2.3のような形で指定。
インストールされているRailsのバージョンを確認。
$ gem info -e rails
*** LOCAL GEMS ***
rails (6.0.2.1, 5.2.4, 5.1.7)
プロジェクト開始
$ rails new rails_quick_setup -d postgresql
引数を指定しない場合、インストールされている中で最新のバージョンのRailsが使用されます。
バージョンを指定する場合はrails _5.2.3_ new <プロジェクト名>のような形で指定。
-d postgresqlでローカルのデータベースにPostgresqlを指定しています。
-d mysqlでmysql、何も書かないとsqliteが指定されます。
また今回はプロジェクト名、及びGitHubのリポジトリ名をrails_quick_setupとします。
最後に、プロジェクトのディレクトリに移動。
$ cd rails_quick_setup
好きなバージョンのRubyをインストール
rbenvを使ってRubyのバージョンを管理します。
$ rbenv install -l （インストール可能なバージョン一覧を表示
$ rbenv install 2.7.0-dev
$ rbenv rehash （shimに反映して利用可能な状態にする
$ rbenv local 2.7.0-dev （Current Directory以下だけ、Rubyのバージョンを変更する
データベースの設定
PCにPostgresがインストールされていて、上記のように-d postgresqlオプションをつけて起動していた場合、初期設定の状態のまま以下のコマンドを叩くと開発、テスト用のデータベースが作成されます。
初心者がMacOSにRuby on Rails + PostgreSQL( + Fish Shell)の環境を構築してみた
$ rails db:create
動作確認
http://0.0.0.0:3000/ にアクセスし、上記の画面が表示されていれば成功です。
※yarnが端末にインストールされていないと、エラーが発生します。その場合はyarn→webpackerの順にインストールすると解決します。
GitHubにリポジトリを作成
- GitHubにログイン
- 画面左「Repositories」横の「New」をクリック
- リポジトリ名等を入力(チェック等は基本初期設定でOK）し、「Create repository」をクリック
.gitignoreを編集
- gitignore.ioにアクセス
- トップ画面で「rails」と入力
- 表示されるテキストを
.gitignoreに記入 - 10行目付近のsqliteに関する記述を削除
- 以下を追記
# original
config/database.yml
その後databese.ymlを複製し、databese_replica.ymlというファイルを作成します。
database.ymlを直接GitHubで管理してしまうと、ローカルのデータベースのパスワード等が他のメンバーにバレてしまうので、各々databese.yml.replicaを元に自分専用のdatabese.ymlを使って開発を行います。
ローカルとGitHubを接続
$ git add -A
$ git commit -m "First commit"
$ git remote add origin https://github.com/nyshk97/rails_quick_setup.git
$ git push -u origin master
理由はわかりませんが、私の環境ではプロジェクト開始時にすでにディレクトリがgit管理下に置かれています。各自必要に応じてgit initを行ってください。
TablePlusに接続
データベースをGUIで管理するためにTablePlusと接続します。
- 起動画面で右クリック > New > Connection > PostgreSQL を選択
- 以下のように入力し、connectをクリック
（database.ymlでユーザー名やパスワード等を設定している場合には、その内容を記述する必要があります。）
タイムゾーンを日本時間に変更
タイムゾーンをデフォルトのUTC(世界標準時間)からJST(日本時間)に変更します。
module RailsQuickSetup
class Application < Rails::Application
config.load_defaults 6.0
#追記↓
config.time_zone = 'Tokyo' #Time.zone.nowとかの時に日本時間を使用する
config.active_record.default_timezone = :local #DBの読み書きを日本時間でやる
end
end
Time.nowとか、SQL文のNOW()とかを日本時間にするにはまた別の設定が必要なので、できるだけ使わないように気をつける。
viewportを設定
スマホでも表示できるように、viewportを設定します
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
不要なファイルを生成しないように設定
rails g controller実行時に、controllerとview以外のファイルを生成しないように設定します。
module RailsQuickSetup
class Application < Rails::Application
config.load_defaults 6.0
#追記↓
config.generators do |g|
g.stylesheets false
g.javascripts false
g.helper false
end
end
end
テスト用のmodel、controller、viewを作成
$ rails g model Test name:string
$ rails db:migrate
modelとmigrationファイル（及びtestsテーブル）が生成されます。
$ rails g controller tests index
indexアクションを持ったcontroller、indexアクション用のview、indexアクションへのroutingが自動生成されます。
テスト用データを作成
Test.create!(
[
{
name: 'パンを買う'
},
{
name: '牛乳を買う'
}
]
)
$ rails db:seed
testsコントローラーのindexアクションで、テスト用データを表示してみます。
class TestsController < ApplicationController
def index
@tests = Test.all
end
end
<h1>Tests#index</h1>
<% @tests.each do |t| %>
<%= t.name %>
<% end %>
better-errorsとbinding_of_callerを導入
エラー画面をわかりやすくカスタマイズしましょう。
group :development do
.
.
gem 'better_errors'
gem 'binding_of_caller'
end
$ bundle install --without production
--without productionオプションは初回だけ指定すれば良いので、今後のステップでは省略して行きます。
またインストールしたgemを反映させるには、ローカルサーバーを再起動する必要があるので注意
pry-railsとpry-byebugを導入
rails consoleの画面を見やすくしたり、デバッグをやりやすくします。
group :development, :test do
gem 'pry-rails'
gem 'pry-byebug'
dotenvを導入
環境変数を扱いやすくします。
gem 'dotenv-rails'
$ bundle install
最後にプロジェクトルートに環境変数をセットするためのファイル.envファイルを作成しましょう。
今後環境変数を使う時には、このファイル内に書き込んでいきます。
環境によって変わる設定値はdotenvを使うと便利
annotateを導入
最近あんまり使ってません。
データベースやルーティングの情報をファイル内にコメントとして書き出すgemです。
group :development do
gem 'annotate'
$ bundle install
$ bundle exec rails g annotate:install
$ rails db:migrateのタイミングでモデル内にスキーマ情報が書き込まれます。
その他、以下のようなオプションがあります。
$ bundle exec annotate #手動で実行
$ bundle exec annotate --routes # ルーティング情報を書き出す
rack-dev-markを導入
開発環境に「development」と書かれたリボンを表示させて、本番と間違えないようにします。
gem 'rack-dev-mark'
$ bundle install
class Application < Rails::Application
config.rack_dev_mark.enable = !Rails.env.production?
config.rack_dev_mark.theme = [:title, Rack::DevMark::Theme::GithubForkRibbon.new(position: 'left', fixed: true, color: 'orange')]
font-awesomeを導入
だいたい使うことになるので。
gem 'font-awesome-sass'
$ bundle install
application.cssをapplication.scssにリネームして、以下を書き込む。
@import 'font-awesome-sprockets';
@import 'font-awesome';
<h1>Tests#index</h1>
<% @tests.each do |t| %>
<i class="far fa-smile-wink"></i> ←追加
<%= t.name %>
<% end %>
jQueryを導入
なんだかんだ必要なので。Rails6から導入方法が変わりました。（webpackを使います）
$ yarn add jquery
package.json、yarn.lockの2つのファイルを開き、jQueryのバージョンに関する記述が追加されていることを確認します。
const { environment } = require('@rails/webpacker')
//追加↓
const webpack = require('webpack')
environment.plugins.prepend('Provide',
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery'
})
)
//
module.exports = environment
require('jquery')
この時点でjQuery本体の読み込みは完了しているので、jQuery依存のプラグインを利用したり、インラインで記述することは可能です。
作成したjQuery(やJavaScript)の読み込み方法は大きく以下の2つがあります。
jQueryを使い、次の記述を赤色に変えていきましょう。
.
.
<p id="hoge">jQueryで赤色に変化</p>
webpackerで読み込む
app/javascript/src/js/という、Javascriptを保存するためのディレクトリを作成し、そこにjsファイルを作成します。
$(function() {
$("#hoge").css("color","red");
});
import 'src/js/sample'
Introducing jQuery in Rails 6 Using Webpacker
Rails アプリのアセットを Webpacker で管理する
AssetPipelineで読み込む
(2020/3/4 追記)
以下の手順で実装しようとしたら、The asset "sample.js" is not present in the asset pipelineというエラーが出ました。
Asset Pipelineに追加してるはずなんですけど、どうしてですかね。前はできた気がするんですけど。
とにかく、webpackerでの導入を推奨します。
(追記おわり)
app/assets/javascriptという、Javascriptを保存するためのディレクトリを作成し、そこにjsファイルを作成します。（ディレクトリ名をjavascriptsと複数形にすると動きませんでした）
$(function() {
$("#hoge").css("color","red");
});
ビューファイルにjs読み込み用の記述を追加
<!DOCTYPE html>
.
.
<%= javascript_include_tag 'sample' %>
</head>
作成したjsファイルをアセットパイプラインに追加
Rails.application.config.assets.precompile += %w( sample.js )
Rails6.0.0におけるJQueryの導入から動作確認までまとめてみた
ページごとにタイトルを変数で指定できるように設定
module ApplicationHelper
def full_title(page_title = '')
base_title = 'Rails Quick Setup'
if page_title.empty?
base_title
else
"#{page_title} | #{base_title}"
end
end
end
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
.
.
<% provide(:title, "Index") %>
<h1>Tests#index</h1>
.
.
最低限のCRUD機能を実装
Rails.application.routes.draw do
#get 'tests/index'
resources :tests
end
class TestsController < ApplicationController
def index
@tests = Test.all
end
def new
@test = Test.new
end
def create
@test = Test.new(test_params)
if @test.save
redirect_to tests_url
else
render 'tests/new'
end
end
def edit
@test = Test.find(params[:id])
end
def update
@test = Test.find(params[:id])
if @test.update(test_params)
redirect_to tests_url
else
render 'tests/edit'
end
end
def destroy
@test = Test.find(params[:id])
@test.destroy
redirect_to tests_url
end
private
def test_params
params.require(:test).permit(:name)
end
end
<% provide(:title, "Index") %>
<h1>Tests#index</h1>
<% @tests.each do |t| %>
<div>
<i class="far fa-smile-wink"></i>
<%= t.name %>
<%= link_to '編集', edit_test_path(t) %>
<%= link_to '削除', test_path(t), method: :delete %>
</div>
<% end %>
<%= link_to '追加', new_test_path %>
<p id="hoge">jQueryで赤色に変化</p>
<% provide(:title, "New") %>
<h1>Tests#new</h1>
<%= form_with model: @test, local: true do |f| %>
<div><%= f.label :name %></div>
<div><%= f.text_field :name %></div>
<div><%= f.submit %></div>
<% end %>
<%= link_to '戻る', tests_path %>
<% provide(:title, "Edit") %>
<h1>Tests#edit</h1>
<%= form_with model: @test, local: true do |f| %>
<div><%= f.label :name %></div>
<div><%= f.text_field :name %></div>
<div><%= f.submit %></div>
<% end %>
<%= link_to '戻る', tests_path %>
バリデーションを追加
class Test < ApplicationRecord
validates :name, length: {maximum: 30}, presence: true
end
エラーメッセージを表示
<% if object.errors.any? %>
<div>
<ul>
<% object.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<% provide(:title, "New") %>
<h1>Tests#new</h1>
<%= form_for(@test) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
.
.
<% provide(:title, "Edit") %>
<h1>Tests#edit</h1>
<%= form_for(@test) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
.
.
エラーメッセージを日本語化（rails-i18n）
日本語のlocaleファイルを作成し、rails-i18nの日本語用localeファイルの内容をコピペ。
---
ja:
activerecord:
errors:
messages:
record_invalid: 'バリデーションに失敗しました: %{errors}'
.
.
デフォルトの言語を日本語に設定
module BoardApp
class Application < Rails::Application
.
.
config.i18n.default_locale = :ja
end
end
【Rails】バリデーションを実装する
【Rails】localeの使い方
以前はi18nのgemをインストールしていたのですが、日本語でしか使わないアプリの場合無駄が多そうだということに気がついて、現在の形に落ち着きました。
ヘッダー、フッターを追加
<header class="header">
<div class="container header__container">
<div class="header__logo">
<h1 class="header__title">Rail Quick Start</h1>
</div>
<nav class="gnav">
<ul class="gnav__list">
<li><a href="https://qiita.com/d0ne1s/items/5211969b566b6a503eb8"><i class="fas fa-search"></i>Qiita</a></li>
<li><a href="https://github.com/nyshk97/quicss"><i class="fab fa-github"></i>GitHub</a></li>
<div class="gnav__outer">
</ul>
</nav>
</div>
</header>
<footer class="footer">
<div class="container">
<small>© d0ne1s</small>
</div>
</footer>
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<main class="main">
<%= yield %>
</main>
<%= render 'layouts/footer' %>
</body>
</html>
flashの表示エリアを作成
<!DOCTYPE html>
.
.
<body>
<%= render 'layouts/header' %>
<% flash.each do |message_type, message| %>
<div class="<%= message_type %>"><%= message %></div>
<% end %>
<main class="main">
.
.
開発環境にデバッグ情報を表示する
<!DOCTYPE html>
.
.
<%= debug(params) if Rails.env.development? %>
</body>
.
.
特定の変数の中身を表示したい場合には<%= debug @tests if Rails.env.development? %>のように記述します。
Railsのテスト環境にデバッグ用の情報を表示する
QuiCSSの導入
普段使っているSassのディレクトリ構成を取り入れ、自分のテンプレートをプロジェクトに追加します。
スピードに特化したコーディング規約【QuiCSS】
- stylesheets
└── application.scss
└── bases
└── _reset.scss
└── _config.scss
└── _base.scss
└── _mixin.scss
└── _responsive.scss
└── _utility.scss
└── components
└── _btn.scss
└── _title.scss
└── _form.scss
└── layouts
└── _header.scss
└── _gnav.scss
└── _main.scss
└── _fnav.scss
└── _footer.scss
└── _flash.scss
└── _debug.scss
└── pages
└──
└── pulgins
└──
//削除↓ 記述が残っていると、パーシャルを個別にコンパイルしようとして「変数が定義されていない」と怒られます。
*= require_tree .
//以下を追記
@import './bases/reset';
@import './bases/config';
@import './bases/base';
@import './bases/mixin';
@import './bases/responsive';
@import './bases/utility';
@import './compornents/btn';
@import './compornents/btn-outline';
@import './compornents/form';
@import './compornents/title';
@import './layouts/header';
@import './layouts/gnav';
@import './layouts/main';
@import './layouts/footer';
@import './layouts/flash';
@import './layouts/debug';
Herokuアプリを作成しデプロイ
本番環境のデータベースも開発環境と同じPostgresなので、データベース周りの設定は基本的に不要です。
config.assets.compile = true
$ heroku login
$ heroku create rails-quick-setup
アプリ名にアンダーバーは使えません。
$ git push heroku master
$ heroku run rails db:migrate
HerokuのDBをTablePlusで読み込み
- Herokuのダッシュボードにアクセス
- 該当のアプリ名(rails-quick-setup)をクリック
- Resources > Heroku Postgres をクリック
- Settings > View Credentials をクリック
- 表示される接続情報をTablePlusに入力し、connectをクリック
(2020/3/5追記)TablePlusの画面で「new connection from url」をクリックして、URIに書かれている記述をコピペすると、入力の手間が省けます。
HerokuとGitHubを接続
- Herokuのダッシュボードにアクセス
- 該当のアプリ名(rails-quick-setup)をクリック
- Deployをクリック
- Deployment method > GitHubをクリック
- リポジトリを検索し、connectをクリック
- Automatic deploys > Wait for CI to pass before deployにチェック
- Enable Automatic Deploysをクリック
以上の設定で、GitHubにプッシュしたタイミングでテストが走り、自動でデプロイが行われるようになります。
README.mdを編集
# Rails Quick Setup
Railsプロジェクトのセットアップを高速化するために作ったサンプルです。
[Railsプロジェクト作成時にやること全まとめ](https://qiita.com/)
## Ruby version
- See `.ruby-version`.
## Rails version
- See `Gemfile`.
## Database version
- PostgreSQL >= 11.6
## Project initiation
bash
$ git clone git@github.com:nyshk97/rails_quick_setup.git
bash
$ bundle install --path vendor/bundle
### Configuration
*ファイルの中身はご自身の環境に合わせて適宜変更してください*
- データベースの設定
bash
$ cp config/database.yml.default config/database.yml
### Database creation
bash
$ bundle exec rails db:create
$ bundle exec rails db:migrate
## Run rails server
bash
$ bundle exec rails server
管理画面用の名前空間を作成
管理画面用のベースとなるcontrollerとviewファイルを作成します。
class Admin::ApplicationController < ActionController::Base
layout 'admin/layouts/application'
end
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'admin/layouts/header' %>
<% flash.each do |message_type, message| %>
<div class="<%= message_type %>"><%= message %></div>
<% end %>
<%= yield %>
<%= render 'admin/layouts/footer' %>
<%= debug params if Rails.env.development? %>
</body>
</html>
<header class="header">
<div class="container header__container">
<div class="header__logo">
<h1 class="header__title">管理画面</h1>
</div>
</div>
</header>
<footer class="footer">
<div class="container">
<small>© d0ne1s</small>
</div>
</footer>
適当なコントローラーを作成しましょう。
$ rails g controller admin/static_pages index
継承元のコントローラーを管理画面用のものに変更。管理画面用のコントローラーを作るたびに修正するのは少しめんどくさいですね。
class Admin::StaticPagesController < Admin::ApplicationController
def index
end
end
出来たもの
GitHUb：https://github.com/nyshk97/rails_quick_setup
Heroku：https://rails-quick-setup.herokuapp.com/
TODO
- 基本的な認証機能の追加（Devise）
- 論理削除を追加（paranoia）
- 本番環境でのメール送信（SendGrid）
- Bundleの仕組みを整理（Rubyのバージョンを切り替えた時のgemの依存関係で問題が出ないかなど）