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

コンパイラかく語りき

import { Fun } from 'programming'

coffeeScriptの勉強。自作JSのプラグインをcoffee化する

どうも!chuckです。

僕は最近、ようやくcoffeeScriptの勉強を始めました。ただ、書いたコードが絶対的に少なく、まだまだ身についていない印象です。

 

なので、最近自作したJavaScriptプラグインをcoffeeで書き換えてみようかなと思います。

 

github.com

 

 

いやあ、以前ドットインストールで勉強したのですが、すっかり忘れてますね…。

ちょっとずつ復習していきます。

 

ログ出力関数

まずはこちらをcoffee化。変数を宣言して、そこに関数を代入しています。

f:id:chuck0523:20150919073457p:plain

 

coffeeでは変数宣言にvarは必要ありませんでした。

なので、まずはこんな感じですね。

f:id:chuck0523:20150919073804p:plain

 

次に関数を書きます。

まず、引数がない関数はこんな感じ。

f:id:chuck0523:20150919074339p:plain

functionの代わりに ->を書くんでしたね。

 

次に引数をつけてみます。

f:id:chuck0523:20150919074454p:plain

こうですね。引数は矢印の前に置きます。

 

 

coffeeではこの関数は、

f:id:chuck0523:20150919073457p:plain

 

このようになります。

f:id:chuck0523:20150919074607p:plain

すっきりしましたね。

 

 

定形文字列の宣言

次はこちら。これはまあ文字列を宣言しているだけなのでカンタンですね。

f:id:chuck0523:20150919074815p:plain

 

var と末尾のセミコロンを除くだけですね。(coffeeではセミコロンが不要でしたね)

f:id:chuck0523:20150919075027p:plain

 

引数チェック関数

次に、受け取った引数が正しいものかどうかチェックする関数です。

f:id:chuck0523:20150919075332p:plain

こちら。

 

これまでどおり、var とセミコロンを取り除き、関数に (x) ->を使います。

f:id:chuck0523:20150919075425p:plain

そして、新規要素としては、coffeeでは同値演算子(===)を==と書きます。

===  を書くとコンパイル時にエラーになります。

f:id:chuck0523:20150919075609p:plain

(ターミナルでのエラー画面)

 

変換後はきちんと同値演算子に変換されています。

f:id:chuck0523:20150919075710p:plain

 

データ変換関数

次にこちら。受け取ったデータを変換する関数です。

f:id:chuck0523:20150919075823p:plain

swtich文ですね。

 

Qiitaの記事より抜粋。

f:id:chuck0523:20150919075934p:plain

qiita.com

 

ふむふむ。when と elseを使うんですね。

こうなりました。

f:id:chuck0523:20150919080230p:plain

なかなかすっきりしました。

それぞれの処理文でreturnという単語が被っていたので、それを省略できたことが嬉しいです。

 

変換結果を表示する関数

こちら。

f:id:chuck0523:20150919080604p:plain

 

変数を3つ用意して、最後に変換結果に応じてログ出力をしています。

三項演算子をcoffeeでどうやって書くのかがポイントですね。

 

まず三項演算子以外を、coffee化。

f:id:chuck0523:20150919081028p:plain

 

コンパイル後のコードがこちら。

f:id:chuck0523:20150919081124p:plain

なんだか変数増えてない?

ref, ref1という意図しない変数が追加されています。そして、dataとdataTypeに格納される値もおかしい…。

 

調べた。

qiita.com

 

f:id:chuck0523:20150919081322p:plain

とのこと。

そうそう、?はRuby的な用法でしたね。すっかり忘れていました。

 

代わりにif then elseを使うようです。

書き換えました。

f:id:chuck0523:20150919081528p:plain

三項演算子よりも記述量は増えましたが、見やすいと感じます。

 

おしまい

書き換えはけっこう大変かなと思いましたが、ぜんぜんそんなことはなく、楽しくやることができました。

コード的には、50行1,458文字が、38行1,157文字になりました。

20%減といったところですね。

とても良い練習になりました。

 

書いたコード

gistd87dc6be6944512068ce