LoginSignup
5
3

More than 5 years have passed since last update.

Ruby初心者がMacローカル環境でRails5を動かしてみた。

Last updated at Posted at 2016-07-21

html、css、サーバの仕組みは薄っすらと理解していて、基本的なパソコン操作ができる人用のメモ書きです。チュートリアルを読む前に軽く動かして動作を確認してみました。

事前準備

Xcode
Command Line Tools for Xcode
Homebrew 0.9.9
rbenv
ruby 2.3.1
Ruby on Rails 5
Atom 1.8.0
DB Browser 3.8.0

Xcodeとは、Mac用の開発環境
XcodeCommandLineToolsは、ターミナル上でゴニョゴニョするツール
Homebrewとは、Mac用のバージョン管理ツール
rbenvとは、複数verのrubyを同一環境内に構築するのに便利。
rubyとは、サクッとWebサービスを立ち上げたい人がよく使う言語。
Ruby on Railsとは、ruby用のフレームワーク。
Atomとは、個人的に使いやすいエディタ。
DB Browserとは、SQLiteをGUIで操作する管理ツール。

参考にしたページ
- 初心者でもできた!Ruby on Rails開発環境の構築方法(Mac編)
- 【El Capitan】Mac OSX 10.11 El Capitan にRuby + Rails4 開発環境の構築 【初心者必見】

Ruby on Railsとは

ざっくり説明すると、Webページを動的に生成してくれるruby用の型枠(フレームワーク)のこと。MVCモデルで構築されており、PHPで言うCakePHPやZend Frameworkと同じ・・・というかパクリ元???

  1. ユーザーがURLにアクセスする。
  2. webサーバはアクセスされたURLを解析し、config/routes.rbに記述されたコントローラー(app/controllers/コントローラー名.rb)を呼び出す。
  3. 呼び出されたコントローラーのメソッドが処理を開始する。この時データベース処理が発生する場合はモデル(app/models/モデル名.rb)が呼び出される。
  4. 画面表示用のビュー(app/views/コントローラー名/メソッド名.html.erb)を呼び出し、HTML情報を動的に生成する。
  5. ユーザーにHTML情報を返し、ブラウザ上に表示させる。

新規プロジェクト作成と簡易Webサーバ立ち上げ(ターミナル作業)

後からRSpecを入れたいのでテストを省いてインストール。

$rails new プロジェクト名 --skip-test

$bundle install

$rails server

ブラウザーで表示を確認。

http://localhost:3000

コントローラを自動生成。

$rails generate controller Xxx

Xxx にコントローラ名(頭は大文字:例えばPages)

他にも一括削除やモデル雛形など便利なコマンドが沢山あります。
Railsコマンド一覧
以下が自動生成されます。

  • コントローラー:app/controllers/pages_controller.rb
  • 画面(Webページ動的生成):app/views/pages
  • テストコード:test/controllers/pages_controller_test.rb
  • ヘルパー(HTMLタグ生成):app/helpers/pages_helper.rb
  • JavaScript:app/assets/javascripts/pages.coffee
  • スタイルシート:app/assets/stylesheets/pages.scss

自動生成したコントローラーにメソッド追加。

app/controllers/pages_controller.rbに記述する。

class PagesController < ApplicationController
   def home
   end
end

メソッド名は英小文字(例えばhome)

ルーティング情報を記述。

config/routes.rbのファイルに記述。

get 'welcome' => 'pages#home'

http://localhost:3000/welcomeにアクセスしたら、pagesコントローラー内のhomeメソッドを呼び出す。

それぞれ英小文字で記述すること。
クラス名はPagesControllerと頭大文字だが記述は英小文字

HTMLファイルとCSSファイルを記述。

app/views/pages/home.html.erb
app/assets/stylesheets/pages.css.sccs

HTMLファイルは、app/views/コントローラ名/メソソッド名.html.erb
CSSファイルは、app/assets/stylesheets/コントローラー名.css.sccs

ブラウザーで表示を確認。

http://localhost:3000/welcome

Railsチュートリアル用に環境整備

Ruby2.3.1&Rails5だとテスト時に警告が出たので'rspec-core','>=3.4.4'を指定し、spec_helperの記述については先人たちの知恵をパクらせて貰いました。

もしかしたらrails_helperに記述した方がいいのかも?? 内容はよくわかっていませんが・・・とりあえずエラーも吐かずに動いているのでヨシとします。

またエンドツーエンドテストツール用にcapybaraも入れてます。

何故あえてRSpecを入れたのか?

チュートリアルでは第3版からRSpecではなく標準miniテストに変更されていますが、RSpecの使い勝手が良さそうなのと、業界標準らしいので導入しました。テスト部分については第2版を参考にWebを漁りながら学習を進めます。

Gemfileに追加

group :development, :test do
   gem 'byebug', platform: :mri
   gem 'rspec-rails'
   gem 'rspec-core','>=3.4.4'
   gem 'guard'
   gem 'guard-rspec'
   gem 'factory_girl_rails'
   gem 'capybara'
end

その他デバック用Gem

gem 'pry-rails'
gem 'pry-doc'
gem 'pry-byebug'
gem 'pry-stack_explorer'

Pryでデバッグ

RSpecおよび自動監視の初期化

$bundle update

$rails g rspec:install

$bundle exec guard init rspec

spec_helperに下記を記述。

require File.expand_path('../../config/environment', FILE)
require 'rspec/rails'
require 'factory_girl'
require 'capybara/rails'
require 'capybara/rspec'

Dir[Rails.root.join('spec/support/*/.rb')].each { |f| require f }

ActiveRecord::Migration.check_pending! if defined?(ActiveRecord::Migration)



RSpec.configure do |config|
   config.use_transactional_fixtures = true
   config.infer_base_class_for_anonymous_controllers = false
   config.run_all_when_everything_filtered = true
   config.order = 'random'
   config.include FactoryGirl::Syntax::Methods
   config.include Capybara::DSL

   config.before(:all) do
     FactoryGirl.reload
   end



end

簡易Webサーバを立ち上げ、自動監視を実行。

適当なページを修正し、テストが自動実行されることを確認する。

$rails server

$bundle exec guard

今後の学習ページ

ドットインストール
- Ruby入門 (全26回)
- Ruby on Rails 4入門 (全28回)

Ruby on Rails4チュートリアル(日本語)
日本語版ソース

RUBY ON RAILS TUTORIAL(RAILS5)
本家ソース

Ruby on Rails ガイド

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3