OpenAPIクライアントのコード生成時に削除と新規作成を行う (#1045)

* Dresscaについて対応

* AzureADB2Cについて対応

* スペルミスを修正

* ドキュメント作成時の違和感により生成コマンドの名称をcreateからgenerateへ変更

* ドキュメントを更新

* npm-sを使用するように変更

* ドキュメントのサンプルコードを修正

* レビュー指摘に対応

documents/contents/guidebooks/how-to-develop/vue-js/create-api-client-code.md

@@ -41,19 +41,27 @@ npm install -D @openapitools/openapi-generator-cli
 
 package.json の scripts セクションにタスクを追加します。
 
+??? note "タスクを登録する際の注意点"
+    `package.json`にタスクを登録する際には、実行環境の OS に依存するコマンドの使用を避けるように注意する必要があります。
+    例えば、フォルダーを削除したい場合に`rmdir`コマンドを使用すると Windows 環境に依存してしまい、`rm`コマンドを使用すると UNIX 環境に依存してしまいます。
+    ここで開発環境が Windows であり、 CI 環境が UNIX の場合には、開発環境では実行できていたコマンドが CI 環境では実行できないといった問題が発生します。
+    そのため、 タスク中で OS コマンドを使用したい場合には、可能であれば [Node.jsのAPI :material-open-in-new:](https://nodejs.org/api/documentation.html){ target=_blank } で代替するほうがベターです。
+
 <!-- cSpell:disable -->
 
 ```json title="package.json"
 {
   "scripts": {
-    "generate-client": "openapi-generator-cli generate -g typescript-axios -i ./dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/api-client"
+    "generate-client": "run-s openapi-client:clean openapi-client:generate --print-label",
+    "openapi-client:clean": "node -e \"fs.promises.rm('./src/generated/api-client', {recursive: true, force: true})\"",
+    "openapi-client:generate": "openapi-generator-cli generate -g typescript-axios -i ./../dressca-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
   }
 }
 ```
 
 <!-- cSpell:enable -->
 
-追加したタスクのオプションについて説明します。
+openapi-generator-cli の generate コマンドのオプションについて説明します。
 
 ジェネレーターとして typescript-axios を指定します。
 
@@ -94,6 +102,10 @@ npm run generate-client
 
 オプション ` -o ` に定義した出力先へ、クライアントコードが生成されます。
 
+!!! info "クライアントコードの削除と再生成"
+    openapi-generator-cli の generate コマンドでは、 Open API 仕様書の変更によって不要になった既存のクライアントコードは自動で削除されません。
+    そのため、既存のクライアントコードを一度削除してからクライアントコードを生成するように設定しています。
+
 ## クライアントコードの設定 {#set-client-code}
 
 `./src/api-client/index.ts` という設定ファイルを作成し、以下のように記述します。

samples/AzureADB2CAuth/auth-frontend/package.json

@@ -12,7 +12,9 @@
     "test:unit": "vitest --environment jsdom",
     "typecheck": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "generate-client": "openapi-generator-cli generate -g typescript-axios -i ./../auth-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
+    "generate-client": "run-s openapi-client:clean openapi-client:generate --print-label",
+    "openapi-client:clean": "node -e \"fs.promises.rm('./src/generated/api-client', {recursive: true, force: true})\"",
+    "openapi-client:generate": "openapi-generator-cli generate -g typescript-axios -i ./../auth-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
   },
   "dependencies": {
     "@azure/msal-browser": "^3.11.1",

samples/AzureADB2CAuth/auth-frontend/src/generated/api-client/.openapi-generator/FILES

@@ -1,5 +1,6 @@
 .gitignore
 .npmignore
+.openapi-generator-ignore
 api.ts
 api/server-time-api.ts
 api/users-api.ts

samples/Dressca/dressca-frontend/package.json

@@ -15,7 +15,9 @@
     "typecheck": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore && stylelint **/*.{vue,css} --fix",
     "mock": "vite --mode mock",
-    "generate-client": "openapi-generator-cli generate -g typescript-axios -i ./../dressca-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
+    "generate-client": "run-s openapi-client:clean openapi-client:generate --print-label",
+    "openapi-client:clean": "node -e \"fs.promises.rm('./src/generated/api-client', {recursive: true, force: true})\"",
+    "openapi-client:generate": "openapi-generator-cli generate -g typescript-axios -i ./../dressca-backend/src/Dressca.Web/dressca-api.json --additional-properties=withSeparateModelsAndApi=true,modelPackage=models,apiPackage=api,supportsES6=true -o ./src/generated/api-client"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.3",

samples/Dressca/dressca-frontend/src/generated/api-client/.openapi-generator/FILES

@@ -1,5 +1,6 @@
 .gitignore
 .npmignore
+.openapi-generator-ignore
 api.ts
 api/assets-api.ts
 api/basket-items-api.ts