目次 警告が発生する場所 警告の意味 解消方法 警告が発生する場所 以下の処理などで警告が発生する場合があります。 ※「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…

目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…

目次 インポートのエイリアス化とは WebPackのエイリアス定義 TypeScript用のエイリアス定義 インポート ディレクトリのエイリアス ファイルのエイリアス インポートのエイリアス化とは 階層が深くなっていくと、importする際に「../../../../Hoge」のような…

目次 はじめに 難読化 難読化とは 難読化しない方法 難読化する方法 ソースマップ ソースマップとは ソースマップを表示する方法 ソースマップを表示しない方法 はじめに 以下の記事を参考に、DockerとWebPackを使用したプロジェクトを用意してください。 既…

目次 事前準備 WebPack 完成 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了している前提で本記事を記載しています。 まだの方は、以下から進めてください。 React(TypeScript)プロジェクトの作成…

目次 事前準備 Prettier ESLintの設定修正 コマンドでPrettierの整形を行う VSCodeでPrettierを実行する Prettierのルール設定 Prettierの除外ファイル スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が…

目次 事前準備 ESLintの組み込み ESLintの設定ファイルに任意の設定を行う コマンドでESLintのチェックを行う VSCodeでESLintのチェックを起動する スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 事前準備 以下の記事の内容が完了…

目次 前提 Reactのプロジェクト作成環境の用意 Reactプロジェクトに「TypeScript」の設定をしてプロジェクト作成 Dockerの組み込み 「docker-compose up」でエラーが出た場合 スポンサードリンク (adsbygoogle = window.adsbygoogle || []).push({}); 前提 N…