このサイトは、只今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

このコロナ禍で、飛沫感染防止など求められる中「電子メモパッド」が重宝。 1300円で購入可能な電子メモパッドが超絶便利な件。

tool

2020.06.02

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

JavaScript

2020.05.17

Django django-allauthで、サクッとソーシャルログイン機能を実装

Python

2020.04.12

部下を育てる技術

イベント

2020.04.08

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

JavaScript

2020.03.03

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

JavaScript

2020.01.31

まだ間に合う!!ラズベリーパイ購入なら「RSコンポーネンツ」で!最大40%オフの年に1度の大特価期末セール中!

RaspberryPi

2020.01.25

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

JavaScript

2020.01.24

TSUKUMO の初売りでNAS (Synology DiskStation DS218j)購入!!

イベント

2020.01.04

Mac用 エミュレーター 「OpenEmu」が、V2.2リリース!GameCube対応して更に神アプリ進化!

Game

2020.01.01

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻その2

Game

2019.12.31

この時期になると、やたらレトロゲームをやりたくなるのはなんですかね?ハードオフに向かうの巻

Game

2019.12.14

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US