Railsプロジェクト作成
$ rails new アプリ名 -d mysql -T
- DBはMySQLを指定します。
-
-Tオプションでテストファイルの自動生成を止めます（テストはRSpecを使用するため、ここでの自動生成は不要です） - このコマンドでカレントディレクトリにアプリ名と同じ名前のディレクトリが生成されますので、ディレクトリ作成してからコマンドを実行する必要はありません。
MySQLユーザー作成
$ mysql -uroot -p
Enter password:
mysql> create user 'ユーザー名'@'localhost' identified by 'パスワード';
mysql> grant all on *.* to 'ユーザー名'@'localhost';
config/database.yml
-
config/database.ymlを以下のように書き換える（これで全文です）。 -
username:とpassword:を先ほど作成したユーザー情報に書き換える。
config/database.yml
default: &default
adapter: mysql2
encoding: utf8
pool: 5
username: ユーザー名を入れる
password: パスワードを入れる
socket: /tmp/mysql.sock
development:
<<: *default
database: アプリ名_development
- production用の設定は本番デプロイ時に本番サーバ内で作るのでここでは記載しません。
-
socket:の値は以下のコマンドで確認できます。
$ mysql_config --socket
/tmp/mysql.sock
DB作成
$ rake db:create
動作確認
$ rails s
-
localhost:3000にアクセスして、Yay! You’re on Rails!を確認する。
.gitignore
- 以下を追記する。
-
/.idea/*はJetBrains社のIDEの関連ファイルなので、使ってない方は記載不要です。
.gitignore
/config/database.yml
/.idea/*
Git
- GitHub上でリモートリポジトリを作成しておく。
-
git initはrails new時に自動実行されていました。
$ git add .
$ git commit -m 'first commit'
$ git remote add origin git@github.com:user/repo.git
$ git push -u origin master
- GitHub上で
/config/database.ymlが閲覧できないことを確認する。
タイムゾーン指定
config/application.rb
module アプリ名
class Application < Rails::Application
config.load_defaults 5.2
# ここから
config.time_zone = 'Tokyo'
config.active_record.default_timezone = :local
# ここまで追記
end
end
Slim導入
Gemfile編集
Gemfile
gem 'slim-rails'
gem 'html2slim'
インストール
$ bundle
既存のerbファイルをslimファイルに変換
-
app/views/layoutsフォルダ内には最初からファイルがあるため、下記のコマンドで変換します。 - もし他のフォルダにもerbファイルをすでに作ってしまっている場合は、下記のコマンドのパス指定をしている部分を書き換えます。
$ bundle exec erb2slim app/views/layouts/ --delete
Bootstrap4導入
Gemfile編集
Gemfile
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
インストール
$ bundle
scssファイルを用意
-
app/assets/stylesheets/application.cssをapp/assets/stylesheets/application.scssにリネームして、下記を追記します。
app/assets/stylesheets/application.scss
@import "bootstrap"; //この1行を追記
application.js を編集
app/assets/javascripts/application.js
// 以下3行を追記
//= require jquery3
//= require popper
//= require bootstrap-sprockets
application.html.slim に基本構造を書く
- 参考
- 基本構造を最初に書いてしまっておきます。
- Bootstrapでは
.containerを書かないと始まりませんが、.containerで= yieldを囲うのは一旦やめておき、それぞれのビューファイルの頭で書くことにしようと思います。この方針についてはこれで良いのかまだ確信がないため、いずれ変更するかもしれません。
application.html.slim
doctype html
html
head
title アプリ名
= csrf_meta_tags
= csp_meta_tag
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge"
meta name="viewport" content="width=device-width, initial-scale=1"
meta http-equiv="content-language" content="ja"
meta name="description" content="ページの説明文"
/![if lt IE 9]
script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"
script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"
/![endif]
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
body
header
nav
main
= yield
footer