【Ruby on Rails開発奮闘記】シンプルな家計簿アプリを作る(1)

こんにちは、koheiです。

昨年末ぐらいから、「Ruby on Rails」を勉強しています。
とりあえず、最低限の作り方は覚えたので、簡単な家計簿アプリを作ってみました。
これから３回に分けて、RubyonRailsでの家計簿アプリ作成方法を紹介していきます。
ちなみにRuby on Railsの開発環境の構築方法については割愛します。ググると沢山でてくるので環境構築した上で読み進めてもらえばと思います。
※なお、RubyonRailsについてはまだまだ知識不足な点がありますので、理解したところは、随時、追記等していこうと思います。

仕様

トップページは各種メニューへのリンク画面になってます。メニューは科目設定、収支登録、収支確認の3つがあります。
使い方は、まず科目設定から収入や費用（固定費、変動費）などの科目項目を設定します。
そして、月々の科目金額を登録していきます。収支確認では、月次や年間の収支結果を表やグラフで確認できるようにします。
機能としては、ごくシンプルな家計簿アプリです。
なお、今回の記事では、科目設定機能を追加します。（図の赤枠部分）

MVCアーキテクチャ

Ruby on Railsのアプリでは、[MVCアーキテクチャ」と呼ばれる設計方法が採用されています。
Mが「モデル」、Vが「ビュー」、Cが「コントローラー」の略です。
モデルは、データベースのデータやデータの書式などのルールを定めたもの、コントローラーは、モデルからデータを受け取ってビューに渡したり、データをデータベースに格納したりします。ビューは、ユーザーに見せるインターフェースのデザインです。

今回の家計簿アプリ（本記事作成分のみ）の構成をMVCアーキテクチャに当てはめると以下のような図になります。

さっそく作っていきます。

1.アプリのトップページ用コントローラーとビューを作成

まずは今回作成するアプリのベースを作ります。
「rails new　アプリケーション名」でアプリの骨格を作ることができます。
以下のコマンドを入力します。アプリ名は、とりあえず、「sample_kakeibo」にしました。

※今回データベースは、sqlite3を使うので、-d splite3を指定しています。

作成したアプリのフォルダに移動します。

一旦、Railsアプリが起動するか確認します。
以下コマンドを実行してアプリを起動します。

ブラウザでlocalhost:3000にアクセスします。
Railsのトップページが表示されればOKです。

サーバー起動が確認できたので、Control+Cを押して、サーバーを停止します。
次に作成するアプリのトップページを作ってみます。
まずは、以下コマンドを入力してコントローラーを作成します。

次にトップページ用のパス設定をします。
config/routes.rbファイルを開き、既存の記述を削除して以下を追記します。
これで、railsのトップページにアクセスすると、作成したTopControllerのindexアクションのページが表示されます。

Rails.application.routes.draw do
	root "top#index"
end

とりあえず、ビュー表示に、タイトルだけ表示する処理を追加しましょう。
app/views/top/index.html.erbを開いて、以下の様に書き換えてみます。

<h1>Simple Kakeibo</h1>
<p>シンプルな家計簿アプリです。</p>

bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
以下のトップページがでればOKです。

2.収入科目設定機能を作成

2-1.モデルの追加

今回、科目テーブルは、「収入」「固定費」「変動費」の３つを用意します。
まず、「収入科目テーブル」から作成します。
以下コマンドを入力してまずは、収入のモデルを作ります。

すると、dbフォルダの下のmigrateフォルダ内に、xxxx_create_incomes.rbファイルが作成されます。(xxxxは作成した日付が入るようです）
この中に、収入データベースのカラム（項目）を追加します。
カラム（項目）は以下２つを追加しました。
・name：科目の名前（給料など。）
・description：備考（科目の補足説明）

class CreateIncomes < ActiveRecord::Migration[5.2]
  def change
    create_table :incomes do |t|
      t.string :name, null: false
      t.string :description
      t.timestamps
    end
  end
end

次に、以下コマンドを入力し、マイグレーションを実行します。これで、incomesテーブルが作成されます。

2-2.コントローラーの作成

次に、収入科目テーブルをコントロールするコントローラーを作成します。

※incomes（複数形）で指定します。

incomesはリソースとして扱うため、config/routes.rbに以下を追加します。

Rails.application.routes.draw do
	root "top#index"

	resources :incomes
end

※リソースを追加することで、先程作成したコントローラに対して以下の７つのアクションのルーティングが設定できます。

さっそく、incomes_controller.rbに7つのアクションメソッドを追加しましょう。（まだ処理は空です）

class IncomesController < ApplicationController

	def index
	end

	def show
	end

	def new
	end

	def edit
	end

	def create
	end

	def update
	end

	def destroy
	end

end

2-3.収入科目一覧を作成

まずは、収入科目一覧から作成します。
indexアクションとそのテンプレートを実装しましょう。

	def index
		@incomes = Income.order(created_at: :asc)
	end

続いて、作成したincomesコントローラーのindexアクション用の表示テンプレートを作ります。
app/views/incomesフォルダ内に、新規で「index.html.erb」ファイルを作ります。

以下のように実装します。

<% @page_title = "収入科目一覧" %>
<h2><%= @page_title %></h2>

<% if @incomes.present? %>
<table>
	<thead>
		<tr>
			<th>科目名</th>
			<th>備考</th>
		</tr>
	</thead>
	<tbody>
		<% @incomes.each do |income| %>
			<tr>
				<td><%= income.name %></td>
				<td><%= income.description %></td>
			</tr>
		<% end %>
	</tbody>
</table>

<% else %>
	<p>登録されている収入科目がありません。</p>
<% end %>

また、トップページから、上記で作成した収入科目一覧トップページへリンクを貼っておきます。
/app/views/top/index.html.erbに以下を追加します。

<h1>Simple Kakeibo</h1>
<p>シンプルな家計簿アプリです。</p>

<h2>科目設定</h2>
<ul>
	<li><%= link_to "収入科目設定", :incomes %></li>
</ul>

ここまで作ったら、一旦サイトを確認してみます。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
トップページから収入科目一覧へのリンクをクリックします。
まだ、何も科目を登録していないので、以下のような表示になります。

2-4.収入科目登録・更新を作成

次に収入科目の登録機能を作ります。
incomes_controller.rbのnewアクション、editアクション、showアクションを実装します。

	def show
		@income = Income.find(params[:id])
	end

	def new
		@income = Income.new()
	end

	def edit
		@income = Income.find(params[:id])
	end

newアクションでは、Income.new()で新しいモデルオブジェクトを作成します。
editアクションでは、findメソッドにidパラメータを渡して、該当するモデルオブジェクトを取得しています。
showメソッドは、登録した収入科目の詳細表示をさせるため、同様にfindメソッドにidパラメータを渡して、該当するモデルオブジェクトを取得します。

各アクションの表示用テンプレートを作成します。

app/views/incomesフォルダ内に、new.html.erbとedit.html.erbを追加して以下のように実装します。

<h2>収入科目登録</h2>
<%= form_for @income do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

<h2>収入科目編集</h2>
<%= form_for @income do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

上記のテンプレートは、renderメソッドを使って、_form.html.erbを埋め込んでいます。
したがって、同フォルダに_form.html.erbを新規作成して、以下のように実装します。

<%= link_to "収入科目一覧に戻る", :incomes %>
<table>
 <tr>
	 <th><%= form.label :name, "名称" %></th>
	 <td><%= form.text_field :name %></td>
 </tr>
 <tr>
	<th><%= form.label :description, "説明" %></th>
	<td><%= form.text_field :description %></td>
 </tr>
</table>

次にshowメソッドのテンプレートを作成します。
app/views/incomesフォルダ内に、show.html.erbを作成して以下のように実装します。

<h2>収入科目の詳細</h2>

<%= link_to "編集", [:edit, @income] %>
<%= link_to "収入科目一覧へ戻る", :incomes %>

<table>

	<tr>
    <th>名称</th>
    <td><%= @income.name %></td>
  </tr>

	<tr>
		<th>説明</th>
		<td><%= @income.description %></td>
	</tr>
</table>

次に、登録や編集テンプレートから送られてきたフォームのパラメータを使って、データベースに保存するcreateメソッドとupdateメソッドを以下のように実装します。

	def create
		@income = Income.new(params[:income])
		if @income.save
			redirect_to @income, notice: "収入科目を登録しました"
		else
			render "new"
		end
	end

	def update
		@income = Income.find(params[:id])
		@income.assign_attributes(params[:income])
		if @income.save
			redirect_to @income, notice: "収入科目を登録しました"
		else
			render "new"
		end
	end

notice: xxxxの箇所は、フラッシュという機能を使って、リダイレクト後に文字列を取り出すことができます。
フレッシュの文字列を表示させるために、アプリケーション本体のテンプレートファイル（app/views/layouts/application.html.erb)を開いて、以下を追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>SampleKakeibo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <% if flash.notice %>
      <%= flash.notice %>
    <% end %>

    <%= yield %>
  </body>
</html>

これで、登録と更新処理ができました。収入科目一覧のテンプレートファイル（index.html.erb)に新規登録と編集のリンクを追加しましょう。

