読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:タスク管理アプリの作成を試してみました

ドットインストールを見ながらタスク管理アプリの作成を試してみました。Modelの作成やルーティング、コントローラの処理の作成などRailsアプリ開発の基本的な部分を勉強できました。

まずはrails newコマンドを実行

$ rails new task_app
$ $ cd task_app

モデルの作成

$ rails g model Project title:string

※モデルは単数形、最初は大文字
※デフォルトがStringなので『:string』は省略可能

f:id:tyoshikawa1106:20150813180948p:plain


マイグレーションファイルを作成したら次のコマンドでDBに反映させる。

$ rake db:migrate

f:id:tyoshikawa1106:20150813181127p:plain

Schemeの確認

DBが正しく作成できているかを確認。次のコマンドでSQLiteが起動できる。

$ rails db

次のコマンドでSchemeの確認ができます。

sqlite> .schema

f:id:tyoshikawa1106:20150813181652p:plain


このモードを終了するときは次のコマンドでOK。

.exit

Railsコンソールでデータの作成

データはRailsコンソールから作成できます。

$ rails c
> p = Project.new(title: "p1")
> p.save

f:id:tyoshikawa1106:20150813182133p:plain


newではなくcreateを使うとsaveも自動で実行されます。

$ rails c
> p = Project.create(title: "p2")


Project.allコマンドでデータの一覧を表示できます。

$ rails c
> Project.all

f:id:tyoshikawa1106:20150813182501p:plain


railsコンソールモードは次のコマンドで終了できます。

> quit


データを作成したので『rails:db』でクエリを実行すると内容を確認できます。
f:id:tyoshikawa1106:20150813182716p:plain

コントローラの作成

次のコマンドでコントローラを作成できます。

$ rails g controller Projects

※コントローラは複数形

f:id:tyoshikawa1106:20150813183010p:plain

routesファイルの変数

config > routes.rbを編集します。(Projectに関するURLを自動生成してくれる)

TaskApp::Application.routes.draw do
  resources :projects
end

f:id:tyoshikawa1106:20150813184904p:plain


ルーティングの設定ができたら、次のコマンドで確認する。

$ rake routes

ブラウザからアクセスできるURLの一覧を表示できます。
f:id:tyoshikawa1106:20150813184948p:plain

Projectsの一覧を表示してみる

1. コントローラを編集

app > controllers > projects_controller.rb
f:id:tyoshikawa1106:20150813185126p:plain

※@projectsという変数にProjectのデータをセットしている

2. ビューを用意する

app > views > projects > index.html.erbを新規作成
f:id:tyoshikawa1106:20150813184641p:plain

※コントローラのindex用なので同じ名前になるように命名


これでProjectsの一覧を表示できました。
f:id:tyoshikawa1106:20150813185223p:plain

rootの設定

rootを設定すると「/projects」を省略できます。
f:id:tyoshikawa1106:20150813185656p:plain

f:id:tyoshikawa1106:20150813185731p:plain

共通テンプレートの編集

app > views > layout > application.html.erbが共通テンプレートです。
f:id:tyoshikawa1106:20150813192253p:plain


このように一括変更できます。
f:id:tyoshikawa1106:20150813191704p:plain


スタイルの変更は「app > assets > stylesheets > application.css」から変更。
f:id:tyoshikawa1106:20150813191914p:plain


背景色を変えたりします。
f:id:tyoshikawa1106:20150813191955p:plain

詳細ページを作成する

まずはindex.htmlのプロジェクト名を表示しているところにリンクを追加します。
f:id:tyoshikawa1106:20150813192529p:plain


コントローラにshowを追加します。
f:id:tyoshikawa1106:20150813192836p:plain

この『Project.find(params[:id])』という書き方でURLパラメータのIDを条件に検索ができます。


ビューにshow.html.erbを追加します。
f:id:tyoshikawa1106:20150813193153p:plain


これで詳細ページが作成できました。
f:id:tyoshikawa1106:20150813193227p:plain

新規ページを作成する

index.html.erbに新規ページへのリンクを追加します。
f:id:tyoshikawa1106:20150813200752p:plain


