Rails 最序盤シート

# 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の関連ファイルなので、使ってない方は記載不要です。

```text:.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` が閲覧できないことを確認する。

# タイムゾーン指定

- 参考：[Railsタイムゾーンまとめ](https://qiita.com/aosho235/items/a31b895ce46ee5d3b444)

```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編集

```text:Gemfile
gem 'slim-rails'
gem 'html2slim'
```

## インストール

```
$ bundle
```

## 既存のerbファイルをslimファイルに変換

- `app/views/layouts` フォルダ内には最初からファイルがあるため、下記のコマンドで変換します。
- もし他のフォルダにもerbファイルをすでに作ってしまっている場合は、下記のコマンドのパス指定をしている部分を書き換えます。

```
$ bundle exec erb2slim app/views/layouts/ --delete
```

# Bootstrap4導入

- 参考：[Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)

## Gemfile編集

```text: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 4 フロントエンド開発の教科書](https://www.amazon.co.jp/dp/4297100207)
  - [head内に書くべきタグを総まとめ：SEO対策に有効なものは？](https://saruwakakun.com/html-css/basic/head)
- 基本構造を最初に書いてしまっておきます。
- 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
```

# 関連記事
- [Rails 序盤シート](https://qiita.com/Tsubasa_Shida/items/2dc3fa11ff8cd0c29347)

# 参考
- [RailsのDBを(初めから| |後から)MySQLに変更する](https://qiita.com/reeenapi/items/9fc38c4f2f8186c78288)
- [railsコマンド(rails)](http://railsdoc.com/rails)
- [ローカルのプロジェクトをgit initしてからGitHubにpushするまで](https://blog.urouro.net/entry/2012/12/22/164157)
- [MySQL mysql.socketがどこにあるか探したい。](https://chaika.hatenablog.com/entry/2019/01/17/160000)
- [Ruby on Rails 5 アプリケーションプログラミング](https://www.amazon.co.jp/dp/4774188832)
- [現場で使える Ruby on Rails 5速習実践ガイド](https://www.amazon.co.jp/dp/4839962227)