Category: React

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. […]

Next.jsでIonic Frameworkを使う

この記事は、Next.js Advent Calendar 2020の8日目です。 Ionic Framework(@ionic/react)をNext.jsで使おうとすると、だいたいこういうエラーに遭遇します。 目次 […]

@testing-library/react-hookとJestでReact Hookをテストする

「React #2 Advent Calendar 2020」4日目の記事です。 @testing-library/react-hookを使うと、React Hookのユニットテストがかけます。 Install テスト対 […]

ts-migrateでCreate React Appから作ったReactアプリを雑にTypeScript化する

「React #2 Advent Calendar 2020」3日目の記事です。 ts-migrate を使うと、JSをTSに変換してくれます。 なので過去にJSで書いたReactアプリをTS化したい時に、とりあえず試し […]

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 […]