Ruby on Railsを使って新規アプリを作成し、TOPページを表示させる

前提

Ruby・Rails初心者の方向けに書きました。
あらかじめRailsを使って開発するための環境(Homebrew・rbenv・ruby-build・Ruby・Ruby on Rails・MySQL等が入っている状態)が整っていることを前提に話を進めさせて頂きます。

開発環境
ruby 2.4.0
rails 5.0.2

以下アプリ作成の手順

まずはデスクトップにプロジェクトフォルダーを作成しましょう。名前はprojectsで作成するとします。

作成が終わったらターミナルを開き、以下のコマンドを順に打ちます。

$ cd Desktop

$ cd projects

projectsフォルダーまで移動できたらターミナルにてrails newコマンドを使ってRailsで新規アプリケーションを作成します。以下アプリケーションの名前はrails_practiceという名前で作成しますが実際にはお好きな名前で作成していただいて大丈夫です。

$ rails new rails_practice -d mysql -T

上記ではテストファイルを作成しないというオプションとデータベースをmysqlに最適化されるようなオプションをつけて生成しています。

その他rails newコマンドを打つ際に他のオプションをチェックしてみたいという方はターミナルにて以下コマンドを打っていただけると確かめることができます。

$ rails new -h

またrails newコマンドを打った際デフォルトではそのまま自動でbundle installまで行われてgemがインストールされます。これ以後もし必要なgemをGemfileに書き足した場合は以下手順に沿ってgemのインストールをしてください。
*アプリケーションの存在するディレクトリにてお願いします。

$ bundle update

$ bundle install

rails newコマンドを打ち無事にファイルの作成に成功したらそのアプリのディレクトリに移動しましょう。

$ cd rails_practice

次にデータベースの作成を行いましょう。
以下コマンドをターミナルにて打ち込んでください。

$ rake db:create

これによりdevelopment環境とtest環境のデータベースが作成されました。

しかしこれだけではまだrails sコマンドを打って http://localhost:3000/ につなげても画面はうつりません。

まだルーティングとコントローラー・ビューの設定をしていないのでその準備をしましょう。

今回はTopページを表示させるということでTopコントローラーというのを作成してビューを作成します。皆さんが実際にアプリを作成なされる場合には、トップ画面にしたいビューをご自身で決めて頂きそれにそってコントローラーやルーティング・ビューを作って頂いて良いです。あくまで以下の手順は一例に過ぎません。

まずは以下のコマンドをターミナルにて打ち込んでコントローラーファイルの作成をしましょう。

$ rails g controller top

作成が終わったらapp/controllers配下に入っているtop_controller.rbファイルを開き以下のように編集しましょう。

top_controller.rb

class TopController < ApplicationController

  def index
  end

end

次にルーティングを設定しましょう。config配下に入っているroutes.rbファイルを開きましょう。そして以下のように編集してください。

routes.rb

Rails.application.routes.draw do
  root 'top#index'
end

上記のrootというのは本来http://localhost:3000/ にアクセスした場合、RailsのWelcome画面が表示されるのですがそこに自分の設定したビューを表示させることができる書き方です。

以上の作業が終わりましたら残すはビューの設定です。ビューについては以下のルールがあります。

view配下にあるコントローラー名と同じフォルダの中にあるactionの名前と同じファイル名のものが適用される

上記のルールに沿ってビューファイルを生成しましょう。

view/top配下にindex.html.erbという名前でファイルを作成しましょう。

そして以下のように編集しましょう。

index.html.erb

top#index

以上でtop画面を表示させるための準備は完了しました。

rails sを実行し、 http://localhost:3000/ にアクセスしてみましょう。以下の画面が表示されていれば成功です。

以上の作業を行うことでアプリケーションを作成させる上で最初に必須のtopページを作成できました。

このページを基盤にして自分の作りたいアプリの作成に取り掛かりましょう！！