【Rails】簡単！楽しい！お寿司のミニアプリを作ってみました！

はじめに

こんにちは、あっぴー(@super-appy)と申します。
プログラミングスクールに通ってRuby on Railsを学習しています。
初学者ですが、宜しくお願い致します。

記事の概要

先日の記事でチラッとお話しした、ミニアプリについてまとめました。

アプリの名前は.......寿司るーれっと🍣！
回転寿司で何を食べようか迷っている全ての人に捧げたいアプリです。

とってもシンプルな構成のアプリなので、ぜひお手元でも試してみてください！

完成イメージ

使用技術

カテゴリ	技術
フロントエンド	CSS
バックエンド	Ruby 3.2.2 Rails 7.0.4
データベース	PostgreSQL
環境構築	ローカル
インフラ	render

renderにデプロイする関係で、データベースにPostgreSQLを使用しましたが、
ローカルで動かすだけならデフォルトのSQLiteで構いません！

各ファイルについて

全体構成

sushisのデータベースに入れたデータを
sushi_controllerのshowアクションでランダムに取得し表示しています

sushiのテーブル

XXXXXXXXXXXX_create_sushis.rb

class CreateSushis < ActiveRecord::Migration[7.0]
  def change
    create_table :sushis do |t|
      t.string :name, presence: true, uniqueness: true
      t.string :comment
      t.string :sushi_image

      t.timestamps
    end
  end
end

• 寿司の名前(重複禁止)
• 寿司について一言
• 寿司の画像

Model

sushi.rb

class Sushi < ApplicationRecord
  validates :name, presence: true
end

寿司の名前は必ず必要です。

View

• トップページ

top.html.erb

<div class= 'container'>
  <div class = 'child'>
    <%= image_tag 'nigirizushi_moriawase.png', width: '200', height: '200' %>
    <br>
    <h1>寿司るーれっと</h1>
    <br>
    <div>
      <%= link_to '回してみる', sushi_path, class: "btn" %>
    </div>
  </div>
</div>

• 寿司の表示用

sushis/show.html.erb

<div class = 'container'>
  <div class = 'child'>
    <% if @sushi.present? %>
      <h2><%= @sushi.name %></h2>
        <%= image_tag "#{@sushi.sushi_image}.png", width: '200', height: '200'  %>
      <div>
      <br>
        <%= @sushi.comment%>
      </div>
      <br><br>
      <div>
        <%= link_to sushi_path do %>
          <%= image_tag 'mottotaberu.png' %>
        <% end %>
        <%= link_to "https://twitter.com/intent/tweet?text=#{@sushi.name} にしようかな！｜寿司るーれっと &url=https://sushi-roulette.onrender.com" do %>
          <%= image_tag 'sharesuru.png' %>
        <% end %>
      </div>
    <% else %>
      <h2>寿司情報が見つかりません</h2>
    <% end %>
  </div>
</div>

Controller

sushis_controller

class SushisController < ApplicationController
  before_action :set_sushi, only: [:show]

  def show; end

  private

  def set_sushi
    @sushi = Sushi.order("RANDOM()").first
  end
end

その他

あとはimagesにお寿司の画像と、データベースに好きなネタを登録していくのみです！
筆者はcsvにデータをまとめていたので、こちらの方法で登録しました。

参考

完成！！

あなただけの寿司るーれっとは完成しましたか？

寿司だけでなく、果物とか焼き肉とかでも楽しめそうですね！

おわりに

簡単なアプリですが、初めてのアプリなのでこうして記事にできてよかったです！
もっと凝ったアプリが作れるように頑張ります

Github