TypeScript & JavaScript

独学書

Text	Date	Status
Angularアプリケーションプログラミング	2023/09/23	finished ->コード
モダンJavaScriptの基本から始めるReact実践の教科書	2022/07/02	finished ->コード

コンテンツ

Contents	Date	Status
Vercel＋Next.jsを活用したWebアプリケーション開発入門	2022/11/03	第4回ブログを作りながら学ぶ、Next.jsの便利な4つの機能（グローバル設定、プリレンダリング、動的ルート、サーバーレス）
TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法	2024/05/22	第8回 TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！ finished

環境

Windows

Machine	Category	Env / FW	Last Updated
Windows	Common	Node.js 22.12.0	2024/12/11
		Bun 1.2.4	2025/03/01
		Vite 6.2.1	2025/03/08
Windows Insider	Common	Node.js 24.1.0	2025/06/01
		Bun 1.3.10	2026/03/05
		Vite 7.3.1	2026/01/23
	Library	TypeORM 0.3.26	2025/08/24
		Prisma 6.16.2	2025/09/25
		Sequelize 6.37.6	2025/03/19
		D3 7.9.0	2025/03/29
		- bun 1.2.21	2025/08/30
		- Vite 7.1.9	2025/10/03
		- React 19.2.0	2025/10/08
		- Svelte 5.25.3	2025/03/29
		Chart.JS 4.5.0	2025/07/08
		Recharts 3.3.0	2025/10/18
		Babylon.js 8.30.1	2025/10/03
		- react 19.2.0	2025/10/03
		- react-babylonjs 3.2.4	2025/10/03
		- bun 1.2.21	2025/08/30
		- vite 7.1.9	2025/10/03
	Web FW	Angular 21.0.0	2025/11/21
		Astro 5.16.2	2025/11/29
		- React 19.2.0	2025/10/08
		- Bun 1.3.3	2025/11/23
		Deno 2.5.1	2025/09/21
		- Deno-webUI 2.5.9	2025/07/26
		- fresh 2.1.1	2025/09/21
		Next.js 16.0.0	2025/10/22
		- React 19.2.0	2025/10/13
		- Bun 1.3.0	2025/10/13
		Nuxt 4.1.3	2025/10/13
		- Bun 1.3.0	2025/10/13
		- Vite 7.1.9	2025/10/03
		React 19.2.0	2025/10/08
		- Bun 1.2.21	2025/08/30
		React Native Windows 0.82.3	2026/04/04
		- Bun 1.3.11	2026/03/28
		- React Native 0.82.1	2026/04/04
		- React 19.2.4	2026/04/04
		- Windows SDK 10.0.26100	2025/01/18
		Svelte 5.48.1	2026/01/24
		- Bun 1.3.6	2026/01/23
		- Vite 7.3.1	2026/01/23
		Vue 3.5.16	2025/05/31
		- Deno 2.3.5	2025/05/31
		- Bun 1.2.15	2025/05/22
		- Vite 6.3.5	2025/05/21
	Test FW	Playwright 1.56.0	2025/10/07
	Mobile	React Native 0.83.2	2026/02/20
		- Expo 55.0.5	2026/03/05
		- Bun 1.3.10	2026/03/05
		- Expo Go 55.0.3	2026/03/05
	Gen AI	Genkit JS 1.21.0	2025/10/16
	Search	Exa-js 2.8.0	2026/03/13

macOS

Machine	Category	Env / FW	Last Updated
macOS	Common	Node.js 22.15.0	2025/04/26
		- nodebrew 1.2.0	2025/04/26
		Bun 1.2.21	2025/08/30
	Mobile	Lynx 3.4.1	2025/09/09
		- Bun 1.2.21	2025/08/30
		React Native 0.81.4	2025/09/11
		- Expo 54.0.1	2025/09/11
		- React 19.1.0	2025/08/22
		- Bun 1.2.22	2025/09/16
		- Expo Go 54.0.4	2025/09/11

ノウハウ

TypeScript

アーキテクチャを理解する Checked Out! 2024/08/25
- React/Nexjs ユーザーに向けた Astro 入門
- 【Next.js】App RouterとRSCによるアーキテクチャ設計
Visual Studio Code 用 Microsoft Edge DevTools 拡張機能
Visual Studio Code で TypeScript の開発環境を構築する
node.js/nvm
- インストール
  - 古いバージョンをアンインストールするなら、下記ディレクトリのライブラリ(node-modules)は整理した後で！（グローバルにインストールしていなければ、問題なし）
    - ユーザディレクトリのAppData\Roaming\npm
    - ユーザディレクトリのAppData\Roaming\npm-cache
