はじめに

Railsの開発としてじゃんけんアプリを作ってみました

アプリケーションの作成

jankenアプリケーションを作成し、
データベースを作成しましょう

rails new janken -d postgresql
cd janken
rails db:create

コントローラの作成

トップページとゲームの流れを制御するページを作成するために、各々コントローラを作成します

rails g controller Top index
rails g controller Game start result

アプリケーションを起動しましょう

rails s

レイアウトの作成

Webページの雛形となる部分です。
app/view/layoutsディレクトリにapplication.html.erbというファイツ名に以下のように書き換えます

!!!
%html
  %head
    %title 
      = @document_title
    %meta{content: "width=device-width,initial-scale=1", name: "viewport"}
    %meta{content: "no-cache", name: "turbo-cache-control"}
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload"
    = stylesheet_link_tag "application", "data-turbo-track": "reload"
    = javascript_importmap_tags
  %body
    %header じゃんけん
    %main
      = yield
    %footer 
    =  turbo_frame_tag "modal"

titleは @document_title に代入されて値が変わるようになっています。

yieldはwebページの本体を生み出すものです。

これによって、このファイルの各ページの共通の「外枠」として使用できるようになりました。

スタイルシートの適応

header, footer {
  color: #fff;
  background-color: #000;
  padding: 5px;
  text-align: center;
 }

 body{
  text-align: center;
 }

 main{
  margin: 10px;
  padding: 40px;
  border: solid 2px #000;
  text-align: center;
  font-size: 120%;
 }

トップページの作成

スタートページ作成のために、
app/views/top/index.html.haml(erb)を開き修正します

- @document_title = 'じゃんけん'
%p
  = link_to 'ゲームスタート', controller: :game, action: :start

先程の @document_titleに代入する値が「じゃんけんゲーム」であることと、

Gameコントローラのstartアクションへのハイパーリンクを作成しています。

スタートページの作成

スタートページ作成のために、
app/views/game/start.html.haml(erb)を開き修正します

- @document_title = 'ゲームスタート'
- hands = %w(グー チョキ パー)

%p 何を出しますか
%div 
  - hands.each_with_index do |value, key|
    = link_to value, hand: key, action: :result

%wは配列を作成するためのrubyの記法であり、

hands.each_with_indexはvalueにインデックスをkeyに毎回代入しながら、doからendまで繰り返すという構文です。

handパラメータにはキーである「0, 1, 2」がはいり、actionパラメータにはresultという文字列を指定してます。

resultアクションの作成

resultアクション作成のために、
app/controllers/game_controller.rbを開き修正します

class GameController < ApplicationController
  def start
  end

  def result
    @player = params[:hand].to_i
    @computer = rand(3)
    case @computer - @player
      when 0
        @result = 'あいこ'
      when 1, -2
        @result = '勝ち'
      else
        @result = '負け'
      end
  end
end

handパラメータの値は、params[:hand]で取得できます。値は文字列なので、整数変換が必要です。(.to_i)

@computerには0, 1, 2のいずれかの整数がランダムにセットされます。（rand(3)）

結果表示

結果を表すページ作成のために、
app/views/game/result.html.haml(erb)を開き修正します

- @dovument_title = '結果'
%p
  = @result

%p 
  = link_to 'トップページ', root_path 
  = link_to 'もう一回', action: :start

@resultには勝ち負けを知らせるメッセージがあるので、そのまま表示します。

root_pathとは'/'という文字列を返すという意味です。（今回でいうとトップページ）

これで完成しました！！

今回はここまでです。

[Rails]Railsでじゃんけんアプリ作ってみた