ロボット研究開発、ソフトウェア開発、コンテンツ制作配信

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

こんにちは、koheiです。

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

スポンサーリンク

仕様


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

MVCアーキテクチャ

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

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

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

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

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

$ rails new sample_kakeibo -d sqlite3

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

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

$ cd sample_kakeibo

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

$ bin/rails s

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

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

$ bin/rails g controller top index

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

config/routes.rb

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

app/views/top/index.html.erb

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

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

2-1.モデルの追加

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

$ bin/rails g model income

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

db/migrate/xxxx_create_incomes.rb

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

$ bin/rails db:migrate

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

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

bin/rails g controller incomes

※incomes(複数形)で指定します。

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

config/routes.rb

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

7つのアクション
・index・・リソースの一覧を表示する
・new・・リソースを追加する
・create・・リソースを作成する
・show・・リソースの属性を表示する
・edit・・リソースを更新する
・update・・リソースを更新する
・destroy・・リソースを削除する

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

app/controllers/incomes_controller.rb

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

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

app/controllers/incomes_controller.rb

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

【erbファイルについて】
・erbファイル:HTMLの中にRubyコードを埋め込んだファイルです。<% %>または、<%= %>で囲んだ部分は、Rubyのコードとして認識されます。

・<%= %>の間にRubyの式を記述すると、式の結果が文字列に変換されてその場所に挿入される。
・<% %>の間に記述されたRubyのコードは処理が実行されるが、文字列の挿入は行われない。

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

app/views/incomes/index.html.erb

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

app/views/top/index.html.erb

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

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

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

app/controllers/incomes_controller.rb

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

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

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

app/views/incomes/new.html.erb

app/views/incomes/edit.html.erb

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

app/views/incomes/_form.html.erb

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

app/views/incomes/show.html.erb

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

app/controllers/incomes_controller.rb

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

app/views/layouts/application.html.erb

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

app/views/incomes/index.html.erb

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

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

app/controllers/incomes_controller.rb

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

app/views/incomes/index.html.erb

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

config/application.rb

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

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

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

3-1.モデルの追加

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

$ bin/rails g model fixedcost

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

db/migrate/xxxxx_create_fixedcost.rb

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

$ bin/rails db:migrate

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

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

bin/rails g controller fixedcosts

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

config/routes.rb

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

app/controllers/fixedcosts_controller.rb

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

app/views/fixedcosts/index.html.erb

app/views/fixedcosts/show.html.erb

app/views/fixedcosts/new.html.erb

app/views/fixedcosts/edit.html.erb

app/views/fixedcosts/_form.html.erb

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

app/views/top/index.html.erb

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

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


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

変動費のモデルを作成

$ bin/rails g model variablecost

カラム追加

db/migrate/xxx_create_variablecosts.rb

マイグレーション実行

$ bin/rails db:migrate

コントローラーの作成

bin/rails g controller variablecosts
config/routes.rb

app/controllers/variablecosts_controller.rb

app/views/variablecosts/index.html.erb

app/views/variablecosts/show.html.erb

app/views/variablecosts/new.html.erb

app/views/variablecosts/edit.html.erb

app/views/variablecosts/_form.html.erb

app/views/top/index.html.erb

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

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

5.最後に

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメント

  • お世話になっております。
    Rails学習を始めたばかりです。
    progateでざっくりとした学習をしてからローカル環境を構築し猪股様のブログを拝見し家計簿を作ってみたいと思い
    学習させていただいております。(ありがとうございます。)
    なんとか収入科目設定は成功しましたが、固定費科目設定で転けてしまいもたもたしております。

    固定費科目の新規登録をクリックすると下記のようなエラーになります。
    なにか設定が足りないのかなと推測したりしましたが、何をどういじれば良いか見当がつかず、、、
    ご助言をお願いしてもよろしいでしょうか。
    お忙しいところ申し訳ありませんが、よろしくお願いいたします。
    ——————————————–

    No template for interactive request
    FixedcostsController#new is missing a template for request formats: text/html
    NOTE!
    Unless told otherwise, Rails expects an action to render a template with the same name,
    contained in a folder named after its controller. If this controller is an API responding with 204 (No Content),
    which does not require a template, then this error will occur when trying to access it via browser,
    since we expect an HTML template to be rendered for such requests. If that’s the case, carry on.

  • お世話になっております。猪股です。
    お問い合わせいただいたエラー内容は、FixedcostsControllerからnewしたときのテンプレートが見つからないというエラー内容だと思いますので、
    まずは、app/views/fixedcosts/new.html.erbファイルを作成しているか確認したほうがよいと思います。
    収入科目設定が成功されたということで、ファイル構成や追加部分など収入科目設定と比較していけば、なにか不足点が見つかるかもしれません。
    以上、よろしくおねがいします。

  • お世話になってます。okaです。
    link toのパス指定ですが、: これを使ったパス指定始めてみたのですが、どういう仕組みでしょうか??
    調べてみたのですが、一般的な00_00_pathなどの記述しかヒットしませんでした。
    教えていただけると嬉しいです

  • 削除をクリックするとshow.html.erbに飛んで上手く消えません。どうすればいいでしょうか?

  • お世話になっております。猪股です。

    削除がうまくいかないということで、まずは、destroyメソッドが私が記載しているコードと合っているか確認されてみてはどうでしょうか?
    よろしくおねがいします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン