text-lintに対応

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+/.vs

.textlintrc

@@ -45,6 +45,7 @@
         "使用",
         "終了",
         "済む",
+        "説明",
         "即時",
         "チェック",
         "作る",
@@ -55,6 +56,7 @@
         "名",
         "メソッド",
         "メモリ",
+        "よう",
         "呼び出し",
         "呼び出す",
         "利用",

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

@@ -1,24 +1,29 @@
-# API 仕様書からのクライアントコード生成
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-サーバー側で公開される Web API は、Open API 仕様書を自動生成しています（詳細は [ASP.NET Core Web API プロジェクトの構成](../dotnet/configure-asp-net-core-web-api-project.md) を参照）。Vue.js アプリケーションでは、Open API Generator を使用して、この Open API 仕様書からクライアントコードを生成します。
+# API 仕様書からのクライアントコード生成 {#top}
 
-## 事前準備 ## {: #preparation }
+サーバー側で公開される Web API は、 Open API 仕様書を自動生成しています（詳細は [ASP.NET Core Web API プロジェクトの構成](../dotnet/configure-asp-net-core-web-api-project.md) を参照）。 Vue.js アプリケーションでは、 Open API Generator を使用して、この Open API 仕様書からクライアントコードを生成します。
+
+## 事前準備 {#preparation}
 
 [Open API 仕様書の出力設定](../dotnet/configure-asp-net-core-web-api-project.md) に示す手順に従って生成した Open API 仕様書をローカルに保存します。ここでは、ファイル名を「dressca-api.json」とします。
 
-### JDK のインストール ## {: #install-jdk }
+### JDK のインストール {#install-jdk}
 
-Open API Generator を使用するためには、Java 8 以降のランタイムと、システム環境変数 JAVA_HOME の設定が必要です。Oracle JDK や Eclipse Adoptium など、適当な JDK をインストールし、JAVA_HOME を設定してください。
+Open API Generator を使用するためには、 Java 8 以降のランタイムと、システム環境変数 JAVA_HOME の設定が必要です。 Oracle JDK や Eclipse Adoptium など、適当な JDK をインストールし、 JAVA_HOME を設定してください。
 
-## Axios ## {: #axios }
+## Axios {#axios}
 
-### Axios のインストール {: #install-axios }
+### Axios のインストール {#install-axios}
 
 ```terminal
 npm install axios
 ```
 
-### Axios の設定 {: #settings-axios }
+### Axios の設定 {#settings-axios}
 
 ```./src/config/axios.config.ts``` というファイルを作成し、以下のように記述します。
 
@@ -30,23 +35,23 @@ axios.defaults.baseURL = `作成済みの Web API の URL`;
 
 - ```axios.defaults.baseURL``` ：Web API のベース URL を設定します。
 
-作成したファイルを読み込むため、main.ts に import を記述します。
+作成したファイルを読み込むため、 main.ts に import を記述します。
 
 ```typescript
 import '@/config/axios.config';
 ```
 
-## Open API Generator ## {: #openapi-generator }
+## Open API Generator {#openapi-generator}
 
-### Open API Generator のインストール　### {: #install-openapi-generator }
+### Open API Generator のインストール {#install-openapi-generator}
 
 OpenAPI Generator をインストールします。ターミナルで以下のコマンドを入力します。
 
 ```terminal
 npm install --D @openapitools/openapi-generator-cli
 ```
 
-### Open API Generator の設定 ### {: #settings-openapi-generator }
+### Open API Generator の設定 {#settings-openapi-generator}
 
 package.json の script セクションにタスクを追加します。
 
@@ -66,7 +71,7 @@ package.json の script セクションにタスクを追加します。
 -g typescript-axios
 ```
 
-入力のAPI仕様書として ```./dressca-api.json``` というファイルを指定します。
+入力の API 仕様書として ```./dressca-api.json``` というファイルを指定します。
 
 ``` terminal
 -i ./dressca-api.json 
@@ -89,12 +94,12 @@ package.json の script セクションにタスクを追加します。
 -o ./src/api-client
 ```
 
-## クライアントコードの生成 ## {: #create-client-code }
+## クライアントコードの生成 {#create-client-code}
 
 ターミナルで以下のコマンドを実行します。
 
 ```terminal
 npm run generate-client
 ```
 
-scripts に追加したタスクの ``` -o ``` に定義した出力先に、クライアントコードが生成されます。
+オプション ``` -o ``` に定義した出力先へ、クライアントコードが生成されます。

documents/contents/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project.md

@@ -1,6 +1,11 @@
-# ブランクプロジェクトの作成
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-## Vue.jsおよびオプションのインストール ## {: #install-vuejs-and-options }
+# ブランクプロジェクトの作成 {#top}
+
+## Vue.jsおよびオプションのインストール {#install-vuejs-and-options}
 
 以下のコマンドを実行して Vue.js をインストールします。
 
@@ -29,7 +34,7 @@ create-vue パッケージをインストールする必要があり、続行す
 √ Add Prettier for code formatting? ... Yes
 ```
 
