2
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-26

はじめに

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

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

アプリ作成

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

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

ターミナル
$ rails _5.2.3_ new sample -d mysql

作成したアプリのディレクトリに移動しておきます。

ターミナル
$ cd 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

下の画像のような感じでマイグレーションファイルとモデルのファイルなんかが作成されるはずです。
6b09d101921453a7b9b21fad5bec9fe1.png

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

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です。
f719a52b32f13a6df5d62f5569dd5d00.png

コントローラ、ビュー作成

■ まずはコントローラを作成します。
(これがないとアプリにならない…)
今回はpostsコントローラーを作成します。

ターミナル
$ rails g controller posts

コマンドを実行するといろいろファイルが作成されるかと思いますが、とりあえずposts_controller.rbだけ注目しておけばOKです。
(ここでpostsコントローラ用のビューフォルダも一緒に作られてます)
9be2237cae0ffacc53580744ec6464be.png

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

posts_controller.rb
class PostsController < ApplicationController
  def index
  end
end

とりあえずindexアクションのみ記載しておきます。
今回はインスタンス変数等の中身の記述は割愛します。

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

routes.rb
Rails.application.routes.draw do
  root "posts#index"
  resources :posts, only: :index
end

postsコントローラのindexアクションを使えるようにしています。
また、ルートパスも変更しておきましょう。(これがないとルートパスにアクセスした時にrailsが用意してあるデフォルトページが表示されてしまいます。)

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

ターミナル
$ rails routes

下の画像のようにpostsコントローラのindexアクションが設定されていればOKです。
e901ca940d1239356297f31fbf5a6ea5.png

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

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

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

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

ターミナル
$ rails s

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

1f78058672dcf3d9d948b9cffe64c8be.png

jquery導入

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

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に記述します)

application.js
$(function(){
  console.log("OK")
})

下の画像のようにOKと表示が出ていれば正しく動作しています。
5d3352fcaeb81a05709680d955d6dccc.png

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

2
1
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
2
1