<% @page_title = "収入科目一覧" %>
<h2><%= @page_title %></h2>

<%= link_to "収入科目の新規登録", :new_income %>

<% if @incomes.present? %>
<table>
	<thead>
		<tr>
			<th>科目名</th>
			<th>備考</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<% @incomes.each do |income| %>
			<tr>
				<td><%= income.name %></td>
				<td><%= income.description %></td>
				<td>
				<%= link_to "編集", [:edit, income] %>
				</td>
			</tr>
		<% end %>
	</tbody>
</table>

<% else %>
	<p>登録されている収入科目がありません。</p>
<% end %>

2-5.収入科目削除機能を作成

次に、収入科目の削除機能を作成します。destroyメソッドを以下のように実装します。

	def destroy
		@income = Income.find(params[:id])
		@income.destroy
		redirect_to :incomes, notice: "科目を削除しました。"
	end

収入一覧画面に削除操作メニューを追加します。

<% @page_title = "収入科目一覧" %>
<h2><%= @page_title %></h2>

<%= link_to "収入科目の新規登録", :new_income %>

<% if @incomes.present? %>
<table>
	<thead>
		<tr>
			<th>科目名</th>
			<th>備考</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<% @incomes.each do |income| %>
			<tr>
				<td><%= income.name %></td>
				<td><%= income.description %></td>
				<td>
				<%= link_to "編集", [:edit, income] %>
				<%= link_to "削除", income, method: :delete,
					data: { confirm: "本当に削除しますか？"} %>
				</td>
			</tr>
		<% end %>
	</tbody>
