Ruby on Rails でHello, world

作成: 2019年02月25日

更新: 2019年02月25日

目標

Rubyをインストールしていない状態からRuby on Railsを使ってテキストフィールドにテキストを打ち込んで打ち込まれたテキストを保存し、表示することができるWebアプリを作る。筆者はWindowsで作成したがたぶんMacでもできます。

環境構築

有名なRuby on Rails チュートリアルをはじめクラウドで環境構築を進めるサイトは多い。しかしクラウドに環境構築を頼るのはなんか嫌なのでローカルで環境構築をする。Rails Girls インストール・レシピを参考にまずRubyInstallerをインストールした(結構長い)。RubyInstallerを起動しUse UTF-8 as default external encodlingにチェックを入れたこと以外はデフォルトで進める。デフォルトで進めるとRubyインストール後コマンドプロンプトが起動しMSYS2のインストールが始まるのでそのままエンターキーを押す(これも長い)。
Rubyインストール後にコマンドプロンプトで以下のコマンドを実行し、railsをインストール。

gem install rails bundler --no-document

インストール後以下のコマンドでrailsのバージョンをチェック。

rails -v

こんな風にでたらOK。

Rails 5.2.1.1

次にRails GirlsではテキストエディタにAtomを進めているが筆者はVSCode信者なのでこれをスルー。たぶん大丈夫でしょう。
次に不必要かもしれないがNode.jsをインストール。入れないと不具合が起きるかもしれないらしい。こちらでLTS版をインストール。コマンドプロンプトをもう一度開き

node --version

でバージョンをチェック。

v10.14.1

こんな風にでたらOK。
次にRailsの動作確認。コマンドプロンプトで以下のコマンドを順に打つとカレントディレクトリにサンプルプロジェクトが作成される。

rails new sample
cd sample
rails g scaffold book
rails db:create
rails db:migrate
rails s

http://localhost:3000
にアクセスするとサンプルプロジェクトのページに行くことができる。Bookというモデルを作成しデータベースに保存。その後Bookの閲覧、編集、削除ができるようなサンプルプロジェクトが作成されます。ちゃんと作成できていたらこのプロジェクトはもういらないのでCtrl+Cで終了してその後プロジェクトを削除。
確認出来たら環境構築は終了です。

プロジェクトの作成

Start Command Prompt with Rubyというプログラムを起動。コマンドプロンプトが開きます。
次の一連のコマンドを打ちhelloworldというプロジェクトを作成。

mkdir projects
cd projects
rails new helloworld
cd helloworld
rails server

http://localhost:3000にアクセスするとこんなページが出ます。
rails.png
そしてrailsのscaffoldによってmodelを自動生成します。以下のコマンドを入力します。

rails generate scaffold idea name:string description:text picture:string

これでideaという名前でname, description, pictureを持つモデルが構築されこのモデルの作成、閲覧、編集、作成を行うためのcontroller,viewが自動生成されます。すごい。
さらにconfig/routes.rbを以下のように修正。これでトップページが先ほどの画像ではなく作成したideasモデルの閲覧ページになります。

routes.rbRails.application.routes.draw do
  resources :ideas
  root to: redirect('/ideas')
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

データベースを更新するため一度プログラムをCtrl+Cで終了し、以下のコマンドで再起動。

rails db:migrate
rails server

この状態で先ほどのhttp://localhost:3000を更新すると以下のようなページになります。
ideas.png
筆者は少しデザインを変更したの見た目が違うかもしれないが、大体似たようページになるはずです。
ここからNew Ideaで適当に作成するとこうなる
new_idea.png
このようにテキストがモデルとして保存され、閲覧できるようになった。

まとめ

scaffoldというコマンドによってmodelとmodelに必要なviewとコントローラーのひな形が自動で作成されるのはすごいと思った。
Rubyに触れたことがなかったので何が何を表しているのかがいまいちわからないのでこれをもとに改造していくのは難しそう。しかしRailsは有名なのできっと参考になるサイトが山盛りあると思われる。

参考にしたサイト

Ruby on Rails チュートリアル
Rails Girls