このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

JavaScript

2016.07.31

この記事は最終更新日から1年以上が経過しています。

スクリーンショット 2016-07-31 5.33.10

お久しぶりにJavaScriptの話題でもと。

Facebook製 JavaScriptライブラリ(フレームワーク)と言えば、React.jsなイメージですが、

こちらも結構前にリリースされていて、あまり触ってこなかったので今回はこちらを。

immutable

スクリーンショット 2016-07-30 8.01.39

公式サイト

http://facebook.github.io/immutable-js/

github

https://github.com/facebook/immutable-js

Immutable collections for JavaScript

immutable.jsはその名の通りimmutable(不変)なコレクションを提供するJavaScriptライブラリとなっております。

そう、JavaScriptオブジェクトは基本、mutableなオブジェクトな訳で、それをimmutableなオブジェクトへと変換してくれるのです。

オブジェクトをimmutableにする事によって、関数型プログラミングで用いられる、永続データプログラミングを行う事ができます。

これを利用する事によって、関数型プログラミングの強い後押しをしてくれ、参照透過性の高いプログラミングが行えますね。

これは良い!

githubのスター数もかなりの数を行っておりますね。

スクリーンショット 2016-07-30 8.03.26

さぞかしみんなも使っているのだろうと、プログラミング共有サービスで有名な「Qiita」を覗いてみると、

スクリーンショット 2016-07-30 5.59.06

あまり投稿がない感じですね。。日本の記事も結構少ない気がしますね。。

JavaScriptを主に書かれている日本の方にはとっつきにくい概念なのですかね??

やはり、型を入れて利用していると、この辺はどうも欲しくなりますよね。

では、早速使っていきましょうー!

インストール

npmコマンドでインストールする際

$ npm install immutable

webBrowser で利用する場合はimmutable.jsファイルを読みこみましょう。

<script src="immutable.min.js"></script>

node環境では、requireして利用。

使い方

では早速、Map関数を利用。

Map
var Immutable = require("immutable");
var map1 = Immutable.Map({a: 1, b:2, c: 3});

Map()でオブジェクトをimmutableなオブジェクトに変換することが可能です。

勿論ですが、変換後こんな感じで参照することは出来ません。

console.log(map1.b); // undefined

キーが、”b”の値を取得する際は、「get」を使用します。

console.log(map1.get('b'));

これを変数に渡してみましょう。

通常だと、参照渡しで渡ってしまうのですが、値渡しすることが出来ます。

var Immutable = require("immutable");
var map1 = Immutable.Map({a: 1, b:2, c: 3});

var clone1 = map1;
var clone2 = map1.set('b', 50);

console.log(map1.get('b')); //2
console.log(clone1.get('b')); //2
console.log(clone2.get('b')); //50
assert(map1.equals(clone1) === true);
assert(map1.equals(clone2) === false);

ふむ。素敵な感じですよね。

merge
その他、mergeを行い時にも至って簡単に行えます。

var x = Immutable.Map({a: 10, b: 20, c: 30});
var y = Immutable.Map({b: 40, a: 50, d: 60});
x.merge(y) // { a: 50, b: 40, c: 30, d: 60 }
y.merge(x) // { b: 20, a: 10, d: 60, c: 30 }

その他にも、Map APIには、delete、clear、update、has、first、last、keys、values、reverse、sortBy、slice、flatten、reduce、max、some、join、count、find ….と必要そうなものは全て揃っている印象なので、安心して使えますね。

List

続いて、Listを軽く。
1,2,3が格納された配列を生成してみます。

var arr = [1,2,3];
arr.push(4);
console.log(arr); // Array [1, 2, 3, 4]

ネイティブでは、このように破壊的メソッド(元のオブジェクトが壊されている状態。)で配列に代入されてしまいます。
このような場合でも、immutable.jsは力を発揮します。

immutable.jsでは List APIが用意されていますので、そちらを利用して配列を生成します。

[cod lang=”js”e]var arr = immutable.List.of(1, 2, 3);
arr.push(4);
console.log(arr.toJS());// Array[1, 2, 3][/code]

反映されていないのが確認できます。
変数に値渡しを行うことによって、非破壊的にpushを行う事ができます。

var arr = Immutable.List.of(1, 2, 3);
var newArr = arr.push(4);

