TypeScript & JavaScript

独学書

コンテンツ

環境

1. 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.13	2026/04/26
   		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.85.3	2026/06/06
   		- Expo 56.0.9	2026/06/06
   		- Bun 1.3.13	2026/04/26
   	Gen AI	Genkit JS 1.21.0	2025/10/16
   	Search	Exa-js 2.8.0	2026/03/13

2. 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

創作物

近況確認アプリ

• コンテンツ取得

  Contents	API / URL
  Discography	MusicBrainz
  Lyrics	Genius API
  YouTube	YouTube API
  TikTok	RapidAPI
  X(Twitter)	TwitterAPI

• アイコン

  • コーヒーカップアイコン by Icons8

• 履歴

  • 関係性マップ

ノウハウ

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        

        

      • 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

• マルチプラットフォーム（モバイル/デスクトップ）

  • Electrobun

    • Bunでのデスクトップアプリ化
      • Inno Setupでインストーラまで実現
      • デスクトップアプリはBunのランチャなので、アイコン設定は不可

  • 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 / VS2026 / Windows 11 SDK 10.0.26100
        • 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日本語ドキュメンテーション―ローカル環境とワークスペースのセットアップ

  • ノウハウ

    1. コマンド

       • 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/.

    2. Quick Start

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

    3. 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

    4. 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

    5. Angular 21.0.0-next.8対応

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

    6. Angular 20.2.1対応

       • Update Dependencies

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

    7. Angular 20.0.2対応

       • Update Dependencies

         Component	Version
         jasmine-core	5.8.0

    8. 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

    9. 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

    10. 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

        • 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],
                ...
              })

    11. 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",
            ...
          },

    12. Angular 17対応

        • ライブラリのバージョン変更

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

    13. Angular 16対応

        • esbuild対応(angular.json)

          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser-esbuild",
            }
          }

        • ライブラリのバージョン変更

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

    14. 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

    15. ngx-bootstrap

        • Get Started

    16. ng2-validation

    17. 国際化対応

        • 設定ファイル（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"

    18. in-memory-web-api

        • Angular in-memory-web-api を使う

    19. rxjs

        • 【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
        • Property ‘of’ does not exist on type ’typeof Observable [duplicate]

    20. Karma + Jasmine

        • 結果サンプル
    トラブルシューティング

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

       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.

    2. ビルドエラー

       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.

    3. ビルドエラーに対する対策
       1. バリデーションチェックの記述
       • プロパティアクセスの記述が変更になり、古い記述だとエラーになる。

         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>

    4. depandapotによる依存関係更新後のビルド確認
       1. パッケージ再インストール
          そもそも、Windows 10の再セットアップ後、@angularをセットアップしていなかったので、再セットアップ

          npm install -g @angular/xxx

       2. ビルド実行

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

       3. ビルドエラーに対する対策 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

       4. キャッシュのクリア

          >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.                                    

       5. ビルド後の確認
          1. http-serverのインストール

             > npm install -g http-server

          2. 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月号）