忘備録とマイルストーン

WEBエンジニアを目指す20代男性の奮闘記

プログラミング初心者がWEBサービスを作ってみる―アプリ開発編③

アプリ開発編もパート③に突入しているが、相も変わらずしょうもないタイプミスが絶えない。が、致命的なやらかしがないのが幸いして、開発の方は極めて順調に進んでいる。だんだんRailsそのもののしくみやコーディングに対する興味も湧いてきて、『メタプログラミングRuby』や『リーダブルコード』なんかを購入して読み始めた。(まとめを順次記事にしていく予定)

 

 

試合を登録する

試合のデータを保存するのはmatchテーブル。これも現状ブラウザからの操作は必要としないので、用意するのはモデルと(一応)ビューだけになる。

 

M: Match

一連の作業にも慣れてきたが、DBを操作するマイグレーションにはとりわけ注意が必要だ。ミスが確認しにくいかつ修正しにくい*1ので、ここは丁寧に作業している。

M: Match作成のマイグレーションファイル(一部)

  create_table :matches do |t|
    t.references :home_team, foreign_key: {to_table: :teams}
    t.references :away_team, foreign_key: {to_table: :teams}
    t.datetime   :match_schedule
    t.integer    :home_team_score
    t.integer    :away_team_score

    t.timestamps
  end

 

V: matches/_matches

トップページにパーシャルとしてVを貼り付けるつもりなので、Cは現状不要。V: _matchesを作成する。

V: matches/ _matches

<%= match.home_team.team_name %>vs<%= match.away_team.team_name %>
<%= match.match_schedule.strftime("%y-%m-%d") %>
<%= match.home_team_score %>-<%= match.away_team_score %>
<%= "採点をするへのリンク" %>

最後にrails consoleでインスタンスを作成(日本vsカタール)してDBに保存。これでようやく次の工程に進めるぞ。

ここで実験的に、Viewファイルでモデルのインスタンスを直接指定して出力してみることを思いつく。直接指定してやるなら静的なページと同じようなもので、コントローラーを介さなくても問題ないはずだ。

V: toppages/index

<% match1 = Match.first %>
<%= render "matches/matches", match: match1 %>

無事表示に成功。MVCの構造も少しずつ理解できているのだろうか…

 

フォーメーションを登録する

特に書くこともないので割愛。いずれは画像データもここから表示できるようにしたい。(主要なフォーメーションのパターンを決定するのに相当時間を喰ったのは秘密)

 

出場選手情報を登録する

データベース図を見てもらえればわかるように、出場選手の情報は ①試合・フォーメーション情報に紐づけるlineups、②lineupsに紐付け選手個々の情報を担うlineup_players の2つに分けて管理している。(元々まとめていたものを正規化した)

 

①lineups

実装すべきことを整理しよう。出場選手情報のページが見られればいいので、コントローラーのアクションはshowだけ。することは至ってシンプル。

M: Lineup, R: lineups#show, C: lineups#show, V: lineups/show

あとはマイグレーションファイルをきちんと編集して、関連モデルMatch, Formationへの記述も忘れない。(いわゆる has_many :table名)そして日本代表のlineupsデータを作成してDBに保存しておく。

Vは②lineup_playersの項でまとめて編集してしまおう。

 

②lineup_players

②ではモデルだけを作成し、lineups/showにまとめて表示させてしまおう。コントローラーもビューも不要だ。

M: LineupPlayersのマイグレーションファイル(モデルの命名規則は要確認!)

    create_table :lineup_players do |t|
      t.references :lineup,          foreign_key: true
      t.references :player,          foreign_key: true
      t.integer    :position_detail, default: 0
      t.boolean    :sub_in,          default: false
      t.boolean    :sub_out,         default: false        
      t.integer    :goal
      t.integer    :card,            default: 0

      t.timestamps
    end

M: LineupPlayersのバリデーション*2

class LineupPlayer < ApplicationRecord
  belongs_to :lineup
  belongs_to :player
  
  enum card: {no_card: 0, yellow: 1, yellow2: 2, red: 3}
end

さらにカタール戦の日本代表メンバー23人の情報を作成してDBへ保存する。

①と②があわさったビューはこんな感じ。Viewは最後にまとめて整えるつもりだったが、さすがに見づらいのでテーブル形式にしておいた。

V: lineups/show

<div class="container">    
  <table class="table-condensed table-bordered">
    <thead>
      <tr>
        <th class="text-center">name</th>
        <th class="text-center">goal</th>
        <th class="text-center">card</th>
        <th class="text-center">in/out</th>
      </tr>
    </thead>
    <tbody>
      <% @lineup.lineup_players.each do |m| %>
        <tr>
          <td class="text-center"><%= m.player.player_name %></td>
          <td class="text-center"><% if m.goal %><%= m.goal %><% end %></td>
          <td class="text-center"><% unless m.card = 0 %><%= m.card %><% end %></td>
          <td class="text-center"><% if m.sub_in %><%= "in" %><% end %><% if m.sub_out %><%= "out" %><% end %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

 

次回予告

順調に進んだかに見えるアプリ開発。しかし次に待ち受けているのはRailsチュートリアルの門番ことログイン機能。かつて再挑戦を誓ったこの鬼門を突破することはできるのか。至難のアプリ開発編④に続く。 

((個人的には件のチュートリアル8・9章が一番の壁だと思うんだよなあ…))

*1:ミス1{to_table: :teams}の付け忘れ。外部キーのついたカラムの修正はとくに難儀する

*2:ミス2enumの表示名では_が必要、空白NG