Reactで画像を切り抜きする機能のタスクを分解する

使うライブラリはこれ
継続的にinstallされてそうなので選定
https://github.com/sekoyo/react-image-crop?tab=readme-ov-file

ご丁寧にsandboxのデモがあるのでこれを元に作る
https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o

useDebounceEffect.tsで少し古い記述があったのでESLintのエラーが出ていた
↓これを元に修正（applyが古くて使われていない）
https://eslint.org/docs/latest/rules/prefer-spread
修正後↓

import { useEffect, DependencyList } from 'react'

export function useDebounceEffect(
  fn: () => void,
  waitTime: number,
  deps?: DependencyList,
) {
  useEffect(() => {
    if (deps !== undefined) {
      const t = setTimeout(() => {
        fn()
      }, waitTime)

      return () => {
        clearTimeout(t)
      }
    }
  }, deps)
}

これで一応ローカル環境でもデモ通りに動くようになった

この画像切り抜きの機能の目的と機能を明確にする

目的

• システム側の事情
  -> 表示サイズを統一させるためにアップロードをする画像を決まったアスペクト比に切り抜く
• ユーザー側
  -> ユーザーがアップロードする画像のサイズに見せたい対象物を収らせたい

必要機能

• ファイルアップロード機能
• 切り抜き
• エンコード機能（BASE64）
• APIを叩いて送信

不必要機能（サンプルにはあるが今回必要ない機能）

• アスペクト比の変更ボタン
• ダウンロードボタン

実現方法

必要機能

• ファイルアップロード機能

  • <input>タグで実現可能（ accept="image/*" で画像ファイルだけを受け付ける）

• 切り抜き

  • React-image-cropライブラリで実現可能（サンプル通りにやれば良い）

• APIを叩いて送信
  ↓このようにinputタグでアップロードするとBASE64に変換されているが、先頭に「data:image/jpeg;base64,」という文章がついているのでそこをフロントで取り除くのか、バックエンドで処理するのかは決めないといけない。（個人的にはSplitで簡単に実装できそうなのでフロントでやればいいと感じた）
  APIを叩く関数は他のAPIを叩いてる関数を参考にやればできると思う。
  
  ↓splitの使い方
  https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split

不必要機能（サンプルにはあるが今回必要ない機能）

• アスペクト比の変更ボタン
  • サンプルでのアスペクト比の変更ボタンを消す（そのボタンのonClickで指定されている関数も）
  • サンプルではアスペクト比を状態管理しているが、アスペクト比をあらかじめきめて定数として持っておく方が、画面の崩れを予防できるので、定数として持つよう修正する。
• ダウンロードボタン
  • 現在サンプルで使われているダウンロードボタンは決して良い
  • サンプルではCompleteCropをフラグにダウンロードボタンが出現しているので、そこを画像をバックエンドにアップロードするための送信ボタンを作って表示させればいいと思う。