【Ruby on Rails】簡単なメモアプリの作り方を解説｜初心者がアプリ作成をしながらCRUD機能を学ぶのにおすすめ

動画で解説を見る

1 開発環境
2 Ruby on Railsでメモアプリの実装準備
- 2.1 新規アプリケーションの作成
- 2.2 エラーが出た場合
3 Ruby on Railsでメモアプリの実装手順
4 おわりに

開発環境

Ruby:version 3.1.2
Ruby on Rails:version 7.0.4
Visual Studio Code:version 1.73.0
OS:Windows10

Ruby on Railsでメモアプリの実装準備

新規アプリケーションの作成

まずはターミナルで以下のコマンドを打ち、新規アプリケーションの作成をします。

rails new memo_app

1	rails new memo_app

続いて以下のコマンドを打ち、raialsサーバーを立ち上げて動作の確認をします。

rails s

rails s

トップ画面の表示が出れば新規アプリケーションの作成は完了です。

エラーが出た場合

新規アプリケーションの作成した後、railsサーバーを立ち上げる際に以下のエラーが出た場合の対処法を解説します。

C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/tzinfo-2.0.5/lib/tzinfo/data_source.rb:159:in `rescue in create_default_data_source': tzinfo-data is not present. Please add gem 'tzinfo-data' to your Gemfile and run bundle install (TZInfo::DataSourceNotFound)

1	C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/tzinfo-2.0.5/lib/tzinfo/data_source.rb:159:in `rescue in create_default_data_source': tzinfo-data is not present. Please add gem 'tzinfo-data' to your Gemfile and run bundle install (TZInfo::DataSourceNotFound)

上記のエラーはGitHubのtzinfo-dataの作者のコメントに解決方法が記載されています。
https://github.com/tzinfo/tzinfo-data/issues/12#issuecomment-279554001

上記を解説されているQiitaの記事に解決方法は4つありますが、私の開発環境のOSはWindows10なため、以下を実行してエラーを解消しています。
https://qiita.com/tatama/items/3f0f5e42cb5f75b53817

▼変更前▼

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]

▼変更後▼

source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby "3.1.2"

# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"

# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"

# Use sqlite3 as the database for Active Record
gem "sqlite3", "~> 1.4"

# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"

# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"

# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"

# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"

# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"

# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data"

# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false

# Use Sass to process CSS
# gem "sassc-rails"

# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"

group :development, :test do
  # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
  gem "debug", platforms: %i[ mri mingw x64_mingw ]
end

group :development do
  # Use console on exceptions pages [https://github.com/rails/web-console]
  gem "web-console"

  # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
  # gem "rack-mini-profiler"

  # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
  # gem "spring"
end

group :test do
  # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
  gem "capybara"
  gem "selenium-webdriver"
  gem "webdrivers"
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem

gem "tzinfo-data"

gemファイルの変更後に下記のコマンドを打ち、再度バンドルをインストールします。

bundle install

1	bundle install

正常にバンドルがインストールされましたら、以下のコマンドを打ちrailsサーバーを立ち上げます。

rails s

rails s

トップ画面の表示が出れば新規アプリケーションの作成は完了です。

Ruby on Railsでメモアプリの実装手順

モデルとマイグレーションファイルの作成

以下のコマンドを打ち、モデルを作成します。

rails g model Memo

1	rails g model Memo

続いてマイグレーションファイルの編集を行い、DBに反映するカラム名を追加します。

class CreateMemos < ActiveRecord::Migration[7.0]
  def change
    create_table :memos do |t|
      t.string :title
      t.text :description
      t.timestamps
    end
  end
end

class CreateMemos < ActiveRecord::Migration[7.0]

def change

create_table :memos do |t|

t.string :title

t.text :description

t.timestamps

end

続いて以下のコマンドを打ち、編集したマイグレーションファイルの内容をDBに反映します。

rails db:migrate

1	rails db:migrate

マイグレートに成功した後はschemaファイルが作成されますが、下記のように反映されていれば成功です。

ActiveRecord::Schema[7.0].define(version: 2022_11_26_004426) do
  create_table "memos", force: :cascade do |t|
    t.string "title"
    t.text "description"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
