$30 off During Our Annual Pro Sale. View Details »

Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた

Cloudflare R2 + Reactを使って 絵文字ピッカーのnpmパッケージを作ってみた

2023/8/30 はじめまして!若手エンジニアふんわりLT Night!で発表した資料

やじはむ

August 30, 2023
Tweet

More Decks by やじはむ

Other Decks in Technology

Transcript

  1. Cloudflare R2 + Reactを使って
    絵文字ピッカーのnpmパッケージを作ってみた
    2023.8.30 @yajihum

    View Slide

  2. # 自己紹介
    ● やじはむ:矢島千紘
    →最近改名しました!
    ● 株式会社 COMPASS のフロントエンドエンジニア
    →公教育で使われている教材アプリを作ってる会社
    →最近転職しました!
    ● X:@yajiuhum
    ● Zenn:@rorisutarou
    ● 趣味:昼寝、ゲーム実況を見ること、ぬいぐるみ、
    温泉

    View Slide

  3. # こんなの作った
    ● GitHubリンク
    ● Microsoft Fluent Emojiを使って絵文字画像を
    取得できるピッカー
    ※厳密には絵”文字”ではない
    ● npmパッケージとしてインストールして
    Client Component上で利用可
    ←めちゃかわいい

    View Slide

  4. デモサイトで触ってみる

    View Slide

  5. # 使い方

    View Slide

  6. # 使用技術
    ● Microsoft Fluent Emoji
    ● Figma API(絵文字画像の取得に利用)
    ● Cloudflare R2 (絵文字画像の静的配信)
    ● Cloudflare Workers(R2にアクセス)
    ● React
    ● Tailwind CSS
    ● Rollup(ビルド)

    View Slide

  7. # 思ったことつらつら
    ①画像のリネーム
    figma-zipperを加工してFigma API経由でFigma
    上から絵文字画像を取得まではよかった
    ある程度使いやすい順番にして表示できるよう
    に、取得してきた画像を1から順にリネームし

    手動で大変だった
    →何かいい方法あった?

    View Slide

  8. # 思ったことつらつら
    ②R2便利
    大量の画像を表示するのにCDNを使ってパ
    フォーマンスを上げられる
    エグレス(下り料金)が無料で安い
    Workersを使えるので操作しやすい

    View Slide

  9. # 思ったことつらつら
    ③初めてのnpmパッケージの作成に苦戦
    今まで目を瞑っていたtsconfig.jsonや
    package.jsonの中身についてちゃんと調べなけれ
    ばいけなかった
    (ビルドするのにエラーがたくさん発生した)
    →GPTに聞いて何とか乗り越えた

    View Slide

  10. # 課題(気力があればやりたい)
    ● テストコードを書く
    ● カテゴリーナビゲーションの連動部分
      (Intersection Observer API)
    ● i18nの対応
    ● ダークモードの対応
    etc

    View Slide

  11. 終わりに
    自分が使いたいからという理由で作成してみましたが、npmパッケー
    ジとして誰でも使える形にするのは技術力的に一歩先に進めた感じが
    して嬉しかったです!
    これからももっと色々な技術使ってみようと思います
    そして業務で活かせるようになりたい

    View Slide