ポートフォリオサイト公開中

RailsチュートリアルでつまずいたけどRailsを理解したい①

初心者がレイルズチュートリアルの理解をより深めるために書いた備忘録。

レイルズチュートリアルで詰まったら見たらいいと思う。

今回はレイルズチュートリアルの1章から5章まで対応。

開発環境

AWS cloud9

railsでプロジェクトを新規作成したい

やったこと

ec2-user:~/environment $ rails new app

参考

gemとかbundlerとか
Bundlerの使い方

システムのgemを綺麗に保つためにこうすることもあるようです(今回はしていない)
新規Railsプロジェクトの作成手順まとめ

Gemfileのセットアップ

/app/Gemfire

source 'https://rubygems.org'

gem 'rails', '5.1.6'
gem 'puma', '3.9.1'
gem 'sass-rails', '5.0.6'
gem 'uglifier', '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks', '5.0.1'
gem 'jbuilder', '2.7.0'

group :development, :test do
  gem 'sqlite3', '1.3.13'
  gem 'byebug', '9.0.6', platform: :mri
end

group :development do
  gem 'web-console', '3.5.1'
  gem 'listen', '3.1.5'
  gem 'spring', '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest', '5.10.3'
  gem 'minitest-reporters', '1.1.14'
  gem 'guard', '2.13.0'
  gem 'guard-minitest', '2.4.4'
end

group :production do
  gem 'pg', '0.20.0'
end

# Windows環境ではtzinfo-dataというgemを含める必要があります
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

元のGemfireとの変更点

  • バージョンを明示的に
  • sqlite3 gemをproduction環境では使わないように(今回使うherokuのデータベースと競合しないようにするため)
  • testグループを作成(テスト用のオプションを設定)

Gemfileの更新

$ cd app/
$ bundle install --without production
  ・
  ・
  ・
  If you are updating multiple gems in your Gemfile at once, try passing them all to `bundle update`
$ bundle update
  ・
  ・
  ・
  Bundle updated!
  Gems in the group production were not installed.

ユーザー登録ページを作りたい

やったこと

新規ユーザー用のアクションをnewとして、コントローラの作成

$ rails generate controller Users new
  create app/controllers/users_controller.rb
    route get 'users/new'
  invoke erb
  create app/views/users
  create app/views/users/new.html.erb
  invoke test_unit
  create test/controllers/users_controller_test.rb
  invoke helper
  create app/helpers/users_helper.rb
  invoke test_unit
  invoke assets
  invoke coffee
  create app/assets/javascripts/users.coffee
  invoke scss
  create app/assets/stylesheets/users.scss

何が起こったか

  • Usersコントローラが作成された
  • newアクションへのルーティング設定された
  • newアクションのviewが作成された
  • Usersコントローラのhelperが作成された

重要なのはこの辺り。この時点でmodelは作成されていない。

動作確認をしたい

ここまでの設定がうまくいっているか動作確認をする。

やったこと

~/app $ rails server

上部ナビゲーションPreview>Preview Running Application>Pop Out Into New Window(新規タブで開く)
うまくいっていれば、この画面が表示される。

newアクションへのルーティングも確認する

新しいwindowで開いたアプリケーションのurlの末尾に/users/newを追加
例:https://~~.amazonaws.com/users/new
うまくいっていれば、この画面が表示される。

トップページを作りたい

やったこと

  • Usersコントローラにhomeアクションを作る
  • homeアクションのviewを作る
  • ルートを整理する

/app/controllers/users_controller.rb

class UsersController < ApplicationController
  def home
  end
  def new
  end
end

コマンドにてhome.html.erbファイルを作成

$ touch app/views/users/home.html.erb

識別のため中身を書く。

/app/views/users/home.html.erb

<h1>Users#home</h1>
<ul>
    <li><%= link_to "ユーザー登録",   signup_path %></li>
</ul>

newアクションのviewページもこうするといいかも

/app/views/users/new.html.erb

<h1>Users#new</h1>
<ul>
    <li><%= link_to "ホーム",   root_path %></li>
</ul>

先ほど作成したnewアクションも一緒にルート設定をする。

  • /users/homeをrootに設定
  • users/newのパスを/signupに設定

app/config/routes.rb

Rails.application.routes.draw do
  root 'users#home'
  get '/signup', to: 'users#new'
end

これで更新すれば、初期ページで
Users#homeの文字が、
/signupで
Users#newの文字が表示される。

最後に

これでレイルズチュートリアルの1章から5章までの大体の振り返りはできたはずだ。
testに関しては触れておらず、これからも触れるかはまだわからない。
ここからどんどんむ複雑になっていくので、一つ一つ理解できるようにしていきたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です