Merge branch 'main' into feature/メッセージ管理機能を調査する

.github/release.yml

@@ -7,6 +7,10 @@ changelog:
         labels:
           - dependencies
           - 内部の改善
+          - 不具合
+    - title: ':wrench: Bug fixes'
+      labels:
+        - 不具合
     - title: ':label: :green_circle: Gradle package dependencies'
       labels:
         - gradle

documents/contents/app-architecture/client-side-rendering/frontend-application/index.md

@@ -92,7 +92,7 @@ Vue.js ではバックエンドのアプリケーションとの連携をモデ
 モデルはデータの状態管理や画面(ビュー)へのデータ連携、 Web API の呼び出しおよびハンドリングなどの役割を持つコンポーネントです。モデルは以下の要素で構成されます。またフロントエンドで扱うデータモデルと API モデルとの乖離を吸収し、扱いやすい状態に加工する役割も持ちます。
 
 - Service : ビューモデルからのリクエストに対して、 Store の呼び出し、 Web API の呼び出しなどデータの連携に必要な処理をします。
-- Store : フロントエンドで扱う状態を保持するコンテナです。 AlesInfiny Maris では Pinia という Vue.js の Store ライブラリを利用して管理します。
+- Store : フロントエンドで扱う状態を保持するコンテナです。 AlesInfiny Maia では Pinia という Vue.js の Store ライブラリを利用して管理します。
 
 Pinia : [公式ドキュメント :material-open-in-new:](https://pinia.vuejs.org/introduction.html){ target=_blank }
 

documents/contents/app-architecture/client-side-rendering/global-function/exception-handling.md

@@ -17,3 +17,89 @@ description: クライアントサイドレンダリングを行う Web アプ
 
 ![例外処理方針](../../../images/app-architecture/client-side-rendering/exception-handling-policy-light.png#only-light){ loading=lazy }
 ![例外処理方針](../../../images/app-architecture/client-side-rendering/exception-handling-policy-dark.png#only-dark){ loading=lazy }
+
+## クライアントサイドの例外処理方針 {#frontend-error-handling}
+
+クライアントサイドは、ユーザーが操作する、ログの取得が難しいなど、サーバーサイドとは異なる特性があります。
+しかし例外処理方針としては、サーバーサイドと同様に正常なフローに復帰できるかどうかを最も重要な観点とし、そのためにどこで例外を捕捉しどのようにユーザーへ通知するかを検討します。
+
+### 例外の種類 {#exception-types-client-side}
+
+クライアントサイドの例外は、サーバーサイドと同様、業務例外とシステム例外の 2 種類に分けて考えます。
+
+業務例外は、業務フローで想定されるエラーを表す例外です。システム例外は、業務フロー上は想定されないシステムのエラーを表す例外です。
+API 通信においては、ステータスコードが 40x のエラーを業務例外、 50x のエラーをシステム例外として扱います。
+
+### 例外の捕捉 {#catch-exceptions-client-side}
+
+クライアントサイドで発生する例外には以下のようなものが考えられます。
+
+- ユーザーが操作した際に発生する例外
+- API 通信で発生する例外
+- システムエラー
+- ネットワークエラー
+
+例外の発生が予測できる箇所では、同期処理は `try-catch` 、非同期処理は `catch` メソッドを利用します。予期せぬ例外が発生した場合は、 Vue.js の `app.config.errorHandler` や JavaScript の `window.onerror` といったグローバルエラーハンドリングで例外を捕捉します。
+
+| 例外の種類                                            | ハンドリング方法              |
+| ---------------------------------------------------- | ----------------------------- |
+| Vue アプリケーション内で発生する例外                   | `app.config.errorHandler`    |
+| JavaScript の構文エラーや Vue アプリケーション外の例外 | `window.onerror`             |
+| 非同期処理で発生する例外                              | `window.onunhandledrejection` |
+
+HTTP 通信で発生する例外について、レスポンスやステータスコードを解析する場合は、 Axios の `axios.interceptors.response` が有効です。
+
+### 例外の処理 {#error-handling-client-side}
+
+クライアントサイドの例外処理では、ユーザーが自身で対応できるか、という観点が重要になります。
+たとえばセッションタイムアウトになるといったような場合は、ユーザーが再度ログインすることで対処できます。
+一方 WebAPI サーバー内で予期しない問題が発生した場合、ユーザー自身では問題を解決できず、システム管理者に問い合わせをするようなフローが考えられます。
+
+ユーザーに対しては、自身がどのような対応をできるかを考慮し、適切な通知方法を選択します。ポップアップ等の画面遷移を伴わずに通知するか、エラーページへ遷移するかは、ユーザーが操作を継続できるかどうかによって選択します。
+一方開発者向けの通知では、エラーの詳細を把握するために必要な情報を収集することが重要です。開発環境であればコンソールログに出力し、本番環境ではログ収集ツールに送信する、などが考えられます。
+ただしコンソールログへの出力は原則開発環境のみとします。
+
+### API 通信で発生する例外処理フロー {#api-connection-error-flow}
+
+クライアントサイドで最も多く発生する例外は、 API 通信に関連するものです。これはネットワークエラーやサーバーエラー、ユーザーの入力エラーなど様々な要因によって引き起こされます。
+
+クライアントサイドでの例外の処理は、通知方法や画面遷移などシナリオによって様々なので、 API 通信の呼び出し元で個別に処理する必要があります。
+たとえばリクエストに不備がある、といったユーザーが対応できるようなエラーについては、対応方法をユーザーに通知します。
+一方で認証エラーやネットワークエラーのような共通の対応方法が考えられる場合には、特定のエラー処理の仕組み（カスタムエラーなど）を使って処理を一元化する方法が考えられます。
+
+通知方法は、ユーザーの入力を阻害しないようなポップアップやトースト通知などを選択することが望ましいです。ただし、状況によってはエラー画面に遷移する必要がある場合もあります。シナリオに合わせて最適な方法を選択し、ユーザーにわかりやすくエラーを伝えることが重要です。
+
+また、発生したエラーの解析には、以下の方法が考えられます。
+
+- [axios.interceptors.response :material-open-in-new:](https://axios-http.com/ja/docs/interceptors){ target=_blank } でエラー情報を解析し、適切なカスタムエラーを返却する。
+- エラー番号やエラーメッセージを通知し、開発者が問合せるための情報を提供する
+- ユーザーの状況やエラー内容をログ収集ツールに送信する
+
+以下は、 API 通信で発生する例外処理のフローです。
+
+```mermaid
+    sequenceDiagram
+    participant B as ブラウザ
+    participant C as Vue コンポーネント
+    participant A as Axios.Post
+    participant I as Axios.interceptors.response
+    participant S as サーバー
+
+    B->>C: ボタン押下
+    activate C
+    C->>A: API リクエスト呼び出し
+    activate A
+    A-)S: API リクエスト
+    activate S
+    S--)I: 400 Bad Request
+    deactivate S
+    activate I
+    I->>A: エラー情報の解析
+    deactivate I
+    rect rgba(255, 0, 0, 0.5)
+        A->>C: エラーの伝播
+        deactivate A
+    end
+    C->>B: エラー通知
+    deactivate C
+```

documents/contents/app-architecture/index.md

@@ -17,3 +17,7 @@ description: AlesInfiny Maia OSS Edition の考える アプリケーション
 - [バッチアプリケーション編](batch-application/index.md)
 
     バッチアプリケーションについて概要や、アーキテクチャについて解説します。
+
+- [アプリケーションセキュリティ編](./security/index.md)
+
+    アプリケーションにおけるセキュリティの担保方針について説明します。

documents/contents/app-architecture/security/index.md

@@ -0,0 +1,20 @@
+---
+title: アプリケーション セキュリティ編
+description: アプリケーションセキュリティを 担保するための方針を説明します。
+---
+
+# アプリケーションセキュリティ編 {#top}
+
+本章では、 AlesInfiny Maia OSS Edition （以降『AlesInfiny Maia』）のアプリケーションにおいてセキュリティを担保するための対策について説明します。
+
+なお、セキュアな Web アプリケーションの作り方については、 [安全なウェブサイトの作り方 | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構](https://www.ipa.go.jp/security/vuln/websecurity/about.html) も併せて参照してください。
+
+!!! danger "注意事項"
+
+    本章は、Web アプリケーションにおいて特に注意すべきセキュリティ対策について説明するものです。すべてのアプリケーションセキュリティ対策を網羅しているわけではありませんし、たとえばネットワークレベルの防御といったインフラレベルでの対策は別途考慮する必要があります。
+
+    **本章に述べる対策のみでシステムのセキュリティ対策が完結するとは考えないでください。**
+
+1. [XSS （クロスサイトスクリプティング）](./xss.md)
+
+    XSS 攻撃への AlesInfiny Maia での対策を説明します。

documents/contents/app-architecture/security/xss.md

@@ -0,0 +1,72 @@
+---
+title: アプリケーション セキュリティ編
+description: アプリケーションセキュリティを 担保するための方針を説明します。
+---
+
+# XSS （クロスサイトスクリプティング） {#top}
+
+## XSS とは {#what-is-xss}
+
+[安全なウェブサイトの作り方 - 1.5 クロスサイト・スクリプティング | 情報セキュリティ | IPA 独立行政法人 情報処理推進機構](https://www.ipa.go.jp/security/vuln/websecurity/cross-site-scripting.html) より XSS の定義を以下に引用します。
+
+<!-- textlint-disable -->
+
+> ウェブアプリケーションの中には、検索のキーワードの表示画面や個人情報登録時の確認画面、掲示板、ウェブのログ統計画面等、利用者からの入力内容やHTTPヘッダの情報を処理し、ウェブページとして出力するものがあります。ここで、ウェブページへの出力処理に問題がある場合、そのウェブページにスクリプト等を埋め込まれてしまいます。この問題を「クロスサイト・スクリプティングの脆弱性」と呼び、この問題を悪用した攻撃手法を、「クロスサイト・スクリプティング攻撃」と呼びます。
+
+<!-- textlint-enable -->
+
+## AlesInfiny Maia での XSS 対策 {#measures-against-xss}
+
+原則として以下の方針をとります。
+
+- アプリケーション外から取得した値（クライアントからの入力値、データベースから取得した値など）を画面に出力する際は文字列をプレーンテキスト化することで HTML や JavaScript として解釈させない
+
+### CSR アプリケーション {#csr-application}
+
+フロントエンドを Vue.js で構築する場合、 XSS 対策として以下の方針をとります。
+
+- アプリケーション外から取得した値を画面に文字列として出力するときは、常に `{{ }}` で囲む（マスタッシュ構文）
+
+    Vue.js では、 `{{ }}` で囲んだ文字列内の特殊文字は HTML エンコードされて出力されるため、アプリケーション外から取得した値を画面に出力する箇所では必ず `{{ }}` で囲むようにします。
+
+- アプリケーション外から取得した値を `<a>` タグの `href` 属性に設定する場合は値を無害化する
+
+    Vue.js では動的な属性のバインディング時にも自動でエスケープ処理されるため、アプリケーション外から取得した値を HTML の属性に設定することを禁止しません。ただし、以下のようなコードの場合、 `javascript:` の使用による JavaScript の実行を防ぐことができません。
+
+    ```vue
+    <a v-bind:href="アプリケーション外から取得した値">
+        リンクをクリック
+    </a>
+    ```
+
+    そのため、アプリケーション外から取得した値を `<a>` タグの `href` 属性に設定する場合は以下のように対策します。
+
+    - http:// または https:// から始まっていない入力値は受け付けない
+    - [sanitize-url](https://www.npmjs.com/package/@braintree/sanitize-url) 等のライブラリを使用して値を無害化する
+
+    !!! warning ""
+
+        入力値の形式が正しい URL であっても、リンク先のコンテンツが安全とは限らないことに注意してください。
+
+- アプリケーション外から取得した値をテンプレートとして出力することを禁止する
+
+    `v-html` や描画関数を使用してアプリケーション外から取得した値をそのまま出力してはなりません。
+
+    ```js title="XSS に対して脆弱なコード例①"
+    new Vue({
+        el: '#app',
+        template: `<div>` + アプリケーション外から取得した値 + `</div>`
+    })
+    ```
+
+    ```vue title="XSS に対して脆弱なコード例②"
+    <div v-html="アプリケーション外から取得した値"></div>
+    ```
+
+!!! warning "アプリケーションを設計する上での注意事項"
+
+    CMS ライクな機能を提供する場合など、エンドユーザーに HTML を直接入力させたい場面があるかもしれません。その場合も、たとえば画面上には HTML のタグや属性を選択肢として表示し、選択された値に応じて画面を構成するなどして、入力値を直接画面に出力することは極力避けてください。
+
+### SSR アプリケーション {#ssr-application}
+
+（今後追加予定）

documents/contents/guidebooks/conventions/coding-conventions.md

@@ -0,0 +1,53 @@
+---
+title: コーディング規約
+description: AlesInfiny Maia OSS Edition のコーディング規約に関する方針を示します。
+---
+
+# コーディング規約 {#top}
+
+AlesInfiny Maia OSS Edition （以下 AlesInfiny Maia ）では、一般に広く採用されている規約に準拠し、必要に応じて最低限のカスタムルールを加えることを基本方針とします。
+ゼロから独自規約を作成することは、以下のような問題があるため推奨しません。
+
+- 規約作成にかかる負荷が大きい
+- 必要な規約の漏れが発生しやすい
+- 機械的なチェックの仕組みを作りにくい
+
+## AlesInfiny Maia で採用している規約 {#style-guide}
+
+Java アプリケーション、 Vue.js アプリケーションそれぞれで以下の内容を基本のコーディング規約としています。
+
+- Java アプリケーション
+    - [Google Java Style :material-open-in-new:](https://google.github.io/styleguide/javaguide.html){ target=_blank }
+
+        Google が提供する、コードのフォーマットに対する規約です。
+        改行やインデントの規則、メソッド名や変数名の命名規則などを定めています。
+
+    - [SpotBugs :material-open-in-new:](https://spotbugs.github.io/){ target=_blank } のバグパターン
+
+        SpotBugs は静的解析ツールであるとともに、バグパターンと呼ばれるバッドプラクティスや脆弱性に関する定義を持ち、それらのコード中での出現を検知します。
+        SpotBugs によって検出された、バグパターンに該当するコードを修正することで、より安全なコーディングを実現できます。
+
+- Vue.js アプリケーション
+    - [Airbnb JavaScript Style Guide :material-open-in-new:](https://github.com/airbnb/javascript){ target=_blank }
+
+        Airbnb が GitHub 上に公開している JavaScript のスタイルガイドです。コードのフォーマットに対する規約および、バグを防止するための規約を定めています。あわせて、これらの規約に従うための ESLint の設定が公開されています。
+
+    - [Vue.js スタイルガイド :material-open-in-new:](https://ja.vuejs.org/style-guide/){ target=_blank }
+
+        Vue.js が公式に提供するスタイルガイドです。 JavaScript に対する規約ではカバーできない Vue 固有の記法について、エラーの発生やアンチパターンを避けるための規約を優先度別に定めています。 これらの規約への違反を検出するための ESLint のプラグインも公式に提供されています。
+
+    - [CSS specifications :material-open-in-new:](https://www.w3.org/Style/CSS/current-work){ target=_blank }
+
+        W3C が策定する CSS の標準仕様です。 Stylelint では、この標準仕様に従うための設定が公開されています。
+
+上記のコーディング規約は静的コード解析ツールによって自動的にチェックできるようにします。
+バックエンド側では、 Checkstyle を使用して Google Java Style への準拠を自動チェックし、
+SpotBugs を利用して、 SpotBugs が提供するバグパターンに該当するコードを自動検知します。
+加えて、 VS Code の自動フォーマット機能を利用することで、コーディング中に Google Java Style へ準拠したフォーマットへと自動でコードを修正します。
+フロントエンド側では Prettier 、 ESLint 、 Stylelint を利用してコーディング規約の自動チェックを行っています。
+コーディング規約の内容および静的コード解析ツールの詳しい設定方法については、以下のページとサンプルアプリの実装を確認してください。
+
+- [Checkstyle プラグイン](../how-to-develop/java/common-project-settings.md#checkstyle-plugin)
+- [SpotBugs プラグイン](../how-to-develop/java/common-project-settings.md#spotbugs-plugin)
+- [Java formatting and linting :material-open-in-new:](https://code.visualstudio.com/docs/java/java-linting){ target=_blank }
+- [静的コード分析とフォーマット(Vue.js)](../how-to-develop/vue-js/static-verification-and-format.md)

documents/contents/guidebooks/how-to-develop/local-environment/index.md

@@ -120,6 +120,13 @@ JDK のインストール時のカスタムセットアップで設定済みで
 
 ### Node.js のインストール {#install-node}
 
-1. [こちらのサイト :material-open-in-new:](https://nodejs.org/en/){ target=_blank } からインストーラーを取得します。
+1. [こちらのサイト :material-open-in-new:](https://nodejs.org/en/){ target=_blank } からインストーラーを取得します。 Node.js のインストーラーは、原則最新の LTS 版を利用してください。
 
 1. インストーラーを実行します。カスタムセットアップにて、 npm のインストールと PATH の追加をするよう設定することを推奨します ( 既定値のままインストールすると npm のインストールと PATH の設定が行われます ) 。
+
+1. 以下のコマンドが実行できればインストールは完了です。
+
+    ```ps1 title="Node.js と npm のバージョン確認"
+    node --version
+    npm --version
+    ```