![見出し画像](https://assets.st-note.com/production/uploads/images/67956966/rectangle_large_type_2_e1fcc1ca3a0d6d8af75b6e17d0c5ac1c.png?width=1200)
RailsでTodoアプリを作ってみよう
RubyにはRailsというWebアプリケーション開発のためのフレームワークがあります。
非常に人気のあるフレームワークなので、興味のある方もいらっしゃると思います。
そこで、本記事ではRailsで簡単なTodoアプリを一から作成する手順を紹介しようと思います。
Railsでのアプリ開発がどのようなものかをざっと理解していただければと思います。
今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。
Railsでアプリ開発を行う上で知っておいていただきたいことは、RailsはMVC (model-view-controller)というアーキテクチャパターンを採用しているという点です。
まずは下図を見てください。
上図はRailsというWebフレームワークの学習教材である「Railsチュートリアル」の中の図で、MVCアーキテクチャパターンを採用しているRailsでどのような流れで処理が進められているかを示している図です。
下記に該当箇所のRailsチュートリアルのリンクを貼っておきます。
図に登場しているModel、View、Controller、routerの4つをそれぞれ作成しながらアプリ開発を行っていくことになります。
実行環境
Railsのインストール方法ですが、ネット上で「rails インストール」で検索するといろいろな記事が見つかります。
私が普段利用しているのは「GO RAILS」というサイトで、そのサイトで紹介されている手順でRubyとRailsのインストールを行っています。
下記にリンクを貼っておきます。
本記事ではLinux環境にRailsが既にインストールされている状態から始めることにします。
実行手順
大きな流れは次の通りです。
1.プロジェクトの作成
2.Modelの作成
3.Controllerの作成
4.Viewの作成
5.routerの作成
6.実行
1.プロジェクトの作成
「rails new mytodo」を実行します。
mytodoという名前のプロジェクトが自動で作成され、プロジェクトの中には下図のようにフォルダやファイルが存在しています。
Railsでアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。
2.Modelの作成
「rails g model Todo text:string」を実行します。
「rake db:migrate」を実行します。
データベース上にいろいろなテーブルが作成されました。
3.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
4.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>
5.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
6.実行
「rails s」を実行
ブラウザで「http://127.0.0.1:3000」を開くとアプリが起動します。
完成後のプロジェクト構成
完成後のプロジェクト構成は下図のとおりです。
実行手順で登場したファイルを赤線で囲っています。
上図の続きです。
学習教材の紹介
上記では簡単なTodoアプリを一から作成する手順を紹介しましたが、Railsでのアプリ開発のイメージを掴んでいただけたのではないでしょうか。
Railsに興味を持たれてRailsの学習を始めてみようと思われた方もいらっしゃると思いますので、Railsの学習教材について少し紹介しようと思います。
Railsの学習教材といえばRailsチュートリアルです。
本格的なアプリを作成しながらRailsというフレームワークを使ったWeb開発方法について学ぶことができる教材です。
下記にリンクを貼っておきます。
Railsチュートリアルに関しては以前下記の記事でRailsチュートリアルのアプリの動かし方を紹介しましたので、興味のある方はご確認ください。
チートシートの紹介
Railsにはたくさんのコマンドがあって、覚えるのが大変ですが、そんなときに便利なのがチートシートです。
例えば「rails cheatsheet」で検索するといろんなチートシートが見つかりますので、いろいろとチェックされてはいかがでしょう。
例えば下記のようなチートシートが見つかります。