</table>

<% else %>
	<p>登録されている収入科目がありません。</p>
<% end %>

また、今回は「ストロングパラメータ」というセキュリティ機能を無効化しておきます。
とりあえず、この機能を無効化しておかないと登録がうまくいきません。
最終的には、有効にすべき機能ですので、いずれ対応していきます。
config/application.rbファイルに以下を追記します。

module SampleKakeibo
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    config.action_controller.permit_all_parameters = true

  end
end

ここまで作ったら、一旦サイトを確認してみます。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
登録や編集、削除などがうまく動いたら成功です。

3.固定費科目機能を作成

次に、固定費科目機能を追加してみましょう。前章の収入科目と同じで登録、編集、削除機能などを作ります。
前章の説明と異なるのは、名称ぐらいなので、細かな説明は割愛します。

3-1.モデルの追加

以下コマンドを入力して、固定費科目のモデルを作ります。

dbフォルダ配下のmigrateフォルダ内に、xxxx_create_fixedcostsが作成されますので、この中に、固定費データベースのカラム（項目）を追加します。

class CreateFixedcosts < ActiveRecord::Migration[5.2]
  def change
    create_table :fixedcosts do |t|
      t.string :name, null: false
      t.string :description
      t.timestamps
    end
  end
end

以下コマンドを入力し、マイグレーションを実行します。