- バージョンアップ
  - Windowsでnode.jsやnpmのバージョンをアップデート・変更する方法｜バージョンが切り替わらないときの対処法（nodistの使い方）
  - macOS / homebrew + nodebrewでバージョン管理
    - 一覧
```
nodebrew list
```
    - 公開バージョン確認
```
nodebrew ls-remote
```
    - インストール
```
nodebrew install-binary <Version>
```
    - バージョン切り替え
```
nodebrew use <Version>
```
    - 実行バージョン確認
```
node -v
```
  - ChromeOS Flex
    - nvmインストール
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
```
    - nodeインストール
```
nvm install node
```
- セキュリティ対策
  - パスワードのハッシュ化（bcrypt）
  - JWT（JSON Webトークン）の検証（JOSE）
- トラブルシューティング
  - キャッシュクリア
```
npm cache clean --force
```
  - node.js 17以降で実行時エラーとなる（OpenSSL関連）
    - スクリプト実行時にnodeのopenssl-legacy-providerオプションを有効化するよう、package.jsonを書き換える参考
    - npx create-react-app “package-name”(npm install)でmissing dependenciesエラー
      - 実行時に見つからないパッケージが表示されたら、そのパッケージをインストールする
```
npm install --save "@xxx"
```
    - npm startでエラー
      - 以下のコマンドで解決するらしい
        npm config set scripts-prepend-node-path true

Runtime

Bun

Install

Windows

powershell -c "irm bun.sh/install.ps1 | iex"

Specific Version

iex "& {$(irm https://bun.com/install.ps1)} -Version 1.3.0"

WSL2
```
curl -fsSL https://bun.sh/install | bash
```
- unzip is required to install bun (see: https://github.com/oven-sh/bun#unzip-is-required)
```
sudo apt install unzip
```

Run
```
bun run
```
Update
```
bun upgrade
```
convert lockfile to text
```
bun install --save-text-lockfile
```

uninstall

スクリプトの実行有効化

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

実行
```
powershell -c "~/.bun/uninstall.ps1"
```

JWT_SECRETの生成

bun -e "console.log(require('crypto').randomBytes(32).toString('base64'))"

Deno

Denoを試してみる

インストール

Windows

iwr https://deno.land/install.ps1 -useb | iex

インストール結果

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
100 32.4M  100 32.4M    0     0  15.0M      0  0:00:02  0:00:02 --:--:-- 57.0M
Deno was installed successfully to C:\Users\taish\.deno\bin\deno.exe
Run 'deno --help' to get started
Stuck? Join our Discord https://discord.gg/deno

Deno Install

ChromeOS Flex

curl -fsSL https://deno.land/x/install/install.sh | sh

Deno更新
```
deno upgrade
```

fresh 2.1.1

Get Started

deno run -A -r https://fresh.deno.dev my-project
cd my-project
deno task dev

Update

deno run -Ar https://fresh.deno.dev/update

Deno-WebUI v2.5.9 (Beta)

deno run --allow-read --allow-write --allow-net --allow-env --allow-ffi minimal.ts

ORM

TypeORM
- プロジェクト作成
```
npx typeorm init --name first_project --database mysql
```
- MySQL 8.0以降で利用する場合は、mysqlでなく、mysql2を利用する
```
npm install mysql2 --save
```

Prisma

Prisma Data Platform / Log on GitHub Account

Prisma Postgres

Quick Start

Log

PS D:\Repository\Weekend_Programming\js\prisma> npx try-prisma@latest --template databases/prisma-postgres --databaseUrl 'prisma+postgres://accelerate.prisma-data.net/?api_key=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcGlfa2V5IjoiN2ZkMDgxYzItY2MxNC00ZmVlLThhNDEtZWRlYzJjNzNlNTZkIiwidGVuYW50X2lkIjoiYjNmYTc3N2Y2MDJhY2YwOWQ2MWRkNmI1NjQ2Y2ExNDI3YWIyYjg4MjVkYzAzZDhlMmNjMzk4Y2M0YjBlMWU2NiIsImludGVybmFsX3NlY3JldCI6IjAyMTMyZWU1LTgxNTMtNDRiNS1hZTU2LWY5YTBjN2RkN2JiZiJ9.OSayNHa6Z5_vMPKVH-RekZznzOTkncVnbDVz_r5VVVU' --name hello-prisma-postgres --install npm
>> 
Need to install the following packages:
try-prisma@1.3.0
Ok to proceed? (y) y

✔ Loaded 49 templates
✔ Downloaded and extracted the databases/prisma-postgres project in ./hello-prisma-postgres.

✔ Installed packages in ./hello-prisma-postgres.

    The project is good to go! Next steps:
    1. Navigate into ./hello-prisma-postgres to begin.
    2. Refer to the project README for detailed instructions on running the project:
      https://github.com/prisma/prisma-examples/tree/latest/databases/prisma-postgres

If you have any feedback about this specific template, we want to hear it!
Submit any feedback here: https://pris.ly/prisma-examples-feedback
PS D:\Repository\Weekend_Programming\js\prisma> cd .\hello-prisma-postgres\
PS D:\Repository\Weekend_Programming\js\prisma\hello-prisma-postgres> npx prisma migrate dev --name init                                                                                                                                  
Environment variables loaded from .env                                                                                                                                                                                                    
Prisma schema loaded from prisma\schema.prisma
Datasource "db": PostgreSQL database "postgres", schema "public" at "accelerate.prisma-data.net"

Applying migration `20250319084505_init`

The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20250319084505_init/
    └─ migration.sql

Your database is now in sync with your schema.

✔ Generated Prisma Client (v6.5.0, engine=none) to .\node_modules\@prisma\client in 33ms


PS D:\Repository\Weekend_Programming\js\prisma\hello-prisma-postgres> npm run queries

> queries
> ts-node ./src/queries.ts

Created users: Alice (1 post) and Bob (2 posts) 
Retrieved all published posts: [{"id":1,"title":"Join the Prisma community on Discord","content":"https://pris.ly/discord","published":true,"authorId":1},{"id":2,"title":"Check out Prisma on YouTube","content":"https://pris.ly/youtube","published":true,"authorId":2}]
Created a new post: {"id":4,"title":"Join the Prisma Discord community","content":"https://pris.ly/discord","published":false,"authorId":1}
Published the newly created post: {"id":4,"title":"Join the Prisma Discord community","content":"https://pris.ly/discord","published":true,"authorId":1}
Retrieved all posts from a specific user: [{"id":1,"title":"Join the Prisma community on Discord","content":"https://pris.ly/discord","published":true,"authorId":1},{"id":4,"title":"Join the Prisma Discord community","content":"https://pris.ly/discord","published":true,"authorId":1}]

Start from scratch
Prisma Studio - Prismaを使うプロジェクト配下でデータベースを参照することができるWebアプリケーション
- 起動
```
npx prisma studio
```
  プロジェクトのディレクトリで上記コマンドを実行すると、Webブラウザが起動される。接続するデータベースは、.envの設定を使って接続し、テーブルは、schema.prismaを参照しているらしい。
```
Environment variables loaded from .env
Prisma schema loaded from prisma\schema.prisma
Prisma Studio is up on http://localhost:5555
```
- トップ画面
- テーブルビュー

Sequelize
- Getting Started
- Sequelizeを使用してデータベースを操作するための基本的な情報(2020.09更新）

Framework

マルチプラットフォーム（モバイル/デスクトップ）
- Lynx/(履歴)
  - Lynx 3.4.0
    - Lynxのバージョンを動的表示するように改修
```
setVersion(SystemInfo.engineVersion)
```
  - ReactLynx
    - QuickStart
```
bun create rspeedy@latest
```
      1. DownLoad LynxExplorer / Install on Simulator
      2. Execute Code
        bun run dev
      3. Execute LynxApp
        
        Copy URL
        
        Paste URL to LynxExplorer
- React Native
  - Configuring Metro
  - Expo
    - Bun + React Native + TypeScript
```
bun create expo expo-bun-sample
bun add -d typescript @react-native/typescript-config jest @types/react -y
```
      - Expo + React Nativeの開発でBun使ってみた
      - bunでReact Native expo環境を作る
    - Upgrade Next Version
      1. Upgrade
        bun install expo@^53.0.20
      2. Upgrade Dependencies
        bunx expo install --fix bunx expo-doctor
  - React Nativeで開発したアプリの実行/(履歴)
    - React Native 0.83.2 / Expo SDK 55.0.5 / Pixel 9 Pro
      - React 19.2.0
    - Expo SDKは、React Native リビジョン２つごとにバージョンアップする模様
      - 例）Expo 54は、React Native 0.81に対応し、Expo 55は、React Native 0.83に対応する
    - iOS
      - iOS エミュレータを起動
        bun run ios
    - Android
      - Android SDK配下にあるエミュレータを起動する
      - あらかじめ、SDKインストールディレクトリを確認すること
      - AVD Managerでイメージを作成しておくこと
        <Android SDKインストールディレクトリ>\emulator\emulator.exe -avd Nexus_5X_API_29_x86
      - プロジェクトをビルドする（ビルド後、APがエミュレータにインストールされる）
        react-native run-android
  - React Native for Windows / 履歴
    - 前提条件
      - Node.js development
      - .NET Desktop development
      - Desktop development with C++
      - Universal Windows Platform development
      - Windows 10 SDK
    - 作成
```
npx @react-native-community/cli init <projectName>
```
    - Windowsターゲット追加
```
cd projectName
bun add react-native-windows@0.80.0
bunx react-native init-windows --overwrite
```
    - 実行
```
bun windows
```
    - React Native Windows 0.82.3
      - React Native 0.82.1
      - React 19.2.4
  - モノレポ構成でのWebとモバイル共有化
- Gluon

Astro

Astro with Docker Container

Astro 5.0 beta

Upgrade

npx @astrojs/upgrade beta

Upgrade Log

Need to install the following packages:
@astrojs/upgrade@0.3.3
Ok to proceed? (y) y


astro   Integration upgrade in progress.

      ●  @astrojs/check will be updated to v0.9.4
      ●  @astrojs/react will be updated to v
      ▲  astro will be updated to  v5.0.0-beta.3 

  wait   One package has breaking changes. Continue?
        Yes

check   Be sure to follow the CHANGELOG.
        astro https://github.com/withastro/astro/blob/next/packages/astro/CHANGELOG.md#500-beta3

██████  Installing dependencies with bun...

+—————+  Houston:
| ^ u ^  Have fun building!
+—————+

Astro 4.2

Upgrade

npx @astrojs/upgrade

Upgrade Log

Need to install the following packages:
  @astrojs/upgrade@0.2.2
Ok to proceed? (y) y

astro   Integration upgrade in progress.

      ◼  @astrojs/react is up to date on v3.0.9
      ●  astro will be updated to v4.2.1
      ●  @astrojs/check will be updated to v0.4.1

      ✔  Installed dependencies!

╭─────╮  Houston:
│ ◠ ◡ ◠  See you around, astronaut.
╰─────╯
npm notice
npm notice New major version of npm available! 9.6.7 -> 10.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.3.0
npm notice Run npm install -g npm@10.3.0 to update!
npm notice

Astroプロジェクト作成

With Bun

https://docs.astro.build/en/recipes/bun/#_top

jQuery 3.7.1
Chart.js 4.4.1
Babylon.JS
- Babylon.JS 8.3.1
- Babylon.JS 6.0
Next.js / Vercel
- Nextjs-blog
- React Best Practice
  1. プロジェクトへの適用
```
# プロジェクトルートで実行
mkdir -p .claude/skills
cd .claude/skills

