{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/useful-libraries-in-develop-taskloud/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"f6cfbe6d-148e-5b65-b27b-debe0c4acb56","excerpt":"久々にフロントの話題です。 4 月にTaskloud というアプリをリリースしました。 その際に、色々と使ってみたかったライブラリを使って感触を得たので、 ご紹介がてら使用感をメモしておきます。 FastClick ftlabs/fastclick https://github.com/ftlabs/fastclick…","html":"

久々にフロントの話題です。
\n4 月にTaskloud というアプリをリリースしました。

\n

その際に、色々と使ってみたかったライブラリを使って感触を得たので、
\nご紹介がてら使用感をメモしておきます。

\n\n

FastClick

\n
\n

ftlabs/fastclick
\nhttps://github.com/ftlabs/fastclick

\n
\n

Github で star7300 越え。
\n言わずと知れた、モバイル web アプリでの click 反応速度を早くするライブラリ。
\nこいつを導入しておくと click イベントを監視している際の、タップ時のもたつきがかなり軽減できます。
\nまた、フォーム等入力要素やリンクなどjs を入れない部分の反応速度も上げられるので、モバイル Web アプリの操作性を上げるには必須といっても過言ではないでのは。

\n

Flipsnap

\n
\n

flipsnap.js
\nhttp://pxgrid.github.io/js-flipsnap/

\n
\n

PixelGridという会社さんが作られている、スライダーを実現するライブラリです。
\nフリップ？ スワイプ？ 操作で左右にページをめくるスライダーは色々とあるのですが、安定性、カスタマイズ性、動作の自然さ・軽快さで一番しっくり来ました。
\nバージョン 1 の時はボタンでページ移動していたチュートリアルの部分に導入しております。

\n

Zepto

\n
\n

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library
\nhttp://zeptojs.com/

\n
\n

ざっくり言えば軽量版 jQuery。
\njQuery との互換性を保ちつつ、余計な機能を省いて読み込み速度を高速化しています。
\nそれだけではなく、ハードウェアアクセラレーションを使用した滑らかなアニメーションがデフォルトで有効になってたりと、モバイルなら jQuery より助かることが多いかもしれません。
\nスタイルが崩れたり動作がものすごく重くなったりと、こいつが悪さをすることも多いのですが、仕組みをある程度把握していれば、ドハマりすることは無いと思います。

\n
\n

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPU と GPU を理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06 日目）

\n
\n

Underscore.js

\n
\n

Underscore.js
\nhttp://underscorejs.org/

\n
\n

Backbone.js を使用するための依存ライブラリと思っていたのですが、これ単体でも十分に使えます。
\nリスト操作に弱い js の強い味方です。

\n

Taskloud はタスク管理ツールということで、リストを操作する機会が多いのでフィルタリングだったり一括操作だったりと、大活躍しています。
\nとても汎用的な機能を提供してくれているので、アプリに限らず色々なところに役立ちそうなライブラリです。

\n

Backbone.js

\n
\n

Backbone.js
\nhttp://backbonejs.org/

\n
\n

軽量、自由度の高い MV*なフレームワークです。
\n素の js が理解できていれば学習コストは提供されているプロパティやメソッドを知るくらいです。
\nこのように学習コストが低いのと、コードの挙動が自然（Angular とかのようなごにょごにょを特に使ってない）なので、
\nいざというときは、直接ソースを読めば何をしてるかほぼ確実にわかります。

\n

自由度が高すぎてオレオレコーディングで実装すると破綻してしまうので、
\n上に一枚 Marionette というライブラリを噛ませています。

\n

単体では他の js フレームワークに比べて機能が少なめですが、
\n多数のプラグインが開発されているので、自由に選べて必要な物だけ組み込めるのが嬉しいところです。

\n

Marionette

\n
\n

Marionette.js
\nhttp://marionettejs.com/

\n
\n

Backbone にいくつかの制約と拡張を加えるライブラリです。
\n特に入れ子になったビューや、一覧画面系の扱いがとても楽になります。

\n

また、分かりきった処理（ビューにモデルを渡してrender().$elのような操作）を書かなくて良くなるので、コードの見通しが良くなります。

\n

記述量が減るし、Marionette が提唱する Backbone.js のお作法に則って実装すれば、
\n保守性が高く、構造化されたコードを書くことができます。 こちらもコードがシンプルで、ソースを読めば何をしてるか把握できるのが魅力です。

\n

DefinitelyTyped

\n
\n

今回は一定レベルの安全性と保守性を保つために、素の js ではなくTypeScriptを使用しました。
\nしかし TypeScript はコンパイルや型チェックがある反面、宣言ファイルを作る手間があります。特にサードパーティのライブラリの宣言ファイルを作成するのはとても面倒で尻込みしてしまいがちです。

\n
\n

そんなときに活躍するのがこちら。
\n色々なライブラリの宣言ファイルの寄せ集め、といった感じのものです。

\n

この宣言ファイル群のおかげで、「このライブラリ使いたいけど.d ファイルが無い…自作するか…」という TypeScript あるあるなハードルの高さを激減してくれます。
\nまた、更新頻度が高く使いたかったライブラリの宣言ファイルがいつの間にか追加されてるということも開発中に多々有りました

\n

Firebase

\n
\n

Firebase – Build Realtime Apps
\nhttps://www.firebase.com/

\n
\n

これはライブラリというよりは Web サービスなのですが、ご紹介です。
\nサーバサイドのコードを一切書くことなく、リアルタイムなデータの保存、反映が可能になる Web サービスです。

\n

バージョン 1 の Taskloud はサーバサイドを Rails で実装し API サーバとして利用していたのですが、
\nHeroku のサーバは一定時間アクセスがないと落ちて再びアクセスが有った時の起動に時間がかかるという仕様や、メンテのコストも下げたい、無料アプリなのでお金を掛けたくないということで、こちらに乗り換えました。

\n

軽量なタスク管理ツールには情報の更新頻度や同期性はさほど求められませんが、
\nWebSocket を使うと通信操作がどのような感じになるのか、サクサク動き快適なのか、など実験してみたかったため試験的に導入しています。

\n

backfire

\n
\n

BackFire: Firebase bindings for Backbone.js – Firebase
\nhttps://www.firebase.com/blog/2013-01-29-backfire-firebase-bindings-for-backbonejs.html

\n
\n

最後です。
\n上記の Firebase というサービスを Backbone.js で簡単に利用するためのプラグインです。

\n

Firebase の仕様や振る舞いをさほど気にすることなく、多少コレクションの設定を書き換えれば、あとは Backbone.js のコードにだけ集中できます。
\n裏側で Firebase と同期して Backbone のコレクションが追加更新されるので、addやremoveイベントの発火に合わせてコードを書いていけば OK です。

\n

さらに Marionette と組み合わせると、
\n一覧画面なんかは ItemView に DOM イベントの設定さえすればほぼ勝手に動く状態になります。

\n

まとめ

\n

と、Taskloud ではこのようなライブラリを使用しています。
\nバージョン 1 のときに色々とフルスクラッチして痛い目を見たので、今回は「なるべくライブラリに任せて自分のコードを書かない」という方針でいきました。

\n

ライブラリを多用しているために、学習コストやライブラリ同士の兼ね合いや調整など新たな問題も起こっていますが、フルスクラッチで書いてドハマりするよりもはるかに安いコストで済んでいると思います。

\n

ハイブリッドアプリや Web アプリのモバイル対応等を作られる方がいらっしゃいましたら、参考になれば幸いです。

","timeToRead":7,"frontmatter":{"title":"Taskloudを制作する際に使用したライブラリまとめ","tags":["Backbone.js","Firebase","JavaScript","Marionette"],"date":"August 26, 2014","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='135'%20viewBox='0%200%20400%20135'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2027v26h21v3c1%201%201-3%201-9V35h-4c-4%200-4%200-4-3v-2l10-1c12%200%2013%200%2012%204%200%202-1%202-4%202h-4v16c0%2015%200%2016-2%2016l-2%202%203%201h3V60c0-6%200-10%201-9%200%202%201%202%205%202l6%201c1%201%201%200%202-1%202-8%208-12%2014-10l4%201%203-1%203%201v23h-3l-3-1h-2c-3%202-6%202-9%201-4-2-3%200%200%202s4%202%207%202l8-1h4v-6c0-10%201-11%205-11s4%200%204-3c0-6%206-9%2011-6%203%201%204%203%201%205h-3c-1-2-5%200-3%201%201%202%203%202%2011%203l7%201c1%201%202-13%202-22v-6h6v24l4-3c3-3%204-4%207-4h5l-6%205c-3%202-5%205-5%206%200%202%202%202%204%200l8-1h6v4l1-13V26h3l3%201v21c0%2018%200%2019-2%2019l-2%202%204%201h3V59c0-8%200-10%201-7l1%202c0-2%204-1%204%202%201%202%201%202%201-1%200-9%2010-15%2019-11%202%202%203%202%206%200s3-2%203-10c0-14%206-25%2018-31l6-3H0v27M286%204l5%208%202%204h9c17%201%2030%2013%2032%2029%200%206%201%207%204%2011%2017%2019%202%2049-24%2048h-7l-3%204c-13%2018-43%2023-64%2010l-5-3-6%203c-13%206-29%202-38-10-2-4-4-5-9-6-11-4-21-18-21-29%200-4%200-4%204-3%208%201%2013-5%2013-13v-4l-1%203c-2%2012-15%2016-23%207l-3-3-1%206c-1%2011%203%2023%209%2031l5%208c4%209%2015%2018%2022%2018l3%202%205%206%203%204h102l2-3%205-6c1-3%201-3%206-2%207%202%2018-1%2019-5l1-2v2l4-2c3-3%204-5%203-6%200-2%200-2%201-1l3-3%204-7c9-12%2011-27%206-40l-1-6%2024-1h24V0H283l3%204m-1%2023l-24%2021-21%2020-1-20-1-19v19c0%2018%200%2019-2%2019l-2%202h-1l-1-1c1-1-2-2-5-1-7%202-13-4-13-12%200-5-1-7-6-7h-2l-1%207c-1%2010-3%2013-10%2013-3%200-4%200-3%201l6%201h5l13%2014c15%2014%2017%2016%2022%2014%204-2%2059-53%2060-56%203-9-6-19-13-15M159%2050c-2%202-3%208%200%2010%202%203%203%202%205-2l4-6v-3c-3-2-7-1-9%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.9557522123893807,"src":"/static/f6fcb72df4c191fd5f4532dfa234801c/32d53/featured-image.png","srcSet":"/static/f6fcb72df4c191fd5f4532dfa234801c/1ec58/featured-image.png 334w,\n/static/f6fcb72df4c191fd5f4532dfa234801c/32d53/featured-image.png 614w","srcWebp":"/static/f6fcb72df4c191fd5f4532dfa234801c/9b99b/featured-image.webp","srcSetWebp":"/static/f6fcb72df4c191fd5f4532dfa234801c/cd98f/featured-image.webp 334w,\n/static/f6fcb72df4c191fd5f4532dfa234801c/9b99b/featured-image.webp 614w","sizes":"(max-width: 614px) 100vw, 614px"}}}}}},"pageContext":{"slug":"/useful-libraries-in-develop-taskloud/","previous":{"fields":{"slug":"/examination-of-and-or-operator-in-php/"},"frontmatter":{"title":"PHPのand,or演算子の使い道を考えてみる","tags":["PHP"]}},"next":{"fields":{"slug":"/create-git-hook-to-develop-modern-php/"},"frontmatter":{"title":"PHPで開発するためのgit hookを作った","tags":["Git","PHP"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}