-## ブランクプロジェクトのビルドと実行 ## {: #build-and-serve-blank-project }
+## ブランクプロジェクトのビルドと実行 {#build-and-serve-blank-project}
 
 以下のようにコマンドを実行し、必要なパッケージをインストールしてアプリケーションを実行します。
 
@@ -39,7 +44,7 @@ npm install
 npm run dev
 ```
 
-`npm run dev` が成功すると以下のように表示されるので、「Local:」に表示されたURLをブラウザーで表示します。ブランクプロジェクトのランディングページが表示されます。
+`npm run dev` が成功すると以下のように表示されるので、「 Local: 」に表示された URL をブラウザーで表示します。ブランクプロジェクトのランディングページが表示されます。
 
 ```terminal
 vite v2.7.7 dev server running at:

documents/contents/guidebooks/how-to-develop/vue-js/css.md

@@ -1,8 +1,13 @@
-# CSSの設定とCSSフレームワークの適用
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-## CSS の設定 ## {: #settings-css }
+# CSSの設定とCSSフレームワークの適用 {#top}
 
-Vue のブランクプロジェクトを作成すると、デフォルトで以下の2つの CSS ファイルが追加されます。
+## CSS の設定 {#settings-css}
+
+Vue のブランクプロジェクトを作成すると、デフォルトで以下の 2 つの CSS ファイルが追加されます。
 
 - ```./src/assets/base.css```
 - ```./src/assets/main.css```
@@ -22,13 +27,13 @@ import './assets/main.css'
 import './assets/base.css'
 ```
 
-## Tailwind CSS ## {: #tailwind-css }
+## Tailwind CSS {#tailwind-css}
 
-Tailwind CSS は、Web サイトを構築するための CSS フレームワークです。
+Tailwind CSS は、 Web サイトを構築するための CSS フレームワークです。
 
-### Tailwind CSS のインストール ### {: #install-tailwind-css }
+### Tailwind CSS のインストール {#install-tailwind-css}
 
-[公式ドキュメント](https://tailwindcss.com/docs/installation/using-postcss) が推奨するとおり、postCSS のプラグインとして Tailwind CSS、postCSS、autoprefixer をインストールします。
+[公式ドキュメント](https://tailwindcss.com/docs/installation/using-postcss) が推奨するとおり、 postCSS のプラグインとして Tailwind CSS 、 postCSS 、 autoprefixer をインストールします。
 
 > Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with build tools like webpack, Rollup, Vite, and Parcel.
 
@@ -45,9 +50,9 @@ npm install -D tailwindcss postcss autoprefixer postcss-nesting
 !!! info "ベンダープレフィクス"
     ベンダープレフィクスとは、ブラウザーのベンダーが独自の拡張機能を実装する際に、
     それがブラウザー独自であることを明示するために付ける識別子のことです。
-    たとえば、Chrome 独自の拡張機能の場合、 -webkit- というプレフィックスを使用します。
+    たとえば、 Chrome 独自の拡張機能の場合、 -webkit- というプレフィックスを使用します。
 
-### Tailwind CSS の設定 ### {: #settings-tailwind-css }
+### Tailwind CSS の設定 {#settings-tailwind-css}
 
 以下のコマンドを入力すると、```./tailwind.config.js``` ファイルが作成されます。
 
@@ -68,7 +73,7 @@ module.exports = {
 }
 ```
 
-content に、Tailwind CSS を適用する対象ファイルのパス（ワイルドカード使用可）を設定します。
+content に、 Tailwind CSS を適用する対象ファイルのパス（ワイルドカード使用可）を設定します。
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
@@ -81,21 +86,21 @@ module.exports = {
 }
 ```
 
-```./src/assets/base.css``` の最初の行に、以下のように Tailwind CSS の各レイヤーの @tailwind ディレクティブを追加します。
+```./src/assets/base.css``` の最初の行に、以下のように Tailwind CSS の各コンポーネントの @tailwind ディレクティブを追加します。
 
 ```css
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-## postCSS ## {: #postcss }
+## postCSS {#postcss}
 
 CSS を操作するための JavaScript ベースのプラグインです。このプラグインの API を利用する多くのプラグインが公開されており、前述の Tailwind CSS もその１つです。
 
 postCSS は Tailwind CSS と一緒にすでにインストール済みなので、インストールの必要はありません。
 
-### postCSS の設定 ### {: #settings-postcss }
+### postCSS の設定 {#settings-postcss}
 
 設定ファイル ```./postcss.config.js``` を作成します。
 
