Supabaseのリアルタイムリスナーを使ってNext.jsでToDoアプリ作りました。リアルタイムリスナーの使い方や、データの管理方法なども解説しています。

Supabaseのリアルタイムリスナーを使ってToDoアプリ作ってみた

Reactのパースライブラリのhtml-react-parserと、highlight.jsを使用してコードブロックにシンタックスハイライトをつける方法を解説しています。

html-react-parser × highlight.jsでコードブロックをハイライト

こんにちわ、フロントエンドエンジニアのわでぃんです。
とあるサイト制作をしている中でアコーディオンを実装中に、Reactでアニメーション付きのアコーディオンの最適な方法は何かな〜と思い色々調べてみましたが意外と情報が少なかったので自分なりにまとめてみました。

 実装方法
今回は、detailsとsummaryタグで実装する方法と、useState + useRefを用いた方法を紹介します。
他にも方法はありますが、上記の2つがシンプルに実装できるかと思います。

 detailsとsummaryタグ
detailsとsummaryタグの一番いいところはJSいらずで簡単にアコーディオンを...

Reactでスムーズアコーディオンを実装する

フロントエンドで必ず必要な日付を操作するライブラリ、day.jsについて解説しています。

day.jsで日付をフォーマット！

WordPressで、共通パーツをコンポーネントとして作成して、効率よく開発する方法を解説しています。

【WordPress】共通パーツはコンポーネントを作成しよう！

慣性スクロールやパララックスでフワッと表示させる"luxy.js"について解説しています。初心者の方でも簡単にかっこいいアニメーションが可能です。

luxy.jsを使って慣性スクロール+パララックス【jQuery不要】

ACFのカスタムフィールドを1箇所の記述で全てのページに適用する方法を解説しています。知っておくと、カスタムフィールドの汎用性が高くなります。

ACFのカスタムフィールドを1箇所の記述で全てのページに適用する

おしゃれなサイトによくある "ふわふわ浮かぶ球体" をジェネレーターで簡単作成する方法 を紹介しています。Blob Animationを使えば簡単に作成できます。