(7) 【自作青色申告ソフト】#6 ver.0.5 支出の登録画面を実装する。

投稿者: | 2021年3月8日

800 views

この記事は最終更新から 1885日 が経過しています。

0. この連載でやっていること

【自作青色申告ソフト】#1 なぜ自作する?
【自作青色申告ソフト】#2 ver.0.1 まずは画面作りから
【自作青色申告ソフト】#3 ver.0.2 ユーザー認証を実装する。
【自作青色申告ソフト】#4 ver.0.3 科目設定画面を実装する。
【自作青色申告ソフト】#5 ver.0.4 預金口座、取引先設定画面を実装する。
【自作青色申告ソフト】#6 ver.0.5 支出の登録画面を実装する。 ← 今回はココ
【自作青色申告ソフト】#7 ver.0.6 収入の登録画面を実装する。
【自作青色申告ソフト】#8 ver.0.7 仕訳帳を実装する。

1. やりたいこと

今回からいよいよ
簿記の知識が必要な作業
が始まる。

その第一弾は、経費の入力を行うための
支出の登録画面
の実装だ。

2. 実装の前に少し勉強

1) 貸方、借方とは?

青色申告ソフトを自作するうえで避けては通れないのが 貸方と借方 についての理解だ。

青色申告を始めた 2006年以来、わからないものは弥生の青色申告に任せっぱなしで来た。
今このブログを書いている時点で、まだよくわかっていない。

貸す or 借りる?
何のこと?

というのが今の自分の状態だ。

(1) 一先ず理解したこと

お金の流れ に着目すれば理解できそうな気がする。

貸方: お金が出て行く元のこと。
借方: お金が出て行った先のこと。

プログラマー風に理解すれば、
貸方: source
借方: destination
となるだろうか。

もし間違っていたら、後日このブログ記事を修正しよう…
一先ず今の時点ではこの理解の状態で画面実装を進めよう。

2) 貸方、借方の例

例1 : 電気代 5,000円を現金で支払った。

貸方 Src : 現金 5,000円
 ↓
借方 Dst : 水光熱費 5,000円

例2 : パソコンソフトを購入し、銀行口座から 8,000円を振り込んだ。

貸方 Src : 預金 8,000円
 ↓
借方 Dst : 消耗品費 8,000円

例3.1 : パソコンパーツを 2回購入し、クレジットカードで支払った。

クレジットカード払いの場合はややこしくなり、購入時の記帳+支払い時の記帳 が必要になる。

1) 1回目の購入日: 5,000円のメモリをクレジットカード決済で購入した。
貸方 Src : 未払金 5,000円
 ↓
借方 Dst : 消耗品費 5,000円

2) 2回目の購入日: 12,000円の 書籍をクレジットカード決済で購入した。
貸方 Src : 未払金 12,000円
 ↓
借方 Dst : 雑費 12,000円

購入時の記帳は、未払金という自己貸金屋からお金を引き出すイメージかな。

3) クレジットカード引落日: 合計 17,000円が銀行口座から引き落とされた。
貸方 Src : 預金 17,000円
 ↓
借方 Dst : 未払金 17,000円

引落時の記帳は、未払金という自己貸金屋に預金からお金を返すイメージかな。

例3.2 : パソコンパーツを 2回購入し、クレジットカードで支払った。【簡便法】

上記の例3.1を簡便的に記帳する方法も認められている。
期中現金主義・期末発生主義 というらしい。

1) 1回目の購入日: 5,000円のメモリをクレジットカード決済で購入した。
記帳せず。

2) 2回目の購入日: 12,000円の CPUをクレジットカード決済で購入した。
記帳せず。

3) クレジットカード引落日: 合計 17,000円が銀行口座から引き落とされた。
貸方 Src : 預金 17,000円
 ↓
借方 Dst : 消耗品費 5,000円、雑費 12,000円

例3.1と例3.2は同じことを異なる方法で記帳している。
どちらがよいだろうか?

例3.2の方が記帳は楽だが、実際の購入日の記録が残る例3.1の方がよいのだろうか?
気分次第かも…

ただし…
購入日と引落日が期をまたぐ場合(=年をまたぐ場合)は、簡便法は使えないので注意。

例4 : 制作物をお客さんに現金 1,000円で販売した。

貸方 Src : 売上 1,000円
 ↓
借方 Dst : 現金 1,000円

※後日、例を追記していこう。

3. やってみる

こんな入力画面を作った。
貸方/借方 という文言は隠ぺいしようかとも思ったが、source/destination に置き換えたら理解しやすくなったので、文言を残すことにした。
これを隠ぺいして見ないことにしていたから、今まで青色申告に苦手意識を持ち続けていたのだと思う。

発生日の日付入力には、JQuery UI の Datepickerを使うことにした。
とっても便利だ。

科目の選択は、過去の投稿 でもご紹介したように、selectタグではなくポップアップ画面を使う。
これもとっても便利だ。

貸方と借方とでは、当然だが異なる科目の選択肢が表示される。

摘要欄でよく使う「〇月分」の文言は、ボタン押下で一発入力できるようにした。
便利なので、このショートカットを登録できる画面も作ろうかな?

4. それ以外の改良点

(1) 文字サイズを変更可能にした。

画面右上、ログインボタンの左となりに、文字サイズを変えるためのボタンを設置した。
小 16pt, 中 18pt, 大 20pt としている。

選択値は Ajaxでサーバー側に送り、サーバー側で session情報に記憶するようにした。
これにより、次回のページ表示時には、選択した文字サイズが htmlタグの font-sizeに設定されるようにしている。

5. 次回やること

今回作った支出の反対向き、収入の登録画面を作る。

6. 所感

・貸方、借方の理解が進んだような気がする。
・本連載の主目的である 死ぬ前に青色申告を理解したい の欲求が少しだけ満たされた気がする。


アクセス数(直近7日): ※試験運用中、BOT除外簡易実装済
  • 2026-05-09: 0回
  • 2026-05-08: 2回
  • 2026-05-07: 0回
  • 2026-05-06: 0回
  • 2026-05-05: 0回
  • 2026-05-04: 0回
  • 2026-05-03: 0回
  • コメントを残す

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


    日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)