Category: Frontend

redux-sagaでtakeEveryをcancelする

takeEveryで動かしている処理をcancelしたい場合、raceを使って停止させます。 これは、raceで何もしない処理と同時実行することで、「何もしない処理が先に完了したので、処理を完了とする」判定を出すやり方で […]

Magicを使ってNext.jsアプリにパスワードレス認証を追加する

Magicというサービスを使うことで、簡単にパスワードレス / WebAuthn またはソーシャルログイン機能を実装することができます。 今回はNext.jsをベースに作ってみました。 目次 Step1: Magicアカ […]

Ionicのion-searchbarでAlgolia Instantsearchの検索を実行する #AlgoliaJP

この記事は、「Algolia Advent Calendar 2020」の投稿です。 このサイトの検索フォームは、Ionicのion-searchbarタグを使って実装しています。 SSG / SSRを実行するNext. […]

enzymeのsnapshotがShallowWrapper {}になってたときに見る覚書

Jest + enzymeのsnapshot testing便利ですよね。 ただ、設定によってはちゃんとスナップショットが取れていないケースがある様子です。 最近react-test-rendere中心だったのですが、久 […]

Ionic Reactで作ったSPAをCapacitorでElectron(デスクトップアプリ)にする

Capacitorを使うことで、iOSやandroid / デスクトップ向けのアプリを作ることができます。ということで、Ionic Reactで作ったアプリをMacのデスクトップアプリとしてビルドしてみました。 目次 C […]

tsdxでReactコンポーネントを作る

tsdxを使うことで、React(TypeScript)のコンポーネントライブラリを簡単に作ることができます。 目次 SetupReactコンポーネントを作る場合は –template react表示を確認しながら作る […]

Next.jsのSSGモードでWordPressの記事一覧と詳細を表示する

Next.jsはversion 9.3からSSGモードが用意されました。 Next-gen Static Site Generation (SSG) Support: Built-in optimized static […]

Nestjsをローカルで動かしてみる

まずはやってみるところから。 目次 プロジェクト作成Nestjs APIをローカルで動かす開発中はyarn run start:devちょっとだけNestjsのソースを触ってみるAPIのportを変更する環境変数でポート […]

Auth0 Lockをcreate-react-app / Gatsby / Next.jsで動かす

ReactでSPA作るときに使うメジャー系それぞれでAuth0 Lockを動かしました。 ドはまりした点があったので、忘備録として記録します。 目次 動かそうとしたもの無難of無難: create-react-appwi […]

Gatsby(with TypeScript)にReduxを組み込む

そもそもいるのかという疑問はあるかもしれませんが、チャレンジ要素は絞りたいのでreduxつかいます。 目次 ライブラリインストールReducerなどを作るStoreの作成Reduxを使う場合の問題点wrapRootEle […]