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
複雑すぎワロタｗｗｗ
どのファイルが何をやっているかはおいおい見ていきます。今回は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と仲良くなれた気がしました。