console.log(arr.toJS()); //Array [1, 2, 3]
console.log(newArr.toJS()); //Array [1, 2, 3, 4]

元のarrに影響がいってないことが確認できます。

その他、pop、unshift、shift、set、delete、clear… などのAPIも用意されております。

数を知りたい時は「size」を利用すればすぐに知れます。

console.log(arr.size); //4
fromJS()

JavaScript界隈では良く利用するファクトリーパターンで明示的に生成も行えますね。
fromJsonやfromDataなど、良く見かけますが、immutable.jsではfromJSとJavaScriptオブジェクトとの世界を切り分けているのを垣間見れます。

JSオブジェクトからの生成。

var obj = immutable.fromJS({a: 1, b: 2});
console.log(obj.get('a')); // 1 

サンプルを見ると、callbackでListとOrderedMapにimmutableに変換しているのがわかりますね。

Immutable.fromJS({a: {b: [10, 20, 30]}, c: 40}, function (key, value) {
  var isIndexed = Immutable.Iterable.isIndexed(value);
  return isIndexed ? value.toList() : value.toOrderedMap();
});

// true, "b", {b: [10, 20, 30]}
// false, "a", {a: {b: [10, 20, 30]}, c: 40}
// false, "", {"": {a: {b: [10, 20, 30]}, c: 40}}

topレベルのkeyが空文字で変える様になっている様ですね。
JavaScriptオブジェクトに戻す際は、toJS()で戻すことが可能です。

console.log(obj.toJS()); 
// a: Object
//   b: Array [10, 20, 30]
// C: 40

遅延評価

関数型プログラミングの特徴として、immutableな永続データプログラミング、イベント駆動、宣言型でコードは参照透過

といった特徴があるかと思います。

immutable.jsも遅延評価を行っており「必要な時に必要な分処理される」設計となっております。

例に、自然数10までの配列を作成してみたいと思います。

var natural = Immutable.Range();
var natural_10 = natural.take(10);
natural_10 = natural_10.toArray(); //Array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Range()で自然数を生成し、takeで数をしてします。
toArray()で配列で出力するのですが、この時に初めて処理が走ります。
このように、必要な時になった時に処理が走るように設計されております。
ちなみに上記の記述は以下のメソッドチェーンでも行う事が可能です。

var natural_10 = Immutable.Range().take(10).toArray(); //Array [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

その他にも用意されてAPIは沢山あり、全部書こうとするとかなりの量となってしまいますので、その他は公式ドキュメントを確認していただければと思います。

公式ドキュメント
http://facebook.github.io/immutable-js/docs/#/

immutable-jsはReactJSとの相性もよさそうな感じで、関数型プログラミングを行うにはもってこいのライブラリですね。
関数型プログラミングを行っていて、JavaScriptに精通されている方に好まれている感じですかね。

ではではー。

スクリーンショット 2016-07-31 4.14.51

Comment

Related Article

OAuthのフローを可視化できるツールを作ってみました。

2020.05.17

令和の時代に、JavaScriptで Shift-JISファイル作成 全銀データフォーマットに対応する。

2020.03.03

インターネットにて世論調査を行う「世論Web」サービスを始めてみました。

2020.01.31

年末のレトロゲーム熱の際、ファミコンソフト一覧パッケージ作ってました。

2020.01.24

あと10日で「jsdo.it」のサービスが終わってしまう!! ソースダウンロードまだの方は急げぇ〜!

2019.10.21

正規表現 先読み後読み 論理積

2019.07.28

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

2019.06.22

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

2019.03.24

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

2019.02.21

CATEGORY LIST

LATEST NEWS

M1 Mac ruby rbenv install error

Ruby

2022.10.10

【Flutter】CheckboxListTileのチェックボックスをカスタマイズ

Flutter

2022.10.01

FLEXISPOT E3で作るスタンディング PCデスク

イベント

2022.09.18

NordVPNを使ってみた感想は?評判や口コミを徹底的に解説

tool

2022.07.26

Ubuntu 20.04 LTS サーバ構築 - DKIM、DMARCを設定する

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix Let’s EncryptでTLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfix SASL認証

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Dovecotインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Postfixインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - Let’s EncryptでSSL/TLS化

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 – Nginxインストール

ubuntu

2022.05.01

Ubuntu 20.04 LTS サーバ構築 - 初期セットアップ

ubuntu

2022.05.01

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US