scaffoldを使ったRailsアプリの作成手順
今回は、scaffoldを使って読書録を作ろうと思います。
Railsアプリの作成の流れを俯瞰することが目的ですので、特に何も凝ったことはしない方針で行きます。
Railsの手順に注目してもらいたいからこその方針であり、手抜きではありません。
それでは、rails newから行きましょう。アプリ名はbook_shelfで行きます。
$ rails new book_shelf
book_shelfに入ります。
$ cd book_shelf
今回はコンソールを使いたいのですが、デフォルトのirbでは全然満足できないです。pryを使いましょう。
$ vim Gemfile
Gemfileの一番下に以下のコードを追加します。ついでなので、テンプレートをslimにします。erbめんどいです。
# コンソールをpryにする gem 'pry-rails' # テンプレートをslimにする gem 'slim-rails'
Gemfileを書き換えたので、入れてしまいましょう。
$ bundle install
今回の読書録は、特にcssとjsは書かず、ブラウザとコンソールからアイテムを登録する手順を見てみましょう。
まずは、scaffoldでユーザーと本のモデルを作ります。
generateはgで行きます。
ユーザーのカラムはnameだけで行きましょう。認証もしません。
$ rails g scaffold User name:string
次に、本のモデルを作ります。本は、ユーザーに紐付けるので、user_idを持たせます。あと、本のタイトルと感想を用意します。
$ rails g scaffold Book title:string comment:text user_id:integer
これで必要なモデルが揃いました。ユーザーと本の関係をモデルに書きましょう。
ユーザーと本は、ユーザーがたくさんの本を持ち、本は一人のユーザーに紐付けられる関係にあります。
なので、Userモデルにhas_manyを、Bookモデルにbelongs_toを書きます。
まずはUserモデルを書きます。
$ vim app/models/user.rb
で、中に
has_many :books
と書きます。複数形に注意しましょう。
次にBookモデルを書きます。
$ vim app/models/book.rb
で、中に
belongs_to :user
と書きます。こちらは単数形です。
これでモデルの関係を書けました。データベースをmigrateしましょう。
$ rake db:migrate
これでrails serverでブラウザに表示できます。さっそく見てみましょう。
$ rails s
Railsのデフォルトページが開きました。routeを設定していないからです。実行を止めて、routeを設定しましょう。今回はUserのindexをrootにします。
routes.rbを編集します。
$ vim config/routes.rb
で、コメントアウトされているroot "welcome#index"の下に
root "users#index"
と書きます。これでデフォルトページがUserのindexアクションになりました。URLはlocalhost:3000/users/indexです。
アプリのロジック部分が完成したので、さっそく使ってみましょう。
まず、ブラウザを使ってユーザーを登録して、本の感想を書いてみます。
rails sでサーバーを起動して、localhost:3000にアクセスします。するとこんな画面が表示されます。
New Userをクリックすると、入力画面が表示されます。nameに名前を入力して、登録してみます。
こんな感じで登録が完了しました。
このユーザーのidは1です。0じゃないんですね。
ユーザーが登録できたので、このユーザーで本の感想を登録します。
localhost:3000/books/newにアクセスします。
こんな画面が表示されます。
titleとcommentを適当に入力して、user_idには1と入力します。
こんな感じで登録できました。
ブラウザを使った登録はこんな感じです。
次はコンソールから登録してみましょう。
コンソールを起動します。
$ rails console
こっちでも大丈夫です。
$ rails c
pryが起動したら、ユーザーを登録します。このユーザーのidは2です。
User.create name: "kenta2"
次に、本を登録しましょう。user_idは2を指定します。
Book.create title: "test_book2", comment: "test_comment", user_id: 2
これでコンソールからも登録出来ました。サーバーを起動して確認してみましょう。
$ rails s
localhost:3000/usersにアクセスすると、ユーザーがこんな感じに登録できています。
各userのページで登録した記事が見れないのもアレなので、viewを少しだけ書きましょう。
まず、controllerを書いて、ユーザーと本を取得します。
$ vim app/controllers/users_controller.rb
ファイルを開いたら、showメソッドにコードを追加します。
@user = User.find_by_id params[:id].to_i @books = @user.books
これでもいけます。
Book.find :all, conditions: ['user_id = ?', params[:id]]
ユーザーに紐付いた本が取れたので、viewsのslimに追加します。
$ vim app/views/users/show.html.slim
slimの下に@booksを表示しましょう。
- @books.each do |book| p = "タイトル: #{book.title}" p = "コメント: #{book.comment}"
裸ですが、ユーザーが登録した本の感想が表示されます。
こんな感じ。
以上で、scaffoldを使った簡単な読書録は終了です。
次から、CoffeeScriptとSassを見てみようと思います。
Railsの第一歩
Rubyは2.1.0、Railsは4.0.2を使っています。
今回は、デフォルトページにhello worldと表示するアプリを作ろうと思います。
せっかくなので、ちょっとだけcssとjsも書きましょう。
まずは、rails newをしないと何も始まりません。アプリ名はhello_worldにします。
$ rails new hello_world
次に、今のコマンドで出来たアプリの中に行きます。
$ cd hello_world
ここで、lsをすると、初心者の心をへし折る光景が…
$ ls Gemfile app db test Gemfile.lock bin lib tmp README.rdoc config log vendor Rakefile config.ru public
複雑すぎワロタwww
どのファイルが何をやっているかはおいおい見ていきます。今回はhtmlでhello worldと表示して、cssとjsで少し遊ぶことに専念します。
まず、slimを使いたいので、Gemfileにslim-railsを追加します。erbはめんどくさいです。
$ vim Gemfile
で、Gemfileの一番下にでも、slim-railsを追加します。
gem 'slim-rails'
変更を保存して、slim-railsを入れましょう。
$ bundle install
これで、slimが入りました。
次に、hello worldを出すためのcontrollerを作りましょう。コントローラー名をHello、アクション名をindexで作ります。
アクション名を入れないとhtmlテンプレートが作られません。
$ rails generate controller Hello index
generateはgでもいいみたいです。
$ rails g controller Hello index
せっかくなので、localhost:3000で開くデフォルトのページをhello worldにしましょう。
config/routes.rbを編集します。
$ vim config/routes.rb
で、コメントアウトされている# root 'welcome#index'の下にでも、
root 'hello#index'
これで、app/views/hello/index.html.slimがデフォルトで開くようになりました。
では、index.html.slimの中身をhello worldにします。
$ vim app/views/hello/index.html.slim
まず、最初に入っている中身を全部消しましょう。
で、ファイルの中身を
h1 Hello World!
にします。h1なのは完全にノリです。
では、メインイベントです。hello worldにcssを当てましょう。書き換えるcssはapp/assets/stylesheets/hello.css.scssです。
scssが何なのかは深く考えないでいきましょう。おいおい見ていきます。
今回は、カーソルを乗せたら色が変わって、クリックしたら消えるhello worldにします。
$ vim app/assets/stylesheets/hello.css.scss
で、中身を書きます。
h1:hover { color: blue; }
これで、カーソルを乗せたら色が青くなるようになりました。
次は、hello worldをクリックしたら消すjsを書きます。書き換えるjsはapp/assets/javascripts/hello.js.coffeeです。
jsじゃなくてcoffeescriptですが、気にせずcoffeescriptで書きます。簡単で読みやすいです。
あと、デフォルトでjQueryが使えるようなので、ありがたく使わせていただきます。
$ vim app/assets/javascripts/hello.js.coffee
で、中身を書きます。
$ -> $( 'h1' ).on 'click', -> $( @ ).fadeOut 'slow'
以上で、カーソルを乗せると青くなって、クリックすると消えるhello worldが出来ました。早速確認してみましょう。
$ rails server
こっちでも大丈夫みたいです。
$ rails s
ブラウザでlocalhost:3000にアクセスすると、こんな感じにむき出しのh1が表示されます。
カーソルを乗せると…
クリックすると…
ちゃんと動きました!
一捻りしたhello worldで少しRailsと仲良くなれた気がしました。
Railsはじめました
まずはrails newから