Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた

2023/8/30 はじめまして！若手エンジニアふんわりLT Night！で発表した資料

Transcript

1. Cloudflare R2 + Reactを使って
   絵文字ピッカーのnpmパッケージを作ってみた
   2023.8.30 @yajihum
   

   View Slide

2. # 自己紹介
   ● やじはむ：矢島千紘
   →最近改名しました！
   ● 株式会社 COMPASS のフロントエンドエンジニア
   →公教育で使われている教材アプリを作ってる会社
   →最近転職しました！
   ● X：@yajiuhum
   ● Zenn：@rorisutarou
   ● 趣味：昼寝、ゲーム実況を見ること、ぬいぐるみ、
   温泉
   

   View Slide

3. # こんなの作った
   ● GitHubリンク
   ● Microsoft Fluent Emojiを使って絵文字画像を
   取得できるピッカー
   ※厳密には絵”文字”ではない
   ● npmパッケージとしてインストールして
   Client Component上で利用可
   ←めちゃかわいい
   

   View Slide

4. デモサイトで触ってみる
   

   View Slide

5. # 使い方
   

   View Slide

6. # 使用技術
   ● Microsoft Fluent Emoji
   ● Figma API（絵文字画像の取得に利用）
   ● Cloudflare R2 （絵文字画像の静的配信）
   ● Cloudflare Workers（R2にアクセス）
   ● React
   ● Tailwind CSS
   ● Rollup（ビルド）
   

   View Slide

7. # 思ったことつらつら
   ①画像のリネーム
   figma-zipperを加工してFigma API経由でFigma
   上から絵文字画像を取得まではよかった
   ある程度使いやすい順番にして表示できるよう
   に、取得してきた画像を1から順にリネームし
   た
   手動で大変だった
   →何かいい方法あった？
   

   View Slide

8. # 思ったことつらつら
   ②R2便利
   大量の画像を表示するのにCDNを使ってパ
   フォーマンスを上げられる
   エグレス（下り料金）が無料で安い
   Workersを使えるので操作しやすい
   

   View Slide

9. # 思ったことつらつら
   ③初めてのnpmパッケージの作成に苦戦
   今まで目を瞑っていたtsconfig.jsonや
   package.jsonの中身についてちゃんと調べなけれ
   ばいけなかった
   （ビルドするのにエラーがたくさん発生した）
   →GPTに聞いて何とか乗り越えた
   

   View Slide

10. # 課題（気力があればやりたい）
    ● テストコードを書く
    ● カテゴリーナビゲーションの連動部分
    　　（Intersection Observer API）
    ● i18nの対応
    ● ダークモードの対応
    etc
    

    View Slide

11. 終わりに
    自分が使いたいからという理由で作成してみましたが、npmパッケー
    ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが
    して嬉しかったです！
    これからももっと色々な技術使ってみようと思います
    そして業務で活かせるようになりたい
    

    View Slide