3-2.コントローラー、ビューの作成

固定費科目テーブルをコントロールするコントローラーと表示のビュー部分を作成します。
以下コマンドでコントローラーを作ります。

リソースとして扱うため、config/routes.rbに以下を追加します。

Rails.application.routes.draw do
	root "top#index"

	resources :incomes
	resources :fixedcosts
end

作成したコントローラーに７つのアクションを以下の様に実装します。（収入科目とほぼ同じです。）

class FixedcostsController < ApplicationController

	def index
		@fixedcosts = Fixedcost.order(created_at: :asc)
	end

	def show
		@fixedcost = Fixedcost.find(params[:id])
	end

	def new
		@fixedcost = Fixedcost.new()
	end

	def edit
		@fixedcost = Fixedcost.find(params[:id])
	end

	def create
		@fixedcost = Fixedcost.new(params[:fixedcost])
		if @fixedcost.save
			redirect_to @fixedcost, notice: "固定費科目を登録しました"
		else
			render "new"
		end

	end

	def update
		@fixedcost = Fixedcost.find(params[:id])
		@fixedcost.assign_attributes(params[:fixedcost])
		if @fixedcost.save
			redirect_to @fixedcost, notice: "固定費科目を登録しました"
		else
			render "new"
		end


	end

	def destroy
		@fixedcost = Fixedcost.find(params[:id])
		@fixedcost.destroy
		redirect_to :fixedcosts, notice: "科目を削除しました。"
	end

end

各アクションに対応する表示テンプレートを作成します。こちらも収入科目とほぼ同じなので説明は割愛します。

<% @page_title = "固定費科目一覧" %>
<h2><%= @page_title %></h2>

<%= link_to "固定費科目の新規登録", :new_fixedcost %>

<% if @fixedcosts.present? %>
<table>
	<thead>
		<tr>
			<th>科目名</th>
			<th>備考</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<% @fixedcosts.each do |fixedcost| %>
			<tr>
				<td><%= fixedcost.name %></td>
				<td><%= fixedcost.description %></td>
				<td>
				<%= link_to "編集", [:edit, fixedcost] %>
				<%= link_to "削除", fixedcost, method: :delete,
					data: { confirm: "本当に削除しますか？"} %>
				</td>
			</tr>
		<% end %>
	</tbody>
</table>

<% else %>
	<p>登録されている固定費科目がありません。</p>
<% end %>

<h2>固定費科目の詳細</h2>

<%= link_to "編集", [:edit, @fixedcost] %>
<%= link_to "固定費科目一覧へ戻る", :fixedcosts %>

<table>

	<tr>
    <th>名称</th>
    <td><%= @fixedcost.name %></td>
  </tr>

	<tr>
		<th>説明</th>
		<td><%= @fixedcost.description %></td>
	</tr>
</table>

<h2>固定費科目登録</h2>
<%= form_for @fixedcost do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

<h2>固定費科目編集</h2>
<%= form_for @fixedcost do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

<%= link_to "固定費科目一覧に戻る", :fixedcosts %>
<table>
 <tr>
	 <th><%= form.label :name, "名称" %></th>
	 <td><%= form.text_field :name %></td>
 </tr>
 <tr>
	<th><%= form.label :description, "説明" %></th>
	<td><%= form.text_field :description %></td>
 </tr>
</table>

トップページから、固定費科目設定へのリンクを追加します。

<h1>Simple Kakeibo</h1>
<p>シンプルな家計簿アプリです。</p>

<h2>科目設定</h2>
<ul>
	<li><%= link_to "収入科目設定", :incomes %></li>
</ul>

<ul>
	<li><%= link_to "固定費科目設定", :fixedcosts %></li>
</ul>

ここまで作ったら、一旦サイトを確認してみます。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
固定費科目の登録や編集、削除などがうまく動いたら成功です。

4.変動費科目機能を作成

変動費科目機能の追加です。今まで追加した「収入科目」と「固定費科目」と
やり方は同じなので必要なrailsコマンドとソースコードだけ載せておきます。

