はじめに
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に以下を追記しましょう。
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
下の画像のような感じでマイグレーションファイルとモデルのファイルなんかが作成されるはずです。
■ 続いてマイグレーションファイルを編集します。
作成するカラムの情報を記載します。
今回はカラム名をcontent, データ型はstring, null規制ありとしています。
マイグレーションファイルに追記してあげましょう!
(マイグレーションファイルはdb/migrateの中にあります)
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
コントローラ、ビュー作成
■ まずはコントローラを作成します。
(これがないとアプリにならない…)
今回はpostsコントローラーを作成します。
$ rails g controller posts
コマンドを実行するといろいろファイルが作成されるかと思いますが、とりあえずposts_controller.rbだけ注目しておけばOKです。
(ここでpostsコントローラ用のビューフォルダも一緒に作られてます)
■ コントローラ編集
コントローラにアクションを記載しましょう。
(ファイルはapp/controllersの中)
class PostsController < ApplicationController
def index
end
end
とりあえずindexアクションのみ記載しておきます。
今回はインスタンス変数等の中身の記述は割愛します。
■ ルーティング設定
続いてコントローラを使用するためにルーティングを設定しておきましょう。
(ファイルはconfigの中)
Rails.application.routes.draw do
root "posts#index"
resources :posts, only: :index
end
postsコントローラのindexアクションを使えるようにしています。
また、ルートパスも変更しておきましょう。(これがないとルートパスにアクセスした時にrailsが用意してあるデフォルトページが表示されてしまいます。)
■ ルーティング確認
ルーティングが正しく設定されているか確認してみましょう
$ rails routes
下の画像のようにpostsコントローラのindexアクションが設定されていればOKです。
■ ビューファイル作成
ルーティングを設定したらビューファイルを用意しておきましょう。
(これがないとリクエストを飛ばしてもファイルがないためエラーが出ます)
app/views/postsの中にindex.html.hamlを作成します。
中身はわかりやすいように何か書いておきましょう。
%h1 インデックスページです
■ ブラウザで確認
ビューファイルを作成したらうまくいってるか実際にブラウザで確認してみましょう。
ローカルサーバーを立ち上げます。
$ rails s
ChromeなどのブラウザでURLに localhost:3000/ と入力してアクセスしてみましょう。
下の画像のように用意したビューファイルどおりに表示されていればOKです。
jquery導入
jqueryの導入をしていきます。
application.jsにrequire jqueryを追記しましょう。
//= 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に記述します)
$(function(){
console.log("OK")
})
下の画像のようにOKと表示が出ていれば正しく動作しています。
以上でアプリ作成時の一通りの作業は終了になります。
間違いあれば指摘いただけると助かります。