はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
06. Profile
問題
プロフィールカードを生成できるサービスを作成します
目的
入力フィールドの管理を行い、状態の更新と状態を使ったUIの更新を学びます
達成条件
機能的なプロフィールカード:
- ユーザーが名前、誕生日、電話番号を入力し、プロフィール写真をアップロードできる
- アップロードされた画像がプレビューとして表示される
- ユーザーが生成したプロフィールカードをPNG形式でダウンロードできる
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
Vercel
html2canvas(1.4.1)
解答時間:2時間
ボタンを押すとプロフィールCardの画像をダウンロードするところの実装がわかりませんでした。
html2canvasというJavaScriptのライブラリを使用しました。
html2canvasを使用すればhtmlの要素をキャンバスに描画して、画像として保存ができます。
しかしhtml2canvasを扱う際、Tailwindcssを併用しているとエラーが出るので注意が必要です。
（後ほど詳しく記載します）
リンク
html2canvasとTailwindcssの衝突エラー
Error:Attempting to parse an unsupported color function "oklch"
プロフィールカードの画像をダウンロードしようとボタンを押すとこのようなエラーが出ました。
oklchがサポートされてないって雰囲気だけどそもそもoklchってなんぞ？？と思ったので調べてみました。
oklch（オーケールチ）
2023年以降CSSに導入された新しい色指定方法の一つみたいです。
rgbとかHSLとかと同じやつですね。
Tailwind CSSではv4.0からrgbではなく、このoklchでカラー指定されているようです。
html2canvasはこのoklchのカラー指定には対応しておらずエラーが出てしまったみたいです。
oklchの詳細に関してはこちら
https://blog.nasbi.jp/programming/frontend/css/good-looking-color-oklch/
エラー解決方法
画像で保存する部分の色指定に関してはTailwind CSSではなくインラインスタイル等ほかの方法でCSSを記載するとエラーが解消されました。