３ヶ月に一回くらい書きたくなる技術系記事。今日はベタに、よく使うJavaScriptライブラリをご紹介します。
まず市場調査として、「JavaScriptライブラリ おすすめ」なんてググってみると、だいたい出てくるのはReact, Angular, bootstrapといったフレームワーク系のライブラリ。一方で僕のエンジニアとしてのタイプは、業界内でいうところの演出系/表現系エンジニアなので、扱うライブラリも結構特殊なのかなと思いまして。だとすると、Google検索でよく出てくるような内容とはまた違ったところでニッチな深い(?) 需要があるのかもしれないと思い、気合いを入れて書いてみることにします。
JavaScriptで直にクッキーを触るのは難儀なので、クッキーを扱う際はこれを使います。jQuery依存のライブラリなどもありますが、僕はMDNの提供しているこれが好きです。
URLを扱う際のライブラリ。URLのクエリストリングやパスなどを正規表現で取得しようとするのも、これまた難儀。これも同等のライブラリは多種ありますが、今はこれに落ち着いています。
デバイス/ブラウザ判定ライブラリ。PC/スマホ/タブレットの判定はもちろんのこと、ブラウザの種類やバージョンも取得してくれます。
jQueryそろそろ不要論も出ていますが、僕はまだ今のところ使っています。バージョン3になってから、animateメソッドがsetIntervalからrequestAnimationFrameに変更になり、パフォーマンスが向上したのが地味に嬉しい。
・jquery.ba-throttle-debounce.js
throttle / debounce 用ライブラリ。過度に出現するイベントの頻度を間引くためのライブラリです。主にresizeとscrollイベントに対して当てます。これらを直にとると、1秒間に数十回というレベルでイベントが走り、パフォーマンスが低下してしまうので。
イベント管理ライブラリ。コールバック地獄を防ぎます。
============================================
さて、ここからがいよいよ演出用によく使うライブラリ。本当にいつもお世話になっている仕事道具です。ギタリストにとってのエフェクターみたいなものです、きっと。
アニメーションライブラリと言えばこれ。jQueryのanimateでもある程度のことは事足りますが、TweenMaxを使うとできる幅が一気に広がります。パフォーマンスも上がりますし、高機能。ブラウザ上でeasing functionをカスタムできるのが特に推しです。
onfaddのページ遷移のイージングも、このUIをいじくり回しながら一番気持ち良いところを探りました。イージングによってアニメーションの印象って本当に変わります。
演出系エンジニアはよく求められるpushStateによる遷移。僕はこのpage.jsってやつを使ってます。これによって、ページ遷移を途切れなく表現することができます。弊社のサイトでも使っていて、わかりやすいかも。この技術のおかげで、遷移時にモザイクがグニョグニョってなる動きを実現できています。
WebGLで2Dを演出するためのライブラリ。WebGLなので、すごくパフォーマンスが良い。このデモがわかりやすいです(画面内をクリックするとうさぎを増やせる)。あと、pixi.jsを使って作られたWebサイトの事例集がセンス良いものばかり。とても好きなライブラリです。弊社サイトもフルpixi.js製。
WebGLで3Dを扱う際の定番ライブラリ。一般にWebGLと聞いて連想するのはこっちの方かも。ただ僕は3D的な表現よりも2D的な表現の方が好きなので、使う頻度としてはpixiの方が多いですね。シェーダーはまだまだ勉強中。
音声を扱う際はこれ。サイバーエージェント社が作ったライブラリです。HTML Audioってブラウザやスマホ端末によってはだいぶ挙動が不安定なのですが、このライブラリで扱えるWebAudio APIを使えば、安定した挙動で音を扱うことができます。あと、Audio Spriteというマニアックな機能も搭載されているのもポイント。ゲームコンテンツを作るときなど、細かい効果音が大量に必要なときなどには重宝します。
パラメータ調整用ライブラリ。特にCanvas/WebGL系の制作において、エンジニアとデザイナーが同時に演出を詰めていく際には必携です。このライブラリを知っているかどうかで、演出系エンジニアかどうかがわかる気がします（笑）。
あと、裏側のデータを管理したいときにはスプレッドシートをAPI化したり、リアルタイム通信を扱いたいときにはfirebaseを使ったりします。特にスプレッドシートのAPI化はよく使う！
ダーッと書いてみましたが、改めて多くのライブラリに支えられてお仕事ができていますね。WebGLを直で書くなんて、正気の沙汰じゃないですから。演出系エンジニアってあんまりいない人種なので、同じような人たちとこういったライブラリの話などをたまにしてみたいですね。年に１度くらいで良いので。
