mottox2 blog

年末年始自由研究レポ

dev

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

Framer Motion

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

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

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

  • 宣言的にアニメーションを記述できるためわかりやすく再利用もしやすい
  • React Routerと組み合わせても、リッチなトランジションが簡単に実現できる
  • ドラッグやタップなどのイベントと組み合わせるのも楽

このあたりの実装に関してリポジトリを作って、使いたい時に使えるようにストックを始めています。
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使う…)
自分用ツールのデータストアに使えるかも?もう少し時間をかけてみてもよさそう。


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

B!
book

MS Wordで柱に章番号・テキストを表示する方法

技術書展8に向けてWordとPandocを使って同人誌を作っています。PandocではWordのテンプレートを用意して、その中にMarkdownで書いたコンテンツを流し込みます。この構成で大事なのがW

event

技術書展8でSPAの技術に関する同人誌を出す予定です

技術書展7、技書博1に続いて技術書展8や技書博3に向けて、つのぶえ出版として新作を書いています。今回は「フロントエンドの技術選定」「仕組みの理解」あたりをテーマに考えています。 - ReactとV

diary

タスク消化のためにひとり合宿をやってきた

3泊4日をかけて名古屋でタスク消化合宿を行った。 簡単にまとめると、普段の環境では進捗が見えやすく、達成感を得られるプログラミングをやりがちですが合宿の場を用意することで普段進みにくいタスクを消化す