今回作るRailsアプリの全体像と機能の整理
  • 2019.08.01に公開
  • 2019.10.12に更新
  • SPA開発
  • 1. 今回作るアプリケーション
  • No.2 / 2
「SPA開発」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「SPA開発」の続編は、カテゴリー「 Udemy 」 で公開しています。

アプリケーションの概要

完成イメージなどの詳細はこちらの記事をご覧ください。
アプリの完成イメージ画像と作ろうと思った経緯

利用する人

税理士・会計事務所の職員です。

利用するタイミング

会計ソフトに入力した後に利用します。

利用する方法

会計ソフト上で集計された「貸借対照表」と「損益計算書」のCSVデータを、このアプリケーションに流し込みます。

アプリケーションの設計

今回利用するツールとバージョンの確認

  • OS ... mac v10.14.5
  • バックエンド … Rails v6.0.0.rc1 apiモード
  • フロントエンド … Nuxt.js v2.8.0
  • バージョン管理ツール ...Git (ソースコードの変更履歴を記録したり、追跡するためのツールです)
  • コードの保管場所 … Bitbucket (ソースコードのバックアップ、他開発者との共有を可能にするサービスです)
  • デプロイ先 … heroku (webアプリをインターネット上に簡単に公開することができるサービスです)

設計のイメージ

spaアプリ設計

まず左、ローカル開発環境

Rails上にNuxtプロジェクトを作成し、一つのRailsプロジェクトとして管理します。

NuxtがリクエストしたデータをRailsが返し、Nuxt上で表示します。

右、本番環境

Gitを使いherokuにRailsプロジェクトをアップします。

heroku上でwebアプリケーションが動きます。

ソースコードのバックアップ

Bitbucketには、Gitを使ってRailsプロジェクトをアップします。

アプリケーションの機能

ざっくりとアプリケーションの機能を整理をしておきます。

実装の優先度が高い順に並べています。

  1. ユーザーはメールアドレスとパスワードでログインできる
    JWT認証によりログイン機能を実装していきます。
  2. ユーザーは複数の会社を保有できる
  3. 会社は複数の会計年度を保有できる
  4. 会社単位で勘定科目の登録、更新、削除ができる
  5. 会計年度単位で数値の登録、更新、削除ができる
  6. 会計ソフトの出力フォーマットに合わせたCSV取り込みができる
  7. 貸借対照表、損益計算書を表示する
  8. 主要科目のグラフを自動で生成する
    vue-chart.jsを使います。
  9. 会社単位で、データを共有するユーザーを招待することができる
  10. データ共有中のユーザーは、会計数値の閲覧、編集が可能となる
  11. 会計数値には、コメントを導入することができる

7の貸借対照表、損益計算書を表示する実装が最大の難所となりそうです。

次回予告

今回はアプリケーションの設計と機能を整理しました。

次回はmacにRailsをインストールしていきます。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
SPA開発の投稿
1
  • 更新情報
  • /
  • #01
「Rails apiとNuxt.jsでSPA開発」のデモアプリを開発中...。【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1
  • 今回作るアプリケーション
  • /
  • #01
Railsアプリの完成イメージ画像と作ろうと思った経緯
2
  • 今回作るアプリケーション
  • /
  • #02
今回作るRailsアプリの全体像と機能の整理
1
  • 開発環境を整える
  • /
  • #01
macにRailsをゼロからインストールする
2
  • 開発環境を整える
  • /
  • #02
Rails apiモードのプロジェクトを作成し、Gitにコミットする
3
  • 開発環境を整える
  • /
  • #03
Bitbucketに公開鍵を追加し、Railsプロジェクトをpushする
4
  • 開発環境を整える
  • /
  • #04
HerokuCLIのインストールとherokuアプリケーションの作成
1
  • RailsをHerokuにデプロイする
  • /
  • #01
Herokuのデータベース設定と開発に便利なgemを導入する
2
  • RailsをHerokuにデプロイする
  • /
  • #02
HerokuにPumaを導入するためのRailsセットアップ
3
  • RailsをHerokuにデプロイする
  • /
  • #03
Railsに"Hello"を表示してHerokuへデプロイする
1
  • RailsとNuxt.jsを共存させる
  • /
  • #01
【RailsとNuxt.jsの共存】Rails上にNuxt.jsのプロジェクトを構築しよう
2
  • RailsとNuxt.jsを共存させる
  • /
  • #02
Nuxt.jsからRailsへ、初めてのapi通信でHelloを表示しよう
3
  • RailsとNuxt.jsを共存させる
  • /
  • #03
Nuxt.jsにVuetify2.0を導入してFont Awesomeもインストールするぜ
4
  • RailsとNuxt.jsを共存させる
  • /
  • #04
初めてのRailsApiアプリの公開。Herokuにデプロイする準備と実際のデプロイまで
1
  • データベース設計
  • /
  • #01
データベースを正規化する前に、会計システムの勘定科目データを整理する
2
  • データベース設計
  • /
  • #02
会計システムのデータベース設計に挑む
1
  • バージョンアップ情報
  • /
  • #01
【ご報告】Nuxt.jsを2.10.2にバージョンアップしました
2
  • バージョンアップ情報
  • /
  • #02
【ご報告】Railsを6.0.0にバージョンアップしました
1
  • Userモデル開発
  • /
  • #01
本番環境と開発環境でRailsのSeedデータを切り替える
2
  • Userモデル開発
  • /
  • #02
Railsにユーザーテーブルを作成する【テーブル確認コマンド】
3
  • Userモデル開発
  • /
  • #03
【Rails】EachValidatorクラスを使ったEmailカスタムバリデーション【lib以下読み込み】
4
  • Userモデル開発
  • /
  • #04
【Rails】エラーメッセージの日本語化【i18nとja.ymlのセッティング】
5
  • Userモデル開発
  • /
  • #05
【Rails】開発・テスト・本番環境の全てにユーザーSeedデータ投入する
6
  • Userモデル開発
  • /
  • #06
【Rails】ユーザーモデルのバリデーションをテストする
1
  • ログイン周りのレイアウト設計
  • /
  • #01
【Nuxt.js】ログインフラグでレイアウトを切り替えるテクニック【2019/12/07追記あり】
2
  • ログイン周りのレイアウト設計
  • /
  • #02
【Nuxt.js】ウェルカムページのレイアウト構築【sassの導入】
3
  • ログイン周りのレイアウト設計
  • /
  • #03
【Nuxt.js】ログイン周りの入力フォームコンポーネント設計【2019/12/07追記あり】
4
  • ログイン周りのレイアウト設計
  • /
  • #04
【Nuxt.js】会員登録フォームを構築してサインアップページを完成させる
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。