技術ブログ

プログラミング、IT関連の記事中心

TypeScript

Variable Assigned to Object Injection Sinkeslintsecurity/detect-object-injection

目次 警告が発生する場所 警告の意味 解消方法 警告が発生する場所 以下の処理などで警告が発生する場合があります。 ※「obj[key]」の部分で警告になります。 const value = obj[key]; 警告の意味 Variable Assigned to Object Injection Sinkeslintsecurity…

Knexを使用してUpdateにオブジェクト型を使用して一括でアップデートする方法 React TypeScript

目次 KnexのUpdateの方法 オブジェクト型を使用して一括でUpdateする方法 KnexのUpdateの方法 以下のようにUpdateを行うことができます。 export const setData = async ( knex: Knex, id: number, name: string, ) => { await knex("table") .update({name:…

JavaScriptでオブジェクト型の定数クラスを作成する方法 Object.freeze()

目次 Object.freeze()とは Object.freeze()の使い方 Object.freeze()とは 簡単に言うと該当のオブジェクトの書き換えや追加などが出来なくなるようにする方法です。 定数でオブジェクト型を作成する場合に使用します。 Object.freeze()の使い方 以下のように…

React TypeScriptでCSS Modulesを使用したCSSの設定方法

目次 CSS Modulesを使用したCSSの設定方法 サンプル CSS Modulesを使用したCSSの設定方法 CSS Modulesを使用する際には、特別なライブラリをインストールするなどは必要ありません。 「index.tsx」と同じ階層に「index.module.css」のファイルを作成してくだ…

React TypeScriptで自動横スクロールするスライダーの作成方法(react-slick)

目次 事前準備 ライブラリインストール ソースコード 事前準備 スライダーに表示したい任意の画像を3種類用意して、「img.png」「img1.png」「img2.png」として、ソースコードと同じディレクトリに格納する。 ライブラリインストール 以下のコマンドを実行…

TypeScriptでMaterial UIのTextFieldのdatetime-localタイプに初期値を設定する方法

目次 はじめに TextFieldのdatetime-localタイプに初期値を設定する方法 日付のフォーマットを変換 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com TextFieldのdatetime-localタイプに初期値を設定する方法 以下のよ…

ReactでMaterial UIのTextFieldのdatetime-localタイプで秒を表示する方法

目次 はじめに datetime-localタイプで秒を表示する方法 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com datetime-localタイプで秒を表示する方法 以下のように、「inputProps」に「{ "step": 1 }」を設定する事で、…

TypeScriptのSPAで存在しないURLの場合に表示される404ページをカスタマイズする方法

目次 App.tsx Error404Page 遷移方法 App.tsx SPAとして、App.tsxを作成します。 以下のサンプルは、「/hoge」のページのみを用意していますが、こちらは任意でカスタマイズしてください。 Error404Pageは後述しますので、そちらのパスに修正してください。 …

TypeScriptでリンクをカスタマイズしたコンポーネント

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Link ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 リンク表…

TypeScriptでよく使う基本機能を含んだTextFieldコンポーネント

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/TextField ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 テキ…

TypeScriptでよく使う基本機能を含んだButtonコンポーネント

目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Button ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 ボタン…

TypeScriptでコンポーネントにPropsで関数を渡す方法(Props)

目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button onClick={() => {console.log('ボタン押下')}}> ボタン </button> ); }; export default Button; このコンポーネントは以下…

TypeScriptでコンポーネントにPropsで文字列を渡す方法(Props)

目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button> ボタン表示タイトル </button> ); }; export default Button; このコンポーネントは以下の様に呼び出します…

React(TypeScript)でライブラリを使用せずに、ソートとページャーがついたテーブルを実装する方法(table、sort、pager)

目次 完成したテーブル テーブルのコンポーネント作成 テーブルコンポーネントを使用 ソートの方法 フィルターの方法 完成したテーブル 本記事のコンポーネントでは、以下の画像のテーブルが作成できます。 テーブルのコンポーネント作成 以下、「CustomTabl…

React v18でVFCなどの使用に関して(React、TypeScript)

目次 React v17以前 React v18以降 React v17以前 React v17以前では、以下のサンプルのように「VFC」を使用してPropsを渡していました。 また、初期値などのdefaultPropsで設定していました。 import React, { VFC } from "react"; import styles from "./i…

React(TypeScript) WebPackでCSSの環境定数

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

React(TypeScript) WebPackでインポートのエイリアス化(省略、@、アットマーク)

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

React(TypeScript) WebPackで難読化、ソースマップの非表示する方法

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

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【4/4】

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

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【3/4】

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

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【2/4】

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

React(TypeScript)プロジェクトの作成方法(Docker、ESLint、Prettier、WebPack)【1/4】

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