react-router

react-router-dom に用意されている useRouteMatch というhooksを使って2種類のURLをマッチングして、パスパラメータを取得し数値に変換してからオブジェクトを生成してStateに保存するカスタムフックを作成しました。 このカスタムフックは特定の画面で使用するパラメータ取得用の関数で場所（URL）が変更されたことをuseEffectで検知して、URLが2種類の内どちらかにマッチしているかを検査してからパラメータを取得するようにしています。 そのuseEffectの引数にuseRouteMatchの戻り値を使用して場所の変更を検知しようとしていたが、当初無限ループに…

JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコード…

前回のつづき 前回は手動でログインを作成したので 今回はWeb画面でユーザーの作成および、パスワードの設定からログインまでを行う できたもの github.com やること 新規登録用の画面 メールで確認コード配信 ログイン やらないこと 環境構築 今回利用するコマンド SignUpCommand ユーザーを登録して、確認コードを送信する ConfirmSignUpCommand 確認コードで検証済みとする 認証関連処理 src/authService.ts サインアップ処理 // ========================================================…

React / Next.js / Remixに見られる、この頃のアーキテクチャの変化をキャッチアップすべく、横断的なトピックを紹介する本連載。第3回はここ数年で起きたNext.jsとRemixのルーティングの変化を見ながら、現在のルーティングアーキテクチャについて学んでいきます。 コンテンツ ・Next.jsとRemixそれぞれのルーティングの変化・Next.jsのルーティング・Remixのルーティング・Next.jsとRemixのルーティングに関する考え方の違い・マイグレーションのサポートが便利 Next.jsとRemixそれぞれのルーティングの変化 昔、Reactを使ったSPA（Sing…

はじめに 株式会社GROWTH VERSE（以下GV）でフロントエンドエンジニアをしている杉浦です。業務ではVueを利用してAIMSTARの画面を開発しています。また、新規プロダクトをNextで開発しています。GVに入社する前は業務・個人開発等で主にReactを5年ほど書いていました。 この記事では、もともとReactを書いていた私が、Vueを書き始めた際に感じた、違和感や気づきをお伝えすることで、これからVueに挑戦しようとしているReact開発者の一助になれば幸いです！ *この記事では、Next.jsやNuxt.jsなどのSSRのフレームワークについて触れていません、Viteを使ったSPA…

CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.co…

Reactでクエリパラメータの値を取得する方法 ライブラリのインストール コード例 Reactでクエリパラメータの値を取得する方法 Reactでクエリパラメータの値を取得するには、react-router-domを使用するのが一般的です。 以下はTypeScriptを使用してクエリパラメータを取得する方法の例です。 ライブラリのインストール手順も含めます。 ライブラリのインストール npm install react-router-dom yarn add react-router-dom コード例 以下は、useLocationフックを使用してクエリパラメータを取得する例です。 import…

Reactでパンくずリストを実装する方法 説明 Reactでパンくずリストを実装する方法 Reactでパンくずリストを実装する方法をTypeScriptを使って紹介します。 import React from 'react'; import { useLocation, Link } from 'react-router-dom'; interface BreadcrumbItem { name: string; path: string; } const Breadcrumbs: React.FC = () => { const location = useLocation(); const…

Reactでブラウザバックを禁止にする方法 説明 依存ライブラリ Reactでブラウザバックを禁止にする方法 ブラウザバックを禁止するためには、ReactのuseEffectフックとpopStateを使用する方法があります。 注意点として、popStateはブラウザによってはもう動かない場合があります。 なので、特定の端末やブラウザで動作する実装と思ってください。 以下は、Reactでブラウザバックを防ぐための実装例です。 import React, { useEffect } from 'react'; import { useHistory } from 'react-router-dom…

Reactでブラウザバックを検知する方法 Reactでブラウザバックを検知する方法 Reactでブラウザバックを検知する場合、特別な関数を使わずに通常のJavaScriptの実装と同様にpopstateを使用することになるかと思います。 注意点として、popStateはブラウザによってはもう動かない場合があります。 なので、特定の端末やブラウザで動作する実装と思ってください。 以下はreact-router-domと組み合わせた実装例になります。まず、react-router-domをインストールします。 # npm npm install react-router-dom@6 # yarn …

こんにちは、アプリケーションサービス部ディベロップメントサービス1課の外崎です。 今回は、AmplifyUILibraryとAmazon Cognitoの連携について詳述します。具体的な設定手順やサンプルコードを通じて、Cognito UI画面の実装方法を解説します。 概要 Cognitoの設定 デモ環境 ライブラリのインストール UIコンポーネントの実装 Cognitoとの連携 環境変数の設定 Amplifyの設定 UIのカスタマイズ サインアップを不可にする ログイン方法を指定する 認証画面をモーダルにする まとめ 概要 AmplifyUILibrary AmplifyUILibraryは…

こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは３つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、…

Pixi.jsとは 主な特徴 基本的な使い方 詳細な使用方法 React-pixi-fiberとは 主な特徴 基本的な使い方 詳細な使用方法 Pixi.jsとは Pixi.jsは、ウェブブラウザ上で高速な2Dグラフィックスを描画するためのオープンソースのJavaScriptライブラリです。 主にゲーム開発やインタラクティブなアニメーション、グラフィカルなウェブアプリケーションに利用されます。 以下にPixi.jsの主な特徴と基本的な使い方を示します。 主な特徴 1. 高性能 WebGLを使用してハードウェアアクセラレーションを活用するため、非常に高速で高品質なレンダリングが可能です。 必要に応…