# React Best Practiceスキルをダウンロード
git clone --depth 1 --filter=blob:none --sparse https://github.com/vercel-labs/agent-skills.git
cd agent-skills
git sparse-checkout set skills/react-best-practices
mv skills/react-best-practices ../../react-best-practices
cd ../..
rm -rf agent-skills
```
  2. .claude/instructions.md を作成（推奨）
    - プロジェクトルートに .claude/instructions.md を作成して、常にこのスキルを参照するようにします：
```
# Project Instructions

## React/Next.js Development
- Follow Vercel React Best Practices defined in `.claude/skills/react-best-practices/SKILL.md`
- Prioritize CRITICAL and HIGH impact rules
- Focus on eliminating waterfalls and bundle size optimization
```
- Vercel
- Vercelホスティングサービス
  - プロジェクト（ローカルリポジトリ）の作成
```
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
```
  - Githubリポジトリ作成
  - Githubへプッシュする
```
git remote add origin https://github.com/Tatsukiyoshi/nextjs-blog.git
git push -u origin main
```
  - DPS Workflow Pull Requestを発行すると、VercelでPreviewすることができ、Mergeすると、正式サイト（Production）に昇格する。
    Develop -> Preview -> Ship
- Static Exports
- Tailwindcss with Next.js
  - bunでの更新時に tailwindcss -i styles/globals.css -o styles/dist.css がエラーで実行できないことから、改めて、tailwindcssのサイトを確認し、Upgrade Guideを参照
    下記２点を行い、更新完了
    - upgrade toolの実行
```
bunx @tailwindcss/upgrade
```
    - cliの導入
```
bun install @tailwindcss/cli
```
- Next.js and Bun
```
bun create next-app
```
- Next.js 16.0.0
```
npx @next/codemod@canary upgrade latest
```
- Next.js 13新機能
  - Appフォルダ
```
npx create-next-app nextjs13-sample --ts --experimental-app --use-npm
```
    （参考）Next.js 13 で開発方法はどう変わる？
    - Error対策
      - https://nextjs.org/docs/messages/link-no-children
      - https://nextjs.org/docs/messages/react-hydration-error
  - TurboPack
```
npx create-next-app --ts --example with-turbopack
```
    Next.js 13の新機能のTurbopackを試してみる ↓ これであれば、Appフォルダも使えるようになっていた。
T3 Stack
- Drizzle + PostgreSQL

React

MUI
- 全角入力できる数値フィールド
Web-vitals
- 新しいWeb-Vitalsでは、インターフェースが変更になっているため、下記リンクのように変更する必要あり https://stackoverflow.com/questions/78772766/yarn-build-error-ts2305-module-web-vitals-has-no-exported-member-reportha

‘bun update’でエラーとなる場合、ロックファイルを削除して、やり直す必要あり

bun update v1.1.38 (bf2f153f)
  ⚙️  node-sass [1/6] node:internal/child_process:420
    throw new ErrnoException(err, 'spawn');
    ^

Error: spawn EINVAL
    at ChildProcess.spawn (node:internal/child_process:420:11)
    at Object.spawn (node:child_process:753:9)
    at build (D:\Repository\Weekend_Programming\js\react\practice\4-6\my-app\node_modules\fibers\build.js:62:5)
    at Object.<anonymous> (D:\Repository\Weekend_Programming\js\react\practice\4-6\my-app\node_modules\fibers\build.js:51:3)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at Object..js (node:internal/modules/cjs/loader:1708:10)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24) {
  errno: -4071,
  code: 'EINVAL',
  syscall: 'spawn'
}

Node.js v22.12.0
bun: command not found: nodejs

error: install script from "fibers" exited with 1

React 19.RC
- Install
```
npm install react@rc react-dom@rc
```
- Update package.json for using typescript
```
{
  "dependencies": {
    ...
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
    ...
  },
  "overrides": {
    "@types/react": "npm:types-react@rc",
    "@types/react-dom": "npm:types-react-dom@rc"
  }
}
```
- Migration
```
npx codemod@latest react/19/migration-recipe
```
  - node_modules等は、除外するとメッセージしておきながら、ファイルがあると走査対象になり、しまいには、エラーとなる始末。なので、node_modulesは削除して実行しましょう！
    そうすれば、package.jsonによるDependencyの更新も行わない。
React 18.3.1
- browserslistの更新
```
bun add update-browserslist-db@latest
```
- web-vitals は更新せず
ReactGrid - 表形式でのデータ表示・更新が可能なライブラリ
```
bun create vite <Project Name>
bun install @silevis/reactgrid
```
react-chartjs-2 - 多彩なグラフ表示が可能なライブラリ
```
bun create vite <Project Name>
bun add chart.js react-chartjs-2
```
モダンJavaScriptの基礎から始める挫折しないためのReact入門＠Udemy
Tutorial @2021/10/10 Finished!

Svelte
- SvelteKitでParse Error -> 環境が壊れている可能性が高いので初期化する
  - Lockfileを削除する
  - node_modulesディレクトリを削除する
  - .svelte-kitディレクトリを削除する
- Static Site Generator
- SvelteとReactの基本を比較
- Svelteのポート番号変更
- ポート番号変更(package.json)
```
"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "sirv public --no-clear --port 8083",
  "check": "svelte-check --tsconfig ./tsconfig.json",
  "tauri": "tauri"
},
```
D3
- Get Started

Angular

Angular日本語ドキュメンテーション―ローカル環境とワークスペースのセットアップ

ノウハウ

コマンド

ng <command>

Commands:

Command
ng analytics	Configures the gathering of Angular CLI usage metrics. <BR>See https://angular.io/cli/usage-analytics-gathering
ng completion	Set up Angular CLI autocompletion for your terminal.
ng config [json-path] [value]	Retrieves or sets Angular configuration values in the angular.json file for the workspace.
ng doc <keyword>	Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword. [aliases: d]
ng new [name]	Creates a new Angular workspace. [aliases: n]
ng version	Outputs Angular CLI version. [aliases: v]

Options:

—help Shows a help message for this command in the console. [boolean]

The above commands are available when running the Angular CLI outside a workspace.More commands are available when running inside a workspace. For more information, see https://angular.io/cli/.


—help	Shows a help message for this command in the console. [boolean]

Quick Start

git clone https://github.com/angular/quickstart.git

Angular 21.0.0対応

Standard

ng update @angular/cli@21 @angular/core@21

Use Material

ng update @angular/cli@21 @angular/core@21 @angular/cdk@21 @angular/material@21

Angular 21.0.0-next.9対応
- Standard
```
ng update @angular/cli @angular/core --next
```
- Use Material
```
ng update @angular/cli @angular/core @angular/cdk @angular/material --next
```
- Update Dependencies
  
  Component Version
  @types/jasmine 5.1.12
  jasmine-core 5.12.0
  karma-coverage 2.2.1

Component	Version
@types/jasmine	5.1.12
jasmine-core	5.12.0
karma-coverage	2.2.1

Angular 21.0.0-next.8対応

ng update @angular/cli @angular/core --next

Angular 20.2.1対応
- Update Dependencies
  
  Component Version
  @types/jasmine 5.1.9
  jasmine-core 5.9.0
  typescript 5.9.2
Angular 20.0.2対応
- Update Dependencies
  
  Component Version
  jasmine-core 5.8.0
Angular 20.0.0対応
- Update Dependencies
  
  Component Version
  zone.js 0.15.1
  @types/jasmine 5.1.8
  jasmine-core 5.7.1
  typescript 5.8.3
Angular 19.2.0対応
- Update Dependencies
  
  Component Version
  rxjs 7.8.2
  @types/jasmine 5.1.7
  jasmine-core 5.6.0
  typescript 5.8.2

Component	Version
@types/jasmine	5.1.9
jasmine-core	5.9.0
typescript	5.9.2

Component	Version
jasmine-core	5.8.0

Component	Version
zone.js	0.15.1
@types/jasmine	5.1.8
jasmine-core	5.7.1
typescript	5.8.3

Component	Version
rxjs	7.8.2
@types/jasmine	5.1.7
jasmine-core	5.6.0
typescript	5.8.2

Angular 19対応

Update Dependencies

Component Version
angular-in-memory-web-api 0.19.0
rxjs 7.8.1
tslib 2.8.1
zone.js 0.15.0
@types/jasmine 5.1.5
jasmine-core 5.5.0
karma 6.4.4
karma-chrome-launcher 3.2.0
karma-coverage 2.2.1
karma-jasmine 5.1.0
Migration to Standalone
```
ng generate @angular/core:standalone
```

Component	Version
angular-in-memory-web-api	0.19.0
rxjs	7.8.1
tslib	2.8.1
zone.js	0.15.0
@types/jasmine	5.1.5
jasmine-core	5.5.0
karma	6.4.4
karma-chrome-launcher	3.2.0
karma-coverage	2.2.1
karma-jasmine	5.1.0

Additional actions

import FormsModule

import { FormsModule } from '@angular/forms';

@Component({
  imports: [FormsModule],
  ...
})

conditions

ngModel

<input id="name" name="name" type="text" autocomplete="additional-name" [(ngModel)]="myName" />

import CommonModule

import { CommonModule } from '@angular/common';

@Component({
  imports: [CommonModule],
  ...
})

conditions

pipe
```
<li>{{ary | slice: 3}}</li>
```
NgClass
```
<div [ngClass]="styles">
```
NgFor
```
<tr *ngFor="let b of books">
```
NgIf
NgPlural
NgStyle
NgSwitch
NgTemplateOutlet

import ReactiveFormsModule

import { FormGroup, FormControl,
  FormBuilder, Validators, 
  ReactiveFormsModule} from '@angular/forms'

@Component({
  imports: [CommonModule, ReactiveFormsModule],
  ...
})

import RouterModule

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';

@Component({
  imports: [RouterModule],
  ...
})

conditions
- routerLink
- router-outlet

Trouble Shooting
- NG8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.
  - FormsModuleをインポートする
```
import { FormsModule } from '@angular/forms';

