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.2k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料
やじはむ
August 30, 2023
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
21
8.8k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
3
2k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
5.6k
Other Decks in Technology
See All in Technology
Godot Engineについて調べてみた
unsoluble_sugar
0
460
技術に触れたり、顔を出そう
maruto
1
160
「人物ごとのアルバム」の精度改善の軌跡/Improving accuracy of albums by person
mixi_engineers
PRO
2
140
dbtを中心にして組織のアジリティとガバナンスのトレードオンを考えてみた
gappy50
0
350
Plants vs thieves: Automated Tests in the World of Web Security
leichteckig
0
130
【Oracle Cloud ウェビナー】2025年のセキュリティ脅威を読み解く:リスクに備えるためのレジリエンスとデータ保護
oracle4engineer
PRO
1
110
カップ麺の待ち時間(3分)でわかるPartyRockアップデート
ryutakondo
0
160
今年一年で頑張ること / What I will do my best this year
pauli
1
240
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
250
Bring Your Own Container: When Containers Turn the Key to EDR Bypass/byoc-avtokyo2024
tkmru
0
890
Oracle Exadata Database Service(Dedicated Infrastructure):サービス概要のご紹介
oracle4engineer
PRO
0
12k
「隙間家具OSS」に至る道/Fujiwara Tech Conference 2025
fujiwara3
7
6.8k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Visualization
eitanlees
146
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Designing for Performance
lara
604
68k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
Embracing the Ebb and Flow
colly
84
4.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
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パッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです! これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい