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

今回はArray(配列)に格納されているオブジェクトを特定のプロパティで抽出をArray.prototype.filter()を用いて行います

サンプルデータ

type ArrayObj = {
  id: number
  name: string
  category: 'a' | 'b'
}

const arrayObj = [
  { id: 1, name: 'taro', category: 'a' },
  { id: 2, name: 'hanako', category: 'b' },
  { id: 3, name: 'ume', category: 'a' },
]

Array.prototype.filter()

idでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.id === 1)

[ { id: 1, name: 'taro', category: 'a' } ]

nameでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.name === 'hanako')

[ { id: 2, name: 'hanako', category: 'b' } ]

categoryでfilter

const filteredArrayObj = arrayObj.filter((obj) => obj.category === 'a')

[
  { id: 1, name: 'taro', category: 'a' },
  { id: 3, name: 'ume', category: 'a' }
]

「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 arrayNumbers = [...new Array(10).keys()]

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

1オリジン

keys()の後Array.prototype.map()でArray(配列)の中身を全て1を足しています

const arrayNumbers = [...new Array(10).keys()].map((number) => ++number)

[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

for

0オリジン

let arrayNumbers: number[] = []
for (let i = 0; i < 10; i++) {
  arrayNumbers.push(i)
}

[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

1オリジン

let arrayNumbers: number[] = []
for (let i = 1; i < 11; i++) {
  arrayNumbers.push(i)
}


[
  1, 2, 3, 4,  5,
  6, 7, 8, 9, 10
]

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

次世代フロントエンドツールと言われているViteのテンプレート機能を利用しReact + TypeScriptの開発環境の構築例

前提

node.js,npmが利用できること

node -v

v16.15.0

npm -v

8.5.5

環境構築

任意のディレクトリでviteで初期化

npm init vite@latest

設定はvite-projectは任意のプロジェクト名、reactを選択しTypeScriptで実装するためreact-tsを選択

npm init vite@latest
? Project name: › vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
   vanilla
    vue
❯   react  
    ...
? Select a variant: › - Use arrow-keys. Return to submit.
    react
❯   react-ts 


✔ Project name: … vite-project
✔ Select a framework: › react
✔ Select a variant: › react-ts

初期化が完了したらプロジェクトディレクトリに遷移

cd vite-project

パッケージのインストール

npm install

インストールが完了したらpackage.jsonを確認

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
}

"scripts"で定義されている"dev"がdev serverの起動コマンドなので実行

npm run dev

レスポンスで出力されたLocal(今回はhttp://127.0.0.1:5173/)に指定されてるURLをコピーしブラウザでアクセス

> vite-project@0.0.0 dev
> vite


  VITE v3.0.0  ready in 381 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

画面が表示されれば起動成功（環境構築成功）

Viteの初期アプリ起動画面

VSCode Pythonインタープリタの設定

Pythonの開発をVSCodeで行っていた時にVSCodeのバージョンアップ後からpython.pythonPathが設定できなくなり調べたメモ

普段なら画像の赤枠にpythonPathを選択するための表示があるのだがないため選択ができず調べてみると

どうもpythonPathはdeprecated(非推奨)になっていたようで変わりにコマンドパレット(macの場合「CMD + Shift + P」)からpython select interpreterでインタープリタの選択ができるようになり

事前に設定、インストールしてあるPythonやpipenvなどで構築した環境のバージョンが選択できるようになる

nodenvで利用したいNode.jsのバージョンが無い時の対処法

nodenvでNode.jsのバージョン管理をしているのですが、v16の最新を利用したくなり確認をするとnodenvのlistに最新がなかったため最新を取り込むための備忘録

先に解決方法を書くとnodenvがインストールされているディレクトリに遷移しgit pullで最新化することで解決できます

確認

現在の利用しているNode.jsのバージョンを確認します。これをv16の最新にしたいと思います

nodenv version
16.2.0 (set by /Users/xxxxx/.nodenv/version)

確認をすると16.4.2までしかありません。このエントリー時点では16.14があるはずです。

nodenv install --list

...

16.0.0
16.1.0
16.2.0
16.3.0
16.4.0
16.4.1
16.4.2

解決

nodenvを管理してるディレクトリに遷移しgit pullします

cd "$(nodenv root)"/plugins/node-build
git pull

確認すると16.14.2が表示されました

nodenv install --list

...

16.0.0
16.1.0
16.2.0
16.3.0
16.4.0
16.4.1
16.4.2
16.5.0
16.6.0
16.6.1
16.6.2
16.7.0
16.8.0
16.9.0
16.9.1
16.10.0
16.11.0
16.11.1
16.12.0
16.13.0
16.13.1
16.13.2
16.14.0
16.14.1
16.14.2

VSCodeでTypeScript tsxをPrettierに認識させフォーマットさせる方法

VSCodeでTypeScript tsxをPrettierに認識させフォーマットさせる方法

セーブ時に自動でフォーマットしたい場合はVSCodeの左下の歯車(Manage)をクリックしSettingsからsaveで検索し「Editor: Format On Save」にチェック

Edit in settings.jsonをクリックしJSON内で"editor.formatOnSave"がtrueになっていること(以下)

"editor.formatOnSave": true

"[typescriptreact]"でPrettierでフォーマットするよう追加で設定を記述(以下)

"[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

セーブ時の自動フォーマットをグローバルで設定せず(最初のSettingsからsaveで検索し「Editor: Format On Save」にチェックをしない場合)TypeScriptのみ設定したい場合は以下

"[typescriptreact]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

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

JavaScript、ASCII文字限定での大文字、小文字判定の処理を書いてみたいと思います

実装例

const $=_=>_<$

大文字「A」を引数に渡してみるとtrueが返ります

$("A")
true

小文字「a」を引数に渡してみるとfalseが返ります

$("a")
false

コールバック関数として引数に渡した大文字のみ返す処理の実装例

const $=_=>_<$

const upperCase =(array,fn) => {
    let result = []
    for(i = 0;i < array.length;i++){
        if(fn(array[i])){
            result.push(array[i])
        }
    }
    return result
}

引数に「["a","B","c","D"]」のArrayと判定処理の関数「$」を渡すと大文字のみ返ります

upperCase(["a","B","c","D"],$)

['B', 'D']

Array.prototype.filter()で判定させることも可能です

["a","B","c","D"].filter(a => $(a))

['B', 'D']