Rails でアプリを作成する際の初期作業まとめ

## はじめに
railsでアプリを作成するときに毎回のように設定していることがあるので、初期の設定をまとめておきます。
作業は以下の流れになります。

・アプリ作成
・データベース作成
・gem導入
・Haml導入
・テーブル作成
・コントローラ、ビュー作成
・jquery導入

## アプリ作成
まずはターミナルからコマンド入力でアプリを作成します。

railsのバージョンは使い慣れているものを指定するのが良いかと思います。
（今回はバージョン5.2.3、データベースはmysplを使用）
アプリを保存するディレクトリで以下を実行します。（今回はアプリ名はsample）

```:ターミナル
$ rails _5.2.3_ new sample -d mysql
```
作成したアプリのディレクトリに移動しておきます。

```:ターミナル
$ ｃｄ sample
```

## データベース作成
データベースを作成します。

```:ターミナル
$ rails db:create
```
developmentとtest用のデータベースが作成されるはずです。
（Sequel Pro等のアプリで確認してみると良いでしょう）

## gem導入
開発に使いそうなgemを先に入れておきます。
以下の4つはとりあえず入れておいて良いかと思います。
Gemfileに以下を追記しましょう。

```:Gemfile
group :development, :test do
  gem 'pry-rails'
end

gem 'haml-rails'
gem 'font-awesome-sass'
gem 'jquery-rails'
```
一応それぞれ説明しておくと
pry-rails：コントローラで処理を止めてparamsの中身を確認するため
haml：hamlを使うため（erbよりも記述が楽）
font-awesome-sass：font-awesomeのアイコンを使うため
jquery-rails：jqueryを使うため

追記したらインストールしておく

```:ターミナル
$ bundle install
```

## Haml導入
gemにhamlを追加していますが、アプリ作成時にもともと作られているerbファイルをhamlに直しておきます。
以下のコマンドを実行するだけです。

```:ターミナル
$ rails haml:erb2haml
```
コマンドを実行すると既存のerbファイルがhamlファイルに変換されます。
コマンド実行後、Would you like to delete the original .erb files?と聞かれるのでyと入力しておきましょう。
（もとのerbファイルを消して良いか？という質問です。良い→y, だめ→nで答えてあげましょう）

## テーブル作成
データベースにテーブルを作成します。
今回はpostsテーブルを作成することにします。
（実際にアプリを作成する際はDB設計をしてからになると思いますが、簡単に流れを確認するためと思ってください）

■ まずはモデルを作成します。

```:ターミナル
$ rails g model post
```
下の画像のような感じでマイグレーションファイルとモデルのファイルなんかが作成されるはずです。
<img width="411" alt="6b09d101921453a7b9b21fad5bec9fe1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/77d899ba-7b94-12e0-5cbd-96005931b770.png">

■ 続いてマイグレーションファイルを編集します。
作成するカラムの情報を記載します。
今回はカラム名をcontent, データ型はstring, null規制ありとしています。
マイグレーションファイルに追記してあげましょう！
（マイグレーションファイルはdb/migrateの中にあります）

```ruby:xxxxxxxxxxxxxx_create_posts.rb
class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.string :content, null: false
      t.timestamps
    end
  end
end
```
■ マイグレーションを実行しましょう
マイグレーションファイルの記載が終わったらマイグレートします。

```:ターミナル
$ rails db:migrate
```
下の画像のようにテーブルが作成されればOKです。
<img width="562" alt="f719a52b32f13a6df5d62f5569dd5d00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/328f734f-d541-fd56-ef3b-3923ce07cd2a.png">


## コントローラ、ビュー作成
■ まずはコントローラを作成します。
（これがないとアプリにならない…）
今回はpostsコントローラーを作成します。

```:ターミナル
$ rails g controller posts
```
コマンドを実行するといろいろファイルが作成されるかと思いますが、とりあえずposts_controller.rbだけ注目しておけばOKです。
（ここでpostsコントローラ用のビューフォルダも一緒に作られてます）
<img width="415" alt="9be2237cae0ffacc53580744ec6464be.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/0fb2e3cd-7c55-12e9-9e66-3a88ce248229.png">

■ コントローラ編集
コントローラにアクションを記載しましょう。
（ファイルはapp/controllersの中）

```ruby:posts_controller.rb
class PostsController < ApplicationController
  def index
  end
end
```
とりあえずindexアクションのみ記載しておきます。
今回はインスタンス変数等の中身の記述は割愛します。

■ ルーティング設定
続いてコントローラを使用するためにルーティングを設定しておきましょう。
（ファイルはconfigの中）

```ruby:routes.rb
Rails.application.routes.draw do
  root "posts#index"
  resources :posts, only: :index
end
```
postsコントローラのindexアクションを使えるようにしています。
また、ルートパスも変更しておきましょう。（これがないとルートパスにアクセスした時にrailsが用意してあるデフォルトページが表示されてしまいます。）

■ ルーティング確認
ルーティングが正しく設定されているか確認してみましょう

```:ターミナル
$ rails routes
```
下の画像のようにpostsコントローラのindexアクションが設定されていればOKです。
<img width="847" alt="e901ca940d1239356297f31fbf5a6ea5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/5958f2d2-5dfd-e116-d395-3b668cc0469b.png">

■ ビューファイル作成
ルーティングを設定したらビューファイルを用意しておきましょう。
（これがないとリクエストを飛ばしてもファイルがないためエラーが出ます）

app/views/postsの中にindex.html.hamlを作成します。
中身はわかりやすいように何か書いておきましょう。

```haml:index.html.haml
%h1 インデックスページです
```

■ ブラウザで確認
ビューファイルを作成したらうまくいってるか実際にブラウザで確認してみましょう。
ローカルサーバーを立ち上げます。

```:ターミナル
$ rails s
```
ChromeなどのブラウザでURLに　localhost:3000/　と入力してアクセスしてみましょう。
下の画像のように用意したビューファイルどおりに表示されていればOKです。

<img width="509" alt="1f78058672dcf3d9d948b9cffe64c8be.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/ae635485-2758-3db6-f641-6de61fd5eb85.png">


## jquery導入
jqueryの導入をしていきます。
application.jsにrequire jqueryを追記しましょう。

```js:application.js
//= require jquery
//= require rails-ujs
//= require activestorage
//= require_tree .
```
※ require jqueryを追記する位置はrequire_treeよりも上にしないとエラーが出ます。

ーーー余談ーーー
ちなみにjqueryを使ってAjaxを手作業で追加する場合、turbolinksと干渉する恐れがあるので、私の場合はturbolinksを消しています。
Gemfileのturbolinksの記述をコメントアウト
application.htmlファイル中のturbolinksの記述を削除
application.jsファイル中のturbolinksの記述を削除
ーーーーーーーー

最後にブラウザでjqueryが正しく動作するか確認しておきましょう。
なんでも良いのでjsファイルに以下を記述し、ブラウザのコンソールをみてみましょう！
コンソール画面はchromeの検証ツールを使用すれば確認できます。
（今回は確認用なのでapplication.jsに記述します）

```js:application.js
$(function(){
  console.log("OK")
})
```
下の画像のようにOKと表示が出ていれば正しく動作しています。
<img width="748" alt="5d3352fcaeb81a05709680d955d6dccc.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/63767368-2a94-5767-edc3-338d20b97838.png">


以上でアプリ作成時の一通りの作業は終了になります。
間違いあれば指摘いただけると助かります。