読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

JSプラグインを作り始めました

どうも!chuckです。

こちらでも書きましたが、JavaScriptプラグインを作り始めました。

 

chuckwebtips.hatenablog.com

 

まだまだ作り途中ですが、制作過程などを記録しておこうと思います。

 

 

なぜ作り始めたのか

一言で言うと、JavaScriptの練習のためです。

僕は今までjQueryを使ったJavaScriptばかり書いていて、JavaScriptそのものはあんまり書いたことなかったんですね。なので、勉強のために作りました。

あと、個人的な話なんですが、僕は現在転職中であります。そこでひとつでも多く武器があればなと思いました。

 

なぜプラグイン

ではなぜプラグインなのか?それは、僕が開発をしている時の不便さに由来します。

僕はいつもデバッグ用に、

var log = function(x) { console.log(x); }

という変数を用意します。

すると、いちいち console.log('hoge') と書かなくてもlog('hoge') で済みます。

でも、もはや毎回変数を用意するのすら面倒で...w

 

プラグインを作ってしまった次第であります。

 

なぜデータ変換プラグイン

ただし、今回作ったのはデータ型を変換するプラグインです。ログ出力のプラグインを作ったのですが、あまりにもカンタンすぎて…w

ちょっと凝ったものを作りました。

 

作ってみた感想

いやあ、以外と難しかったです。

仕様

引数を2つまで受け付けます。

第一引数には変換したいデータを渡します。undefined以外なら全てOKです。(1, 'hello', true, null, NaN, 0, '', false ,,,など)

そして第二引数には、変換後のデータ型を文字列で渡します。('number', 'boolean', 'string'のどれか)

stringにするかStringにするかすごく迷いましたw

 

エラーチェック

これが大変でしたw

変換するだけならカンタンなんですが、予想外な入力への対処が大変でした。いや、大変でもあり楽しくもあったのですが笑

例えば、nullとundefinedを+で連結するとNaNになってしまいます!これ知ってました???僕はすごくビックリしました。

function hoge(x, y) {

  log( (y) + x + ' -> ' convert(x, y) );

}

こんな感じ。yにデータ型を置いて、xに変換前のデータを表示します。

ここで x と y の組み合わせが、null と undefined だったらNaNになってしまいます。文字列の連結を期待していたのに。。。

 

こんなことに遭遇したの初めてだったので、感動しました!

 

コード

では、コードを解説していきます。

ログ出力

f:id:chuck0523:20150910213651p:plain

お決まりのlog変数。これでカンタンにログ出力できます。

 

エラー文字列を定義

f:id:chuck0523:20150910213750p:plain

エラー文字列をまとめて定義しておきます。

ちなみに、このvar と変数名をずらして列挙するやり方は、underscore.jsを参考にしています。

 

本体の関数

Javaで言うところのmain関数ですね。これが処理の中心です。

f:id:chuck0523:20150910213936p:plain

まずhasData(x)で適切なデータが渡ってきているかチェックします。

その結果に応じて、showResult(x, y)で変換結果を表示するか、エラーメッセージを表示するか分岐させます。

 

データのチェック

データチェック関数です。

f:id:chuck0523:20150910214314p:plain

&& で改行する点も、underscore.jsを参考にしています。

まず、x !== undefined で引数がundefinedではないことを確認。undefinedだったらその時点でfalseが返ります。

もしundefinedではなければ、次のチェックに入ります。

null, 0, NaN, ''(空文字) はfalseになりうるデータですが、ここでは許容しています。

 

変換結果の表示

変換結果を表示する関数です。

f:id:chuck0523:20150910214814p:plain

 

例えば、こんな風に書きます。数値の0をboolean型に変換したいとします。

f:id:chuck0523:20150910215042p:plain

 

変換結果はこんな風に表示したいです。

f:id:chuck0523:20150910215224p:plain

数値の0をboolean型に変換すると、falseになりますね!

Javaのキャストっぽく、( boolean )としておいて、0 -> false と表示させます。

 

ただし、空文字の場合は何も表示されないので、(boolean)  -> falseとなってしまいます。

なので、その場合は'( empty string )' と表示させます。

そのための処理が2行目のこちらになります。

f:id:chuck0523:20150910215816p:plain

 

そして、2つ目の引数はデータ型です。ここでもエラー処理を挟んでます。

f:id:chuck0523:20150910220057p:plain

null や 0 が渡されると、空文字に変換されます。

 

次に、convertという変換の関数を使います。この結果をconvertedDataという変数に格納しています。

f:id:chuck0523:20150910220348p:plain

 

そして最後の表示処理がこれ。

f:id:chuck0523:20150910220338p:plain

もし変換にエラーが生じた場合は、convertedDateにnullが格納されます。

なので、convertedDate !== null の場合のみ、変換結果を表示します。

 

変換関数

最後にこのプラグインの目玉とも言える、変換関数について。

f:id:chuck0523:20150910220636p:plain

switch文で処理を分岐させています。

分岐の条件は、第二引数です。'number', 'boolean', 'string'の場合は、それぞれのデータ型に変換した結果を返却値にセットします。

そして、第二引数がundefined、つまり未設定だった場合は、全てのデータ型に変換した結果を返します。

また、その場合は「引数をもう1コ設定できるよ」とログ出力します。

そして、どの条件にも引っかからなかった場合、データ型の指定が不正であったと見なします。その旨をログ出力して、nullを返します。

 

課題

前回も書きましたが、グローバル汚染されています。

グローバル汚染されているということは、このプラグインを導入すると、ざっくり言うと迷惑がかかります…笑

例えば、このプラグインの中で定義したhasDataやshowResultが定義済みとなっていまいます。新たに同じ名前の変数を定義しようとすると、衝突してしまいます。

なので、これをまず直します。

 

 

今回はこれにて!

 

Github

github.com

 

コード

gistbb48df411721366d7e09