【初心者エンジニア向け】Ruby on Rails でTodoアプリを作る方法｜完全ガイド

June 10, 2025March 29, 2026

こんにちは！プログラミング初心者の皆さん、Ruby on Rails って聞いたことありますか？

今回は、Rails学習の第一歩として最適な「Todoアプリ」を一緒に作ってみましょう！

なぜTodoアプリから始めるの？

Todoアプリが初心者におすすめな理由：

✅ 身近な機能：誰でも使ったことがある
✅ 基本的なCRUD操作：作成・読み取り・更新・削除が学べる
✅ 適度な複雑さ：簡単すぎず、難しすぎない
✅ 応用が利く：他のアプリ開発の基礎になる

完成するとこんなことができます

📝 新しいタスクを追加
📋 タスクの一覧表示
✏️ タスクの編集・更新
✅ 完了・未完了の切り替え
🗑️ 不要なタスクの削除

所要時間: 約60分
難易度: ★★☆☆☆（基本的なPC操作ができれば OK！）

開発環境の準備

まずは、Ruby と Rails をお使いのパソコンにインストールしましょう。

💡 何をインストールするの？

Ruby：プログラミング言語本体
Rails：Webアプリを作りやすくするフレームワーク
rbenv：Rubyのバージョン管理ツール

手順（Mac の場合）

Homebrew をインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

rbenv をインストール

brew install rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
source ~/.zshrc

Ruby をインストール

rbenv install 3.3.8
rbenv global 3.3.8
ruby -v  # バージョン確認

Rails をインストール

gem install rails
rails -v  # バージョン確認

💡 ポイント: エラーが出ても焦らないで！ググって解決するのもプログラマーの大切なスキルです。

実装手順

いよいよアプリを作っていきます！

プロジェクト作成

新しいRailsアプリを作成しましょう。

rails new todo_app
cd todo_app

これで todo_app というフォルダができて、中にRailsアプリの土台が自動生成されます。すごい！✨

モデル作成

モデルって何？→ データの設計図のことです。

Todoアプリに必要な情報：

title：タスクのタイトル
description：詳細説明
completed：完了したかどうか

rails generate model Todo title:string description:text completed:boolean
rails db:migrate

💡 解説：

generate model = モデルを自動生成

db:migrate = データベースに実際にテーブルを作成

コントローラー作成

コントローラーって何？→ ユーザーの操作を受け取って、適切な処理をする司令塔です。

rails generate controller Todos

生成された app/controllers/todos_controller.rb を編集：

class TodosController < ApplicationController
  before_action :set_todo, only: [:show, :edit, :update, :destroy]

  # 一覧表示
  def index
    @todos = Todo.all
  end

  # 詳細表示
  def show
  end

  # 新規作成フォーム
  def new
    @todo = Todo.new
  end

  # 編集フォーム
  def edit
  end

  # 新規作成処理
  def create
    @todo = Todo.new(todo_params)
    if @todo.save
      redirect_to @todo, notice: 'Todo作成完了！'
    else
      render :new
    end
  end

  # 更新処理
  def update
    if @todo.update(todo_params)
      redirect_to @todo, notice: 'Todo更新完了！'
    else
      render :edit
    end
  end

  # 削除処理
  def destroy
    @todo.destroy
    redirect_to todos_url, notice: 'Todo削除完了！'
  end

  private

  def set_todo
    @todo = Todo.find(params[:id])
  end

  def todo_params
    params.require(:todo).permit(:title, :description, :completed)
  end
end

ビュー作成

ビューって何？→ ユーザーが実際に見る画面（HTML）のことです。

app/views/todos/ フォルダに以下のファイルを作成：

一覧画面（index.html.erb）：全Todoを表示 詳細画面（show.html.erb）：1つのTodoの詳細 新規作成画面（new.html.erb）：新しいTodo作成フォーム 編集画面（edit.html.erb）：既存Todoの編集フォーム

ルーティング設定

config/routes.rb を編集：

Rails.application.routes.draw do
  root 'todos#index'  # トップページをTodo一覧に
  resources :todos     # CRUD操作のルートを自動生成
end

💡 ポイント: resources :todos の1行で、7つのルート（URL）が自動生成されます！

動作確認

作ったアプリが動くか確認してみましょう！

サーバー起動

rails server

ブラウザで http://localhost:3000 にアクセス。

テストしてみよう

新規作成: 「New Todo」をクリック→タスクを入力→保存
一覧表示: トップページでTodo一覧を確認
詳細表示: タスクのタイトルをクリック
編集: 「Edit」をクリック→内容を変更→保存
削除: 「Delete」をクリック→確認→削除

全部動いたら大成功です！🎉

GitHubへの公開

作ったアプリをGitHubで世界に公開しましょう！

Git の初期設定（初回のみ）

git config --global user.name "あなたの名前"
git config --global user.email "メールアドレス"

リポジトリ作成・プッシュ

git init
git add .
git commit -m "Initial commit: Todo app completed"
git remote add origin https://github.com/あなたのユーザー名/todo_app.git
git push -u origin main

💡 事前準備: GitHubでリポジトリを作成しておいてくださいね！

Ruby on Rails Todoアプリよくある質問

❓ Rails初心者でもTodoアプリを作れますか？

はい、十分に可能です。基本的なPC操作ができれば、約60分でTodoアプリを完成させることができます。CRUD操作（作成・読み取り・更新・削除）の基礎を学べるため、Rails学習の第一歩として最適です。

❓ 開発環境の構築で他の選択肢はありますか？

rbenvの代わりにrvmやDockerを使う方法もあります。しかし初心者には、バージョン管理が簡単で安定性の高いrbenvを推奨します。WindowsユーザーはWSL（Windows Subsystem for Linux）の利用をおすすめします。

❓ 開発からGitHub公開まではどれくらい時間がかかりますか？

開発環境構築に30分、Todoアプリの実装に60分、GitHub公開に15分程度で、初心者でも約2時間で完了できます。エラーが発生しても調べながら進めれば、1日で確実に完成させることができます。

❓ このTodoアプリは実際の開発で役立ちますか？

はい、MVCアーキテクチャやCRUD操作など、Railsアプリの基本構造を学べるため、より複雑なWebアプリ開発の土台となります。このスキルをベースに、ユーザー認証、API連携、リアルタイム機能などへステップアップできます。

Ruby on Rails開発をさらに効率化する関連ツール

Todoアプリの開発に慣れたら、他の開発ツールも組み合わせて、より効率的なRails開発環境を構築しましょう：

まとめ

お疲れさまでした！🎉

今回学習したスキル

✅ Rails の基本構造（MVC アーキテクチャ）
✅ CRUD 操作の実装
✅ データベースの基本的な使い方
✅ Git/GitHubでのコード管理

参考リソース

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！