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
960
Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた
2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料
やじはむ
August 30, 2023
Tweet
Share
More Decks by やじはむ
See All by やじはむ
TypeScriptのパフォーマンス改善
yajihum
12
4.9k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
3
1.3k
フロントエンドにおける テスト方針〜Testing Trophyの概念とBDD〜
yajihum
3
3.3k
Other Decks in Technology
See All in Technology
cgroup v2 で何が変わったのか / TechFeed Experts Night #28
tenforward
2
150
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
510
社内での継続的な機械学習勉強会の開催のコツ
yudai00
2
380
TiDBにおけるテーブル設計と最適化の事例
cygames
0
760
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
720
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
6
1.9k
Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで
leveragestech
1
2.6k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
1.7k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
0
2k
【TSkaigi】2024/05/11 当日スライド
kimitashoichi
14
3.8k
Featured
See All Featured
RailsConf 2023
tenderlove
9
580
Typedesign – Prime Four
hannesfritz
36
2.1k
Fireside Chat
paigeccino
22
2.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Automating Front-end Workflow
addyosmani
1357
200k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Code Review Best Practice
trishagee
56
15k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Code Reviewing Like a Champion
maltzj
515
39k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
67
14k
How to name files
jennybc
65
93k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
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パッケー ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが して嬉しかったです! これからももっと色々な技術使ってみようと思います そして業務で活かせるようになりたい