フロントエンドエンジニアがスキルアップ目指してRuby on Railsを勉強します!とりあえずなんか作ってみる編

このエントリーをはてなブックマークに追加

フロントエンドエンジニアがスキルアップ目指してRuby on Railsを勉強します!とりあえずなんか作ってみる編

自分のスキルアップ企画&備忘録。前回は環境構築編だったので今回はとりあえずなんか作ってみます。ユーザー画面とユーザー一覧ページを作ってみます。

Ads

とりあえずなんか作ってみる

環境構築しただけで何にもRubyもRailsもわかっていない状態です。
とりあえずいい感じのチュートリアルないかなーと探すところから。

小学生でもわかるRuby on Rails入門 | OpenBook

うん、ここが良さそう。小学生でもわかるならアホな俺でもできそう。ってことでここのチュートリアルをやってみよう!
ただ、このまんま同じことやっても面白くないからMySQLと繋げるようにしてみようかなと思います。

僕の記事では若干省略している部分もあるので、初めてWEBサービス作るよーとか、プログラミングにあまり精通していないかたは上記サイトで補足してくださいね。

環境

サーバOS: Mac OS X
Ruby 2.3.1
Rails 5.0.0.1

やってみる

自動でRailsアプリの型となるファイルがすべて自動で生成されます。

rails new app
- Gemfile
- app
    |- assets
  |- controllers
  |- helpers
  |- models
  |- views
- config
  |- routes.rb
- db

諸々のディレクトリ構成とか、Gemfileとか、.gitignoreとか自動でできてるー!!すげー!デザイナーのままだったらずっと知らないまんまだったかも。

とりあえず適当にデータベースにあるuser情報を取ってきて一覧で表示と名前をクリックしたらそのユーザーの詳細ページに遷移するっていうよくある仕組みを作ってみようかなと思います。

まずuser/indexuser/showのページとそれに関わるコントローラーを作ります。

rails g controller users index show

これも自動!!

app/controllers/users_controller.rb
app/views/users/index.html.erb
app/views/users/show.html.erb

以上のファイルができているはずです。

ブラウザで確認

rails s

localhost:3000/users/indexlocalhost:3000/users/showを表示してみると適当な文言が入ってますね。

ビューをいじってみる

詳細ページからいじっていきます。

app/views/users/show.html.erbに以下のコードを描いてみる。

<h1><%= @user[:name] %></h1>
<p><%= @user[:username] %></p>
<ul>
  <li>Location : <%= @user[:location] %></li>
  <li>About    : <%= @user[:about] %></li>
</ul>

Error

案の定エラー

これはすなわち@userから情報を引っ張ろうとしているけど、@userに情報が入っていないということ。
それもそのはずで、まだ@userという変数を定義していませんでした。
次に、コントローラーで@userに情報を埋め込まないといけません。

まーそうだよねってことで

app/controllers/users_controller.rbを開くとこんな感じなので

class UsersController < ApplicationController
  def index
  end

  def show
  end
end
def show
end

の部分を修正。@userの情報を静的だけど作ってみます。

def show
  @user = Hash.new
  @user[:name] = 'Shohei Aoki'
  @user[:username] = 'moyahima'
  @user[:location] = 'Tottori, Japan'
  @user[:about] = 'Nice to meet you.'
end

http://0.0.0.0:3000/users/showで確認。静的に表示できるようになりました。

でも、基本的にユーザーの詳細ページだったら

/users/show/hogeとか/users/show/fugaとかで出し分けしますよね。次のルーティングの役割でそのへんを実装します。

ルーティングの役割

ユーザーがURLにアクセス ⇒ ルーティングが仕分け ⇒ コントローラーが値を入れる ⇒ ビューがコントローラーから渡された値を表示

config/routes.rb

Rails.application.routes.draw do
  get 'users/index'

  get "users/show"

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

これを修正

Rails.application.routes.draw do
  get 'users/index'

   get "users/show/:username" => "users#show"

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

:usernameの部分がusenameによってコロコロ変わるようになります。

=> "users#show"はusersコントローラーのshowにいけ、という命令

http://0.0.0.0:3000/users/show/ryooopan

これでとりあえずryooopanは表示されますが、他はできていないですね。

パラメータを受け取る

ここで、:usernameはWebページを見る人がRailsに送っている情報です。
この情報のことを「パラメーター」と言います。
そして、実はこのパラメーターをコントローラーで受け取ることができます。

app/controllers/users_controller.rbの修正

@user = Hash.new
  if params[:username] == 'ryooopan'
    @user[:name] = 'Ryo Suzuki'
    @user[:username] = 'ryooopan'
    @user[:location] = 'Kanagawa, Japan'
    @user[:about] = 'Hello, I am Ryo.'
  elsif params[:username] == 'moyahima'
    @user[:name] = 'Shohei Aoki'
    @user[:username] = 'moyahima'
    @user[:location] = 'Tottori, Japan'
    @user[:about] = 'Nice to meet you.'
  end

とりあえずこれでryooopanmoyahimaはブラウザで確認できる状態ですね。

これをデータベースからユーザー情報を受け取って出しわけできればいい感じですよね。

MySQLの設定

sqlite3を使ってますね。今回はMySQLでやってみようかなと思います。

違いについては

