React
Reactのサーバーサイドレンダリング (SSR) サーバーサイドレンダリング (SSR) とは、クライアントサイドだけでなく、サーバーサイドでReactコンポーネントをレンダリングする方法のことを指します。 なぜSSRを利用するのか？ 初期ロードの高速化: ブラウザが…
目次 実装 実装 以下のようにテストコードを実装すると test("日付変更テスト", async () => { // 日付を2023年1月1日に変更 vi.setSystemTime(new Date("2023-01-01T00:00:00.000Z")); const { getByText } = setup(<View />); }); 以下のDateが2023年1月1日で取得</view>…
目次 実装方法 実装方法 以下のように実装することで const map = new Map() map.set("a", "あああ"); map.set("b", "いいい"); map.set("c", "ううう"); const obj = Object.fromEntries(map.entries()); console.log(obj); 以下のようなオブジェクトが生成…
目次 期待値 実装 期待値 以下のようなオブジェクトを { key1: "aaa", hoge: "bbb" } 以下のようにvalueを空文字にしたい { key1: "", hoge: "" } 実装 以下のように実装することで、valueが空のオブジェクトにできます。 const obj = { key1: "aaa", hoge: …
目次 ts-pattern null、undefinedの比較 ts-pattern ts-patternは型比較に使用されるライブラリです。 github.com null、undefinedの比較 以下のように、「P.nullish」にてnullかundefinedの場合の処理を行っています。 import { P, match } from 'ts-patter…
目次 機能説明 実装方法 機能説明 以下のようなオブジェクトから const hoge = { sample_0_value: 'サンプルだよ', sample_1_value: 'サンプルだよ1', test_0_value: 'テストだよ' }; 以下のようなオブジェクトを取得したい ※keyに「sample」が含まれている…
目次 警告が発生する場所 警告の意味 解消方法 警告が発生する場所 以下の処理などで警告が発生する場合があります。 ※「obj[key]」の部分で警告になります。 const value = obj[key]; 警告の意味 Variable Assigned to Object Injection Sinkeslintsecurity…
目次 KnexのUpdateの方法 オブジェクト型を使用して一括でUpdateする方法 KnexのUpdateの方法 以下のようにUpdateを行うことができます。 export const setData = async ( knex: Knex, id: number, name: string, ) => { await knex("table") .update({name:…
目次 Object.freeze()とは Object.freeze()の使い方 Object.freeze()とは 簡単に言うと該当のオブジェクトの書き換えや追加などが出来なくなるようにする方法です。 定数でオブジェクト型を作成する場合に使用します。 Object.freeze()の使い方 以下のように…
目次 CSS Modulesを使用したCSSの設定方法 サンプル CSS Modulesを使用したCSSの設定方法 CSS Modulesを使用する際には、特別なライブラリをインストールするなどは必要ありません。 「index.tsx」と同じ階層に「index.module.css」のファイルを作成してくだ…
目次 事前準備 ライブラリインストール ソースコード 事前準備 スライダーに表示したい任意の画像を３種類用意して、「img.png」「img1.png」「img2.png」として、ソースコードと同じディレクトリに格納する。 ライブラリインストール 以下のコマンドを実行…
目次 はじめに TextFieldのdatetime-localタイプに初期値を設定する方法 日付のフォーマットを変換 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com TextFieldのdatetime-localタイプに初期値を設定する方法 以下のよ…
目次 はじめに datetime-localタイプで秒を表示する方法 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com datetime-localタイプで秒を表示する方法 以下のように、「inputProps」に「{ "step": 1 }」を設定する事で、…
目次 App.tsx Error404Page 遷移方法 App.tsx SPAとして、App.tsxを作成します。 以下のサンプルは、「/hoge」のページのみを用意していますが、こちらは任意でカスタマイズしてください。 Error404Pageは後述しますので、そちらのパスに修正してください。 …
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Link ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 リンク表…
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/TextField ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 テキ…
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Button ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 ボタン…
目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button onClick={() => {console.log('ボタン押下')}}> ボタン </button> ); }; export default Button; このコンポーネントは以下…
目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button> ボタン表示タイトル </button> ); }; export default Button; このコンポーネントは以下の様に呼び出します…
目次 完成したテーブル テーブルのコンポーネント作成 テーブルコンポーネントを使用 ソートの方法 フィルターの方法 完成したテーブル 本記事のコンポーネントでは、以下の画像のテーブルが作成できます。 テーブルのコンポーネント作成 以下、「CustomTabl…
目次 React v17以前 React v18以降 React v17以前 React v17以前では、以下のサンプルのように「VFC」を使用してPropsを渡していました。 また、初期値などのdefaultPropsで設定していました。 import React, { VFC } from "react"; import styles from "./i…
目次 はじめに nginxの設定 はじめに ReactでSPAの任意のWebアプリを作成します。 ローカルホストでは、ブラウザリロードなどを行っても正常に機能しますが、nginxのサーバーにデプロイした際に404エラーが発生する場合の解決方法を記載します。 nginxの設定…
目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…
目次 インポートのエイリアス化とは WebPackのエイリアス定義 TypeScript用のエイリアス定義 インポート ディレクトリのエイリアス ファイルのエイリアス インポートのエイリアス化とは 階層が深くなっていくと、importする際に「../../../../Hoge」のような…
目次 はじめに 難読化 難読化とは 難読化しない方法 難読化する方法 ソースマップ ソースマップとは ソースマップを表示する方法 ソースマップを表示しない方法 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既…
目次 はじめに 環境毎のWebPackを修正する 環境定数をプロジェクト内で使用出来るようにする 環境定数を使用する はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトに環境毎のWebPackを用意してください。 既にプロジェクトがある場合は…
目次 はじめに package.jsonで環境を定義する WebPackの修正 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既にプロジェクトがある場合は、適時読み替えてください。 reigle.info package.jsonで環境を定義する…
目次 はじめに Dockerの本番環境用意 package.jsonの内容を修正 webpack.config.jsの出力先指定 ビルド実行 ビルド後のファイルをローカルで実行 サーバーへのデプロイ はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してくださ…
目次 事前準備 WebPack 完成 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了している前提で本記事を記載しています。 まだの方は、以下から進めてください。 React(TypeScript)プロジェクトの作成…
目次 事前準備 Prettier ESLintの設定修正 コマンドでPrettierの整形を行う VSCodeでPrettierを実行する Prettierのルール設定 Prettierの除外ファイル スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が…