@Component({
  imports: [FormsModule],
  ...
})
```
- NG8004: No pipe found with name ‘…’.
  - CommonModuleをインポートする
```
import { Component } from '@angular/core';

@Component({
  imports: [CommonModule],
  ...
})
```

Angular 18対応
- Update Guide
  - プロジェクトのルートで下記を実行する
    配下のファイルをリポジトリからチェックアウトした状態で実行すること
```
ng update @angular/core@18 @angular/cli@18
```
- AbstractControlをFormControlにキャストする
```
[formControl]="$any(myForm).controls['mail']"
```
- angular-in-memory-web-apiの更新
```
"dependencies": {
  ...
  "angular-in-memory-web-api": "^0.18.0",
  ...
},
```
Angular 17対応
- ライブラリのバージョン変更
  
  ライブラリバージョン
  zone.js 0.14.0
  typescript 5.2.2
Angular 16対応
- esbuild対応(angular.json)
```
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser-esbuild",
  }
}
```
- ライブラリのバージョン変更
  
  ライブラリバージョン
  zone.js 0.13.0
  typescript 4.9.3
Angular 15対応
- ライブラリのバージョン変更
  
  ライブラリバージョン
  zone.js 0.12.0
  @types/jasmine 4.3.0
  jasmine-core 4.5.0
  karma 6.4.0
  karma-chrome-launcher 3.1.0
  karma-coverage 2.2.0
  karma-jasmine 5.1.0
  karma-jasmine-html-reporter 2.0.0
  typescript 4.8.2
- ECMA Version tsconfig.jsonにて、targetをES2022にしていない場合、
```
"target": "es2020",
```
  実行時（ng serve）に下記警告メッセージが出力される。
```
TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI. To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility
```
ngx-bootstrap
- Get Started
ng2-validation

ライブラリ	バージョン
zone.js	0.14.0
typescript	5.2.2

ライブラリ	バージョン
zone.js	0.13.0
typescript	4.9.3

ライブラリ	バージョン
zone.js	0.12.0
@types/jasmine	4.3.0
jasmine-core	4.5.0
karma	6.4.0
karma-chrome-launcher	3.1.0
karma-coverage	2.2.0
karma-jasmine	5.1.0
karma-jasmine-html-reporter	2.0.0
typescript	4.8.2

国際化対応

設定ファイル（Angular.json）

作成した翻訳ファイルの格納場所を設定する

"i18n": {
  "locales": {
    "ja": {
      "translation": "src/locale/messages.ja.xlf"
    }
  }
}

国際化対応を含むこと、および対応するロケールを明示する

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "localize": true,
    ...
  },
  "configurations": {
    "ja": {
      "localize": ["ja"]
    },
  }
}

開発サーバは、１つのロケールしか扱えないため、そのロケールを明示する

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "configurations": {
    "ja": {
      "browserTarget": "i18n:build:development,ja"
    },
  }
}

開発サーバの起動（Configurationを指定する）
```
ng serve -c "ja"
```

in-memory-web-api
- Angular in-memory-web-api を使う
rxjs
- 【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
- Property ‘of’ does not exist on type ‘typeof Observable [duplicate]
Karma + Jasmine
- 結果サンプル

トラブルシューティング

パッケージインストールでのエラー

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'karma@1.7.1',
npm WARN EBADENGINE   required: { node: '0.10 || 0.12 || 4 || 5 || 6 || 7 || 8' },
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.5.5' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'karma-cli@1.0.1',
npm WARN EBADENGINE   required: { node: '0.10 || 0.12 || 4 || 5 || 6' },
npm WARN EBADENGINE   current: { node: 'v16.15.0', npm: '8.5.5' }
npm WARN EBADENGINE }
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated chokidar@1.7.0: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142    
npm WARN deprecated @angular/http@4.3.6: Package no longer supported. Use @angular/common instead, see https://angular.io/guide/deprecations#angularhttp
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

ビルドエラー

PS D:\Repository\Tatsukiyoshi\Weekend_Programming\js\angular\quickstart> npm run build

> agular-quickstart@1.0.0 build
> tsc -p src/

node_modules/@types/component-emitter/index.d.ts(8,25): error TS1005: ',' expected.
node_modules/@types/cors/index.d.ts(41,52): error TS1005: ',' expected.
node_modules/@types/cors/index.d.ts(47,44): error TS1005: ',' expected.
node_modules/@types/cors/index.d.ts(47,47): error TS1005: ',' expected.
node_modules/@types/node/index.d.ts(20,1): error TS1084: Invalid 'reference' directive syntax.

ビルドエラーに対する対策

バリデーションチェックの記述

プロパティアクセスの記述が変更になり、古い記述だとエラーになる。

error TS4111: Property 'minlength' comes from an index signature, so it must be accessed with ['minlength'].

旧型式

    <span *ngIf="mail.errors?.required">メールアドレスは必須です。</span>

新形式

    <span *ngIf="mail.errors?.['required']">メールアドレスは必須です。</span>

depandapotによる依存関係更新後のビルド確認

パッケージ再インストール
そもそも、Windows 10の再セットアップ後、@angularをセットアップしていなかったので、再セットアップ
```
npm install -g @angular/xxx
```

ビルド実行

> ng build
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.

ビルドエラーに対する対策 https://stackoverflow.com/questions/49537782/you-seem-to-not-be-depending-on-angular-core
```
> npm update @angular/core
```
npm install -g webpack-dev-server
```
> npm install -g webpack
```

キャッシュのクリア

>npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues and data extracted from the cache is guaranteed to be valid. If you want to make sure everything is consistent, use 'npm cache verify' instead. On the other hand, if you're debugging an issue with the installer, you can use `npm install --cache /tmp/empty-cache` to use a temporary cache instead of nuking the actual one.
npm ERR!
npm ERR! If you're sure you want to delete the entire cache, rerun this command with --force.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\taish\AppData\Roaming\npm-cache\_logs\2019-06-23T06_53_10_230Z-debug.log

>npm\ cache clean --force
npm WARN using --force I sure hope you know what you are doing.
[..................] / : WARN using --force I sure hope you know what you are doing.

ビルド後の確認

http-serverのインストール
```
> npm install -g http-server
```

http-serverの起動

> http-server .\dist\vs-angular -p3000 -c-1 -o

vs-angular
- VSCodeを使おう（日経ソフトウェア 2019年7月号）
- Angularプロジェクトの作成
basic_20190223
- AngularによるモダンWeb開発基礎編第2版ダイジェスト版（日経ソフトウェア 2019年5月号付録）

Vue.js
- eslint-plugin-vue
- Vue3 + TypeScript + Prettier に対応した ESLint Flat Config の最小構成
- TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法
- プロジェクト作成
  - TypeScriptのインストール
```
npm install --save-dev typescript
```
  - @vue/cliのインストール
```
npm install -g @vue/cli
```
  - Vue/cliでのプロジェクト作成
```
vue create <プロジェクト名>
```
- Vite 6
  - Vite CJS Node API deprecated
- Viteでのプロジェクト作成
```
npm init vite@latest
```
  - プロジェクト名を入力
  - Vueを選択
  - TypeScriptを選択
- Denoでのプロジェクト作成
```
$ deno run -A npm:create-vite-extra --template deno-vue
```
- nuxt.jsでのプロジェクト作成
```
npx create-nuxt-app <project-name>
```
- nuxt.jsでのアップデート
```
npx nuxi upgrade
```

AI

Genkit

パッケージのインストール
1. グローバル
```
npm install -g genkit-cli
```
2. プロジェクト
```
npm install genkit @genkit-ai/google-genai
```
実行
```
npx tsx src/index.ts
```

Developer UIの起動

genkit start -- npx tsx --watch src/index.ts

Test

PlaywrightでのE2Eテスト
- Playwrightを追加する
```
bun install -d @playwright/test@latest
```
- Playwrightをインストールする
```
bunx playwright install
```
- Playwrightでのテストを実行する
```
bunx playwright test
```

Others

electron
- Electronでアプリケーションを作ってみよう
ml5 - 日経ソフトウェア 2019年5月号
jskanji - VSCodeを使おう（日経ソフトウェア 2019年7月号）