年末年始自由研究レポ

2020.01.05

年末年始なので普段気になってるけど、触る機会のなかった技術やライブラリに触ってみました。フロントエンド周りのトピックとして、Framer Motion, GraphQL, Flutter, FaunaDBの4テーマに触れてみました。

Framer Motion

Reactのアニメーションライブラリです。react-springが競合にあたると思いますが、自分は逆張りでframer-motionを掘ることにしました。 framer-motionはFramerというデザインツールを提供しているチームが出しているライブラリで、以前紹介したreact-poseの後継にあたります。

個人的には小さなインタラクションやジェスチャーに対応していくことでネイティブアプリライクな操作感に近づくと思っています。React以前のウェブではjQueryライブラリが繁栄し、リッチな見せ方、インタラクションなどで独自の進化を遂げていました。ただ、Reactになってからは（特に日本では）こういった議論はされなくなったように感じています。使いやすいPWAに至る道には必要と思うので取り組みました。

framer-motionに関しては、次のようなメリットがあります。

このあたりの実装に関してリポジトリを作って、使いたい時に使えるようにストックを始めています。 UIフレームワークの実装と違い、「薄めの実装にして、プロジェクトに取り込みやすく」を意識して進めています。

http://react-motion-training.netlify.com/ https://github.com/mottox2/react-motion-training

海外のReact系カンファレンスではアニメーション的なセッションがあるので、日本でも増えればいいなと思っています。

Flutter

Googleが提供しているマルチプラットフォームアプリが書けるツールです。一応、情報としては追っていましたが、自分の言葉で説明できるようにしたかったので触りました。

Flutterそのものよりも、開発環境の整備状況に驚きました。セットアップも特につまずくことがなく進み、Android Studioにプラグインが提供されていて使ってみたらめちゃ楽でした。 生のRN（ReactNative）より書きやすく、RN + expoを使っている気持ちになりました。

monoさんのFlutterの効率良い学び方を参考に次の内容をこなしました。

これに加えてFirestoreとつなげてみたり、QRコード読み込みを試してみたりしました。

ふとしたタイミングで「Webでいいのでは？」という気持ちになりました。経験が学習を阻害するので「アンラーニングが大事」という言葉の重さを知りました。 去年、仕事でiOS（Swift）をやっていたので、エラーが出てもなんとかできる力がついたような気がします。

GraphQL

クライアント側からGraphQLを利用するのはGatsbyでやっていたので、今回はサーバーサイド（RoR）でGraphQL APIを実装しました。 主に「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶに従い、気になる点はドキュメント等を参考にしながら追加で実装しました。（リポジトリ）

以前からチューニングがしんどい等の話は聞いていましたが、自分で実装してみてそのしんどさを感じることができました。クライアント側からはほしいフィールドを指定するだけで楽な一方、サーバー側へ実装の負担が寄る実感を得ました。 DBとつなぐことでGraphQL APIを生やせるPrismaやHasura、データストアとともに提供している後述のFaunaDBあたりを掘っていくとよさそうです。

FaunaDB

NetlifyやZIET Nowで公式のIntegrationとして用意されているデータストア。データへはFQL（SQLライクなクエリ言語）、GraphQLの二通りの問い合わせ方法がある。 正直Firestoreがしんどいので、サーバーレスに向いているデータストアを探ってみたいというのが発端。

とりあえず触って主要なドキュメントも読んだけど、Flutterのチュートリアルと比べて英語が読みにくかった。 認証方法としてパスワード認証が用意されているが、3rd Party Loginに関しては言及されていなかったのでアプリ導入に関しては様子見。（中間サーバーとか立てれば行ける？でも、それならFirebase使う…） 自分用ツールのデータストアに使えるかも？もう少し時間をかけてみてもよさそう。

以上のような年末年始の自由研究をやっていました。皆様、今年もよろしくおねがいします。

Xでシェア