おれろぐ #z_a_ki3

(・∀・) オイ!

【復習】Ruby on Rails入門 ~ミニブログを作りながら学ぶWebアプリケーション制作 第1回~

無料動画のオンライン学習サイトのスクーで鳥井 雪(@yotii23)先生の授業を見て
RubyRailsに興味をもち、色々と触ってみています。

何かしらアウトプットした方が覚えが良いので、復習した内容をまとめたいと思います。

このサイト、生放送の授業にリアルタイムチャット機能がついていて、コメントを先生や学生代表の方に
拾ってもらえたり、生徒同士で課題解決したりと双方向のコミュニケーションが出来て結構楽しめるので、
気になった方は是非、参加してみてください。

今回はRuby on Rails入門 ~ミニブログを作りながら学ぶWebアプリケーション制作 第1回~の授業になります。

ちなみに環境は先日作成したRuby on Rails の開発環境つくってみた - おれろぐ #z_a_ki3
作成した環境を使って進めていきます。

※Gemをなるべくシステムにインストールしないようにしているので授業と微妙に違う点はご容赦ください。

ゴール

  • Webアプリケーションの基本のイメージを持つ
  • Railsのアプリケーションを動かしながら、「データの登録」を理解する

動作環境チェック

RubyRailsがインストールされている環境が前提です。
バージョンの確認コマンドは以下のコマンドです。

$ ruby -v
ruby 2.2.0p0 (2014-12-25 revision 49005) [x86_64-linux]
$ rails -v
Rails 4.2.0

Rubyは1.9以上、Railsは特に明言されていませんでしたが、先生の環境は4.2.0でした。

ちなみに授業ではnitrous.ioを使用しています。

環境構築から編集まで全てブラウザ上で完結するので非常に便利なんですが、動作が重く進まないことも
あったり不安定な部分が目立つので環境が作れるならローカルで用意した方が良いと思います。

授業中も環境構築(プロビジョニング)にだいぶ時間がかかってました _(┐「ε:)_ズコー

プロビジョニングとは,ネットワークやコンピュータの設備を, 必要になったときすぐに利用できるよう準備しておくことを指す キーワードである。供給や支給,配置といった意味を表す 「provision」という英単語が元となって派生した言葉である。

Networkキーワード - プロビジョニング:ITpro http://itpro.nikkeibp.co.jp/article/Keyword/20080610/307257/

課金すれば多少は改善されるかもしれませんが、仮想環境は無償で作れる&勉強になるのでオススメです。
あとは、似たようなサービスでCloud9がありますが、こちらも同じ事が言えます。

1.Webの基本のしくみ

Rails固有の内容では無く、Webのリクエストとかレスポンスとか基本的な内容の再確認です。

・リクエスト
ブラウザでWebのページを見るときにリンクを踏んだり、ボタンを押したりして画面を出す際、
PCからインターネットを通じてサーバにリクエストが飛ぶ。 登録フォームなども同様にリクエストを送っている。

・レスポンス
サーバは色々な処理をしてレスポンスを返す。
レスポンスは例えばHTMLのテキストや画像、動画を返す。 ブラウザはそれを組み立てて画面として構成する。

この辺の知識はRails関係なく、PHPでもJavaでもどんな言語でも共通で必要な知識です。
基礎をしっかり学習したい方は下記の書籍がオススメです。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

スクーのプレミアム学生ならこんな録画授業で学習できます。

2.アプリケーションの雛形をつくってみよう!

アンケート

Ruby」と「Rails」の違いわかりますか?

Rubyは"プログラミング言語"
RailsRubyでWebアプリケーションを作るための"Webアプリケーションフレームワーク"

で、"Webアプリケーションフレームワーク"とはWebアプリケーションを作るために
必要な共通の機能(部品、土台)を用意してくれているもの。

Railsのマークは"白いイカの足"ではなく、"レール(線路)"で、Railsの敷いたレールに乗ると
理解しやすい形で開発できることが思想にある。

