【前編 プログラミング】 JavaScript初心者が、WEBサービスの開発過程を振り返る。
JavaScript初心者が、作ったWEBサービスの過程をブログで振り返っていくシリーズ。前回は、【開発のきっかけ】 JavaScript初心者 公共料金の計測期間と金額をセットで表示するWEBサービスを作りました。 - progyu88で、「なんで、このWEBサービスを作ろうと思ったのか？」を書きました。
上記記事で触れていたように、2日目の今回は技術編の前編 プログラミングを振り返ります。なぜ、前編 後編に分けるかとうと、技術には、動きを作るプログラミング言語のJavaScriptとデザインを作るCSSがあるので長くなってしまうからです。そこで、前編でプログラミング、後編でCSSを振り返ることにしました。
JavaScriptで処理をしている場所
まず、僕が作ったサービスでJavaScriptが使われているのは、3つ目と4つ目です。
1、記録したい公共料金の種類を選択
2、金額を入力
3、計測最終日から、期間を逆算
電気代、ガス代ならば、計測最終日より1ヶ月前を計算する。
1ヶ月前の計測日＋最終日
水道代ならば、計測最終日より2ヶ月前を計算する。
2ヶ月前の計測日＋最終日
4、表示
今月の（電気代、ガス代、水道代）料金は、（ ）円です。
では、順番通りにどういう処理をしているのか？、どんなコードを書いているのかを説明していきます。
日付を計算する
公共料金の種類によって異なる計測期間を計算することが、このサービスの最も大事なところです。そのために必要なのは、記録をする当日の日付から、1ヶ月前、2ヶ月前を計算するプログラムが次のコードです。
3つのポイント
1、new dateから、日付を抜き出す。
new dateには、年 月 日にち 場所など多くの情報が含まれています。そこから、計算に必要な月と日にちを変数に指定して抜き出します。
2、月は、1を足す。
JavaScriptで日付を取得すると、月は0～11月で取得されます。そこで、var month = dt.getMonth()+1;とすれば1～12月で表示することができます。
3、計算は、getMonthとSetMonthの2つ押し。
getMonthは、newdateの月を取得するもので、SetMonthは任意の月を表示させるものです。通常であれば、SetMonth(6)で、7月と表示することができます。しかし、これでは毎月記録していくにあたり不自由です。
そこで、毎月対応していくために、SetMonth（任意の月＝getMonth-1で1ヶ月前、-2で2ヶ月前）と組み合わせて書くことで対応することができます。
しかし、これだけでは、計算結果が数字の羅列で表示されてしまいました。これを解決したのは、var ◯◯month = dt.getMonth()+Xと必ず書くことでした。
追記 2015年1月30日 Xには、1ヶ月前ならば+1、2ヶ月前ならば+2が入らないといけないことも確認しました。
JavaScriptで、今日から1ヶ月前を計算する3つのポイント - Qiita
正規表現で数字を3桁ずつカンマで表示する
input type = numberで入力された金額を3桁ずつカンマで表示するために、正規表現を使いましたが、まったくわかりませんでした。
【JavaScript】 正規表現 数字を3桁ずつカンマで表示
正規表現は、最初の（）が$1、次の（）が$2になるので、/(\d)が$1 (?=(\d\d\d)+(?!\d))が$2となります。3桁ずつカンマを表示するには、後ろに続く数字をもたない下3桁（$2）を後ろに持つ$1の次にカンマを挿入するのだと考えましたが、全部を置換するgフラグをなくすと、最初の文字列だけを置換して12,345678円になりました。
僕は、後ろの桁から数えていくと思ったので、「なんで、12345,678じゃないの！？」と思いました。今もこの疑問に解決できていません。
選択された条件ごとに処理を変える
最後に、セレクトボックスで配列になる公共料金の種類、日付の計算結果と正規表現で3桁ずつのカンマで表示された金額を一緒に表示します。これは、if else文で条件分岐をして、それぞれを文字列結合をしています。
そして、今回は計算結果を表示すると何もないとこに新しく表示がされるというのをしたかったので、htmlでdiv id名outputを作っておき、計算されるたびにinnerHTMLでhtmlを書くようにしました。
2つのポイント
1、innerHTML innerTEXTがある
2つとも文章を書き換えることができますが、効果を発揮する対象に違いもあるようです。innerHTMLはhtmlタグを使うことができ、innerTEXTは、テキストだけのようです。
2、文字列結合で「'」を使う
文字列結合では、変数でない部分を「'」「"」どっちを使って囲っても大丈夫です。ただし、「'」のがテキストと被ることがなく、コードかテキストかで混同がされないと思います。
まとめ
正規表現以外は、わりとすんなり進んだと思います。if else 配列は、「こうすればいいかも」というのが想像できるようになったので、その分ラクになったかもしれません。
参考サイト
【開発のきっかけ】 JavaScript初心者 公共料金の計測期間と金額をセットで表示するWEBサービスを作りました。 - progyu88
セレクトボックスを配列にして取得
[JavaScript] セレクトボックスの選択状態を取得する
日付の取得
日付の計算
JavaScript による日付・時刻・時間の計算・演算のまとめ – hoge256 blog
JavaScript - 数値をカンマ区切りにする - Qiita
