JavaScript

【React,Jest, testing library】ReferenceError: fetch is not definedエラーの解消方法【vite,webpack】

今回はReactアプリを作成する際にReferenceError: fetch is not definedエラーが出た際の解消方法をエントリーします。 ケースとしてはcreate react appではなくwebpackやviteでアプリを作成しアプリ内でfetchを使いAPIなどを利用したケースをJest + Testing…

Node.js Express QueryString(クエリストリング)の取得方法

今回はNode.js Express QueryString(クエリストリング)の取得方法についてエントリーします。 req.query.xxx(xxxはリクエスト時に指定したパラメータ名)で取得できます。 コード例 http://localhost:xxxx/sample?num=10とした場合res.json(req.query.num…

Node.js Expressでパスパラメータの取得方法

Node.js Expressでパスパラメータの取得方法 http://localhost:5000/sample/123でパスパラメータの123を取得したい場合"/sample/:id"でエンドポイントを定義しreq.params.idで取得できる。また123は文字列なのでabc,1b3なども取得できる。ただし/sample/123/…

TypeScript + Express + ESLintの導入

今回はTypeScript + Express + ESLintの導入をしたので備忘録としてエントリーしたいと思います。 インストール 開発環境のみで利用するためnpmの場合は--save-dev、yarnの場合は-Dのオプションをつけます npmの場合 npm install --save-dev eslint yarnの場…

「JavaScript」スプレッド構文(Spread Syntax)と残余引数(Respt Parameters)

今回はJavaScriptのスプレッド構文(Spread Syntax)と残余引数(Respt Parameters)について解説します。 スプレッド構文(Spread Syntax) 配列、オブジェクトなどを展開できます。 const arr = [1,2,3,4,5] const newArr = [...arr,6] (6) [1, 2, 3, 4, 5…

「JavaScript」Array.prototype.reduce()の利用例

今回はArray..prototype.reduce()の利用例についてエントリーしたいと思います。 足し算 1から5を足す計算例(initialValueとして0をaccに渡す) const arr = [1,2,3,4,5] const initialValue = 0 const result = arr.reduce((acc,cur) => acc += cur,initia…

「JavaScript」文字列の中で特定の文字数を数える

今回はJavaScriptで文字列の中で特定の文字数を数えるプログラムを書いていきます。 サンプルデータ 今回はこのサンプルデータからaの文字数を数える "azbdobkdlaac" 前準備 Array.fromを使い文字列を配列にする(以降arrを利用する) const arr = Array.from(…

「JavaScript(TypeScript)」Array(配列)に格納されているオブジェクトを特定のプロパティで抽出「filter」

今回はArray(配列)に格納されているオブジェクトを特定のプロパティで抽出をArray.prototype.filter()を用いて行います サンプルデータ type ArrayObj = { id: number name: string category: 'a' | 'b' } const arrayObj = [ { id: 1, name: 'taro', catego…

「JavaScript(TypeScript) 」Array(配列)に連番でnumberの初期値設定方法「map,for」

今回はJavaScript(TypeScript) Arrayに連番でnumberの初期値の設定方法をmapとforを使って解説します。 解説では0オリジンで0から9までの10個の連番、1オリジンで1から10までの10個の連番を例で解説しています。 Array.prototype.map() 0オリジン const arra…

Viteのテンプレートを用いてReact + TyepScriptアプリ開発環境の構築

次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例 前提 node.js,npmが利用できること node -v v16.15.0 npm -v 8.5.5 環境構築 任意のディレクトリでviteで初期化 npm init vite@latest 設定は…

JavaScript、ASCII文字での大文字、小文字判定

JavaScript、ASCII文字での大文字、小文字判定