こんにちは、CX事業本部の若槻です。 最近、react-signature-canvasというReactアプリ向けに手書き文字キャンバスを実装できるパッケージを見つけました。 react-signature-canvas - npm 面白そうなパッケージだったので、今回はこのreact-signature-canvasを使って手書きメモ管理アプリを作ってみました。 アウトプット 次のような手書きメモを管理できるWebアプリを作ります。画面上部のキャンバスでメモを手書きして登録し、画面中央のテーブルで登録済みメモ一覧を参照できます。 手書きメモを登録する手順は次のようになります。 キャンバスに手書きでメモを描く。 キャンバスに何か描かれると登録ボタンが有効になる。 登録ボタンをクリックするとキャンバスに描かれたメモがテーブルに登録される。 構築は次のような構成でAWS上に行います。 バックエ
![react-signature-canvasで手書きメモ管理アプリを作ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/8283de9d7aa9b82bacad2f55a788314dd8cdf836/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F10%2F97016569-d9932700-1587-11eb-9350-ab2f14af20c1.png)