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.3k
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料
やじはむ
August 30, 2023
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
21
9.2k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
3
2.2k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
2
6.6k
Other Decks in Technology
See All in Technology
AWS と定理証明 〜ポリシー言語 Cedar 開発の舞台裏〜 #fp_matsuri / FP Matsuri 2025
ytaka23
8
1.4k
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
5
760
CSSDay, Amsterdam
brucel
0
290
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
2
460
AIエージェントのフレームワークを見るときの個人的注目ポイント
os1ma
1
420
Monorepo Error Management: Automated Runbooks and Team-Targeted Alert Distribution
biwashi
1
130
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
1
3.2k
Java で学ぶ 代数的データ型
ysknsid25
3
1.2k
Agent Development Kit によるエージェント開発入門
enakai00
19
2.7k
JavaのMCPサーバーで体験するAIエージェントの世界
tatsuya1bm
1
220
AWS Lambdaでサーバレス設計を学ぼう_ベンダーロックインの懸念を超えて-サーバレスの真価を探る
fukuchiiinu
4
950
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Faster Mobile Websites
deanohume
307
31k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Six Lessons from altMBA
skipperchong
28
3.8k
The Cost Of JavaScript in 2023
addyosmani
50
8.3k
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パッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです! これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい