Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
Search
やじはむ
August 30, 2023
Technology
0
1.1k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料
やじはむ
August 30, 2023
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
20
8.3k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
3
1.8k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
4.2k
Other Decks in Technology
See All in Technology
難しいから面白い!医薬品×在庫管理ドメインの複雑性と向き合い、プロダクトの成長を支えるための取り組み / Initiatives to Support Product Growth
kakehashi
2
170
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
210
バックログを導入し やっぱやめた話
ota42y
0
200
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1k
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
170
Envoy External AuthZとgRPC Extensionを利用した「頑張らない」Microservices認証認可基盤
andoshin11
0
210
実践的なバグバウンティ入門
scgajge12
4
2.4k
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
480
DroidKaigi 2024 たすけて!ViewModel
mhidaka
4
470
LLMに日本語テキストを学習させる意義
ksaito
13
3.7k
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
15
40k
Featured
See All Featured
Docker and Python
trallard
39
3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
Design by the Numbers
sachag
277
19k
Practical Orchestrator
shlominoach
185
10k
Web development in the modern age
philhawksworth
204
10k
A better future with KSS
kneath
235
17k
The Cost Of JavaScript in 2023
addyosmani
41
5.2k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The Mythical Team-Month
searls
218
43k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Transcript
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた 2023.8.30 @yajihum
# 自己紹介 • やじはむ:矢島千紘 →最近改名しました! • 株式会社 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パッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです! これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい