Chakra UI– tag –

Chakra UIのカスタムテーマ、使っていますか？ カスタムテーマは便利で汎用的なスタイルを定義することができますが、その反面で意外と奥が深くやろうとしていることに時間がかかってしまうこともあります。 今回はカスタムテーマをもっと使いこなすために...

Google Chrome拡張機能(Chrome Extension)のContent Scriptなどを使用すると、既存ページに対して新たなDOM要素を追加することができます。 しかし追加したDOMが既存サイトのCSSから影響を受けたり、また逆に追加したDOMが既存サイトのCSSを上書きしたりと...

blurを使用してぼかし効果で消えたり現れたりするコンポーネントのサンプルを作りました。 【使用ライブラリ】 使用したライブラリはFramer Motionというアニメーションライブラリです。 参考リンク Framer MotionはChakra UIをインストールすると依存パッ...

ブログなどで見るステップデザイン。 見やすくて便利で使いやすいので本サイトでも頻繁に使用しています。 今回はそれをChakra UIで実現してみたTips記事となります。 【完成形】 以下のようなステップコンポーネントを作成します。 【実装】 以下のように...

Reactの開発、楽しいですよね！ しかし、イチからUIコンポーネントを作るというのはなかなかの労力が必要です。 昨今の開発ではなにかしらのコンポーネントライブラリを使ってUI開発にかけるコストは減らしているのではないでしょうか。 今回はそんなコン...

悩みがちなフォルダ構成。 Next.jsプロジェクトにおけるフォルダ構成をアトミックデザインをベースとして考えてみました。

JavaScript(TypeScript)開発環境の構築はセットアップすることが多くて大変。 そこでよく使いそうな構成の環境構築手順をまるっとまとめて紹介します。