diff --git a/.gitignore b/.gitignore index 40b878db5..1b84b09f3 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules/ \ No newline at end of file +node_modules/ +/.vs diff --git a/.textlintrc b/.textlintrc index 4092fadcd..c49e863ed 100644 --- a/.textlintrc +++ b/.textlintrc @@ -45,6 +45,7 @@ "使用", "終了", "済む", + "説明", "即時", "チェック", "作る", @@ -55,6 +56,7 @@ "名", "メソッド", "メモリ", + "よう", "呼び出し", "呼び出す", "利用", diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/create-api-client-code.md b/documents/contents/guidebooks/how-to-develop/vue-js/create-api-client-code.md index 061a9e94b..350067dc0 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/create-api-client-code.md +++ b/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,15 +35,15 @@ 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 をインストールします。ターミナルで以下のコマンドを入力します。 @@ -46,7 +51,7 @@ OpenAPI Generator をインストールします。ターミナルで以下の 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,7 +94,7 @@ package.json の script セクションにタスクを追加します。 -o ./src/api-client ``` -## クライアントコードの生成 ## {: #create-client-code } +## クライアントコードの生成 {#create-client-code} ターミナルで以下のコマンドを実行します。 @@ -97,4 +102,4 @@ package.json の script セクションにタスクを追加します。 npm run generate-client ``` -scripts に追加したタスクの ``` -o ``` に定義した出力先に、クライアントコードが生成されます。 +オプション ``` -o ``` に定義した出力先へ、クライアントコードが生成されます。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project.md b/documents/contents/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project.md index 905edbe6d..a7ce62abb 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/create-vuejs-blank-project.md +++ b/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: diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/css.md b/documents/contents/guidebooks/how-to-develop/vue-js/css.md index 0ff1f4b6f..16d654b21 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/css.md +++ b/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,7 +86,7 @@ module.exports = { } ``` -```./src/assets/base.css``` の最初の行に、以下のように Tailwind CSS の各レイヤーの @tailwind ディレクティブを追加します。 +```./src/assets/base.css``` の最初の行に、以下のように Tailwind CSS の各コンポーネントの @tailwind ディレクティブを追加します。 ```css @tailwind base; @@ -89,13 +94,13 @@ module.exports = { @tailwind utilities; ``` -## postCSS ## {: #postcss } +## postCSS {#postcss} CSS を操作するための JavaScript ベースのプラグインです。このプラグインの API を利用する多くのプラグインが公開されており、前述の Tailwind CSS もその1つです。 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 を使用することを宣言します。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project.md b/documents/contents/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project.md index fbab1437a..75b11e559 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/folder-structure-of-blank-project.md +++ b/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} ブランクプロジェクトを作成した時点でのフォルダー構造は以下のようになっています。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/index.md b/documents/contents/guidebooks/how-to-develop/vue-js/index.md index 648cf5871..77313cc75 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/index.md +++ b/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) diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/input-validation.md b/documents/contents/guidebooks/how-to-develop/vue-js/input-validation.md index dca6c7602..7e3c2d240 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/input-validation.md +++ b/documents/contents/guidebooks/how-to-develop/vue-js/input-validation.md @@ -1,8 +1,13 @@ -# 入力値検証(バリデーション) +--- +title: Vue.js 開発手順 +description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。 +--- + +# 入力値検証(バリデーション) {#top} フロントエンドのアーキテクチャに基づき、入力値検証には VeeValidate と yup を使用します。 -## 必要なパッケージのインストール ## {: #install-packages } +## 必要なパッケージのインストール {#install-packages} ターミナルを開き、以下のコマンドを実行します。 @@ -10,7 +15,7 @@ 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} -実際にどのように入力値検証を行うかは、サンプルアプリケーションのコードを参照してください。 +どのように入力値検証をコーディングするかは、サンプルアプリケーションのコードを参照してください。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/optional-packages.md b/documents/contents/guidebooks/how-to-develop/vue-js/optional-packages.md index 9acf7e162..edb03d2bb 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/optional-packages.md +++ b/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} 以下のパッケージは別途インストールが必要です。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/preparation.md b/documents/contents/guidebooks/how-to-develop/vue-js/preparation.md index 22e6104e6..c51d3b198 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/preparation.md +++ b/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) を参照し、最低限必要なソフトウェアをインストールしてください。 diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/static-verification-and-format.md b/documents/contents/guidebooks/how-to-develop/vue-js/static-verification-and-format.md index edd450e0b..440e8f7ec 100644 --- a/documents/contents/guidebooks/how-to-develop/vue-js/static-verification-and-format.md +++ b/documents/contents/guidebooks/how-to-develop/vue-js/static-verification-and-format.md @@ -1,10 +1,15 @@ -# 静的コード分析とフォーマット +--- +title: Vue.js 開発手順 +description: Vue.js を用いたクライアントサイドアプリケーションの開発手順を説明します。 +--- -静的コード分析とフォーマットには、.editorconfig、ESLint、StyleLint、および Prettier を使用します。 +# 静的コード分析とフォーマット {#top} -## .editorconfigの追加 ## {: #add-editorconfig } +静的コード分析とフォーマットには .editorconfig 、 ESLint 、 StyleLint 、および Prettier を使用します。 -プロジェクトのルートフォルダーに [.editorconfig](https://docs.microsoft.com/ja-jp/visualstudio/ide/create-portable-custom-editor-options) を追加することで、IDE (Visual Studio や VSCode) に対してコーディングルールを課すことが可能になります。サンプルアプリケーションでは、.editorconfig によって以下のようなルールを定義しています。 +## .editorconfigの追加 {#add-editorconfig} + +プロジェクトのルートフォルダーに [.editorconfig](https://docs.microsoft.com/ja-jp/visualstudio/ide/create-portable-custom-editor-options) を追加することで、 IDE (Visual Studio や VSCode) に対してコーディングルールを課すことが可能になります。サンプルアプリケーションでは、.editorconfig によって以下のようなルールを定義しています。 - エンコード(UTF-8 に設定) - 改行コード(LF に設定) @@ -15,11 +20,11 @@ .editorconfig の設定には、自動的に適用されるもの(例:エンコードや改行コード)と、違反すると IDE のエディター上に警告が表示されるもの(例:行末の空白)があります。 -## Prettier ## {: #prettier } +## Prettier {#prettier} Prettier は Vue.js のブランクプロジェクト作成時にオプションとしてインストールしているため、追加でインストールする必要はありません。 -### Prettier の設定 ### {: #settings-prettier } +### Prettier の設定 {#settings-prettier} Prettier の設定ファイルは初期状態では存在しないので、作成するところから始めます。 @@ -38,11 +43,11 @@ module.exports = { 全ての設定可能な値は [公式ドキュメント](https://prettier.io/docs/en/options.html) を参照してください。 -## ESLint ## {: #eslint } +## ESLint {#eslint} ESLint は Vue.js のブランクプロジェクト作成時にオプションとしてインストールしているため、追加でインストールする必要はありません。 -### ESLint の設定 ### {: #settings-eslint } +### ESLint の設定 {#settings-eslint} 設定ファイル ```./.eslintrc.cjs``` で行います。このファイルはインストール時に自動的に追加され、デフォルトでは以下のような内容になっています(ESLint バージョン 8.5.0 の場合)。 @@ -74,7 +79,7 @@ module.exports = { } ``` -この状態でも静的コード分析は可能ですが、postCSS の設定ファイルなど、分析する必要のないファイルまで分析対象となってしまうため、以下のように ignorePatterns を追加します(25行目)。 +この状態でも静的コード分析は可能ですが、 postCSS の設定ファイルなど、分析する必要のないファイルまで分析対象となってしまうため、以下のように ignorePatterns を追加します(25 行目)。 ```javascript /* eslint-env node */ @@ -105,14 +110,14 @@ module.exports = { } ``` -### ESLint と Prettier の連携 ### {: #eslint-and-prettier } +### ESLint と Prettier の連携 {#eslint-and-prettier} -Vue.js のブランクプロジェクト作成時に ESLint と Prettier をそれぞれオプションとしてインストールした場合、ESLint と Prettier を連携させるプラグインが自動的にインストール・設定されます。 -したがって、ESLint と Prettier を連携させるための追加の設定は必要ありません。 +Vue.js のブランクプロジェクト作成時に ESLint と Prettier をそれぞれオプションとしてインストールした場合、 ESLint と Prettier を連携させるプラグインが自動的にインストール・設定されます。 +したがって、 ESLint と Prettier を連携させるための追加の設定は必要ありません。 -## StyleLint ## {: #stylelint } +## StyleLint {#stylelint} -### Stylelint のインストール ### {: #install-stylelint } +### Stylelint のインストール {#install-stylelint} Stylelint および、標準の設定や vue ファイルで使用する設定等をインストールします。サンプルアプリケーションでは以下をインストールしています。 @@ -132,7 +137,7 @@ npm install -D stylelint \ stylelint-prettier ``` -### StyleLint の設定 ### {: #settings-stylelint } +### StyleLint の設定 {#settings-stylelint} プロジェクトのルートフォルダーに設定ファイル ```./.stylelintrc.js``` を作成し、コードを記述します。 @@ -166,12 +171,12 @@ module.exports = { |plugins |使用する外部のプラグインを宣言します。| |extends |既存の構成を拡張します。| |rules |使用するルールを宣言します。| -|ignoreFiles|分析の対象外とするファイルまたはディレクトリを設定します。| +|ignoreFiles|分析の対象外とするファイルまたはフォルダーを設定します。| |overrides |特定のファイルにのみ別のルールを設定したい場合に使用します。| -## 静的コード分析とフォーマットの実行 ## {: #static-code-analysis-and-format } +## 静的コード分析とフォーマットの実行 {#static-code-analysis-and-format} -```./package.json``` に ESLint 用の script がデフォルトで追加されています。ここに Stylelint も同時に実行するようコマンドを追加します。追加後の scripts は以下のようになります(関係のないコマンドは省略しています)。 +```./package.json``` に ESLint 用の script がデフォルトで追加されています。ここに Stylelint も同時に実行するようにコマンドを追加します。追加後の scripts は以下のようになります(関係のないコマンドは省略しています)。 ```json "scripts": { @@ -179,7 +184,7 @@ module.exports = { } ``` -Stylelintを vue ファイルと css ファイルに対して実行するように設定しています。 +Stylelint を vue ファイルと css ファイルに対して実行するように設定しています。 ターミナルを開き、コマンドを実行します。