プログラミング– category –

前提・環境 create-react-app で作成したプロジェクトにCSS-in-JSの Emotion でスタイリングするプロジェクトcreate-react-app に付属している Jest + testing-library を使用して単体テストします パッケージバージョンnode.js20.9.0React18.2.0@emotion/...

try { // HTTPリクエストの実行 const response = await axios.get('https://example.com/api/data'); console.log(response.data); } catch (error) { // エラーハンドリング const { status, data } = error.response as { status: number; data...

yarn tsc --noEmitの使用法 ターミナルにてプロジェクトのルートディレクトリで、下記のコマンドを実行します。 yarn tsc --noEmit これにより、TypeScriptは型チェックのみを実行し、JavaScriptファイルの生成を行いません。これは、開発中に型エラーだけ...

前提・環境 パッケージバージョンnode.js18.16.0React18.2.0TypeScript5.1.3@emotion/react11.11.1ESlint8.43.0@typescript-eslint/eslint-plugin5.60.1@typescript-eslint/parser5.60.1@emotion/eslint-plugin11.11.0 yarn create react-app --template t...

npmよりyarn派の自分用に環境構築の備忘録 パッケージバージョンnode.js18.16.0React18.2.0TypeScript5.1.3ESlint8.43.0@typescript-eslint/eslint-plugin5.60.1@typescript-eslint/parser5.60.1Prettier2.8.8 create react-app VScodeのターミナルで $ ya...

自動保存設定 や フォントサイズ などのVScodeの設定は settings.json に保存されています。ユーザー設定とワークスペース設定と競合する場合、ワークスペース設定が優先されます。 共同開発でGitHubなどを用いてワークスペース設定のsettings.jsonを共有...

JavaScript で checkbox をはじめからチェックした状態にする場合は下記のように記述になります <form> <input type="checkbox" checked="checked" /> </form> しかし、React で同様な記述だとcheckbox をクリック...

一覧でずらりと並べて表示 ターミナル（コマンドプロンプト・PowerShell）にて 　npm list --depth=0 または 　yarn list --depth=0 と入力します --depth=　の後の数字を大きくするとその数字までの依存関係の階層を表示できます --depth=0はトップ階層の...

前提 ↓前回の記事 に機能追加します追加・減らすボタンを押した時以外に input入力中にエンター・空欄時にバックスペースで input を増減できるようにします 特定のキー入力で関数を作動 const onKeydown = (key) => { switch (key) { case 'Enter&...

React Hook Form を導入していない場合は、ターミナル（コマンドプロンプト・PowerShell）にてcd ディレクトリ名 を使って プロジェクトディレクトリ に移動し、 npm i react-hook-form または yarn add react-hook-form プロジェクトに Reac Hook Form を...