@@ -109,4 +114,4 @@ module.exports = {
 };
 ```
 
-プラグインとして Tailwind CSS、autoprefixer、postcss-nesting を使用することを宣言します。
+プラグインとして Tailwind CSS 、 autoprefixer 、 postcss-nesting を使用することを宣言します。

documents/contents/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project.md

@@ -1,4 +1,9 @@
-# ブランクプロジェクトのフォルダー構造
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
+
+# ブランクプロジェクトのフォルダー構造 {#top}
 
 ブランクプロジェクトを作成した時点でのフォルダー構造は以下のようになっています。
 

documents/contents/guidebooks/how-to-develop/vue-js/index.md

@@ -1,6 +1,11 @@
-# Vue.js 編
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-Vue.js を用いてフロントエンドアプリケーションを開発する際の設定や手順について説明します。ただし、具体的なコーディングの説明はここではしません。具体的なコーディング方法についてはサンプルアプリケーションを参照するか、Vue.js の公式ドキュメントを参照してください。
+# Vue.js 編 {#top}
+
+Vue.js を用いてフロントエンドアプリケーションを開発する際の設定や手順について説明します。ただし、具体的なコーディングの説明はここではしません。具体的なコーディング方法についてはサンプルアプリケーションを参照するか、 Vue.js の公式ドキュメントを参照してください。
 
 1. [事前準備](preparation.md)
 1. [ブランクプロジェクトの作成](create-vuejs-blank-project.md)

documents/contents/guidebooks/how-to-develop/vue-js/input-validation.md

@@ -1,16 +1,21 @@
-# 入力値検証（バリデーション）
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
+
+# 入力値検証（バリデーション） {#top}
 
 フロントエンドのアーキテクチャに基づき、入力値検証には VeeValidate と yup を使用します。
 
-## 必要なパッケージのインストール ## {: #install-packages }
+## 必要なパッケージのインストール {#install-packages}
 
 ターミナルを開き、以下のコマンドを実行します。
 
 ```terminal
 npm install vee-validate yup
 ```
 
-## 入力値検証時の設定 ## {: #settings-validation }
+## 入力値検証時の設定 {#settings-validation}
 
 yup のデフォルトのメッセージは英語であるため、日本語のメッセージを設定します。ファイル ```./src/config/yup.config.ts``` を作成し、以下のように記述します。
 
@@ -27,7 +32,7 @@ setLocale({
 });
 ```
 
-作成したファイルを読み込むため、main.ts に import を記述します。
+作成したファイルを読み込むため、 main.ts に import を記述します。
 
 ```typescript
 import '@/config/yup.config';
@@ -36,6 +41,6 @@ import '@/config/yup.config';
 !!! info "設定の集約について"
     日本語メッセージの設定は、個別の typescript ファイルに記載してもアプリケーションとしては問題なく動作します。サンプルアプリケーションでは、役割ごとにクラスを定義し、それを main.ts で読み込むことで、コードの見通しを良くしています。
 
-## 入力値検証の実施 ## {: #input-validation }
+## 入力値検証の実行 {#input-validation}
 
-実際にどのように入力値検証を行うかは、サンプルアプリケーションのコードを参照してください。
+どのように入力値検証をコーディングするかは、サンプルアプリケーションのコードを参照してください。

documents/contents/guidebooks/how-to-develop/vue-js/optional-packages.md

@@ -1,10 +1,15 @@
-# 開発に使用するパッケージ
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-## ブランクプロジェクト作成時にオプションとしてインストールされるパッケージ ## {: #optional-packages }
+# 開発に使用するパッケージ {#top}
+
+## ブランクプロジェクト作成時にオプションとしてインストールされるパッケージ {#optional-packages}
 
 以下のパッケージは Vue.js のブランクプロジェクト作成時にオプションとしてインストールされます。
 
-|パッケージ名 |説明    　　　　　　　　　　　　　　　　　　　　　　　　            |
+|パッケージ名 |説明                                                              |
 |------------|------------------------------------------------------------------|
 |Cypress     |E2E (End-to-End) テストツール                                      |
 |ESLint      |JavaScript の静的検証                                              |
@@ -17,7 +22,7 @@
 
 なお、上の表では、特定のパッケージをインストールすることで付随してインストールされるパッケージ（例： ESLint に対する eslint-config-prettier）は省略しています。
 
-## 追加でインストールするパッケージ ## {: #additional-packages }
+## 追加でインストールするパッケージ {#additional-packages}
 
 以下のパッケージは別途インストールが必要です。
 

documents/contents/guidebooks/how-to-develop/vue-js/preparation.md

@@ -1,5 +1,10 @@
-# 事前準備
+---
+title: Vue.js 開発手順
+description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。
+---
 
-## ローカル開発環境の構築 ## {: #create-dev-environment }
+# 事前準備 {#top}
+
+## ローカル開発環境の構築 {#create-dev-environment}
 
 ローカル開発環境の構築について [ローカル開発環境の構築](../local-environment/index.md) を参照し、最低限必要なソフトウェアをインストールしてください。