end

ActiveRecord::Schema[7.0].define(version: 2022_11_26_004426) do

create_table "memos", force: :cascade do |t|

t.string "title"

t.text "description"

t.datetime "created_at", null: false

t.datetime "updated_at", null: false

end

コントローラーとビューの作成

以下のコマンドを打ち、コントローラーとビューを作成します。

rails g controller Memos index

1	rails g controller Memos index

今回は一覧ページで全て完結するようにするため、コントローラーの名前を記述した後に生成したいビューファイルを指定することにより、コントローラーとビューを同時に作成してくれます。

コントローラーとビューが下記のように作成されれば成功です。

▼コントローラー▼

class MemosController < ApplicationController
  def index
  end
end

class MemosController < ApplicationController

def index

end

▼ビュー▼

<h1>Memos#index</h1>
<p>Find me in app/views/memos/index.html.erb</p>

1 2	<h1>Memos#index</h1> <p>Find me in app/views/memos/index.html.erb</p>

ルーティングの設定

ルーティングファイルを以下のように編集します。

Rails.application.routes.draw do
  root :to => 'memos#index'
  resources :memos, only: [:index, :update, :destroy, :create]
end

Rails.application.routes.draw do

root :to => 'memos#index'

resources :memos, only: [:index, :update, :destroy, :create]

end

補足ですが、生成されたルーティングを確認したい場合は、以下のコマンドを打つと確認することができます。

rails routes

1	rails routes

MVCアーキテクチャでは名前付きルートを使用することが多いため、ルーティングの確認はしておきましょう。

コントローラーの処理を記述する

続いて、コントローラーには以下のように記述します。

class MemosController < ApplicationController
  def index
    @memo_new = Memo.new
    @memos = Memo.all
  end

  def create
    @memo_new = Memo.new(memos_params)
    @memo_new.save
    redirect_to root_path
  end

  def update
    @memo = Memo.find(params[:id])
    @memo.update(memos_params)
    redirect_to root_path
  end

  def destroy
    @memo = Memo.find(params[:id])
    @memo.destroy
    redirect_to root_path
  end

  private

  def memos_params
    params.require(:memo).permit(:title, :description)
  end
end

class MemosController < ApplicationController

def index

@memo_new = Memo.new

@memos = Memo.all

end

def create

@memo_new = Memo.new(memos_params)

@memo_new.save

redirect_to root_path

end

def update

@memo = Memo.find(params[:id])

@memo.update(memos_params)

redirect_to root_path

end

def destroy

@memo = Memo.find(params[:id])

@memo.destroy

redirect_to root_path

end

private

def memos_params

params.require(:memo).permit(:title, :description)

end

表示するindexアクションに加え「create,update,destroy」の処理を記述しておきます。

ビューの処理を記述する

続いて、ビューには以下のように記述します。

<div class="wrapper">
    <div class="container flex-start">
        <div class="col-box-1">
            <h2>メモ一覧</h2>
        </div>
        <div class="col-box-3">
            <%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>
                <div class="memo-header">
                    <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                </div>
                <div class="memo-center">
                    <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                </div>
                <div class="memo-footer">
                    <%= f.submit "作成", class: "btn" %>
                </div>
            <% end %>
        </div>

        <% @memos.reverse.each do |memo| %>
            <div class="col-box-3">
                <%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>
                    <div class="memo-header">
                        <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>
                    </div>
                    <div class="memo-center">
                        <%= f.text_area :description, placeholder: "メモ", class: "form-box" %>
                    </div>
                    <div class="memo-footer">
                        <%= f.submit "更新", class: "btn" %>
                    </div>
                <% end %>
                <div class="memo-other">
                    <%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>
                </div>
            </div>
        <% end %>
    </div>
</div>

</div>

<%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "作成", class: "btn" %>

</div>

<% end %>

</div>

<% @memos.reverse.each do |memo| %>

<%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %>

<%= f.text_field :title, placeholder: "タイトル", class: "form-box" %>

</div>

<%= f.text_area :description, placeholder: "メモ", class: "form-box" %>

</div>

