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

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

Transcript

1. Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた 2023.8.30 @yajihum
2. # 自己紹介 • やじはむ：矢島千紘 →最近改名しました！ • 株式会社 COMPASS のフロントエンドエンジニア →公教育で使われている教材アプリを作ってる会社 →最近転職しました！ • X：@yajiuhum • Zenn：@rorisutarou • 趣味：昼寝、ゲーム実況を見ること、ぬいぐるみ、 温泉
3. # こんなの作った • GitHubリンク • Microsoft Fluent Emojiを使って絵文字画像を 取得できるピッカー ※厳密には絵”文字”ではない • npmパッケージとしてインストールして Client Component上で利用可 ←めちゃかわいい
4. デモサイトで触ってみる
5. # 使い方
6. # 使用技術 • Microsoft Fluent Emoji • Figma API（絵文字画像の取得に利用） • Cloudflare R2 （絵文字画像の静的配信） • Cloudflare Workers（R2にアクセス） • React • Tailwind CSS • Rollup（ビルド）
7. # 思ったことつらつら ①画像のリネーム figma-zipperを加工してFigma API経由でFigma 上から絵文字画像を取得まではよかった ある程度使いやすい順番にして表示できるよう に、取得してきた画像を1から順にリネームし た 手動で大変だった →何かいい方法あった？
8. # 思ったことつらつら ②R2便利 大量の画像を表示するのにCDNを使ってパ フォーマンスを上げられる エグレス（下り料金）が無料で安い Workersを使えるので操作しやすい
9. # 思ったことつらつら ③初めてのnpmパッケージの作成に苦戦 今まで目を瞑っていたtsconfig.jsonや package.jsonの中身についてちゃんと調べなけれ ばいけなかった （ビルドするのにエラーがたくさん発生した） →GPTに聞いて何とか乗り越えた
10. # 課題（気力があればやりたい） • テストコードを書く • カテゴリーナビゲーションの連動部分 　　（Intersection Observer API） • i18nの対応 • ダークモードの対応 etc
11. 終わりに 自分が使いたいからという理由で作成してみましたが、npmパッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです！ これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい