草野球の出欠確認Webアプリを作ろう！ part.1

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

##環境などメモ
・WSLのUbuntu（20.04.2 LTS (Focal Fossa)）
・Ruby on Rails（ruby 3.0.1p64 / Rails 6.1.3.1）
・PostgreSQL（psql (PostgreSQL) 12.6 (Ubuntu 12.6-0ubuntu0.20.04.1)）

##今回やったこと

###環境構築
####DB関連
以下の記事を参考にした。
Windows10のWSL(Ubuntu)にPostgreSQLをインストールしたときのメモ

####Rails環境構築
以下の記事を参考にした。
[Rails] Windows10 で WSL を使って Rails 環境を構築したときのメモ

※Yarnをインストールしないとエラーになったのでバージョンによっては注意が必要。
Rails6 開発時につまづきそうな webpacker, yarn 関係のエラーと解決方法

####Rails初期セットアップ
以下は前述の手順と被りもあるが一応書いておく。

$ bundle install
$ rails new SampleApp
$ bin/rails db:create
$ bin/rails db:migrate
$ bin/rails s

###機能作成
####Userモデルの作成

以下の記事を参考にした。
Rails「ユーザーのモデルを作成する」

####Userコントローラーの作成
以下の記事をコントローラー生成時に参考にした。
Rails generate の使い方とコントローラーやモデルの命名規則

$ rails g controller Users index show new create edit update delete

ルートファイルを編集した。

routes.rb

Rails.application.routes.draw do
  # ルート
  root "users#index"

  # Users
  resources :users
end

viewsにユーザー一覧を追加した。

users/index.html.erb

<h1>メンバーの一覧</h1>
<% if @users.empty? %>
  <div><%= "表示できるメンバーがいません。" %></div>
<% else %>
  <table align="center">
    <thead>
      <tr>
        <th>ユーザー名</th>
        <th>メールアドレス</th>
      </tr>
    </thead>
    <tbody>
      <% @users.each do |lst| %>
        <tr>
          <td><%= lst.name %></td>
          <td><%= lst.email %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
<% end %>

コントローラーのindexアクションにUserモデルの値を渡すよう編集する。

controllers/users_controller.rb

def index
  @users = User.all
end

※初回動作確認時にrails serverは再起動しておくといいかも（bycryptのbundleのタイミング次第ではエラーになる）

このあと、コンソール経由でユーザーを登録して動作確認した。

$ rails c
$ User.new(name:"admin",email:"[e-mail]",password:"administrator",password_confirmation:"administrator").save

テーブルのデザインが気に入らなかったので、Webから適当に探してきて試す（以下を参照）。
【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

↑こんなふうになった。（テーブルサイズは画面幅の7割）

今回はここまで。
次回の記事>>