コントローラにnewを追加します。
f:id:tyoshikawa1106:20150813200813p:plain


new.html.erbを新規作成します。
f:id:tyoshikawa1106:20150813201131p:plain


こんな感じでページを表示できます。
f:id:tyoshikawa1106:20150813201226p:plain

保存処理を追加する

コントローラにcreateを追加します。
f:id:tyoshikawa1106:20150813201855p:plain


これでcreate projectボタンをクリック時に保存処理を実行できます。
f:id:tyoshikawa1106:20150813201944p:plain

ModelにValidationを設定する

app > models > project.rbに設定します。



保存成功時にページ遷移して失敗時は作成画面を再表示するようにコントローラを編集します。
f:id:tyoshikawa1106:20150813203155p:plain

f:id:tyoshikawa1106:20150813204749p:plain

エラーメッセージを表示する

ModelにValidation処理を追加したので次はエラーメッセージを表示させます。new.html.erbに判定処理を追加します。

<% if @project.errors.any? %>
  <%= @project.errors.messages[:title][0] %>
<% end %>

IF判定でエラー発生時にのみ表示するように指定します。
f:id:tyoshikawa1106:20150813203651p:plain


これでエラーメッセージを表示できます。
f:id:tyoshikawa1106:20150813204904p:plain


エラーメッセージを任意の文字にしたい場合はModelで次のように記載します。
f:id:tyoshikawa1106:20150813205104p:plain

f:id:tyoshikawa1106:20150813205149p:plain


文字数チェックもできます。
f:id:tyoshikawa1106:20150813205423p:plain

f:id:tyoshikawa1106:20150813205505p:plain

編集フォームの作成

index.html.erbにEditリンクを追加
f:id:tyoshikawa1106:20150814024418p:plain


projects_controller.rbにeditを追加
f:id:tyoshikawa1106:20150814024521p:plain


edit.html.erbを作成
f:id:tyoshikawa1106:20150814024552p:plain


これで編集ページを表示できます。
f:id:tyoshikawa1106:20150814024639p:plain

保存処理を追加

projects_controller.rbにupdate処理を追加
f:id:tyoshikawa1106:20150814025052p:plain


これで保存処理が実行できるようになります。
f:id:tyoshikawa1106:20150814025138p:plain

パーシャルを使って共通化

new.html.erbとedit.html.erbは共通部分があるのでパーシャルで共通化します。

views > projects > _form.html.erb
f:id:tyoshikawa1106:20150814025552p:plain


new.html.erb
f:id:tyoshikawa1106:20150814025626p:plain


edit.html.erb
f:id:tyoshikawa1106:20150814025647p:plain


これでフォームの共通化ができました。

データ削除の追加

index.html.erbにDeleteリンクを追加します。
f:id:tyoshikawa1106:20150814143008p:plain


method: :deleteという処理を追加することでDeleteアクションを実行できます。これで確認メッセージを表示するところまでできました。
f:id:tyoshikawa1106:20150814143121p:plain


コントローラにdestroyの処理を追加すれば削除処理が実行できるようになります。
f:id:tyoshikawa1106:20150814143422p:plain

before_actionをつかって重複処理の共通化

コントローラの処理で複数回出てきた『@project = Project.find(params[:id])』を共通で呼び出せるようにします。

before_action :set_project, only: [:show, :edit, :update, :destroy]


privateの処理に次のメソッドを用意して準備完了です。

def set_project
  @project = Project.find(params[:id])
end

補足

最後に処理を実行できるafter_actionもあります。

プロジェクトに紐付くタスクの追加

次のコマンドでタスクのModelを作成します。(:referencesで参照関係)

$ rails g model Task title done:boolean project:references

f:id:tyoshikawa1106:20150814144649p:plain


マイグレーションファイルはエディタでも編集できます。default: falseというように指定することで初期値を指定できます。

db > maigrate > ....

f:id:tyoshikawa1106:20150814144957p:plain


マイグレーションファイルの準備ができたら次のコマンドでDBに反映させます。

$ rake db:migrate

f:id:tyoshikawa1106:20150814145147p:plain

