Productionでのご使用は自己責任でお願い致します。 はじめに 最近、共通MutableRefObjectをグローバルで管理する必要があったので調べてみました。 atomにuseRefで作成…
はじめに テスト用に設定しているdata-testidを本番環境で表示させない方法を調査した結果、便利な設定を見つけました。 TL;DR Next.js Config内のcompiler.react…
何作ったの ChatGPTに頼むときの文章（呪文）をテンプレートとして管理し、ワンクリックで文章を挿入するChrome拡張機能です。シンプル https://chrome.google.com/we…
記事の内容 業務でアップロードしたglbファイルを3D表示させたいという要件があり、three.jsを使用しmodal上で表示させることになりました。そのため、実装するにあたり学習したことをコードを…
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、基本解説の「State: A Component's Memo…
react-routerを使った画面遷移を行う 今回はReact Router v6を使った画面遷移です。 v5とは書き方が変更されているようです。 メインの画面 import "./styles/…
はじめに 結論：セキュリティ向上のため、CognitoやAuth0を使用することをお勧めします。 【注意】 今回は上記を使用しませんのでご了承ください。 ご利用される際は、自己責任でご利用ください。 実行環…
以下をcloneさせていただき、環境構築していきます。 https://github.com/ohbarye/rails-react-typescript-docker-example compos…
はじめに Reactで処理を実行中などにボタンを有効・無効に切り替えるステータスや、ローディング画面の表示などにステータスを管理するという実装は必須になってくると思います。 今回はその実装方法を簡単…
ESLintがとても有難いツールであることに間違いはないと思いますが、プロジェクトの途中から導入するとなかなかツラいものがありますよね・・・。 例えば、こんな箇所に・・・ const MyIcon …
背景 ReactでAPIからデータを取得する方法は、少し探せばたくさんヒットします。Axiosを使うのが定番ですね。 ところがTypeScript環境だと参考になる情報が急に少なくなります。 検証し…
