react-router

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

Node.jsの設計思想・動作から理解し、アプリケーション開発の実践的なスキルを身につける 2023/1に出たばかりの本です。著者の伊藤康太さんは元Yahooのスペシャリスト認定制度の黒帯保持、有識者による一冊。タイトルは「Node.js入門」とありますがNode.js本体の話にとどまらずJavaScriptの文法の話、ExpressによるWebアプリにCLIツールにフロント/バックエンド両方の開発や運用...と、実質最新のフロントエンド・バックエンド全般を概観できる本となっています。384Pなのでそんなに分厚くはないですね。 Node.jsは仕事でもインストールはしてるしたまに使うこともある…

前置き ChatGPT に質問 最終的な reactjs + react-router v6 + redux を利用した App.js のコード ブラウザで表示させる 前置き 前回 と少し変えて質問してみた 同じ質問でも違うこと返答になるけど、質問の仕方で ChatoGPT の返答の質が上がりそうな気もする。 (ChatGPT の画面全体をうまくスクショで撮れなくて分割になってしまった) ChatGPT に質問 reactjs を と react-router v6 利用した検索機能がある一覧表示のサンプルコードを教えてください これを redux を利用したものに変更してください 続きを教え…

追記2023-03-14: 別記事でスクリーンショット付きでやり直してみた （コードも若干違くなった） 問い「reactjs と react-router v6 と redux を利用した検索機能がある一覧表示のサンプルコードを教えてください」 ChatGPTの返答 提示されたコードが途中で切れてるので整えて動くようにしてみた とりあえず動いた 感想 ChatGPT に聞いてみた https://chat.openai.com/chat 問い「reactjs と react-router v6 と redux を利用した検索機能がある一覧表示のサンプルコードを教えてください」 ChatGPTの…

ルーティング URLに応じて処理を渡す先を変える SPAではページ遷移もアプリが担う インストール npm install react-router-dom 基本 SwitchからRouteになりました。Routeを入れ子にして階層構造を作る。 子ルートは親ルートのパスに連結して定義される。 親ルートに子ルートの中身を表示するにはOutletを使う トップに表示する子ルートはpathではなくindexで表す v6からはexact, endがなくても完全一致になった。 import { createBrowserRouter, createRoutesFromElements, RouterPr…

こんにちは。皆さんは自身がメンテナンスするソフトウェアが依存するパッケージの更新、いわゆるdependency updateをどのような形で行っていますか？ SmartBankが提供するサービスB/43の開発では主にGitHubのDependabot version updates機能を用いて定期的なdependency updateを行っています*1。これは簡単にいえばGitHub repositoryにYAMLファイルを置いておくだけで自動的かつ定期的にversion updateのpull requestを作ってくれる便利なやつです。 便利ではあるのですが、アプリケーション規模やチーム体…

概要 みなさんこんにちは。フルスタックエンジニアの高瀬 @takasehiromichi です。 2023年にも入りましたので、今回は、株式会社ロカオプで使用している技術について、改めて記事にしようと思います。 ロカオプとは？ 簡単にですが、ロカオプサービスについて紹介させてください。 locaop.jp ロカオプサービスは、以下の特徴を備えた、総合プラットフォームです。 MEO対策 ノーコード予約サイト作成 ノーコードアンケートサイト作成 ノーコードウェブサイト作成 他にも、以下のような機能があります。 ロカオプを構成するシステム 上記機能を実現するために、以下のような構成になっています。 …

早く終わらせたいので，最近集中的にCS50Wの課題をやっています． 今までどんな感じで開発していたかというと，Node.js を使った環境構築が苦手なので，CDN を使って React TailWindCSS の環境構築をお手軽に済ませて進めていました． しかし，React 単体ではルーティングができないからと React Router を CDN で導入しようとしたところで破綻しました． React Router や React のバージョン更新によりネット上の情報が古くなっていたため，エラー続きで動くコードが全然書けませんでした……． そういうわけで，ついに（重い腰を上げて）NodeJS …

株式会社ヘンリーVPoEの@shenyu_cyanです。2023年が始まり、当社の新しい取り組みとしてエンジニアリングブログを始めました。 私たちは「社会課題を解決し続け、より良いセカイを創る」をミッションにプロダクトを開発しています。その第一歩として現在はクリニック・中小病院向けの基幹システムであるクラウド型電子カルテ・レセプトシステム「Henry」を展開しています。 技術ブログの初投稿として、今回はヘンリーが利用している技術スタックおよびその裏の考え方をご紹介し、これからの方向性について書かせていただきます。 ヘンリーの技術スタックを簡単にご紹介しますが、フロントエンドはReact+Typ…

React Router v6の書き方 React Router v6を使ったReactにおけるルーティング処理の記述方法について。以下のZennの記事が参考になった。 React: React Router v6 でルーティングする step１ React: React Router v6 でルーティングする step２ Nestの記述については以下のQiitaの記事にあるようにindex={true}のパスを追記することで対応できた。 【React】React Router v6でNestがうまく動かなかった件 - Qiita Java nio API Java 7ぐらいから導入されたJa…

前回の記事で、Playwrightを使ってDjango + ReactのE2Eテストができると分かりました。 WSL2 + Playwrightな環境にて、codegen機能によりReactアプリやDjango管理サイト向けのテストコードを自動生成してみた - メモ的な思考的な 前回は自動生成したテストコードを使っていたことから、今度は自分でPlaywrightによるE2のテストコードを書いてみたくなりました。 そこで色々と試したときのメモを残します。 なお、この記事ではPlaywrightの書き方に着目するため、Djangoアプリの実装については解説が必要な部分のみとしています。 もしソース…

WordPressで訳あって投稿一覧画面のみReactを使いReact Routerでルーティングすることにしました。 やるなら全部ヘッドレス化したほうが通常はいいと思います。 <Link>でリンク先を開くときは問題なくても、URLで直接アクセスしたり再読み込みすると404になってしまいました。 add_rewrite_rule()で追加のリライトルールを指定 add_rewrite_rule()をfunctions.phpに追記して、追加のリライトルールを指定すれば404を回避できます。 例えば私の場合は投稿一覧画面のみReact Routerでルーティングしたかったので、以下のようにしまし…