タスクのコントローラを作成

次のコマンドを実行します。

$ rails g controller Tasks

f:id:tyoshikawa1106:20150814145316p:plain

AssociationでModelの関連付け

TaskのModelファイルを見るとこのようになっています。
f:id:tyoshikawa1106:20150814145542p:plain

belongs_to :projectというのでprojectと紐付いていることがわかります。


projectのModelファイルには『has_many :tasks』を追加します。これでタスクと1対多で紐付いていることを宣言できます。
f:id:tyoshikawa1106:20150814151230p:plain

ルーティングの設定

routes.rbに次のように処理を追加します。

resources :projects do
  resources :tasks, only: [:create, :destroy]
end

f:id:tyoshikawa1106:20150814150127p:plain


これで準備ができました。
f:id:tyoshikawa1106:20150814150239p:plain

タスク一覧と登録フォームの作成

まずプロジェクトの詳細ページにタスク一覧の表示と新規登録フォームを追加します。次のように書くことでプロジェクトに紐付くタスクという指定でループができます。

<% @project.tasks.each do | task| %>

f:id:tyoshikawa1106:20150814151035p:plain

f:id:tyoshikawa1106:20150814151300p:plain

タスク登録処理の作成

タスクのコントローラに次のように処理を追加します。
f:id:tyoshikawa1106:20150814151936p:plain


これで登録処理が実行できるようになります。
f:id:tyoshikawa1106:20150814152007p:plain


ちなみに必須チェックはタスクのModelで次のように指定します。
f:id:tyoshikawa1106:20150814152123p:plain

タスクの削除

show.html.erbにDeleteリンクを追加します。
f:id:tyoshikawa1106:20150814152811p:plain


タスクのコントローラにdestroyの処理を追加します。
f:id:tyoshikawa1106:20150814153155p:plain

タスク完了チェックの追加

チェックボックスは次のように表示できます。

<%= check_box_tag '', '', task.done, {'data-id' => task.id, 'data-project_id' => task.project_id} %>
|

f:id:tyoshikawa1106:20150814153635p:plain


これでチェックボックスが表示されました。
f:id:tyoshikawa1106:20150814153720p:plain

Ajaxを使った処理

show.html.erbにscriptを次のように追加します。

<script>
$(function() {
  $("input[type=checkbox]").click(function() {
  	$.post('/projects/' + $(this).data('project_id') + '/tasks/' + $(this).data('id') + '/toggle');
  });
});
</script


toggleアクションを使うためにルーティングの設定を行います。

post '/projects/:project_id/tasks/:id/toggle' => 'tasks#toggle'

f:id:tyoshikawa1106:20150814155257p:plain


タスクコントローラにtoggoleアクションの処理を用意します。
f:id:tyoshikawa1106:20150814155035p:plain


これでチェック時にJSエラーが出ていないかを確認すると『POST http://localhost:3000/projects/3/tasks/5/toggle 500 (Internal Server Error)』というエラーが発生しています。
f:id:tyoshikawa1106:20150814160413p:plain


このエラーは『def toggle』に『render nothing: true』を追加することで解決します。

def toggle
  render nothing: true
  @task = Task.find(params[:id])
  @task.done = !@task.done
  @task.save
end

これでチェックボックス切替時にタスクのdone項目の値が更新できるようになりました。

タスクの件数を表示する

プロジェクトに紐付くタスクの件数を表示したい場合は次のとおりです。

<%= project.tasks.count %>

f:id:tyoshikawa1106:20150814161313p:plain


これで件数を表示できます。
f:id:tyoshikawa1106:20150814161352p:plain

残タスクの表示

残タスクのように特定の条件でフィルタリングした件数を取得したい場合、Modelで条件指定を行います。

scope :unfinished, -> { where(done: false) }

f:id:tyoshikawa1106:20150814161715p:plain


modelで宣言したunfinishedはviewでも利用できるので次のように書けます。

<%= project.tasks.unfinished.count %>


これで残タスクも表示できます。
f:id:tyoshikawa1106:20150814161915p:plain


以上がRailsアプリ開発の基本的な進め方となります。