福野泰介の一日一創

ターゲットはパソコンで見ていたゆうちょ口座を元に振込したい人と設定。ターゲットが手軽に使えるようにインストール不要、ブラウザで開くだけのウェブアプリとします。

まずは見た目をHTMLで書きます。 <h1>ゆうちょ読み替えアプリ</h1> <input id=num1>-<input id=num2> <button id=btn>変換</button><br> <div id=result></div> see on ss.sabae.cc
ゆうちょの口座情報、支店名（記号）と番号を貼り付け、変換ボタンを押すことで銀行振込用の支店名と口座番号が計算する風な画面ができました。

HTMLで使えるタグは歴史的な経緯もあってたくさんありますが、よく使うものはそんなに多くはありません。使いたいものから調べて使ってみましょう。（参考、HTMLで使えるタグ一覧、HTML 要素リファレンス - HTML: HyperText Markup Language | MDN）

次にロジックです。JavaScriptタグを書いて、ひとまず空っぽの変換する関数を書きます。 <script type="module"> const yucho2bank = (n1, n2) => { return null; }; </script> JaavScriptでは関数の定義の仕方が3種類ありますが、短く表記でき、バグを含みにくい、アロー関数で記述します。

どんな風に動いて欲しいか、テストを追加します。 alert(yucho2bank("10530", "1234561") == "058支店 普通 123456"); alert(yucho2bank("00530", "1234561") == "059支店 当座 123456"); see on ss.sabae.cc
「見てみる」を押すとalertによる「false」と2回ダイアログが出ます。まだ関数が空っぽなのでうまく動かない（=false）のは当たり前ですね。動くように「Q. ゆうちょ銀行へ振り込みをしたい（記号・番号の読み替え方法）」を読みながら、中身を実装します。

const yucho2bank = (n1, n2) => { const post = n1[0] == "1" ? "8" : "9"; const shop = n1.substring(1, 3) + post; const type = n1[0] == "1" ? "普通" : "当座"; const num = n2.substring(0, n2.length - 1); return shop + "支店 " + type + " " + num; }; see on ss.sabae.cc
テストが通って、trueが2回でるようになりました。もっと厳格にしたい場合、いろいろテストを追加して実装も合わせて改造しましょう。（参考、JavaScriptでの文字列の扱い、テキストの扱い — JavaScript での文字列 - ウェブ開発を学ぶ | MDN）

いよいよ見た目とロジックの組み合わせです。buttonタグによるボタンが押されたら、inputタグと結果を表示するdivタグへの設定するコードを追加します。 //alert(yucho2bank("10530", "1234561") == "058支店 普通 123456"); //alert(yucho2bank("00530", "1234561") == "059支店 当座 123456"); btn.onclick = () => result.textContent = yucho2bank(num1.value, num2.value); see on ss.sabae.cc
短いアロー関数は、波括弧を省略することもできます。テストコードは「//」を足してコメントアウトしておきましょう。（参考、JavaScriptでのコメント、字句文法 - JavaScript | MDN）

これで、できあがり！
ゆうちょ口座番号を入力して、変換できました！

もっと改良してみたい方へ
- 全角数字への対応、支店名の漢数字出力に対応した、バージョン
- スマホ対応のHTMLタグなどを追加し、CSSで見た目を変更した、バージョン

「ゆうちょ読み替えアプリ」

身の回りでちょっと不便を見つけたら、プログラミングで解決しよう！

構造のHTML → ロジックのJavaScirpt → 見た目のCSS
それぞれ使いながら、少しずつ慣れていくのがオススメです。

links
- HTML を始めよう - ウェブ開発を学ぶ | MDN
- 入門編 - JavaScript | MDN
- CSS: カスケーディングスタイルシート | MDN