どうも！chuckです。
こちらでも書きましたが、JavaScriptのプラグインを作り始めました。
まだまだ作り途中ですが、制作過程などを記録しておこうと思います。
なぜ作り始めたのか
一言で言うと、JavaScriptの練習のためです。
僕は今までjQueryを使ったJavaScriptばかり書いていて、JavaScriptそのものはあんまり書いたことなかったんですね。なので、勉強のために作りました。
あと、個人的な話なんですが、僕は現在転職中であります。そこでひとつでも多く武器があればなと思いました。
なぜプラグイン？
ではなぜプラグインなのか？それは、僕が開発をしている時の不便さに由来します。
僕はいつもデバッグ用に、
var log = function(x) { console.log(x); }
という変数を用意します。
すると、いちいち console.log('hoge') と書かなくてもlog('hoge') で済みます。
でも、もはや毎回変数を用意するのすら面倒で...w
プラグインを作ってしまった次第であります。
なぜデータ変換プラグイン？
ただし、今回作ったのはデータ型を変換するプラグインです。ログ出力のプラグインを作ったのですが、あまりにもカンタンすぎて…ｗ
ちょっと凝ったものを作りました。
作ってみた感想
いやあ、以外と難しかったです。
仕様
引数を２つまで受け付けます。
第一引数には変換したいデータを渡します。undefined以外なら全てOKです。（1, 'hello', true, null, NaN, 0, '', false ,,,など）
そして第二引数には、変換後のデータ型を文字列で渡します。（'number', 'boolean', 'string'のどれか）
stringにするかStringにするかすごく迷いましたｗ
エラーチェック
これが大変でしたｗ
変換するだけならカンタンなんですが、予想外な入力への対処が大変でした。いや、大変でもあり楽しくもあったのですが笑
例えば、nullとundefinedを+で連結するとNaNになってしまいます！これ知ってました？？？僕はすごくビックリしました。
function hoge(x, y) {
log( (y) + x + ' -> ' convert(x, y) );
}
こんな感じ。yにデータ型を置いて、xに変換前のデータを表示します。
ここで x と y の組み合わせが、null と undefined だったらNaNになってしまいます。文字列の連結を期待していたのに。。。
こんなことに遭遇したの初めてだったので、感動しました！
コード
では、コードを解説していきます。
ログ出力
お決まりのlog変数。これでカンタンにログ出力できます。
エラー文字列を定義
エラー文字列をまとめて定義しておきます。
ちなみに、このvar と変数名をずらして列挙するやり方は、underscore.jsを参考にしています。
本体の関数
Javaで言うところのmain関数ですね。これが処理の中心です。
まずhasData(x)で適切なデータが渡ってきているかチェックします。
その結果に応じて、showResult(x, y)で変換結果を表示するか、エラーメッセージを表示するか分岐させます。
データのチェック
データチェック関数です。
&& で改行する点も、underscore.jsを参考にしています。
まず、x !== undefined で引数がundefinedではないことを確認。undefinedだったらその時点でfalseが返ります。
もしundefinedではなければ、次のチェックに入ります。
null, 0, NaN, ''(空文字) はfalseになりうるデータですが、ここでは許容しています。
変換結果の表示
変換結果を表示する関数です。
例えば、こんな風に書きます。数値の0をboolean型に変換したいとします。
変換結果はこんな風に表示したいです。
数値の0をboolean型に変換すると、falseになりますね！
Javaのキャストっぽく、( boolean )としておいて、0 -> false と表示させます。
ただし、空文字の場合は何も表示されないので、(boolean) -> falseとなってしまいます。
なので、その場合は'( empty string )' と表示させます。
そのための処理が２行目のこちらになります。
そして、２つ目の引数はデータ型です。ここでもエラー処理を挟んでます。
null や 0 が渡されると、空文字に変換されます。
次に、convertという変換の関数を使います。この結果をconvertedDataという変数に格納しています。
そして最後の表示処理がこれ。
もし変換にエラーが生じた場合は、convertedDateにnullが格納されます。
なので、convertedDate !== null の場合のみ、変換結果を表示します。
変換関数
最後にこのプラグインの目玉とも言える、変換関数について。
switch文で処理を分岐させています。
分岐の条件は、第二引数です。'number', 'boolean', 'string'の場合は、それぞれのデータ型に変換した結果を返却値にセットします。
そして、第二引数がundefined、つまり未設定だった場合は、全てのデータ型に変換した結果を返します。
また、その場合は「引数をもう１コ設定できるよ」とログ出力します。
そして、どの条件にも引っかからなかった場合、データ型の指定が不正であったと見なします。その旨をログ出力して、nullを返します。
課題
前回も書きましたが、グローバル汚染されています。
グローバル汚染されているということは、このプラグインを導入すると、ざっくり言うと迷惑がかかります…笑
例えば、このプラグインの中で定義したhasDataやshowResultが定義済みとなっていまいます。新たに同じ名前の変数を定義しようとすると、衝突してしまいます。
なので、これをまず直します。
今回はこれにて！
Github