HaskellのようにJSを書こう!LiveScriptの基本のキ | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

HaskellのようにJSを書こう!LiveScriptの基本のキ

開発効率をあげるため、AltJSを利用されている方は多いのではないでしょうか?

AltJSでは、TypeScriptやCoffeeScriptなどが有名ですね。

今回はそのAltJSの中からLiveScriptという言語を紹介していきます。

スポンサーリンク

英語のドキュメントしかまだなく、情報としてもまだ少ないので、
LiveScriptの基本のキをエンジニアの若井(わかい)が紹介していきます。

AltJSについて詳しい内容はこちらの記事を御覧ください。
http://sitest.jp/blog/?p=1697

LiveScriptとは?

LiveScriptとは、CoffeeScriptがさらに拡張されたAltJSの一種です。

関数型言語のような書き方ができ、Haskellを思わせるような見た目です。

学習コストが高めですが、覚え始めるとグンと開発効率があがります。

LiveScriptの記法

LiveScriptの公式ドキュメントの中から記法を6つ紹介していきます。

1. 関数定義「->」

JavaScriptの「function」を「->」演算子で表すことができます。
引数を宣言せず、関数内で「it」句を使用すると自動的に引数に「it」が適応されます。

[LiveScript]

num = -> 2
num() # => 2
[JavaScript]

var num;
num = function(){
  return 2;
};
num();

2.関数実行「!」

JavaScriptの「()」を「!」演算子で表すことができます。
CoffeeScriptのように引数が存在すると「!」を省いて書くことが出来ます。

[LiveScript]

num = -> 2
num! # => 2

double = -> it * 2
double 2 # => 4
[JavaScript]

var num, double;
num = function(){
  return 2;
};
num();

double = function(it){
  return it * 2;
};
double(2);

3. パイピング「|>」

LiveScriptで「|>」演算子を使用することが出来ます。
例えば「x |> y」だとyの最終引数にxを渡すことができます。

[LiveScript]

double = -> it * 2
2 |> double # => 4
[JavaScript]

var double;
double = function(it){
  return it * 2;
};
double(2);

4. 文字列化 「\」

LiveScriptでは「\」(バックスラッシュ)を値の前に書くと、文字列化してくれます。

[LiveScript]

\string
[JavaScript]

'string';

5. 配列 「<[]>」

配列を「<[]>」演算子で表現することができます。
文字列として代入せずとも文字列化してくれます。

[LiveScript]

[ string1 string2 string3 ] |> console.log # => string1 is not defined

<[ string1 string2 string3 ]> |> console.log # => ["string1", "string2", "string3"]
[JavaScript]

console.log(
[string1(string2(string3))]);

console.log(
['string1', 'string2', 'string3']);

6. カリー化 「(x, y)-->

カリー化を「(x, y)-->」で表現することが出来ます。

[LiveScript]

times = (x, y) --> x * y
double = times 2
double 2 # => 4
[JavaScript]

var times, double;
times = curry$(function(x, y){
  return x * y;
});
double = times(2);
double(2);
function curry$(f, bound){
  var context,
  _curry = function(args) {
    return f.length > 1 ? function(){
      var params = args ? args.concat() : [];
      context = bound ? context || this : this;
      return params.push.apply(params, arguments) <
          f.length && arguments.length ?
        _curry.call(context, params) : f.apply(context, params);
    } : f;
  };
  return _curry();
}

prelude.lsとは?

LiveScriptにはHaskellのPreludeにちなんで、
prelude.lsという関数ライブラリがあります。

下記のコマンドでインストールすることができます。

npm install prelude-ls

こちらのライブラリを使用すると簡単に配列の操作を行えたりします。

prelude.lsを使ってFizzBuzzを書いてみよう

LiveScriptの記法とprelude.lsを扱えると、
FizzBuzzも簡単に解くことができます。

[LiveScript]

fizzbuzz = ->
  | it % (3 * 5) is 0 => \FizzBuzz
  | it % 3 is 0 => \Fizz
  | it % 5 is 0 => \Buzz
  | _ => it
[1 to 30] |> each fizzbuzz >> console~log

まとめ

いかがでしたか?

LiveScriptの記法からprelude.lsのことまで
触れていきました。

今回、紹介した記法はほんの一部です。
まだまだ効率的な記法があるので、prelude.lsのライブラリと共に
学んでいきましょう。


03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら