TypeScript & JavaScript

独学書

テキスト	日付	進捗状況
Angularアプリケーションプログラミング	2023/09/23	finished ->コード
モダンJavaScriptの基本から始めるReact実践の教科書	2022/07/02	finished ->コード

コンテンツ

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

環境

1. ホスティング・サービス

   ホスト	FW	最終更新
   Vercel	Next.js 15.0.2	2024/11/02
   	Astro 4.16.8	2024/11/02

2. Windows

   端末	FW	最終更新
   Windows	Node.js 20.17.0	2024/09/08
   	React 19 RC	2024/06/08
   	- Bun 1.1.12	2024/05/30
   	React 18.3.1	2024/05/30
   	- Bun 1.1.22	2024/08/10
   	- Vite 5.4.0	2024/08/10
   	Astro 4.16.7	2024/10/26
   	+ Astro 5.0.0-beta.6	2024/11/02
   	- Bun 1.1.34-canary.13	2024/10/26
   	- React 18.3.1	2024/05/30
   	Next.js 15.0.1	2024/10/26
   	Nuxt 3.13.2	2024/10/05
   	Vue 3.5.12	2024/11/02
   	- Deno 1.46.3	2024/09/08
   	- Vite 5.4.8	2024/10/05
   	+ Vite 6.0.0-beta.8	2024/11/02
   	- Bun 1.1.34-canary.51	2024/11/02
   	Deno 2.0.3	2024/10/26
   	- fresh 1.7.3	2024/10/26
   	React Native 0.73.1	2024/01/07
   	- for Windows 0.73.2	2024/01/07
   InsiderDev	Node.js 18.20.3	2024/05/24
   	Svelte 3.49.0	2022/07/16
   	Vite 5.0.12	2024/01/20
   	Angular 18.2.6	2024/09/29
   	Gluon 0.13.5	2023/04/29

3. Ubuntu 24.04 on Windows 11

   端末	環境／FW	最終更新
   InsiderDev	Astro 4.9.2	2024/05/30
   	Bun 1.1.12	2024/05/30
   	React 18.3.1	2024/05/30
   Windows	Bun 1.0.19	2023/12/23

4. Chrome OS Flex 116.0.5845.210（Official Build）

   端末	FW	最終更新
   Chrome OS	Node.js 18.12.1	2022/12/13
   	Deno 1.29.3	2023/01/14
   	Vite 4.0.1	2022/12/13
   	Vue 3.2.45	2022/12/13

ノウハウ

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の使い方）
  • トラブルシューティング
    • 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"
      

    • 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
    

• 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        
        

        

      • Chrome OS Flex

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

    • Deno更新

      deno upgrade
      

  • fresh 1.6.3
    • Get Started

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

    • Update

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

ORM

• Prisma
  • 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
  • Sequelizeを使用してデータベースを操作するための基本的な情報(2020.09更新）

Framework

• マルチプラットフォーム（モバイル/デスクトップ）
  • React Native
    • Configuring Metro
    • Expo
    • React Nativeで開発したアプリの実行
      • 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 init <projectName>
        

      • Windowsターゲット追加

        cd projectName
        npx react-native-windows-init --overwrite
        

      • 実行

        npx react-native run-windows
        

        
  • Gluon
• Astro
  • 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 6.0
• Next.js / Vercel
  • Nextjs-blog
  • 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
  • Next.js and Bun

    bun create next-app
    

  • 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
  • React 19

    • 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
  • 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"
    },
    

• 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. gitでの資産管理

       • .angular/cache 配下が除外されていないので、.gitignoreを修正する。

         /.angular/cache
         

         ↓

         .angular/cache
         

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

    5. Angular 17対応

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

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

    6. Angular 16対応

       • esbuild対応(angular.json)

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

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

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

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

    8. ngx-bootstrap Get Started

    9. ng2-validation

    10. 国際化対応

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

    11. in-memory-web-api

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

    12. rxjs

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

    13. 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でのプロジェクト作成

    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
    

Others

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