確かに白いボツボツが吸盤にみえなくも無い。。。

雛形を作ってみよう!

rails new コマンドで雛形を作成します。

$ rails new my_app

このコマンドを入力するとカレントディレクトリにmy_appというフォルダを作成し、その中に、
必要な雛形ファイルを自動生成、ライブラリをダウンロードしてくれます。

至れり尽くせりでありがたいですね。

ちなみに私はシステムに余計なGemを入れたくなかったので、まず、bundle initで初期化して、
生成されたGemfilerailsのみ指定して、アプリ用に専用のrailsをインストールして、
そのアプリ用のrailsを使って雛形を作るという事をしました。

$ mkdir my_app
$ cd my_app/
$ bundle init
Writing new Gemfile to /vagrant/schoo_rails/my_app/Gemfile
$ vi Gemfile  #Gemfileを編集
# A sample Gemfile
source "https://rubygems.org"

gem "rails", '4.2.0'
$ bundle install --path ./vendor/bundle
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Resolving dependencies...
Using rake 10.4.2
Installing i18n 0.7.0
Installing json 1.8.2
Installing minitest 5.5.1
~略~
Installing rails 4.2.0
Bundle complete! 1 Gemfile dependency, 36 gems now installed.
Bundled gems are installed into ./vendor/bundle.
$ bundle exec rails new ./
       exist
      create  README.rdoc
      create  Rakefile
      create  config.ru
      create  .gitignore
    conflict  Gemfile
Overwrite /vagrant/schoo_rails/my_app/Gemfile? (enter "h" for help) [Ynaqdh] Y
       force  Gemfile
      create  app
      create  app/assets/javascripts/application.js
      create  app/assets/stylesheets/application.css
      create  app/controllers/application_controller.rb
      ~略~
Bundle complete! 12 Gemfile dependencies, 57 gems now installed.
Bundled gems are installed into ./vendor/bundle.
         run  bundle exec spring binstub --all
* bin/rake: spring inserted
* bin/rails: spring inserted
$

bundle exec はシステムにインストールされたGemではなく、bundle installでインストールした Gemを使って指定のコマンドを実行するコマンドです。

動作を確認しよう

rails serverでWebアプリケーションサーバを立ち上げます。

$ cd my_app #カレントディレクトを rails new で作成したディレクトリに移動
$ rails server

ちなみにセキュリティーが強化され、rails4.2.0からはバインドを指定しないとサーバを起動した端末以外では
ページを表示することが出来ないので仮想環境などで実行する際は-b(--binding=)オプションを付けましょう。

$ rails server -b0.0.0.0
$ rails server --binding=0.0.0.0

停止するときはctrl+Cです。

投稿機能を作ってみよう

まずは作りたいものを考えます。(今回は"投稿機能")
アプリケーションを作り始めるときにしっかりと仕様を決めるのは大事ですね。

  • 「名前」と「短い本文」が投稿できる
  • 投稿したものが下のように一覧で表示できる。
名前 本文
やきとりい おはようございます
笹田 ねむい
やきとりい 電車乗り過ごした・・・むしろ降りれなかった。
yotii23 人生万事塞翁が馬

作りたいものが決まったらモデルを(ほんとに簡単ですが)設計します。
ここでいうモデルとはデータベースのテーブルのようなイメージですかね。

投稿というモデルはentryという名前とします。
名前(投稿者名)はnameという名前で短い文字列、本文はbodyという名前で長いテキストとします。
短い文字列の形式はstring、長いテキストはtextという形式です。

仕様がきまったらモデルを生成します。

$ rails generate scaffold entry name:string body:text

ちなみに間違えた場合はgeneratedestroyにすると削除できます。

$ rails destroy scaffold entry

このscaffoldとは足場という意味があり、モデルに必要な様々な機能の部品を自動生成します。

この足場というのは、一度scaffoldで全ての部品を作成し、不要な部品(足場)を外していく様から
付けられたんじゃ無いかなと勝手に想像しています。勝手な想像なので出典はありません。

