00:08
今日は、前回の続きで、数値カンマ表示モジュールをどう再利用するか、その中身をサクッと解説します。 前回は、コードをそのまま使える形で紹介しましたが、今回は、中で何をやっているのか、お軽く見ていきます。まず一番大事なのが、エクスポートとインポートです。呼び出される側、今回で言うと、Utils.jsでは、関数の前にエクスポートをつけるだけ。 エクスポートの前にエクスポートをつけるだけ。 呼び出される側、今回で言うと、Utils.jsでは、関数の前にエクスポートをつけるだけ。 呼び出される側、今回で言うと、Utils.jsでは、関数の前
これで外から使っていいですよ、という宣言になります。 次に呼び出す側、スクリプト.jsでは、インポートを使って必要な関数名を指定します。
使いたい関数だけをピンポイントで呼び出せる。 これがJavaScriptのモジュール化の基本です。
ファイルの場所も同じフォルダーなら、.slashをつける。 違うフォルダーなら、その分だけパスを書く。
ここは深追いせず、必要になったら調べればOKです。 次に今回一番謎っぽいところ、正規表現です。
数値をカンマ付き表現にするとき、まずやっているのは、数字以外を全部消す、という処理です。
カンマも文字なので、一度きれいに消して、純粋な数字だけにします。 ここで使っている記号の並びは正直覚える必要はありません。
数字以外を対象にしている。 全部に適応している。 この2点が分かっていれば十分です。
きれいになった数字をtool.locateStringという仕組みでカンマ付き表記に変換します。
逆に計算するときはカンマを外して数値型に戻す。 この往復を毎回考えるのが面倒なので、全部モジュールに押し込めています。
使う側のコードでは、これは数値として扱うだけ。 中で文字列かどうか、カンマがあるかどうか、そんなことは気にしません。
今回の例では、入力欄から取ってきた文字列を数値に戻してから計算に使っています。 一番難しいのはやはり正規表現ですが、これはリファレンスを見ながらでOK。
毎回覚えようとせず、必要になったら調べるで問題ありません。
まとめると、JavaScriptで部品を再利用するには、Exportで外に出す、Importで必要なものだけと、面倒な処理は中に隠す。
これだけです。
カンマ表示のように頻繁に使う処理ほど、モジュール化の効果は大きい。
次はどこまでを部品にするのかがちょうどいいのか、その感覚を磨いていくフェーズですね。
ということで、数値・カンマ表示・モジュール再利用の基本についてまとめました。
次回はコピーで解決、iWebViewの数値・カンマ表示の共通化についてお話しする予定です。
03:03
ご静聴ありがとうございました。
