インボイス方式導入に備え、インボイス方式に対応した請求書に作り替える必要が出てきました。現在はEXCELで請求書を作っているのですが、HTMLで作れるかどうか試してみました。しかし、いざ作ってみるとものすごく難しい。ちょっと帳票をHTMLで作るのは、私には無理そうです。
もくじ
完成イメージ
つけたい機能
- 入力をリアルタイムで反映
- 消費税計算
- 金額を3桁区切り
- テーブル行の追加と削除
- テーブル行の入れ替え
この機能を、javascriptの知識が一切ない状態で作り始めましたが、無謀でした。javascript難しすぎです。
リアルタイムで反映
これがすごく難しい。リアルタイム反映の機能を付けなかったら、もう少し簡単にできたんじゃないだろうか。しかし、リアルタイムで計算結果が表示されない請求書なんて使いにくいので、どうしてもリアルタイムで表示したい。
消費税計算
請求書をインボイス方式に対応させるには、消費税計算は欠かせません。税率ごとに対象額と税額を区分表示し、消費税総額も表示しなければいけません。数値計算だから、簡単に対応できそうですが、これも意外と難しいです。javascriptでは小数点計算に誤差がでます。0.1+0.2が0.3にならない問題。消費税計算では、どうしても小数点以下の処理をしなければいけません。そこで、decimal.jsを使うことにしました。bignumber.jsも試してみましたが、使い方がよくわかりませんでした。
消費税の端数処理は、その都度、品目ごとに（今回なら明細1行ごとに）1円未満の端数処理することは認められていません。
対象額の総額に対して、消費税率を掛けて端数処理をしなければいけません。
つまり、請求書1枚に対して、税率10％と8％、それぞれ1回だけしか1円未満の端数処理はできません。
また、1円未満の端数処理の方法は、切上げ、切捨て、四捨五入、どれを採用してもかまいません。
3桁区切り
計算結果の金額を3桁区切りで表示したい。入力ミスを減らすためにも、ぱっと見て金額がわかるように、どうしても3桁区切りで表示したい。EXCELでは簡単に表示できるので、javascriptでも簡単だろうと思っていましたが、これが意外と難しい。inputの中を3桁区切りで表示したら、valueまで変わってしまいます。valueが3桁区切りのテキストに変わってしまったら、その後の計算ができません。表示を変えたいだけなのに、すごく複雑な処理になってしまいます。
テーブル行の追加・削除・入れ替え
これは、jQueryを使えば簡単でした。
javascript難しすぎ
javascriptの文法も何も知らずに作り始めたこともあり、コードを書くがものすごく難しかったです。なぜか動かないと思ったら、セミコロン(;)が抜けていたり。計算をリアルタイムで反映させて、テーブル行の追加・削除に対応するとなると、条件分岐がよくわからないことになったり。
コードを書いては、動作確認とエラーチェックをして修正していると、コードがグチャグチャになって、最終的になぜ動いているのかよくわからない。とりあえず動いているからヨシ！状態です。
HTML帳票のデメリット
- 作成の難易度が高い
- 色々なブラウザへ対応しなければならない
- 印刷用のCSSを作る必要がある
とにかく、作るのが難しくて時間がかかります。そのうえ、小数点計算の問題もあり、計算のエラーチェックが難しいです。最終的に、この計算が本当にあっているのか、自信がなくなります。
ブラウザによって、表示や処理が変わることがあります。あらゆるブラウザに対応するのは、かなり知識がないと不可能です。今回の請求書は、Windows10環境のChromeでしか確認していません。
また、CSSの知識がないと、レイアウトを作成できません。私はないので、フレームワークを使っています。
そして、最大のデメリットは、
HTMLで請求書を作っても、相手方に請求できる額は変わらない
当たり前のことですが、請求書を、HTMLで作ろうが、EXCELで作ろうが、なんなら手書きで作ろうが、請求できる額が変わるわけではありません。HTMLで請求書を作ったから、多めに請求しとこう、という訳にはいきません。個人で作っていると、時間をかけて請求書をつくる意味がありません。本当に大事なのは、請求内容と計算の正確性です。
今回、何度も諦めそうになりながらも作成したHTML請求書は、ただの好奇心から始まり意地で終わりました。作成にとても苦労しましたが、実務でこの請求書を使うことはないでしょう。なぜなら、計算の正確性に自信がないからです。
これからは、HTMLで帳票を作るときは、入力フォームだけにします。javascriptで計算とリアルタイム反映は、とても難しいです。
9,800円のサブスク型プログラミングスクールの申込サンプル
- 小数点以下は、すべて切り捨てています
- CSSはSemantic UIを使っています
- エラーの確認をしていないため、ソースコードは修正中です
今回作ったHTML請求書のサンプルは、こちら。
計算の正確性、安全性、適時性等を保証するものではありません。プログラム及び計算結果に不具合があった場合であっても、本サイトは一切責任を負いません。本サイトを利用すること、または、本サイトを利用できなかったことに関して発生した損害について、本サイトは一切責任を負いません。本サイトを利用することにより、免責事項の内容について同意したものとみなします。
ソースコード修正
その後、bignumber.jsで、コードを書き直しました。