モデルに必要な部品が揃ったらデータベースを作成します。

$ rake db:migrate

このコマンドを実行することで作成したモデルに合うようにデータベースを更新します。
今回はモデルを新規追加したので、データベースには新規テーブルが追加されます。

タイムラインの質問で entryentries になる?というのが取り上げられていましたが、 railsではモデル名とテーブル名が規約で定められています。

モデル(model) - Railsドキュメント

種類 説明
モデルクラス名 先頭は大文字で単数形 User
モデルのファイル名 先頭は小文字で単数形 user.rb
テーブル名 先頭は小文字で複数 users
テストスクリプト xxx_test.rb user_test.rb

ここで http://localhost:3000/entries にアクセスするのですが、環境によっては以下のエラーがでます。

ExecJS::RuntimeUnavailable in Entries#index
Showing /vagrant/schoo_rails/my_app/app/views/layouts/application.html.erb where line #6 raised:

Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes.
  (in /vagrant/schoo_rails/my_app/vendor/bundle/ruby/2.2.0/gems/turbolinks-2.5.3/lib/assets/javascripts/turbolinks.js.coffee)

根本原因は理解しきれていないのですが、JavaScriptの実行エンジンが関係している用です。
Ruby - Could not find a JavaScript runtime - Qiita

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby  #コメントを外す

できた機能たち

機能 Webページ上の表示
一覧 Listing Entries
新規作成 New Entry
詳細 Show
編集 Edit
削除 Destroy

覚えて欲しいキーワード「CRUD

CRUD(クラッド)とは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能の イニシャルを並べた用語。 その4つとは、Create(生成)、Read(読み取り)、Update(更新)、Delete(削除)である。 ユーザインタフェースが備えるべき機能(情報の参照/検索/更新)を指す用語としても使われる。 CRUD - ウィキペディア ja.wikipedia.org/wiki/CRUD

機能 Webページ上の表示
C:Create(作成) New Entry
R:Read(読み取り) Listing Entries、Show
U:Update(更新) Edit
D:Delete(削除) Destroy

鳥井先生の資料がDeleteでは無く、Destroyだったんですが、Railsのコントローラファイルを見てみると、
Deleteメソッドに対応する呼び出しメソッドがdestroyなんですよね。
この辺が資料に入っちゃったのかなと想像しました。

  # DELETE /entries/1
  # DELETE /entries/1.json
  def destroy

「データを登録する」ということ

アンケート

データベース(DB)って聞いたことありますか?

Webのやりとり(リクエスト>レスポンス)は毎回1回ずつのやりとりになります。
その中で長く取っておきたい情報はDBに保存します。

WebアプリケーションにはDBそのものの機能はなく、DBとやりとりする機能を持っています。

では、データベースはいつしたのかというと・・・

$ rails generate scaffold entry name:string body:text

これで /db/migrate 配下に設定ファイルが生成されて、

class CreateEntries < ActiveRecord::Migration
  def change
    create_table :entries do |t|
      t.string :name
      t.text :body

      t.timestamps null: false
    end
  end
end

設定ファイルが生成された後・・・

$ rake db:migrate

これで生成された設定ファイルをもとにDB内にテーブルが作成されます。

rake db:migrate - リファレンス - Railsドキュメント

Webアプリケーションは機能(CRUD)に応じてDBに対し、レコードの挿入、更新、削除をよしなに実行します。
これがWebアプリケーションの基本機能となります。

次回以降の内容

  • Railsが作ってくれた今の機能に、自分のやりたいことを足してゆく
  • 見た目をかっこよくする
  • 情報を付け加える
  • Railsの構造を理解する

宿題

  • ブラウザとサーバー(アプリケーション)の図を自分でも書いてみましょう
  • 普段インターネットを使うとき、どんなタイミングでリクエストが飛んで、どんなデータが
    保存されているのかを想像してみましょう。

感想

Railsのアイコンはイカの足ではない。
nitrous.io は時間帯によっては結構重い、辛い。
お水ー!