<%= f.submit "更新", class: "btn" %>

</div>

<% end %>

<%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %>

</div>

<% end %>

</div>

上記に加えて、ヘッダーのレイアウトも「application.html.erb」に記述しておきます。

<!DOCTYPE html>
<html>
  <head>
    <title>MemoApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>

  <body>
    <div class="wrapper header-color">
      <div class="container">
        <h1>MemoApp</h1>
      </div>
    </div>

    <%= yield %>
  </body>
</html>

<body>

<h1>MemoApp</h1>

</div>

<%= yield %>

</body>

</html>

CSSによるコーディングでデザインを調整

最後にデザインを調整するために、CSSは以下のように記述しています。

※動画と異なる点は、22行目「font-size: 16px;」と45行目「width: 100%;」を付け加えています。

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */

 * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: #696969;
    font-size: 16px;
    font-family: sans-serif;
}

.header-color {
    background-color: #4169e1;
}

h1 {
    font-size: 36px;
    color: #ffffff;
}

h2 {
    font-size: 24px;
}

.wrapper {
    width: 100%;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}

.col-box-1{
    width: 100%;
    padding: 6px;
}

.col-box-2{
    width: 50%;
    padding: 6px;
}

.col-box-3{
    width: 33.3%;
    padding: 6px;
}

.col-box-4{
    width: 25%;
    padding: 6px;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.memo-header {
    width: 100%;
    padding: 6px;
    min-height: 40px;
    background-color: #ffd700;
    border-radius: 6px 6px 0 0;
}

.memo-center {
    width: 100%;
    padding: 6px;
    min-height: 100px;
    background-color: #fffacd;
}

.memo-footer {
    width: 100%;
    padding: 6px;
    background-color: #ffd700;
    border-radius: 0 0 6px 6px;
    text-align: center;
}

.memo-other {
    width: 100%;
    padding: 6px;
    text-align: right;
}

.form-box {
    background-color: transparent;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 6px;
    width: 100%;
}

textarea {
    min-height: 80px;
}

.btn {
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 3px 12px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

* {

padding: 0;

margin: 0;

box-sizing: border-box;

color: #696969;

font-size: 16px;

font-family: sans-serif;

}

.header-color {

background-color: #4169e1;

}

h1 {

font-size: 36px;

color: #ffffff;

}

h2 {

font-size: 24px;

}

.wrapper {

width: 100%;

}

.container {

margin: 0 auto;

width: 100%;

max-width: 1170px;

}

.col-box-1{

width: 100%;

padding: 6px;

}

.col-box-2{

width: 50%;

padding: 6px;

}

.col-box-3{

width: 33.3%;

padding: 6px;

}

.col-box-4{

width: 25%;

padding: 6px;

}

.flex-start {

display: flex;

flex-wrap: wrap;

justify-content: start;

}

.memo-header {

width: 100%;

padding: 6px;

min-height: 40px;

background-color: #ffd700;

border-radius: 6px 6px 0 0;

}

.memo-center {

width: 100%;

padding: 6px;

min-height: 100px;

background-color: #fffacd;

}

.memo-footer {

width: 100%;

padding: 6px;

background-color: #ffd700;

border-radius: 0 0 6px 6px;

text-align: center;

}

.memo-other {

width: 100%;

padding: 6px;

text-align: right;

}

.form-box {

background-color: transparent;

border: 1px solid #d3d3d3;

border-radius: 6px;

padding: 6px;

width: 100%;

}

textarea {

min-height: 80px;

}

.btn {

border: 1px solid #d3d3d3;

border-radius: 6px;

padding: 3px 12px;

}

デザインは参考程度にコーディングしておりますが、自分の好きなデザインに挑戦してもらえればと思います。

おわりに

Ruby on Railsで簡単なメモアプリの実装を解説してきましたが、いかがだったでしょうか。

最初は基本であるCRUD機能でも難しいとは思いますが、まずはCRUD機能の実装をマスターできれば、様々なWebアプリケーションを作れるようになっていきます。

大規模アプリケーションもひとつひとつの機能を積み重ねて作られているため、是非、最初の一歩としてメモアプリに挑戦してみてください。