【Ruby on Rails】簡単なメモアプリの作り方を解説｜初心者がアプリ作成をしながらCRUD機能を学ぶのにおすすめ
開発環境
- Ruby:version 3.1.2
- Ruby on Rails:version 7.0.4
- Visual Studio Code:version 1.73.0
- OS:Windows10
Ruby on Railsでメモアプリの実装準備
新規アプリケーションの作成
まずはターミナルで以下のコマンドを打ち、新規アプリケーションの作成をします。
1rails new memo_app
続いて以下のコマンドを打ち、raialsサーバーを立ち上げて動作の確認をします。
1rails s
トップ画面の表示が出れば新規アプリケーションの作成は完了です。
エラーが出た場合
新規アプリケーションの作成した後、railsサーバーを立ち上げる際に以下のエラーが出た場合の対処法を解説します。
1C:/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
1# memo_app\Gemfile 2 3# Windows does not include zoneinfo files, so bundle the tzinfo-data gem 4- gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ] 5+ gem "tzinfo-data"
gemファイルの変更後に下記のコマンドを打ち、再度バンドルをインストールします。
bundle install
正常にバンドルがインストールされましたら、以下のコマンドを打ちrailsサーバーを立ち上げます。
rails s
トップ画面の表示が出れば新規アプリケーションの作成は完了です。
Ruby on Railsでメモアプリの実装手順
モデルとマイグレーションファイルの作成
以下のコマンドを打ち、モデルを作成します。
1rails g model Memo
続いてマイグレーションファイルの編集を行い、DBに反映するカラム名を追加します。
1# memo_app\db\migrate\20221126004426_create_memos.rb 2class CreateMemos < ActiveRecord::Migration[7.0] 3 def change 4 create_table :memos do |t| 5+ t.string :title 6+ t.text :description 7 t.timestamps 8 end 9 end 10end
続いて以下のコマンドを打ち、編集したマイグレーションファイルの内容をDBに反映します。
1rails db:migrate
マイグレートに成功した後はschemaファイルが作成されますが、下記のように反映されていれば成功です。
1# memo_app\db\schema.rb 2ActiveRecord::Schema[7.0].define(version: 2022_11_26_004426) do 3 create_table "memos", force: :cascade do |t| 4 t.string "title" 5 t.text "description" 6 t.datetime "created_at", null: false 7 t.datetime "updated_at", null: false 8 end 9end
コントローラーとビューの作成
以下のコマンドを打ち、コントローラーとビューを作成します。
1rails g controller Memos index
今回は一覧ページで全て完結するようにするため、コントローラーの名前を記述した後に生成したいビューファイルを指定することにより、コントローラーとビューを同時に作成してくれます。 コントローラーとビューが下記のように作成されれば成功です。 ▼コントローラー▼
1class MemosController < ApplicationController 2 def index 3 end 4end
▼ビュー▼
<h1>Memos#index</h1>
<p>Find me in app/views/memos/index.html.erb</p>
ルーティングの設定
ルーティングファイルを以下のように編集します。
1# memo_app\config\routes.rb 2Rails.application.routes.draw do 3+ root :to => 'memos#index' 4+ resources :memos, only: [:index, :update, :destroy, :create] 5end
補足ですが、生成されたルーティングを確認したい場合は、以下のコマンドを打つと確認することができます。
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
表示するindexアクションに加え「create,update,destroy」の処理を記述しておきます。
ビューの処理を記述する
続いて、ビューには以下のように記述します。
1# memo_app\app\views\memos\index.html.erb 2<div class="wrapper"> 3 <div class="container flex-start"> 4 <div class="col-box-1"> 5 <h2>メモ一覧</h2> 6 </div> 7 <div class="col-box-3"> 8 <%= form_with model: @memo_new, url: memos_path, local: true, method: :post do |f| %> 9 <div class="memo-header"> 10 <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %> 11 </div> 12 <div class="memo-center"> 13 <%= f.text_area :description, placeholder: "メモ", class: "form-box" %> 14 </div> 15 <div class="memo-footer"> 16 <%= f.submit "作成", class: "btn" %> 17 </div> 18 <% end %> 19 </div> 20 21 <% @memos.reverse.each do |memo| %> 22 <div class="col-box-3"> 23 <%= form_with model: memo, url: memo_path(memo.id), local: true, method: :patch do |f| %> 24 <div class="memo-header"> 25 <%= f.text_field :title, placeholder: "タイトル", class: "form-box" %> 26 </div> 27 <div class="memo-center"> 28 <%= f.text_area :description, placeholder: "メモ", class: "form-box" %> 29 </div> 30 <div class="memo-footer"> 31 <%= f.submit "更新", class: "btn" %> 32 </div> 33 <% end %> 34 <div class="memo-other"> 35 <%= button_to "削除", memo_path(memo.id), method: :delete, class: "btn" %> 36 </div> 37 </div> 38 <% end %> 39 </div> 40</div>
上記に加えて、ヘッダーのレイアウトも「application.html.erb」に記述しておきます。
1# memo_app\app\views\layouts\application.html.erb 2 3 <body> 4+ <div class="wrapper header-color"> 5+ <div class="container"> 6+ <h1>MemoApp</h1> 7+ </div> 8+ </div> 9 10 <%= yield %> 11 </body> 12</html>
CSSによるコーディングでデザインを調整
最後にデザインを調整するために、CSSは以下のように記述しています。 ※動画と異なる点は、22行目「font-size: 16px;」と45行目「width: 100%;」を付け加えています。
1# memo_app\app\assets\stylesheets\application.css 2 3 * { 4 padding: 0; 5 margin: 0; 6 box-sizing: border-box; 7 color: #696969; 8 font-size: 16px; 9 font-family: sans-serif; 10} 11 12.header-color { 13 background-color: #4169e1; 14} 15 16h1 { 17 font-size: 36px; 18 color: #ffffff; 19} 20 21h2 { 22 font-size: 24px; 23} 24 25.wrapper { 26 width: 100%; 27} 28 29.container { 30 margin: 0 auto; 31 width: 100%; 32 max-width: 1170px; 33} 34 35.col-box-1{ 36 width: 100%; 37 padding: 6px; 38} 39 40.col-box-2{ 41 width: 50%; 42 padding: 6px; 43} 44 45.col-box-3{ 46 width: 33.3%; 47 padding: 6px; 48} 49 50.col-box-4{ 51 width: 25%; 52 padding: 6px; 53} 54 55.flex-start { 56 display: flex; 57 flex-wrap: wrap; 58 justify-content: start; 59} 60 61.memo-header { 62 width: 100%; 63 padding: 6px; 64 min-height: 40px; 65 background-color: #ffd700; 66 border-radius: 6px 6px 0 0; 67} 68 69.memo-center { 70 width: 100%; 71 padding: 6px; 72 min-height: 100px; 73 background-color: #fffacd; 74} 75 76.memo-footer { 77 width: 100%; 78 padding: 6px; 79 background-color: #ffd700; 80 border-radius: 0 0 6px 6px; 81 text-align: center; 82} 83 84.memo-other { 85 width: 100%; 86 padding: 6px; 87 text-align: right; 88} 89 90.form-box { 91 background-color: transparent; 92 border: 1px solid #d3d3d3; 93 border-radius: 6px; 94 padding: 6px; 95 width: 100%; 96} 97 98textarea { 99 min-height: 80px; 100} 101 102.btn { 103 border: 1px solid #d3d3d3; 104 border-radius: 6px; 105 padding: 3px 12px; 106}
デザインは参考程度にコーディングしておりますが、自分の好きなデザインに挑戦してもらえればと思います。
おわりに
Ruby on Railsで簡単なメモアプリの実装を解説してきましたが、いかがだったでしょうか。 最初は基本であるCRUD機能でも難しいとは思いますが、まずはCRUD機能の実装をマスターできれば、様々なWebアプリケーションを作れるようになっていきます。 大規模アプリケーションもひとつひとつの機能を積み重ねて作られているため、是非、最初の一歩としてメモアプリに挑戦してみてください。