dialog要素を使ってReactでモーダルウィンドウを作る方法
最近はHTML要素とCSSのみで、javascript的な効果を演出することが可能になってきましたね。 今回は要素を、モーダルウィンドウとしてReactで表示・非表示させる方法を紹介します。 Reactではモーダルウィンドウを表示・非表示…
# React
Google reCAPTCHAに代わる新しい選択肢？Friendly CaptchaをReactで実装する方法
ここ数日さまざまなフォームビルダーを試していますが、リサーチ中に見つけたスパム・ボット対策のFriendly Captchaを試してみたので紹介します。 ボット対策と言えばGoogle reCAPTCHAの一強時代が続いていますが、hCa…
Firebase + React + Gatsbyで、（レビュー機能付き）コメントシステムを作る
Gatsby.jsサイト用にGoogle Firebaseを使ってコメントシステムを作った際の、備忘録です。 Firebaseとは、アプリ開発用のプラットフォームで、ログインシステムやカートシステム等のデータを格納したり読み書きができる機…
ReactでクライアントのIPアドレスを取得（Axiosなし）
問い合わせフォームやコメント欄のいたずら防止用としてIPアドレスを取得する必要があったために、実施した方法です。 JavaScriptは単体では閲覧者のIPアドレスを取得できないため、外部APIを利用します。 今回利用するReact Ho…
Reactでアイテムを絞り込み（マルチフィルター）を行う方法
EC・ショッピングアプリなどで、グループや種類による複数条件での絞り込みをReactで行う方法です。 今回は例として、プロダクト毎にタグをつけ、タグで絞り込みができるようにします。 デモ コード（GitHub） 今回利用するReact H…