RailsでTodoアプリを作ってみよう

kenpapa

2021年12月18日 12:14

RubyにはRailsというWebアプリケーション開発のためのフレームワークがあります。

非常に人気のあるフレームワークなので、興味のある方もいらっしゃると思います。

そこで、本記事ではRailsで簡単なTodoアプリを一から作成する手順を紹介しようと思います。

Railsでのアプリ開発がどのようなものかをざっと理解していただければと思います。

今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。

Railsでアプリ開発を行う上で知っておいていただきたいことは、RailsはMVC （model-view-controller）というアーキテクチャパターンを採用しているという点です。

まずは下図を見てください。

上図はRailsというWebフレームワークの学習教材である「Railsチュートリアル」の中の図で、MVCアーキテクチャパターンを採用しているRailsでどのような流れで処理が進められているかを示している図です。

下記に該当箇所のRailsチュートリアルのリンクを貼っておきます。

図に登場しているModel、View、Controller、routerの４つをそれぞれ作成しながらアプリ開発を行っていくことになります。

実行環境

Railsのインストール方法ですが、ネット上で「rails インストール」で検索するといろいろな記事が見つかります。

私が普段利用しているのは「GO RAILS」というサイトで、そのサイトで紹介されている手順でRubyとRailsのインストールを行っています。

下記にリンクを貼っておきます。

本記事ではLinux環境にRailsが既にインストールされている状態から始めることにします。

実行手順

大きな流れは次の通りです。

１．プロジェクトの作成
２．Modelの作成
３．Controllerの作成
４．Viewの作成
５．routerの作成
６．実行

１．プロジェクトの作成

「rails new mytodo」を実行します。

mytodoという名前のプロジェクトが自動で作成され、プロジェクトの中には下図のようにフォルダやファイルが存在しています。

Railsでアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。

２．Modelの作成

「rails g model Todo text:string」を実行します。

「rake db:migrate」を実行します。

データベース上にいろいろなテーブルが作成されました。

３．Controllerの作成

「rails g controller Todos」を実行します。

app/controllers配下の「todos_controller.rb」を下記のように変更します。

todos_controller.rb

class TodosController < ApplicationController
 def index
   @todos = Todo.all
 end
   
 def addTodo
   todo = Todo.new(todo_params)
   todo.save
   redirect_to '/todos' 
 end
   
 def deleteTodo
   todo = Todo.find(params[:id])
   todo.destroy
   redirect_to '/todos'
 end
   
 private
   def todo_params
     params.permit(:text)
   end
end

４．Viewの作成

app/views/todos配下にindex.html.erbを作成して下記のコードを入力します。

index.html.erb

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My Todo</title>
</head>
<body>
 <h3>My Todo</h3>
 <form action="/todos" method="POST">
   <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
   <input name="text" placeholder="Input here...">
   <button type="submit">ADD</button>
 </form>

 <h5>Todo List</h5>
 <ul>
   <% @todos.each do |todo| %>
   <li>
     <%= todo.text %>
     <form action="/todos/<%= todo.id %>"
           style="display: inline;" 
           method="POST">
       <input name="authenticity_token" value="<%= form_authenticity_token %>" type="hidden">
       <input name="_method" type="hidden" value="DELETE">
       <button type="submit">DEL</button>
     </form>
   </li>
   <% end %>
 </ul>
</body>
</html>

５．routerの作成

config配下の「routes.rb」を下記のように変更します。

routes.rb

Rails.application.routes.draw do
 get '', to: 'todos#index'
 get 'todos', to: 'todos#index'
 post 'todos', to: 'todos#addTodo'
 delete 'todos/:id', to: 'todos#deleteTodo'
end

６．実行

「rails s」を実行

ブラウザで「http://127.0.0.1:3000」を開くとアプリが起動します。

完成後のプロジェクト構成

完成後のプロジェクト構成は下図のとおりです。

実行手順で登場したファイルを赤線で囲っています。

上図の続きです。

学習教材の紹介

上記では簡単なTodoアプリを一から作成する手順を紹介しましたが、Railsでのアプリ開発のイメージを掴んでいただけたのではないでしょうか。

Railsに興味を持たれてRailsの学習を始めてみようと思われた方もいらっしゃると思いますので、Railsの学習教材について少し紹介しようと思います。

Railsの学習教材といえばRailsチュートリアルです。

本格的なアプリを作成しながらRailsというフレームワークを使ったWeb開発方法について学ぶことができる教材です。

下記にリンクを貼っておきます。

Railsチュートリアルに関しては以前下記の記事でRailsチュートリアルのアプリの動かし方を紹介しましたので、興味のある方はご確認ください。

チートシートの紹介

Railsにはたくさんのコマンドがあって、覚えるのが大変ですが、そんなときに便利なのがチートシートです。

例えば「rails cheatsheet」で検索するといろんなチートシートが見つかりますので、いろいろとチェックされてはいかがでしょう。

例えば下記のようなチートシートが見つかります。