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