Rails初心者に手っ取り早い実装例をご紹介する

Ruby on Railsを理解する上で大切だと思うのは、

まず作ってみること

です。なにはともあれ、実装してみることが先だと思います。

中身がどうなっているかよくわからないけれど、まずは実際にwebアプリケーションを作ってみるのが一番早く上達する方法です。

それで何か問題が起こったらまず自分で調べてみて、それでもわからなければ誰かに聞いてみる。結局それが一番早く成長できる方法なのではないでしょうか。

ということで、実際にRuby on Railsで実装をしていきましょう。未経験者を対象にしています。またmacOSです。

実装

まずDesktopでもどこでも良いのでフォルダを作って、

cd フォルダ名

でカレントディレクトリを移動し、

$rails new myapp

とコマンドを入力します。するとバラバラっとファイルがたくさん作成されますので、

$cd myapp

でアプリ内に入り、

$bundle exec rails s

でサーバーをたてます。（sはserverの略）ここでブラウザでlocalhost:3000と入力すると

このようにサーバーが立っていることがわかります。

ではできたアプリを開いて、

config/routes.rb

のRails.application.routes.draw do　と end　の間に、

get "/" => "posts#index"

っていうのを追記します。これは、『localhost:3000にアクセスしたら、postsコントローラーのindexアクションを使います』っていう意味です。

はい、わからない単語が出てきたと思いますが、この記事では爆速でwebアプリを作ることを目的としているので、ひとまず説明は置いておきます。

さて、postsコントローラーを作っていきましょう。

ターミナルで

$rails g controller posts

と入力。（gはgenerateの略）

するとapp/controllers配下にposts_controller.rbができているので、このファイルを開いて、

class PostsController<ApplicationController　と 　endの間に、

def index
end

と追記します。さらに、app/views/posts配下にindex.html.erbというファイルを自分で作成します。

このファイルに、

<h1>hello,Ruby on Rails</h1>

<%= link_to(‘newはこちら’, ‘/posts/new’) %>

と書き、localhost:3000にアクセスすると書いた内容が反映されているはずです。ただ、まだ「newはこちら」のリンク先が作られていませんから、リンク先を今から作っていきます。

config/routesでさっき書いた

get “/” => “posts#index”

の下に、

get "posts/new" => "posts#new"

を追加しましょう。これはlocalhost:3000/posts/newにアクセスしたら、postsコントローラーのnewアクションを実行する、という意味です。

次に

app/controllers/posts_controller.rbでさっき書いた

def index
end

の下に、

def new
end

を追加。そしてapp/views/posts配下にnew.html.erbを作り、

<h1>This is new</h1>

と書きます。これで、app/views/posts/index.html.erbに書いた「newはこちら」のリンクをクリックすると、This is newと出てくるはずです。

次は投稿機能を作っていきます。

app/views/posts/new.html.erbに、

<%= form_tag(/posts/create) do %>
 　<textarea  name='content'></textarea>
 　<input type='submit' value='投稿'>
<% end %>

を追記。

これはtextareaタグで作られたフォームに入力された内容を、/posts/createに送る、という意味です。なのでroutes.rbに

post 'posts/create' => 'posts#create'

を追記します。getではなくpostです。なぜなら、postによってしか入力された内容を移動させることができないからです。

次にposts_controller.rbに

def create

@post = Post.new(content: params[:content])

redirect_to(‘/’)

end

を追記。ここでよくわからないやつがいっぱい出てきましたので、ひとまず解説。

@postというのは、インスタンス、つまり右辺の値が入った部品です。@をつけるとファイルを飛び越えて、対応するviewに飛ぶことができるようになるという規則がRuby on Railsにはあります。

そして右辺のPost.new(content: params[:content])ですが、

これはデータベース上にあるpostsテーブルのcontentカラムに、textarea name=’content’で作られたフォームに入力した値を入れる、という意味です。でもまだpostsテーブルがありません。作りましょう。

（configフォルダの下にdbフォルダない場合はデータベースがまだないということなので、rake db:createでデータベースを作りましょう）

rails g model Post でPostモデルを作ります。これでpostsテーブルも作られます。データベース（本棚全体）の中にpostsテーブル（棚の一列）が作成されましたが、このテーブルごとに Postモデルがあって、postsコントローラーとやりとりしている、というイメージです。

中のカラム（本と本のしきり的なもの）を作るために、

db/migration/日時_create_posts.rbを開いて、

create_table :posts do |t|　　と 　　t.timestampsの間に、

t.text :content

と追記して、ターミナルで

$rails db:migrate

とコマンドを入力。

これでpostsテーブルにcontentカラムを作ることができました。（できたテーブルとカラムは、db/schema.rbで確認することができます。）

では、投稿した内容をデータベース上にあるpostsテーブルに入れてそれを表示させてみます。なので表示させる部分を作ります。

まずapp/controllers/post_controller.rbの

def indexとendの間に、

@posts = Post.all.order(created_at: :desc)

と追記。これはpostsテーブルにある情報全てを、情報の新しい順に並べて@postsに入れる、という意味です。

次に、

app/views/index.html.erbに、

<% @posts.each do |post| %>
  <%= post.content %>
<% end %>

を追記。これは先ほど作った@postsインスタンスの情報を一つずつ取り出し、それを一回一回postに入れて、post.contentでcontentカラムに入っている情報だけを取り出しています。

これで準備ができました。

ではlocalhost:3000にアクセスして、newはこちらのリンクをクリックしてフォームに何か入力してみましょう。そして投稿ボタンを押すと、最初の画面に戻ってフォームに入力した値が表示されているはずです。もう一度同じことをやると、それがさらに上に表示されます。

超簡単なツイッターみたいなwebアプリができましたね。

ミスりがちなところ

今回投稿機能を作っていて、引っかかったところ。

<% @posts.each do |post| %>

この部分が、

<%= @posts.each do |post| %>

こんな風に%=になっていたこと。これをやってしまうとpostsテーブル内の情報が全部表示されてしまいました。

%だけだと単にRubyで処理するだけで、%=はそのタグに書いた内容をhtmlに反映するっていうイメージです。

以後気をつけます。