はじめに ログイン機能はとても基本的な内容であるが、ある意味ともて大事な機能である。 最近は自分のデータベースにパスワードを保存せず、GoogleやFacebookのIDを代わりに利用できるので、 …
状況 create-react-app で構築したReactのプロジェクトにStorybookを導入し、既存のコンポーネント用にStoryを追加したが、controlsが表示されない。 ブラウザでS…
11月１日から27日まで開催されていた、webパフォーマンス改善のコンテスト「Web Speed Hackathon 2022 Public」に飛び入り参加してきました。 https://devel…
本人確認やソーシャルギフトなど、決済以外の場面でユーザーに住所を入力してもらう場面は複数存在します。 Stripeが提供するJSライブラリStripe.jsを使うと、住所入力フォームを簡単に埋め込む…
今回は、フロントエンドに興味がある方、フロントエンドの知識を深めたい方に向けて、過去から現在までのフロントエンドの歴史を解説していこうと思います。 歴史を知ることで、技術を大局的に見ることができるの…
はじめに Baas(Backend As A Service)で何かサービスを構築してみたいと思い、 firebaseを触ってみようと思ったところ、Firebase の代替と謳われているsupaba…
自分の備忘録です。 JavaScript for...inの使い方 繰り返し処理の一つ 配列に対して使用する。 配列の要素を一つずつ取り出し、要素を構成するkeyを変数に持って処理をする 例 コード let array = {key1: value1,key2:value2}; for(let str in array){ console.log(str); console.log(array[str]); }…
事象 : jestでテストを実行したらreplaceAllメソッドで怒られた $ yarn jest hogedetail yarn run v1.22.19 # ...省略... TypeErro…
やりたいこと 例えば、Object型の配列があり その中に特定の値が入っているかを知りたい 結論 const arr = { くさ: 'フシギダネ', ほのお: 'ヒトカゲ', みず: 'ゼニガメ'…
localhostでブラウザカメラを使うwebアプリを開発していて、スマホ実機から見たくなったので試してみると、カメラが動かなかった。 navigator.mediaDevices.getUserM…
概要 PCのブラウザ版Twitterの画面左下にあるアイコンとかユーザー名を非表示にするブックマークレットを作った 実行すると単純にユーザー名とアイコンが消える ページを再読み込みすると元に戻る ち…
WEBページの実機検証を行う方法について、忘れがちなため備忘録として。 WEBページを検証する方法 iPhoneのWEBインスペクタという機能を利用して、WEBページの検証を行います。 Webブラウ…
概要 contenteditableな実装を行う際、各ブラウザでキー入力の値が異なる為、判断するうえで確認するためのHTMLを記載 ソース <html> <head> <script> docume…
