次の課題ダークモードを使用する時に気味が悪いコードを書いたが何とか解消できた。個人的に気味悪くなくなっただけなので他人からしたら「まだまだ気味悪いだろ」と思われるかもしれないし「元々気味悪くないのでは」となる可能性もある。要件と原因(なぜキモくなったか)ダークモードを導入する際、トップレベルに位置するhtmlタグにdata属性を付与したり、あるいはクラスを付与して「ダークモードの活性を判別する」という形が考えられる。background:var(--color-background);}のような具合だ。このダークモードがONかOFFはグローバルステートで管理する必要がある。ReduxでもRecoilでもいいが、今回僕はRecoilを採用していて、どちらを使うにしてもそうだがReactのトップレベルコンポーネントにProviderを配置してその配下のコンポーネントではRecoilのステートを参照できる。Next.jsでは_document.tsx、_app.tsxの順に下位階層になっていってて、htmlにlangなど比較的静的な情報を設定するのが_document、React上で状態などを引っ張ってきたりするのはわりと_app側の責務で、普段であればそれにのっとり_appに<RecoilRoot>を設定するだけでいいのだが今回は<html>より上に<RecoilRoot>を配置しなければhtmlタグにRecoilのデータを渡せないという状態だった。</RecoilRoot>そのため、_document.tsx内でRecoilを利用しようとした。reasons:という感じでエラーが出る。見れば<NextScript>より上の階層でReactを実行しようとしてるので当然の帰結感がある。そこで解決策として_app.tsxでRecoilRootをセットし、その下に空のtsxを返すコンポーネントを置き、そのコンポーネントのロジックとしてuseEffectでDOM操作をしてhtmlタグに属性付与という人の道から外れた方法を編み出した。これでダークモードの活性/非活性時にも一応htmlのdata-themeは動的に書き換わるようにはなった。MyAppだけどなんかいくらなんでもキモすぎる。(個人の主観)解決策どうしたものかと悩んでいたがそもそもhtmlタグにダークモードのステートを反映させる必要ないのではという結論に至った。htmlにダークモードの状態を付与させたかった理由はcss変数を定義するときに:rootを使用しているからだった。*/ただ、別にbody直下にdiv.wrapを作ってその中でCSS変数使えばいいことに気づいた。次の課題CSS変数でなくSCSSの変数でスマートにダークモード用の色を切り替えられないだろうか。SCSSの関数を使いたいので一部はSCSSの変数を使わざるを得なく、このダークモードにおいてはCSSの変数を使う感じ、究極に分かりづらいしだるい。特定のディレクトリに変更があるときだけhusky(prettier)を走らせるMontereyのsocket周りでのエラーPrismaのmigrateのエラーが出たときの対処法Prismaのseedでimportのエラーが出たときの対処法Liffをローカルで開発する方法クロサイ個人開発が好きなWebエンジニア(H6年生)。ブログ4年目に突入(2018/09~)しました。過去のブログは数十万で売却済み。当ブログは月間5万PVくらい。前は池袋でメディアの運用/保守/開発/SEO・MEO施策などのWebマスター的なことしてました。今は神田で自社製品の開発に携わってます。