【DBまとめ】MySQLからPostgreSQL,SQLiteまで - Qiita

こちらが参考になるかなと。

mysql2のインストール

事前にmysql2をインストールしておく必要あります。

まずはGemfile追記

gem 'mysql2'
bundle install

これでインストールできるはずができない・・・
よくわかっていないけどrbenvがある場所に対して権限がないみたい。

インストールできなかった場合は以下を試してみてください。

アカウントを調べる

$ whoami

権限付与

sudo chown -R #アカウント /#権限がないって言われたパス
BUNDLE_BUILD__MYSQL2: "--with-mysql-lib=/usr/local/Cellar/mysql/5.7.15/lib --with-mysql-dir=/usr/local/Cellar/mysql/5.7.15
  --with-mysql-config=/usr/local/Cellar/mysql/5.7.15/bin/mysql_config --with-mysql-include=/usr/local/Cellar/mysql/5.7.15/include/mysql"

5.7.15の部分はMySQLのバージョンを調べて入れる

RailsプロジェクトでMySQLがbundle installできなかった - Qiita

自分はこれでなんとかインストールできました。

Rails用のMySQLユーザを作成

MySQLにログイン

mysql -u root -p

ユーザー作成

CREATE USER 'rails'@'localhost' IDENTIFIED BY 'hoge';

権限付与

GRANT ALL PRIVILEGES ON *.* TO 'rails'@'localhost';

データベース設定ファイル修正

/tmp/mysql.sockがないよって怒られるのであらかじめsoketのパスを調べておくといいです。

mysql_config --socket

自分は/tmp/mysql.sockにあったのでsoketにそれを書いておく

config/database.ymlを修正

MySQL使っているのにSQLite version 3.xとかになっているからこの辺も本当なら修正した方がいいんでしょうね。
今回はめんどくさいから省略。

# SQLite version 3.x
#   gem install sqlite3
#
#   Ensure the SQLite 3 gem is defined in your Gemfile
#   gem 'sqlite3'
#
default: &default
  adapter: mysql2
  encoding: utf8
  database: Rails_development
  pool: 5
  username: rails
  password: hoge
  socket: /tmp/mysql.sock

development:
  adapter: mysql2
  encoding: utf8
  database: Rails_development
  pool: 5
  username: rails
  password: hoge
  socket: /tmp/mysql.sock

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  adapter: mysql2
  encoding: utf8
  database: Rails_test
  pool: 5
  username: rails
  password: hoge
  socket: /tmp/mysql.sock

production:
  adapter: mysql2
  encoding: utf8
  database: Rails_production
  pool: 5
  username: rails
  password: hoge
  socket: /tmp/mysql.sock

Railsが使用するデータベース、テーブルを作成

bundle exec rake db:create

モデルを作る

rails g model user name:string username:string location:string about:text

マイグレーション実行

注 migrationという名の通り、移住をしやすくするためのようなイメージです。 移住するときに家を立てなければなりませんが、家の設計図さえあれば、いくらでも同じ家を立てることができます。 その家の設計図がmigration fileです。しかし、このmigration fileだけでは、住めません。 家をたてるために、その設計図から家を実際に建てなければなりません。それがmigrateです。

bundle exec rake db:migrate

データベースの中にデータを入れる

とりあえずデータベースにデータを入れるのでdb/seeds.rbを編集します。

本来であれば登録画面があってそのデータがデータベースに入るようにしますね。ただ、まだ登録画面作っていないので今回はデータを作ってデータベースに流し込みます。

@user = User.new
@user.name = 'Ryo Suzuki'
@user.username = 'ryooopan'
@user.location = 'Kanagawa, Japan'
@user.about = 'Hello, I am Ryo. I am from database!'
@user.save

@user = User.new
@user.name = 'Shohei Aoki'
@user.username = 'moyahima'
@user.location = 'Tottori, Japan'
@user.about = 'Nice to meet you. I am from database!'
@user.save
rake db:seed
rails s

ブラウザで確認!これでパラメータを取ってきて/users/show/ryooopan/users/show/moyahimaそれぞれ見れるようになっているはず。
ユーザー詳細はできましたね。

一覧の表示

次にユーザー一覧を/users/indexに表示させます。

app/controllers/users_controller.rbを修正します。

class UsersController < ApplicationController
  def index
    @users = User.all
  end

  def show
    @user = User.find_by(:username => params[:username])
  end
end

index.html.erbにユーザーそれぞれのusernameの表示とリンク先を記述。

<% @users.each do |user| %>
  <p>
    <a href="/users/show/<%= user.username %>"><%= user.username %></a>
  </p>
<% end %>

これで確認をします。一覧からそれぞれのユーザーのページに入れますね。これで一覧、詳細までのよくあるページ構成はできました。なんとなくRailsでページ表示まではわかってきた気がします。

サインアップ画面、ログイン、ログアウト、編集画面があればWEBアプリっぽいけど今のままだとデータが色々足りないですね。次回その辺やりたいけど今回のソースコードは使わないかもです。

一旦何かを作ってみるという意味ではOKかな。

 作ってて思ったこと

いちいちrbenvでrubyのバージョン確認してごにょごにょしないといけないのがめんどくさい。
なんかいい方法ないものか

参考

Ruby on RailsでMySQLを使用する際に必要な作業手順

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