変動費のモデルを作成

カラム追加

class CreateVariablecosts < ActiveRecord::Migration[5.2]
  def change
    create_table :variablecosts do |t|
      t.string :name, null: false
      t.string :description
      t.timestamps
    end
  end
end

マイグレーション実行

コントローラーの作成

Rails.application.routes.draw do
	root "top#index"

	resources :incomes
	resources :fixedcosts
	resources :variablecosts
end

class VariablecostsController < ApplicationController

		def index
			@variablecosts = Variablecost.order(created_at: :asc)
		end

		def show
			@variablecost = Variablecost.find(params[:id])
		end

		def new
			@variablecost = Variablecost.new()
		end

		def edit
			@variablecost = Variablecost.find(params[:id])
		end

		def create
			@variablecost = Variablecost.new(params[:variablecost])
			if @variablecost.save
				redirect_to @variablecost, notice: "変動費科目を登録しました"
			else
				render "new"
			end

		end

		def update
			@variablecost = Variablecost.find(params[:id])
			@variablecost.assign_attributes(params[:variablecost])
			if @variablecost.save
				redirect_to @variablecost, notice: "変動費科目を登録しました"
			else
				render "new"
			end
		end

		def destroy
			@variablecost = Variablecost.find(params[:id])
			@variablecost.destroy
			redirect_to :variablecosts, notice: "科目を削除しました。"
		end

end

<% @page_title = "変動費科目一覧" %>
<h2><%= @page_title %></h2>

<%= link_to "変動費科目の新規登録", :new_variablecost %>

<% if @variablecosts.present? %>
<table>
	<thead>
		<tr>
			<th>科目名</th>
			<th>備考</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<% @variablecosts.each do |variablecost| %>
			<tr>
				<td><%= variablecost.name %></td>
				<td><%= variablecost.description %></td>
				<td>
				<%= link_to "編集", [:edit, variablecost] %>
				<%= link_to "削除", variablecost, method: :delete,
					data: { confirm: "本当に削除しますか？"} %>
				</td>
			</tr>
		<% end %>
	</tbody>
</table>

<% else %>
	<p>登録されている変動費科目がありません。</p>
<% end %>

<h2>変動費科目の詳細</h2>

<%= link_to "編集", [:edit, @variablecost] %>
<%= link_to "変動費科目一覧へ戻る", :variablecosts %>

<table>

	<tr>
    <th>名称</th>
    <td><%= @variablecost.name %></td>
  </tr>

	<tr>
		<th>説明</th>
		<td><%= @variablecost.description %></td>
	</tr>
</table>

<h2>変動費科目登録</h2>
<%= form_for @variablecost do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

<h2>変動費科目編集</h2>
<%= form_for @variablecost do |form| %>
	<%= render "form", form: form %>
	<div><%= form.submit %></div>
<% end %>

<%= link_to "変動費科目一覧に戻る", :variablecosts %>
<table>
 <tr>
	 <th><%= form.label :name, "名称" %></th>
	 <td><%= form.text_field :name %></td>
 </tr>
 <tr>
	<th><%= form.label :description, "説明" %></th>
	<td><%= form.text_field :description %></td>
 </tr>
</table>

<h1>Simple Kakeibo</h1>
<p>シンプルな家計簿アプリです。</p>

<h2>科目設定</h2>
<ul>
	<li><%= link_to "収入科目設定", :incomes %></li>
</ul>

<ul>
	<li><%= link_to "固定費科目設定", :fixedcosts %></li>
</ul>

<ul>
	<li><%= link_to "変動費科目設定", :variablecosts %></li>
</ul>

ここまで作ったら、一旦サイトを確認してみます。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
変動費科目の登録や編集、削除などがうまく動いたら成功です。

※一応、ここまで作成したソースコードを以下から取得できます。
必要な方は以下からダウンロードしてください。

家計簿アプリソース(1)

1 file(s)   6.10 MB

Download

5.最後に

次の記事では、今回登録した各科目に実際に金額を登録していく機能を追加していきます。
それでは！