From 7a908c80f27bd2b4b82b422bf9c9823018fbe64e Mon Sep 17 00:00:00 2001
From: Yuto <y.sansaimansai@gmail.com>
Date: Sat, 10 Feb 2024 12:45:47 +0000
Subject: [PATCH] docs: Japanse Translation

---
 docs/en/_navbar.md                            |   3 +-
 docs/index.html                               |   1 +
 docs/ja/_navbar.md                            |   4 +
 docs/ja/_sidebar.md                           |  29 ++++
 docs/ja/class-component/accessor/accessor.md  |  23 +++
 .../ja/class-component/accessor/code-usage.ts |  22 +++
 .../accessor/code-vanilla-getter.ts           |  12 ++
 .../accessor/code-vanilla-setter.ts           |  13 ++
 .../class-component/accessor/code-writable.ts |  28 ++++
 .../component-property/code-option-default.ts |  24 +++
 .../code-option-required.ts                   |  24 +++
 .../component-property/code-option-type.ts    |  24 +++
 .../code-option-validator.ts                  |  28 ++++
 .../component-property/code-usage.ts          |  22 +++
 .../component-property/component-property.md  |  31 ++++
 .../component/code-option-components.ts       |  27 ++++
 .../component/code-option-directives.ts       |  22 +++
 .../component/code-option-emits.ts            |  18 +++
 .../component/code-option-expose.ts           |  18 +++
 .../component/code-option-inherit-attrs.ts    |  18 +++
 .../component/code-option-methods.ts          |  26 +++
 .../component/code-option-mixins.ts           |  28 ++++
 .../component/code-option-modifier.ts         |  25 +++
 .../component/code-option-name.ts             |  17 ++
 .../component/code-option-options.ts          |  19 +++
 .../component/code-option-provide.ts          |  22 +++
 .../component/code-option-render.ts           |  22 +++
 .../component/code-option-setup.ts            |  22 +++
 .../component/code-option-template.ts         |  18 +++
 .../component/code-usage-base.ts              |  16 ++
 .../ja/class-component/component/component.md | 101 ++++++++++++
 .../event/code-asynchronous.ts                |  32 ++++
 docs/ja/class-component/event/code-usage.ts   |  31 ++++
 docs/ja/class-component/event/event.md        |  13 ++
 .../hooks/code-for-other-names.ts             |  17 ++
 docs/ja/class-component/hooks/code-usage.ts   |  20 +++
 docs/ja/class-component/hooks/hooks.md        |  39 +++++
 .../injection/code-option-default.ts          |  23 +++
 .../injection/code-option-from.ts             |  23 +++
 .../class-component/injection/code-usage.ts   |  19 +++
 .../ja/class-component/injection/injection.md |  19 +++
 docs/ja/class-component/method/code-usage.ts  |  22 +++
 docs/ja/class-component/method/method.md      |   5 +
 .../class-component/model/code-option-name.ts |  35 ++++
 .../model/code-option-others.ts               |  41 +++++
 docs/ja/class-component/model/code-usage.ts   |  33 ++++
 docs/ja/class-component/model/model.md        |  21 +++
 .../ja/class-component/property/code-usage.ts |  20 +++
 docs/ja/class-component/property/property.md  |   7 +
 .../provide/code-usage-base.ts                |  13 ++
 docs/ja/class-component/provide/provide.md    |   5 +
 .../class-component/reference/code-usage.ts   |  22 +++
 .../ja/class-component/reference/reference.md |   5 +
 .../class-component/setup/code-usage-base.ts  |  25 +++
 docs/ja/class-component/setup/setup.md        |   5 +
 .../watcher/code-option-deep.ts               |  37 +++++
 .../watcher/code-option-flush.ts              |  37 +++++
 .../watcher/code-option-immediate.ts          |  37 +++++
 docs/ja/class-component/watcher/code-usage.ts |  52 ++++++
 docs/ja/class-component/watcher/watcher.md    |  29 ++++
 .../code-usage.ts                             |   6 +
 .../code-webpack-alias-vue-config.js          |   7 +
 .../code-webpack-alias-webpack-config.js      |  11 ++
 .../reflect-metadata.md                       |  15 ++
 docs/ja/custom/code-usage.ts                  |  25 +++
 docs/ja/custom/custom.md                      |  24 +++
 .../complex-example/code-example.ts           |  38 +++++
 .../complex-example/complex-example.md        |  17 ++
 docs/ja/inheritance/component/code-example.ts |  27 ++++
 .../component/code-mixins-function.ts         |  37 +++++
 docs/ja/inheritance/component/code-native.ts  |  39 +++++
 docs/ja/inheritance/component/component.md    |  29 ++++
 docs/ja/inheritance/es-class/code-example.ts  |  59 +++++++
 docs/ja/inheritance/es-class/es-class.md      |  11 ++
 .../breaking-changes-classProperty.ts         |  17 ++
 .../breaking-changes-toNative.ts              |  50 ++++++
 docs/ja/migrate-from-v2/migrate-from-v2.md    |  23 +++
 docs/ja/quick-start/code-how-to-use-sfc.vue   |  20 +++
 ...ode-how-to-use-simplest-class-component.ts |   7 +
 .../code-separated-files-tsx/Comp.render.tsx  |   8 +
 .../code-separated-files-tsx/Comp.ts          |  16 ++
 .../code-separated-files-tsx/style.css        |   4 +
 docs/ja/quick-start/code-use-toNative.ts      |  11 ++
 .../ja/quick-start/code-what-it-is-example.ts |  20 +++
 docs/ja/quick-start/quick-start.md            | 151 ++++++++++++++++++
 docs/ja/readme.md                             |  40 +++++
 .../ja/stage3-decorators/stage3-decorators.md |  17 ++
 .../ja/tsx/attribute-types/attribute-types.md |  31 ++++
 .../code-component-inheritance.tsx            |  47 ++++++
 .../attribute-types/code-type-checking.tsx    |  19 +++
 docs/ja/tsx/attribute-types/code-usage.tsx    |  33 ++++
 docs/ja/tsx/tsx-render/tsx-render.md          |   4 +
 docs/pt-br/_navbar.md                         |   3 +-
 docs/zh-cn/_navbar.md                         |   7 +-
 94 files changed, 2262 insertions(+), 5 deletions(-)
 create mode 100644 docs/ja/_navbar.md
 create mode 100644 docs/ja/_sidebar.md
 create mode 100644 docs/ja/class-component/accessor/accessor.md
 create mode 100644 docs/ja/class-component/accessor/code-usage.ts
 create mode 100644 docs/ja/class-component/accessor/code-vanilla-getter.ts
 create mode 100644 docs/ja/class-component/accessor/code-vanilla-setter.ts
 create mode 100644 docs/ja/class-component/accessor/code-writable.ts
 create mode 100644 docs/ja/class-component/component-property/code-option-default.ts
 create mode 100644 docs/ja/class-component/component-property/code-option-required.ts
 create mode 100644 docs/ja/class-component/component-property/code-option-type.ts
 create mode 100644 docs/ja/class-component/component-property/code-option-validator.ts
 create mode 100644 docs/ja/class-component/component-property/code-usage.ts
 create mode 100644 docs/ja/class-component/component-property/component-property.md
 create mode 100644 docs/ja/class-component/component/code-option-components.ts
 create mode 100644 docs/ja/class-component/component/code-option-directives.ts
 create mode 100644 docs/ja/class-component/component/code-option-emits.ts
 create mode 100644 docs/ja/class-component/component/code-option-expose.ts
 create mode 100644 docs/ja/class-component/component/code-option-inherit-attrs.ts
 create mode 100644 docs/ja/class-component/component/code-option-methods.ts
 create mode 100644 docs/ja/class-component/component/code-option-mixins.ts
 create mode 100644 docs/ja/class-component/component/code-option-modifier.ts
 create mode 100644 docs/ja/class-component/component/code-option-name.ts
 create mode 100644 docs/ja/class-component/component/code-option-options.ts
 create mode 100644 docs/ja/class-component/component/code-option-provide.ts
 create mode 100644 docs/ja/class-component/component/code-option-render.ts
 create mode 100644 docs/ja/class-component/component/code-option-setup.ts
 create mode 100644 docs/ja/class-component/component/code-option-template.ts
 create mode 100644 docs/ja/class-component/component/code-usage-base.ts
 create mode 100644 docs/ja/class-component/component/component.md
 create mode 100644 docs/ja/class-component/event/code-asynchronous.ts
 create mode 100644 docs/ja/class-component/event/code-usage.ts
 create mode 100644 docs/ja/class-component/event/event.md
 create mode 100644 docs/ja/class-component/hooks/code-for-other-names.ts
 create mode 100644 docs/ja/class-component/hooks/code-usage.ts
 create mode 100644 docs/ja/class-component/hooks/hooks.md
 create mode 100644 docs/ja/class-component/injection/code-option-default.ts
 create mode 100644 docs/ja/class-component/injection/code-option-from.ts
 create mode 100644 docs/ja/class-component/injection/code-usage.ts
 create mode 100644 docs/ja/class-component/injection/injection.md
 create mode 100644 docs/ja/class-component/method/code-usage.ts
 create mode 100644 docs/ja/class-component/method/method.md
 create mode 100644 docs/ja/class-component/model/code-option-name.ts
 create mode 100644 docs/ja/class-component/model/code-option-others.ts
 create mode 100644 docs/ja/class-component/model/code-usage.ts
 create mode 100644 docs/ja/class-component/model/model.md
 create mode 100644 docs/ja/class-component/property/code-usage.ts
 create mode 100644 docs/ja/class-component/property/property.md
 create mode 100644 docs/ja/class-component/provide/code-usage-base.ts
 create mode 100644 docs/ja/class-component/provide/provide.md
 create mode 100644 docs/ja/class-component/reference/code-usage.ts
 create mode 100644 docs/ja/class-component/reference/reference.md
 create mode 100644 docs/ja/class-component/setup/code-usage-base.ts
 create mode 100644 docs/ja/class-component/setup/setup.md
 create mode 100644 docs/ja/class-component/watcher/code-option-deep.ts
 create mode 100644 docs/ja/class-component/watcher/code-option-flush.ts
 create mode 100644 docs/ja/class-component/watcher/code-option-immediate.ts
 create mode 100644 docs/ja/class-component/watcher/code-usage.ts
 create mode 100644 docs/ja/class-component/watcher/watcher.md
 create mode 100644 docs/ja/compatibility/-deprecated- reflect-metadata/code-usage.ts
 create mode 100644 docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-vue-config.js
 create mode 100644 docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-webpack-config.js
 create mode 100644 docs/ja/compatibility/-deprecated- reflect-metadata/reflect-metadata.md
 create mode 100644 docs/ja/custom/code-usage.ts
 create mode 100644 docs/ja/custom/custom.md
 create mode 100644 docs/ja/inheritance/complex-example/code-example.ts
 create mode 100644 docs/ja/inheritance/complex-example/complex-example.md
 create mode 100644 docs/ja/inheritance/component/code-example.ts
 create mode 100644 docs/ja/inheritance/component/code-mixins-function.ts
 create mode 100644 docs/ja/inheritance/component/code-native.ts
 create mode 100644 docs/ja/inheritance/component/component.md
 create mode 100644 docs/ja/inheritance/es-class/code-example.ts
 create mode 100644 docs/ja/inheritance/es-class/es-class.md
 create mode 100644 docs/ja/migrate-from-v2/breaking-changes-classProperty.ts
 create mode 100644 docs/ja/migrate-from-v2/breaking-changes-toNative.ts
 create mode 100644 docs/ja/migrate-from-v2/migrate-from-v2.md
 create mode 100644 docs/ja/quick-start/code-how-to-use-sfc.vue
 create mode 100644 docs/ja/quick-start/code-how-to-use-simplest-class-component.ts
 create mode 100644 docs/ja/quick-start/code-separated-files-tsx/Comp.render.tsx
 create mode 100644 docs/ja/quick-start/code-separated-files-tsx/Comp.ts
 create mode 100644 docs/ja/quick-start/code-separated-files-tsx/style.css
 create mode 100644 docs/ja/quick-start/code-use-toNative.ts
 create mode 100644 docs/ja/quick-start/code-what-it-is-example.ts
 create mode 100644 docs/ja/quick-start/quick-start.md
 create mode 100644 docs/ja/readme.md
 create mode 100644 docs/ja/stage3-decorators/stage3-decorators.md
 create mode 100644 docs/ja/tsx/attribute-types/attribute-types.md
 create mode 100644 docs/ja/tsx/attribute-types/code-component-inheritance.tsx
 create mode 100644 docs/ja/tsx/attribute-types/code-type-checking.tsx
 create mode 100644 docs/ja/tsx/attribute-types/code-usage.tsx
 create mode 100644 docs/ja/tsx/tsx-render/tsx-render.md

diff --git a/docs/en/_navbar.md b/docs/en/_navbar.md
index 2fedf83..572c5ac 100644
--- a/docs/en/_navbar.md
+++ b/docs/en/_navbar.md
@@ -1,3 +1,4 @@
 - [English](/)
 - [简体中文](/zh-cn/readme.md)
-- [Portuguese](/pt-br/readme.md)
\ No newline at end of file
+- [Portuguese](/pt-br/readme.md)
+- [Japanese](/ja/readme.md)
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index a9e70ef..fdc22ba 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -46,6 +46,7 @@
         '/pt-br/(.*)': '/pt-br/$1',
         '/zh-cn/(.*)': '/zh-cn/$1',
         '/en/(.*)': '/en/$1',
+        '/ja/(.*)': '/ja/$1',
         '/': '/readme.md',
         '^/_(.*)': '/en/_$1'
       }
diff --git a/docs/ja/_navbar.md b/docs/ja/_navbar.md
new file mode 100644
index 0000000..90c8437
--- /dev/null
+++ b/docs/ja/_navbar.md
@@ -0,0 +1,4 @@
+-   [英語](/)
+-   [简体中文](/zh-cn/readme.md)
+-   [ポルトガル語](/pt-br/readme.md)
+-   [日本語](/ja/readme.md)
diff --git a/docs/ja/_sidebar.md b/docs/ja/_sidebar.md
new file mode 100644
index 0000000..9b8f9a0
--- /dev/null
+++ b/docs/ja/_sidebar.md
@@ -0,0 +1,29 @@
+-   [インフォメーション](/ja/readme.md)
+-   [クイックスタート](/ja/quick-start/quick-start.md)
+-   クラスコンポーネント
+    -   [コンポーネント](/ja/class-component/component/component.md)
+    -   [プロパティ](/ja/class-component/property/property.md)
+    -   [メソッド](/ja/class-component/method/method.md)
+    -   [フック](/ja/class-component/hooks/hooks.md)
+    -   [コンポーネントプロパティ](/ja/class-component/component-property/component-property.md)
+    -   [アクセサ](/ja/class-component/accessor/accessor.md)
+    -   [イベント](/ja/class-component/event/event.md)
+    -   [リファレンス](/ja/class-component/reference/reference.md)
+    -   [ウォッチャー](/ja/class-component/watcher/watcher.md)
+    -   [プロバイド](/ja/class-component/provide/provide.md)
+    -   [インジェクション](/ja/class-component/injection/injection.md)
+    -   [モデル](/ja/class-component/model/model.md)
+    -   [セットアップ](/ja/class-component/setup/setup.md)
+-   継承
+    -   [ECMAScript クラス](/ja/inheritance/es-class/es-class.md)
+    -   [コンポーネント](/ja/inheritance/component/component.md)
+    -   [高度な例](/ja/inheritance/complex-example/complex-example.md)
+-   TSX
+    -   [TSX レンダー](/ja/tsx/tsx-render/tsx-render.md)
+    -   [アトリビュート タイプ](/ja/tsx/attribute-types/attribute-types.md)
+-   Custom Decorator
+    -   [カスタム デコレーター](/ja/custom/custom.md)
+-   v2 からのマイグレーション
+    -   [v2 からのマイグレーション](/ja/migrate-from-v2/migrate-from-v2.md)
+-   Stage3 decorators
+    -   [Stage3 デコレーター](/ja/stage3-decorators/stage3-decorators.md)
diff --git a/docs/ja/class-component/accessor/accessor.md b/docs/ja/class-component/accessor/accessor.md
new file mode 100644
index 0000000..d574e4c
--- /dev/null
+++ b/docs/ja/class-component/accessor/accessor.md
@@ -0,0 +1,23 @@
+## 使用方法
+
+`getters`プロパティは`{computed:{get:Foo}}`に変換されます。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## 書き込み可能な算出関数
+
+`setters`プロパティは`{computed:{set:Foo}}`に変換されます。
+
+[](./code-writable.ts ':include :type=code typescript')
+
+## Vanilla ゲッター
+
+`@Vanilla`でES vanillaのゲッターを定義できます。
+
+[](./code-vanilla-getter.ts ':include :type=code typescript')
+
+## Vanilla セッター
+
+`@Vanilla`でES vanillaのセッターを定義できます。
+
+[](./code-vanilla-setter.ts ':include :type=code typescript')
\ No newline at end of file
diff --git a/docs/ja/class-component/accessor/code-usage.ts b/docs/ja/class-component/accessor/code-usage.ts
new file mode 100644
index 0000000..b4376fb
--- /dev/null
+++ b/docs/ja/class-component/accessor/code-usage.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    computed:{
+        get(){
+            return 'value'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    get getter() {
+        return 'value'
+    }
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/accessor/code-vanilla-getter.ts b/docs/ja/class-component/accessor/code-vanilla-getter.ts
new file mode 100644
index 0000000..8e031bc
--- /dev/null
+++ b/docs/ja/class-component/accessor/code-vanilla-getter.ts
@@ -0,0 +1,12 @@
+
+import { Component, Vue, Vanilla, toNative } from 'vue-facing-decorator'
+
+@Component
+class MyComponent extends Vue {
+    @Vanilla
+    get getter() {
+        return 'value'
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/accessor/code-vanilla-setter.ts b/docs/ja/class-component/accessor/code-vanilla-setter.ts
new file mode 100644
index 0000000..c48f15f
--- /dev/null
+++ b/docs/ja/class-component/accessor/code-vanilla-setter.ts
@@ -0,0 +1,13 @@
+
+import { Component, Vue, Vanilla, toNative } from 'vue-facing-decorator'
+
+@Component
+class MyComponent extends Vue {
+    foo = ''
+    @Vanilla
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/accessor/code-writable.ts b/docs/ja/class-component/accessor/code-writable.ts
new file mode 100644
index 0000000..99d2063
--- /dev/null
+++ b/docs/ja/class-component/accessor/code-writable.ts
@@ -0,0 +1,28 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    data(){
+        return {
+            foo:''
+        }
+    },
+    computed:{
+        set(bar){
+            this.foo = bar
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    foo = ''
+    set setter(bar: string) {
+        this.foo = bar
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component-property/code-option-default.ts b/docs/ja/class-component/component-property/code-option-default.ts
new file mode 100644
index 0000000..2b7669d
--- /dev/null
+++ b/docs/ja/class-component/component-property/code-option-default.ts
@@ -0,0 +1,24 @@
+
+import { Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    props:{
+        p:{
+            default: 'foo'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Prop({
+        default: 'foo'
+    })
+    p!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component-property/code-option-required.ts b/docs/ja/class-component/component-property/code-option-required.ts
new file mode 100644
index 0000000..bcade3f
--- /dev/null
+++ b/docs/ja/class-component/component-property/code-option-required.ts
@@ -0,0 +1,24 @@
+
+import { Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    props:{
+        p:{
+            required:true
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Prop({
+        required: true
+    })
+    p!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component-property/code-option-type.ts b/docs/ja/class-component/component-property/code-option-type.ts
new file mode 100644
index 0000000..2e5ba63
--- /dev/null
+++ b/docs/ja/class-component/component-property/code-option-type.ts
@@ -0,0 +1,24 @@
+
+import { Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    props:{
+        p:{
+            type: String
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Prop({
+        type: String
+    })
+    p?: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component-property/code-option-validator.ts b/docs/ja/class-component/component-property/code-option-validator.ts
new file mode 100644
index 0000000..d32df24
--- /dev/null
+++ b/docs/ja/class-component/component-property/code-option-validator.ts
@@ -0,0 +1,28 @@
+
+import { Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    props:{
+        p:{
+             validator(val:any){
+                return true
+            }
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Prop({
+        validator(val: any) {
+            return true
+        }
+    })
+    p?: string
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/component-property/code-usage.ts b/docs/ja/class-component/component-property/code-usage.ts
new file mode 100644
index 0000000..ece8b93
--- /dev/null
+++ b/docs/ja/class-component/component-property/code-usage.ts
@@ -0,0 +1,22 @@
+
+import { Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    props:{
+        p:{
+            
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Prop
+    p?: string
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/component-property/component-property.md b/docs/ja/class-component/component-property/component-property.md
new file mode 100644
index 0000000..8ea018d
--- /dev/null
+++ b/docs/ja/class-component/component-property/component-property.md
@@ -0,0 +1,31 @@
+## 使用方法
+
+`Prop`デコレーターを使用して、Vue の`props`を定義できます。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## オプション
+
+### default
+
+以下のソースコードでは`props`のデフォルト値を設定しています。
+
+[](./code-option-default.ts ':include :type=code typescript')
+
+### required
+
+以下のソースコードでは`props`の必須是非を設定しています。
+
+[](./code-option-required.ts ':include :type=code typescript')
+
+### type
+
+以下のソースコードでは`props`のデータ型を設定しています。
+
+[](./code-option-type.ts ':include :type=code typescript')
+
+### validator
+
+以下のソースコードでは`props`のバリデーターを設定しています。
+
+[](./code-option-validator.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/component/code-option-components.ts b/docs/ja/class-component/component/code-option-components.ts
new file mode 100644
index 0000000..f1d1e67
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-components.ts
@@ -0,0 +1,27 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+@Component
+class MyAnotherComponent extends Vue {
+
+}
+
+/*
+Vue options component
+{
+    components:{
+        MyAnotherComponent
+    }
+}
+*/
+
+@Component({
+    components: {
+        MyAnotherComponent
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-directives.ts b/docs/ja/class-component/component/code-option-directives.ts
new file mode 100644
index 0000000..9a9ea4a
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-directives.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    directives:{
+        MyDirective:{}
+    }
+}
+*/
+
+@Component({
+    directives: {
+        MyDirective: {}
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-emits.ts b/docs/ja/class-component/component/code-option-emits.ts
new file mode 100644
index 0000000..b72dd4b
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-emits.ts
@@ -0,0 +1,18 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    emits:['MyEvent']
+}
+*/
+
+@Component({
+    emits: ['MyEvent']
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-expose.ts b/docs/ja/class-component/component/code-option-expose.ts
new file mode 100644
index 0000000..c3f0bf4
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-expose.ts
@@ -0,0 +1,18 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    expose:['name']
+}
+*/
+
+@Component({
+    expose: ['Name']
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-inherit-attrs.ts b/docs/ja/class-component/component/code-option-inherit-attrs.ts
new file mode 100644
index 0000000..7b5b299
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-inherit-attrs.ts
@@ -0,0 +1,18 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    inheritAttrs:true
+}
+*/
+
+@Component({
+    inheritAttrs: true
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-methods.ts b/docs/ja/class-component/component/code-option-methods.ts
new file mode 100644
index 0000000..c85273c
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-methods.ts
@@ -0,0 +1,26 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    methods:{
+        foo(){
+            
+        }
+    }
+}
+*/
+
+@Component({
+    methods: {
+        foo() {
+
+        }
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/component/code-option-mixins.ts b/docs/ja/class-component/component/code-option-mixins.ts
new file mode 100644
index 0000000..0602835
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-mixins.ts
@@ -0,0 +1,28 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { defineComponent } from 'vue'
+
+const VueComponent = defineComponent({
+
+})
+
+@Component
+class ClassComponent extends Vue {
+
+}
+
+/*
+Vue options component
+{
+    mixins:[VueComponent, nativeClassComponent]
+}
+*/
+
+@Component({
+    mixins: [VueComponent, toNative(ClassComponent)]
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/component/code-option-modifier.ts b/docs/ja/class-component/component/code-option-modifier.ts
new file mode 100644
index 0000000..890faff
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-modifier.ts
@@ -0,0 +1,25 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options component
+{
+    methods:{
+        customMethod(){
+            
+        }
+    }
+}
+*/
+
+@Component({
+    modifier: function (option: any) {
+        option.methods ??= {}
+        option.methods.customMethod = function () { }
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-name.ts b/docs/ja/class-component/component/code-option-name.ts
new file mode 100644
index 0000000..6f8f4e2
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-name.ts
@@ -0,0 +1,17 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:'VueComponentName'
+}
+*/
+
+@Component({
+    name: 'VueComponentName'
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-options.ts b/docs/ja/class-component/component/code-option-options.ts
new file mode 100644
index 0000000..cfd9695
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-options.ts
@@ -0,0 +1,19 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:'VueComponentName'
+}
+*/
+
+@Component({
+    options: {
+        name: 'VueComponentName'
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-provide.ts b/docs/ja/class-component/component/code-option-provide.ts
new file mode 100644
index 0000000..958f962
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-provide.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    provide:{
+        key: 'value'
+    }
+}
+*/
+
+@Component({
+    provide: {
+        key: 'value'
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-render.ts b/docs/ja/class-component/component/code-option-render.ts
new file mode 100644
index 0000000..6f3efd5
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-render.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    render:function(){
+
+    }
+}
+*/
+
+@Component({
+    render: function () {
+
+    }
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-setup.ts b/docs/ja/class-component/component/code-option-setup.ts
new file mode 100644
index 0000000..1934d12
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-setup.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    setup() {
+        return { key: 'value' }
+    }
+}
+*/
+
+@Component({
+    setup() {
+        return { key: 'value' }
+    }
+})
+class MyComponent extends Vue {
+    key!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-option-template.ts b/docs/ja/class-component/component/code-option-template.ts
new file mode 100644
index 0000000..c1febe7
--- /dev/null
+++ b/docs/ja/class-component/component/code-option-template.ts
@@ -0,0 +1,18 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    template:'<div>template</div>'
+}
+*/
+
+@Component({
+    template: '<div>template</div>'
+})
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/code-usage-base.ts b/docs/ja/class-component/component/code-usage-base.ts
new file mode 100644
index 0000000..eba2563
--- /dev/null
+++ b/docs/ja/class-component/component/code-usage-base.ts
@@ -0,0 +1,16 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+@Component
+class MyComponent extends Vue {
+
+}
+
+//or
+
+@Component({
+    //Set your options here.
+})
+class MyComponentWithOptions extends Vue {
+
+}
+
+export default toNative(MyComponentWithOptions)
\ No newline at end of file
diff --git a/docs/ja/class-component/component/component.md b/docs/ja/class-component/component/component.md
new file mode 100644
index 0000000..8f44566
--- /dev/null
+++ b/docs/ja/class-component/component/component.md
@@ -0,0 +1,101 @@
+## 使用方法
+
+`Vue`クラスを継承しているクラスに`Component`デコレーターを使用してください。
+
+[](./code-usage-base.ts ':include :type=code typescript')
+
+## オプション
+
+### name
+
+Vue Options API における`name`です。
+
+[](./code-option-name.ts ':include :type=code typescript')
+
+### emits
+
+Vue Options API における`emits`です。
+
+[](./code-option-emits.ts ':include :type=code typescript')
+
+### provide
+
+Vue Options API における`provide`です。
+
+[](./code-option-provide.ts ':include :type=code typescript')
+
+### components
+
+Vue Options API における`components`です。
+
+[](./code-option-components.ts ':include :type=code typescript')
+
+### directives
+
+Vue Options API における`directives`です。
+
+[](./code-option-directives.ts ':include :type=code typescript')
+
+### inheritAttrs
+
+Vue Options API における`inheritAttrs`です。
+
+[](./code-option-inherit-attrs.ts ':include :type=code typescript')
+
+### expose
+
+Vue Options API における`expose`です。
+
+[](./code-option-expose.ts ':include :type=code typescript')
+
+### render
+
+Vue Options API における`render`です。
+
+単一ファイルコンポーネントの場合、`render`は自動的にコンポーネントを`export default`として扱います。
+
+> クラス本体のレンダリングを上書きします。
+
+[](./code-option-render.ts ':include :type=code typescript')
+
+### setup
+
+Vue Options API における`setup`です。ただし、レンダー関数を返すことはできません。
+
+[](./code-option-setup.ts ':include :type=code typescript')
+
+### template
+
+Vue Options API における`template`です。
+
+> 使用時にはテンプレートコンパイラーを含む Vue のフルバンドルが必要になります。
+
+[](./code-option-template.ts ':include :type=code typescript')
+
+### mixins
+
+Vue Options API における`mixins`です。ネイティブ Vue コンポーネントでのみ使用できます。(パラメーターにクラスコンポーネントを渡したい場合、`toNative`を使用してください。)
+
+[](./code-option-mixins.ts ':include :type=code typescript')
+
+### methods
+
+このフィールド内に定義されたメソッドはコンポーネント内で使用できます。
+
+[](./code-option-methods.ts ':include :type=code typescript')
+
+### options
+
+`modifier`の前に任意の Vue Option API を設定します。
+
+> `vue-facing-decorator`にのみ存在するオプションです。
+
+[](./code-option-options.ts ':include :type=code typescript')
+
+### modifier
+
+生成された Vue Option API を直接変更します。
+
+> `vue-facing-decorator`にのみ存在するオプションです。
+
+[](./code-option-modifier.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/event/code-asynchronous.ts b/docs/ja/class-component/event/code-asynchronous.ts
new file mode 100644
index 0000000..9f8faa6
--- /dev/null
+++ b/docs/ja/class-component/event/code-asynchronous.ts
@@ -0,0 +1,32 @@
+
+import { Emit, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    methods:{
+        async triggerAsyncEvent(){
+            const value = await new Promise((resolver)=>{
+                setTimeout(()=>{
+                    resolver('value')
+                },1000)
+            })
+            this.$emit('triggerAsyncEvent',value)
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Emit
+    triggerAsyncEvent() {
+        return new Promise((resolver) => {
+            setTimeout(() => {
+                resolver('value')
+            }, 1000)
+        })
+    }
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/event/code-usage.ts b/docs/ja/class-component/event/code-usage.ts
new file mode 100644
index 0000000..21bd1af
--- /dev/null
+++ b/docs/ja/class-component/event/code-usage.ts
@@ -0,0 +1,31 @@
+
+import { Emit, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    methods:{
+        triggerMethodNameEvent(){
+            this.$emit('triggerMethodNameEvent','triggerMethodNameEvent value')
+        },
+        triggerSpecifiedNameEvent(){
+            this.$emit('SpecifiedName','triggerSpecifiedNameEvent value')
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Emit
+    triggerMethodNameEvent() {
+        return 'triggerMethodNameEvent value'
+    }
+
+    @Emit('SpecifiedName')
+    triggerSpecifiedNameEvent() {
+        return 'triggerSpecifiedNameEvent value'
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/event/event.md b/docs/ja/class-component/event/event.md
new file mode 100644
index 0000000..fc82eed
--- /dev/null
+++ b/docs/ja/class-component/event/event.md
@@ -0,0 +1,13 @@
+## 使用方法
+
+`Emit`デコレーターを使用して、Vue のイベントを発火するメソッドを定義できます。
+
+`Emit`デコレーターは任意のイベント名をパラメーターとして受け取り、この名前が発火されるイベント名になります。そしてこのメソッドは値を返します。イベント名が省略された場合、メソッド名がデフォルトで使用されます。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## 非同期イベント
+
+メソッドがプロミスを返した場合、プロミスのリゾルブ後にイベントは発火されます。
+
+[](./code-asynchronous.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/hooks/code-for-other-names.ts b/docs/ja/class-component/hooks/code-for-other-names.ts
new file mode 100644
index 0000000..715cea3
--- /dev/null
+++ b/docs/ja/class-component/hooks/code-for-other-names.ts
@@ -0,0 +1,17 @@
+
+import { Component, Vue, Hook, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    myHook(){},
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Hook
+    myHook() { }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/hooks/code-usage.ts b/docs/ja/class-component/hooks/code-usage.ts
new file mode 100644
index 0000000..37695c1
--- /dev/null
+++ b/docs/ja/class-component/hooks/code-usage.ts
@@ -0,0 +1,20 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    mounted(){
+        
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    mounted() {
+
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/hooks/hooks.md b/docs/ja/class-component/hooks/hooks.md
new file mode 100644
index 0000000..bdc05b3
--- /dev/null
+++ b/docs/ja/class-component/hooks/hooks.md
@@ -0,0 +1,39 @@
+## 使用方法
+
+クラスコンポーネントは Vanilla Vue のすべてのライフサイクルフックをサポートしています。クラスメソッドのように直接的に書くことができます。ただし、`methods`に変換されることはありません。
+
+> これらのフックはすべてクラス内のプロパティではなくメソッドのように記述してください。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## 定義済みフック一覧
+
+```javascript
+[
+    'beforeCreate',
+    'created',
+    'beforeMount',
+    'mounted',
+    'beforeUpdate',
+    'updated',
+    'activated',
+    'deactivated',
+    'beforeDestroy',
+    'beforeUnmount',
+    'destroyed',
+    'unmounted',
+    'renderTracked',
+    'renderTriggered',
+    'errorCaptured',
+    'serverPrefetch',
+    'render',
+];
+```
+
+## 上記以外のフック
+
+`Hook`デコレーターを使用して、独自のライフサイクルフックを定義できます。
+
+> e.g. Hooks from `vue-router`.
+
+[](./code-for-other-names.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/injection/code-option-default.ts b/docs/ja/class-component/injection/code-option-default.ts
new file mode 100644
index 0000000..9e44eac
--- /dev/null
+++ b/docs/ja/class-component/injection/code-option-default.ts
@@ -0,0 +1,23 @@
+
+import { Inject, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    inject:{
+        name:{
+            default:'default name'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject({
+        default: 'default name'
+    })
+    readonly name!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/injection/code-option-from.ts b/docs/ja/class-component/injection/code-option-from.ts
new file mode 100644
index 0000000..d39a2ae
--- /dev/null
+++ b/docs/ja/class-component/injection/code-option-from.ts
@@ -0,0 +1,23 @@
+
+import { Inject, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    inject:{
+        nameAlias:{
+            from:'name'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject({
+        from: 'name'
+    })
+    readonly nameAlias!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/injection/code-usage.ts b/docs/ja/class-component/injection/code-usage.ts
new file mode 100644
index 0000000..7d443d7
--- /dev/null
+++ b/docs/ja/class-component/injection/code-usage.ts
@@ -0,0 +1,19 @@
+
+import { Inject, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    inject:{
+        name:{}
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Inject
+    readonly name!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/injection/injection.md b/docs/ja/class-component/injection/injection.md
new file mode 100644
index 0000000..8d3062b
--- /dev/null
+++ b/docs/ja/class-component/injection/injection.md
@@ -0,0 +1,19 @@
+## 使用方法
+
+`Inject`デコレーターを使用して、Vue の`inject`に該当するデータ注入を定義できます。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## オプション
+
+### from
+
+Vue の`inject` における`from`です。
+
+[](./code-option-from.ts ':include :type=code typescript')
+
+### default
+
+Vue の`inject` における`default`です。
+
+[](./code-option-default.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/method/code-usage.ts b/docs/ja/class-component/method/code-usage.ts
new file mode 100644
index 0000000..b8d803b
--- /dev/null
+++ b/docs/ja/class-component/method/code-usage.ts
@@ -0,0 +1,22 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    methods:{
+        method(){
+            
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    method() {
+
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/method/method.md b/docs/ja/class-component/method/method.md
new file mode 100644
index 0000000..9a47941
--- /dev/null
+++ b/docs/ja/class-component/method/method.md
@@ -0,0 +1,5 @@
+## 使用方法
+
+クラスコンポーネントでは、Vue Option API の`methods`をクラスのメソッドとして直接的に定義できます。このリポジトリが定義してあるメソッドを分析し`methods`オプションに変換します。
+
+[](./code-usage.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/model/code-option-name.ts b/docs/ja/class-component/model/code-option-name.ts
new file mode 100644
index 0000000..329e9de
--- /dev/null
+++ b/docs/ja/class-component/model/code-option-name.ts
@@ -0,0 +1,35 @@
+import { Model, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    props:{
+        value:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['value']
+            },
+            set(value){
+                this.$emit('update:value',value)
+            }
+        }
+    }
+}
+*/
+
+/*
+In other components:
+<MyComponent v-model:value="foo"></MyComponent>
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Model({
+        name: 'value'
+    })
+    valueAgent!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/model/code-option-others.ts b/docs/ja/class-component/model/code-option-others.ts
new file mode 100644
index 0000000..ce83347
--- /dev/null
+++ b/docs/ja/class-component/model/code-option-others.ts
@@ -0,0 +1,41 @@
+import { Model, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    props:{
+        modelValue:{
+            type:String,
+            default:'bar',
+            //...
+        }
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+*/
+
+/*
+In other components:
+<MyComponent v-model="foo"></MyComponent>
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Model({
+        type: String,
+        default: 'bar',
+        //...
+    })
+    valueAgent!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/model/code-usage.ts b/docs/ja/class-component/model/code-usage.ts
new file mode 100644
index 0000000..7eab757
--- /dev/null
+++ b/docs/ja/class-component/model/code-usage.ts
@@ -0,0 +1,33 @@
+import { Model, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    props:{
+        modelValue:{}
+    },
+    computed:{
+        valueAgent:{
+            get(){
+                return this['modelValue']
+            },
+            set(value){
+                this.$emit('update:modelValue',value)
+            }
+        }
+    }
+}
+*/
+
+/*
+In other components:
+<MyComponent v-model="foo"></MyComponent>
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Model
+    valueAgent!: string
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/model/model.md b/docs/ja/class-component/model/model.md
new file mode 100644
index 0000000..f806524
--- /dev/null
+++ b/docs/ja/class-component/model/model.md
@@ -0,0 +1,21 @@
+## 使用方法
+
+`Model`デコレーターを使用して、Vue の`v-model`または、`v-model:foo`に該当する双方向バインディングを定義できます。
+
+> 従来の`VModel`デコレーターのエイリアスです。`VModel` はサポート予定ですが、`Model`の使用を推奨します。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## オプション
+
+### name
+
+`v-model`プロパティにおける名前です。デフォルトは`modelValue`になります。
+
+[](./code-option-name.ts ':include :type=code typescript')
+
+### その他
+
+その他のオプションは`Prop` デコレーターと同様です。
+
+[](./code-option-others.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/property/code-usage.ts b/docs/ja/class-component/property/code-usage.ts
new file mode 100644
index 0000000..5f31a09
--- /dev/null
+++ b/docs/ja/class-component/property/code-usage.ts
@@ -0,0 +1,20 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    data(){
+        return {
+            property:'property value'
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    property = 'property value'
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/property/property.md b/docs/ja/class-component/property/property.md
new file mode 100644
index 0000000..9a6ff1d
--- /dev/null
+++ b/docs/ja/class-component/property/property.md
@@ -0,0 +1,7 @@
+## 使用方法
+
+クラスコンポーネントでは、Vue Option API の`data`をクラスのプロパティとして直接的に定義できます。このリポジトリが定義してあるプロパティを分析し`data`関数の戻り値に変換します。
+
+> プロパティはもちろんリアクティブです。
+
+[](./code-usage.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/provide/code-usage-base.ts b/docs/ja/class-component/provide/code-usage-base.ts
new file mode 100644
index 0000000..20577df
--- /dev/null
+++ b/docs/ja/class-component/provide/code-usage-base.ts
@@ -0,0 +1,13 @@
+import { Component, Vue, Provide, toNative } from 'vue-facing-decorator'
+
+@Component
+class MyComponent extends Vue {
+    @Provide
+    p1 = 'foo'
+
+    @Provide('alias')
+    p2 = 'bar'
+}
+
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/provide/provide.md b/docs/ja/class-component/provide/provide.md
new file mode 100644
index 0000000..60a919c
--- /dev/null
+++ b/docs/ja/class-component/provide/provide.md
@@ -0,0 +1,5 @@
+## 使用方法
+
+Vue の`Provide`と同様のコンセプトです。
+
+[](./code-usage-base.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/reference/code-usage.ts b/docs/ja/class-component/reference/code-usage.ts
new file mode 100644
index 0000000..7785ac1
--- /dev/null
+++ b/docs/ja/class-component/reference/code-usage.ts
@@ -0,0 +1,22 @@
+
+import { Ref, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+<template>
+    <div ref="refEl"></div>
+    <div ref="fooEl"></div>
+</template>
+
+*/
+
+@Component
+class MyComponent extends Vue {
+    @Ref
+    readonly refEl!: HTMLDivElement
+
+    @Ref('fooEl')
+    refEl2!: HTMLDivElement
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/reference/reference.md b/docs/ja/class-component/reference/reference.md
new file mode 100644
index 0000000..9bcf3b1
--- /dev/null
+++ b/docs/ja/class-component/reference/reference.md
@@ -0,0 +1,5 @@
+## 使用方法
+
+`Ref`デコレーターを使用して、Vue コンポーネントインスタンス上のゲッタープロパティ`this.$refs[name]`を定義できます。参照名はプロパティ名または、パラメータとして渡された名前になります。
+
+[](./code-usage.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/setup/code-usage-base.ts b/docs/ja/class-component/setup/code-usage-base.ts
new file mode 100644
index 0000000..fa310bc
--- /dev/null
+++ b/docs/ja/class-component/setup/code-usage-base.ts
@@ -0,0 +1,25 @@
+import { Component, Vue, Setup } from 'vue-facing-decorator'
+import { ref } from 'vue'
+import { useRouter, Router } from 'vue-router'
+
+@Component
+class MyComponent extends Vue {
+
+    @Setup((props, ctx) => useRouter())
+    router!: Router
+
+    mounted() {
+        console.log(this.router)
+    }
+}
+
+@Component
+class MyComponent2 extends Vue {
+
+    @Setup(() => ref('hello world'))
+    data!: string
+
+    mounted() {
+        console.log(this.data)
+    }
+}
\ No newline at end of file
diff --git a/docs/ja/class-component/setup/setup.md b/docs/ja/class-component/setup/setup.md
new file mode 100644
index 0000000..477b5e2
--- /dev/null
+++ b/docs/ja/class-component/setup/setup.md
@@ -0,0 +1,5 @@
+## 使用方法
+
+`Setup`デコレーターを使用して、コンポーネントクラスにプロパティとして[コンポーザブル](https://vuejs.org/guide/reusability/composables.html)を注入できます。
+
+[](./code-usage-base.ts ':include :type=code typescript')
diff --git a/docs/ja/class-component/watcher/code-option-deep.ts b/docs/ja/class-component/watcher/code-option-deep.ts
new file mode 100644
index 0000000..2bc5f90
--- /dev/null
+++ b/docs/ja/class-component/watcher/code-option-deep.ts
@@ -0,0 +1,37 @@
+
+import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    data(){
+        return {
+            property:"value"
+        }
+    }
+
+    watch:{
+        property:{
+            handler:function propertyWatcher(newValue: string, oldValue: string){
+
+            },
+            deep:true
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    property = "value"
+
+    @Watch("property", {
+        deep: true
+    })
+    propertyWatcher(newValue: string, oldValue: string) {
+
+    }
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/watcher/code-option-flush.ts b/docs/ja/class-component/watcher/code-option-flush.ts
new file mode 100644
index 0000000..6805b7a
--- /dev/null
+++ b/docs/ja/class-component/watcher/code-option-flush.ts
@@ -0,0 +1,37 @@
+
+import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    data(){
+        return {
+            property:"value"
+        }
+    }
+
+    watch:{
+        property:{
+            handler:function propertyWatcher(newValue: string, oldValue: string){
+
+            },
+            flush:"post"
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    property = "value"
+
+    @Watch("property", {
+        flush: "post"
+    })
+    propertyWatcher(newValue: string, oldValue: string) {
+
+    }
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/class-component/watcher/code-option-immediate.ts b/docs/ja/class-component/watcher/code-option-immediate.ts
new file mode 100644
index 0000000..98d7565
--- /dev/null
+++ b/docs/ja/class-component/watcher/code-option-immediate.ts
@@ -0,0 +1,37 @@
+
+import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    data(){
+        return {
+            property:"value"
+        }
+    }
+
+    watch:{
+        property:{
+            handler:function propertyWatcher(newValue: string, oldValue: string){
+
+            },
+            immediate:true
+        }
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    property = "value"
+
+    @Watch("property", {
+        immediate: true
+    })
+    propertyWatcher(newValue: string, oldValue: string) {
+
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/watcher/code-usage.ts b/docs/ja/class-component/watcher/code-usage.ts
new file mode 100644
index 0000000..5f79221
--- /dev/null
+++ b/docs/ja/class-component/watcher/code-usage.ts
@@ -0,0 +1,52 @@
+
+import { Watch, Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+
+Vue options API
+{
+    data(){
+        return {
+            property:"value"
+        }
+    }
+
+    watch:{
+        property:{
+            handler:function propertyWatcher(newValue: string, oldValue: string){
+
+            }
+        }
+        property2:[{
+            handler:function property2Watcher1(newValue: string, oldValue: string){
+
+            }
+        },{
+            handler:function property2Watcher2(newValue: string, oldValue: string){
+
+            }
+        }]
+    }
+}
+*/
+
+@Component
+class MyComponent extends Vue {
+    property = "value"
+
+    @Watch("property")
+    propertyWatcher(newValue: string, oldValue: string) {
+
+    }
+
+    @Watch("property2")
+    property2Watcher1(newValue: string, oldValue: string) {
+
+    }
+    @Watch("property2")
+    property2Watcher2(newValue: string, oldValue: string) {
+
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/class-component/watcher/watcher.md b/docs/ja/class-component/watcher/watcher.md
new file mode 100644
index 0000000..6194116
--- /dev/null
+++ b/docs/ja/class-component/watcher/watcher.md
@@ -0,0 +1,29 @@
+## 使用方法
+
+`Watch`デコレーターを使用して、Vue の`watch`に該当するウォッチャーを定義できます。
+
+最初のパラメータは監視対象の名前です。
+
+Vue の`watch`と同様に、ウォッチャーは 2 つのパラメーターを受け取ります。すなわち更新後の値と更新前の値です。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## オプション
+
+### deep
+
+Vue の`watch` における`deep`です。
+
+[](./code-option-deep.ts ':include :type=code typescript')
+
+### flush
+
+Vue の`watch` における`flush`です。
+
+[](./code-option-flush.ts ':include :type=code typescript')
+
+### immediate
+
+Vue の`watch` における`immediate`です。
+
+[](./code-option-immediate.ts ':include :type=code typescript')
diff --git a/docs/ja/compatibility/-deprecated- reflect-metadata/code-usage.ts b/docs/ja/compatibility/-deprecated- reflect-metadata/code-usage.ts
new file mode 100644
index 0000000..c4ffbf4
--- /dev/null
+++ b/docs/ja/compatibility/-deprecated- reflect-metadata/code-usage.ts	
@@ -0,0 +1,6 @@
+import {Component} from 'vue-facing-decorator/dist/index-return-cons'
+
+@Component
+export default class MyComp{
+    
+}
\ No newline at end of file
diff --git a/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-vue-config.js b/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-vue-config.js
new file mode 100644
index 0000000..4a1109e
--- /dev/null
+++ b/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-vue-config.js	
@@ -0,0 +1,7 @@
+module.exports = {
+    //...
+    chainWebpack: config => {
+        //...
+        config.resolve.alias.set('vue-facing-decorator', 'vue-facing-decorator/dist/index-return-cons')
+    }
+}
\ No newline at end of file
diff --git a/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-webpack-config.js b/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-webpack-config.js
new file mode 100644
index 0000000..83683a7
--- /dev/null
+++ b/docs/ja/compatibility/-deprecated- reflect-metadata/code-webpack-alias-webpack-config.js	
@@ -0,0 +1,11 @@
+module.exports = {
+    //...
+    resolve: {
+        //...
+        alias: {
+            //...
+            'vue-facing-decorator': 'vue-facing-decorator/dist/index-return-cons'
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/docs/ja/compatibility/-deprecated- reflect-metadata/reflect-metadata.md b/docs/ja/compatibility/-deprecated- reflect-metadata/reflect-metadata.md
new file mode 100644
index 0000000..3da0c2c
--- /dev/null
+++ b/docs/ja/compatibility/-deprecated- reflect-metadata/reflect-metadata.md	
@@ -0,0 +1,15 @@
+## Usage
+
+To work with `reflect-metadata`, we should use `vue-facing-decorator/dist/index-return-cons` instead of `vue-facing-decorator` in code.
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## Webpack `alias`
+
+In `webpack.config.js`.
+
+[](./code-webpack-alias-webpack-config.js ':include :type=code typescript')
+
+Or in `vue.config.js`.
+
+[](./code-webpack-alias-vue-config.js ':include :type=code typescript')
\ No newline at end of file
diff --git a/docs/ja/custom/code-usage.ts b/docs/ja/custom/code-usage.ts
new file mode 100644
index 0000000..bed008d
--- /dev/null
+++ b/docs/ja/custom/code-usage.ts
@@ -0,0 +1,25 @@
+import { createDecorator, Component, Vue, toNative } from 'vue-facing-decorator'
+
+function Log(prefix: string) {
+    return createDecorator(function (options, key) {
+        const old = options.methods?.[key]
+        if (!old) {
+            throw 'not found'
+        }
+        options.methods[key] = function (...args: any[]) {
+            old.apply(this, args)
+        }
+    }, {
+        preserve: true
+    })
+}
+
+@Component
+class Comp extends Vue {
+    @Log('prefix')
+    method() {
+
+    }
+}
+
+export default toNative(Comp)
\ No newline at end of file
diff --git a/docs/ja/custom/custom.md b/docs/ja/custom/custom.md
new file mode 100644
index 0000000..e62dffa
--- /dev/null
+++ b/docs/ja/custom/custom.md
@@ -0,0 +1,24 @@
+## 使用方法
+
+`createDecorator`を使用して、独自のデコレーターを作成できます。
+
+パッケージ作成者の場合、 vue-facing-decorator を`devDependencies`としてインストール後、`peerDependencies`に追加してください。
+
+`createDecorator`は以下の 2 つのパラメーターを含む関数がパラメーターになります。
+
+1. 生成される Vue オプションコンポーネントです。自由に実装の変更ができます。
+2. デコレート予定のクラスプロパティ/メソッドのキー
+
+加えてオプションのオブジェクトを設定することができます。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+## オプション
+
+### `preserve`
+
+`preserve`オプションはデコレートした値をデコレーションの適応以前に保持するかどうかを指定します。
+
+[](./code-usage.ts ':include :type=code typescript')
+
+上記のコードで`preserve`が`false`の場合、`methods`にある`method`にはアクセスはできません。
diff --git a/docs/ja/inheritance/complex-example/code-example.ts b/docs/ja/inheritance/complex-example/code-example.ts
new file mode 100644
index 0000000..74e49b2
--- /dev/null
+++ b/docs/ja/inheritance/complex-example/code-example.ts
@@ -0,0 +1,38 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { defineComponent } from 'vue'
+
+const VueNativeComponent = defineComponent({
+    name: 'VueNativeComponent',
+})
+
+class SuperCompSuper extends Vue {
+
+}
+
+@Component
+class SuperComp extends SuperCompSuper {
+
+}
+
+class CompSuper extends SuperComp {
+
+}
+
+@Component({
+    mixins: [VueNativeComponent]
+})
+class Comp extends CompSuper {
+
+}
+
+export default toNative(Comp)
+
+/*
+Vue options API
+{//this is Comp
+    extends:{//this is SuperComp
+
+    },
+    mixins:[VueNativeComponent]
+}
+*/
\ No newline at end of file
diff --git a/docs/ja/inheritance/complex-example/complex-example.md b/docs/ja/inheritance/complex-example/complex-example.md
new file mode 100644
index 0000000..560f6b8
--- /dev/null
+++ b/docs/ja/inheritance/complex-example/complex-example.md
@@ -0,0 +1,17 @@
+## 例
+
+以下のコードをご覧ください。
+
+[](./code-example.ts ':include :type=code typescript')
+
+`Comp`(`CompSper`を含みます。), `SuperComp`(`SuperCompSuper`を含みます。) 、`VueNativeComponent`の 3 つのコンポーネントがあります。
+
+継承関係は以下の通りです。
+
+```
+(Comp ECMAScript extends CompSuper)
+    vue mixins [VueNativeComponent]
+        vue extends (SuperComp ECMAScript extends SuperCompSuper)
+```
+
+Vue の実装の影響で、`VueNativeComponent`(`mixins`を使います。)は`SuperComp`(Vue の`extends`を使います。)を上書きします。
diff --git a/docs/ja/inheritance/component/code-example.ts b/docs/ja/inheritance/component/code-example.ts
new file mode 100644
index 0000000..f368dbd
--- /dev/null
+++ b/docs/ja/inheritance/component/code-example.ts
@@ -0,0 +1,27 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:"MyComponent"
+    extends:{
+        name:"SuperComponent"
+    }
+}
+*/
+@Component({
+    name: "SuperComponent"
+})
+class SuperComponent extends Vue {
+
+}
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends SuperComponent {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/inheritance/component/code-mixins-function.ts b/docs/ja/inheritance/component/code-mixins-function.ts
new file mode 100644
index 0000000..b8718e7
--- /dev/null
+++ b/docs/ja/inheritance/component/code-mixins-function.ts
@@ -0,0 +1,37 @@
+import { Component, Vue, mixins, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    name:"MyComponent",
+    extends:{
+        mixins:[{
+            name:'ComponentA'
+        },{
+            name:'ComponentB'
+        }]
+    }
+}
+*/
+@Component({
+    name: "ComponentA"
+})
+class ComponentA extends Vue {
+
+}
+
+@Component({
+    name: "ComponentB"
+})
+class ComponentB extends Vue {
+
+}
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends mixins(ComponentA, ComponentB) {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/inheritance/component/code-native.ts b/docs/ja/inheritance/component/code-native.ts
new file mode 100644
index 0000000..a16bb5d
--- /dev/null
+++ b/docs/ja/inheritance/component/code-native.ts
@@ -0,0 +1,39 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { defineComponent } from 'vue'
+
+const VueNativeComponent = defineComponent({
+    name: 'VueNativeComponent',
+    methods: {
+        nativeMethod() {
+        }
+    }
+})
+
+/*
+Vue options API
+{
+    name:"MyComponent"
+    mixins:[VueNativeComponent]
+}
+*/
+
+interface VueNativeComponentContext {
+    nativeMethod: () => void
+}
+
+@Component({
+    name: "MyComponent",
+    mixins: [VueNativeComponent]
+})
+class MyComponent extends Vue {
+    get VueNativeComponentContext(): VueNativeComponentContext {
+        return this as any
+    }
+
+    mounted() {
+        this.VueNativeComponentContext.nativeMethod()
+    }
+}
+
+export default toNative(MyComponent)
diff --git a/docs/ja/inheritance/component/component.md b/docs/ja/inheritance/component/component.md
new file mode 100644
index 0000000..73b6650
--- /dev/null
+++ b/docs/ja/inheritance/component/component.md
@@ -0,0 +1,29 @@
+## 使用方法
+
+`vue-facing-decorator`が作成するコンポーネント間では継承をすることができます。
+
+以下のコードをご覧ください。
+
+[](./code-example.ts ':include :type=code typescript')
+
+Vue の`extends`によって、`MyComponent` は `SuperComponent`を継承しています。
+
+## コンポーネントの多重継承
+
+`mixins`関数を使用して、多重継承ができます。
+
+[](./code-mixins-function.ts ':include :type=code typescript')
+
+## Vue ネイティブコンポーネント向け
+
+`mixins`を使用して、Vue ネイティブコンポーネントをマージします。
+
+以下のコードをご覧ください。
+
+[](./code-native.ts ':include :type=code typescript')
+
+Vue Option API によって定義された`VueNativeComponent`は`MyComponent`の mixin に使用されています。
+
+`VueNativeComponent` の型情報は失われますので、`VueNativeComponentContext`という型でコンテクストを作成する必要があります。
+
+> `mixins` および、 `extends`の実装は[こちら](https://vuejs.org/api/options-composition.html#extends)からご覧ください。
diff --git a/docs/ja/inheritance/es-class/code-example.ts b/docs/ja/inheritance/es-class/code-example.ts
new file mode 100644
index 0000000..25ba4c3
--- /dev/null
+++ b/docs/ja/inheritance/es-class/code-example.ts
@@ -0,0 +1,59 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+/*
+Vue options API
+{
+    data(){
+        return {
+            propertyA:'from Super',
+            propertyB:'from MyComponent',
+            property:'from MyComponent'
+        }
+    },
+    methods:{
+        methodA() {
+            console.log('from Super')
+        },
+        methodB() {
+            console.log('from MyComponent')
+        },
+        methodC() {
+            super.methodC()
+            console.log('from MyComponent')
+        }
+    }
+}
+*/
+
+class Super extends Vue {
+    propertyA = 'from Super'
+
+    property = 'from Super'
+
+    methodA() {
+        console.log('from Super')
+    }
+
+    methodC() {
+        console.log('from Super')
+    }
+}
+
+@Component
+class MyComponent extends Super {
+    propertyB = 'from MyComponent'
+
+    property = 'from MyComponent'
+
+    methodB() {
+        console.log('from MyComponent')
+    }
+
+    methodC() {
+        super.methodC()
+        console.log('from MyComponent')
+    }
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/inheritance/es-class/es-class.md b/docs/ja/inheritance/es-class/es-class.md
new file mode 100644
index 0000000..9dea511
--- /dev/null
+++ b/docs/ja/inheritance/es-class/es-class.md
@@ -0,0 +1,11 @@
+## 使用方法
+
+ECMAScript のクラス継承は疑似的に Vue コンポーネントへと変換されます。
+
+以下のコードをご覧ください。
+
+[](./code-example.ts ':include :type=code typescript')
+
+`MyComponent`クラスと`Super`クラスがマージされ、1 つの Vue コンポーネントのみ生成されます。
+
+> `Component`デコレーターがない場合、いかなるデコレーターもクラス内で使用することができません。例)`Super`クラス
diff --git a/docs/ja/migrate-from-v2/breaking-changes-classProperty.ts b/docs/ja/migrate-from-v2/breaking-changes-classProperty.ts
new file mode 100644
index 0000000..83a9677
--- /dev/null
+++ b/docs/ja/migrate-from-v2/breaking-changes-classProperty.ts
@@ -0,0 +1,17 @@
+
+import { Component, Vue, toNative, Prop } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+    @Prop
+    prop!: string
+
+    field = this.prop // this is deprecated, it will be undefined
+}
+
+
+export default toNative(MyComponent)
+
+export { MyComponent }
\ No newline at end of file
diff --git a/docs/ja/migrate-from-v2/breaking-changes-toNative.ts b/docs/ja/migrate-from-v2/breaking-changes-toNative.ts
new file mode 100644
index 0000000..aa702f2
--- /dev/null
+++ b/docs/ja/migrate-from-v2/breaking-changes-toNative.ts
@@ -0,0 +1,50 @@
+
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+
+@Component({
+    name: "MyComponent"
+})
+class MyComponent extends Vue {
+
+}
+
+/*
+Cast to vue options API by toNative
+{
+    name:"MyComponent"
+}
+*/
+
+export default toNative(MyComponent)
+
+export { MyComponent }
+
+/*
+import MyComponent from 'MyComponent.vue'
+
+@Component({
+    components:[MyComponent] // use it as a component of another component
+})
+
+
+//or
+
+
+import { createApp } from 'vue'
+import MyComponent from 'MyComponent.vue'
+
+createApp(MyComponent).mount('#root') // or other places which vue want an options API component
+*/
+
+/*
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+import { MyComponent } from 'MyComponent.vue'
+
+// Extends component constructor directly
+
+@Component
+class AnotherComponent extends MyComponent {
+
+}
+
+*/
\ No newline at end of file
diff --git a/docs/ja/migrate-from-v2/migrate-from-v2.md b/docs/ja/migrate-from-v2/migrate-from-v2.md
new file mode 100644
index 0000000..b221cef
--- /dev/null
+++ b/docs/ja/migrate-from-v2/migrate-from-v2.md
@@ -0,0 +1,23 @@
+## v2 からのマイグレーション
+
+v2 からのマイグレーションを行うにはプロジェクト内のいくつかの依存性に関わる変更が必要です。
+
+3.x において、`Component`デコレーターは`ComponentBase`と同じものになります。そのためクラスコンポーネントを Vue Option API に手動でキャストしなければいけません。詳細は Breaking changes セクションをご覧ください。
+
+## Breaking changes
+
+### クラスコンポーネントから Vue Option API のキャスト
+
+クラスコンポーネントから Vue Option API のキャストには`toNative`の使用を推奨しています。変換されたコンポーネントはネイティブ Vue が利用できる環境下であるならば、 Vue コンポーネントとして利用できます。
+
+[](./breaking-changes-toNative.ts ':include :type=code typescript')
+
+### コンストラクタ内での他プロパティに依存するクラスプロパティの初期化の廃止
+
+現在、こちらは廃止されています。
+
+[](./breaking-changes-classProperty.ts ':include :type=code typescript')
+
+### `index-return-cons`の削除
+
+`toNative` を使用すれば`vue-facing-decorator/dist/index-return-cons`は不要ですので削除してださい。
diff --git a/docs/ja/quick-start/code-how-to-use-sfc.vue b/docs/ja/quick-start/code-how-to-use-sfc.vue
new file mode 100644
index 0000000..4c902c6
--- /dev/null
+++ b/docs/ja/quick-start/code-how-to-use-sfc.vue
@@ -0,0 +1,20 @@
+<template>
+  <div></div>
+</template>
+<script lang="ts">
+// DO NOT USE <script setup>
+
+//vue options API.
+/*
+import { defineComponent } from "vue";
+export default defineComponent({});
+*/
+
+//class component
+import { Component, Vue, toNative } from "vue-facing-decorator";
+@Component
+class MyComponent extends Vue {}
+export default toNative(MyComponent)
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-how-to-use-simplest-class-component.ts b/docs/ja/quick-start/code-how-to-use-simplest-class-component.ts
new file mode 100644
index 0000000..2ae0601
--- /dev/null
+++ b/docs/ja/quick-start/code-how-to-use-simplest-class-component.ts
@@ -0,0 +1,7 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+@Component
+class MyComponent extends Vue {
+
+}
+
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-separated-files-tsx/Comp.render.tsx b/docs/ja/quick-start/code-separated-files-tsx/Comp.render.tsx
new file mode 100644
index 0000000..97de1ce
--- /dev/null
+++ b/docs/ja/quick-start/code-separated-files-tsx/Comp.render.tsx
@@ -0,0 +1,8 @@
+//Comp.render.tsx
+import type Comp from './Comp'
+import Style from './style.css'
+export default function render(this: Comp) {
+    return <div class={Style.root} onClick={this.onClick}>
+        {this.counter}
+    </div>
+}
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-separated-files-tsx/Comp.ts b/docs/ja/quick-start/code-separated-files-tsx/Comp.ts
new file mode 100644
index 0000000..9c07e32
--- /dev/null
+++ b/docs/ja/quick-start/code-separated-files-tsx/Comp.ts
@@ -0,0 +1,16 @@
+//Comp.ts
+import { Component, Base, toNative } from 'vue-facing-decorator'
+import render from './Comp.render'
+
+@Component({
+    render
+})
+class Comp extends Base {
+    counter = 1
+
+    onClick() {
+        this.counter++
+    }
+}
+
+toNative(Comp)
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-separated-files-tsx/style.css b/docs/ja/quick-start/code-separated-files-tsx/style.css
new file mode 100644
index 0000000..e2ab922
--- /dev/null
+++ b/docs/ja/quick-start/code-separated-files-tsx/style.css
@@ -0,0 +1,4 @@
+/* style.css */
+.root{
+    background-color: red;
+}
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-use-toNative.ts b/docs/ja/quick-start/code-use-toNative.ts
new file mode 100644
index 0000000..509b95b
--- /dev/null
+++ b/docs/ja/quick-start/code-use-toNative.ts
@@ -0,0 +1,11 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+@Component
+class MyComponent extends Vue {
+
+}
+
+const nativeVueComponent = toNative(MyComponent)
+
+import { createApp } from 'vue'
+
+createApp(nativeVueComponent)
\ No newline at end of file
diff --git a/docs/ja/quick-start/code-what-it-is-example.ts b/docs/ja/quick-start/code-what-it-is-example.ts
new file mode 100644
index 0000000..40b8957
--- /dev/null
+++ b/docs/ja/quick-start/code-what-it-is-example.ts
@@ -0,0 +1,20 @@
+import { Component, Vue, toNative } from 'vue-facing-decorator'
+@Component
+class MyComponent extends Vue {
+
+    //This is a vue reactive property.
+    text = 'Example code'
+
+    //This is a vue component method.
+    method() {
+        console.log(this.text)
+    }
+
+    //This is a vue component lifecycle hook.
+    mounted() {
+        this.method()
+    }
+}
+
+//Transform class component to vue native component
+export default toNative(MyComponent)
\ No newline at end of file
diff --git a/docs/ja/quick-start/quick-start.md b/docs/ja/quick-start/quick-start.md
new file mode 100644
index 0000000..bf63468
--- /dev/null
+++ b/docs/ja/quick-start/quick-start.md
@@ -0,0 +1,151 @@
+## イントロダクション
+
+`vue-facing-decorator` は TypeScript のデコレーターと、オブジェクト指向プログラミングによる Vue コンポーネントの作成を提供します。
+
+例:
+
+[](./code-what-it-is-example.ts ':include :type=code typescript')
+
+## インストール
+
+### TypeScript プロジェクト
+
+任意のパッケージマネージャーで`vue-facing-decorator`をインストールしてください。
+
+```
+npm install --save vue-facing-decorator
+```
+
+プロジェクトのルートディレクトリにある`tsconfig.json`の`experimentalDecorators`を有効にしてください。
+
+```json
+{
+    "compilerOptions": {
+        "experimentalDecorators": true
+    }
+}
+```
+
+### JavaScript プロジェクト
+
+#### Vite
+
+1.  必要な依存パッケージをインストールしてください。
+
+    ```shell
+    npm install @haixing_hu/vue3-class-component
+    npm install @babel/core @babel/runtime @babel/preset-env
+    npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
+    ```
+
+2.  [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は`babelrc.json`であることが多く、以下のような内容です。
+
+    ```json
+    {
+        "presets": [["@babel/preset-env", { "modules": false }]],
+        "plugins": [
+            "@babel/plugin-transform-runtime",
+            ["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
+            "@babel/plugin-transform-class-properties"
+        ]
+    }
+    ```
+
+    **Note:** [vite]が含まれている場合, 必ず`@babel/preset-env`の`modules` パラメーターを`false`に設定してください。
+
+3.  [Babel]を利用するため、`vite.config.js`で[vite]を設定してください。設定ファイル名は `vite.config.js` であることが多く、以下のような内容です。
+
+    ```js
+    import { fileURLToPath, URL } from 'node:url';
+    import { defineConfig } from 'vite';
+    import vue from '@vitejs/plugin-vue';
+    import * as babel from '@babel/core';
+
+    // A very simple Vite plugin support babel transpilation
+    const babelPlugin = {
+        name: 'plugin-babel',
+        transform: (src, id) => {
+            if (/\.(jsx?|vue)$/.test(id)) {
+                // the pattern of the file to handle
+                return babel.transform(src, {
+                    filename: id,
+                    babelrc: true,
+                });
+            }
+        },
+    };
+
+    // https://vitejs.dev/config/
+    export default defineConfig({
+        plugins: [
+            vue({
+                script: {
+                    babelParserPlugins: ['decorators'], // must enable decorators support
+                },
+            }),
+            babelPlugin, // must be after the vue plugin
+        ],
+        resolve: {
+            alias: {
+                '@': fileURLToPath(new URL('./src', import.meta.url)),
+            },
+        },
+    });
+    ```
+
+#### Webpack
+
+1.  必要な依存パッケージをインストールしてください。
+
+    ```shell
+    npm install @haixing_hu/vue3-class-component
+    npm install @babel/core @babel/runtime @babel/preset-env
+    npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties @babel/plugin-transform-runtime
+    ```
+
+2.  [@babel/plugin-transform-class-properties]および、[@babel/plugin-proposal-decorators]プラグインを使用して、[Babel] を設定してください。[Babel]の設定ファイル名は`babelrc.json`であることが多く、以下のような内容です。
+
+    ```json
+    {
+        "presets": ["@babel/preset-env"],
+        "plugins": [
+            "@babel/plugin-transform-runtime",
+            ["@babel/plugin-proposal-decorators", { "version": "2023-05" }],
+            "@babel/plugin-transform-class-properties"
+        ]
+    }
+    ```
+
+## 使用方法
+
+### クラスコンポーネントの定義
+
+最も単純なクラスコンポーネントの作成には`Vue`ベースクラスを継承しなくてはいけません。加えて、このリポジトリからインポートした`Component` でデコレートする必要があります。
+
+[](./code-how-to-use-simplest-class-component.ts ':include :type=code typescript')
+
+### 単一ファイルコンポーネント
+
+単一ファイルコンポーネント(`.vue`ファイル)でよく見られる `defineComponent` Vue Option API はクラスコンポーネントで書かれるべきです。
+
+[](./code-how-to-use-sfc.vue ':include :type=code text')
+
+> Composition API 構文 `<script setup lang="ts">`を使用しないでください。
+
+### TSX との分割
+
+単一ファイルコンポーネントを使う以外にも他の選択肢があります。`.ts` ファイルでコンポーネントの定義を行い、`.tsx` ファイルからテンプレートをインポートする方法です。
+
+> webpack loaders でスタイルを効果的に編集しましょう。
+
+[](./code-separated-files-tsx/Comp.render.tsx ':include :type=code tsx')
+
+[](./code-separated-files-tsx/Comp.ts ':include :type=code typescript')
+
+[](./code-separated-files-tsx/style.css ':include :type=code css')
+
+### `toNative`の使用
+
+Vue はクラスコンポーネントを直接扱うことはできません。クラスコンポーネントをネイティブな Vue Option API へ変換するためには`toNative`を使用してください。その後、`toNative`で得られた結果は Vanilla Vue API へ渡さなければいけません。
+
+[](./code-use-toNative.ts ':include :type=code typescript')
diff --git a/docs/ja/readme.md b/docs/ja/readme.md
new file mode 100644
index 0000000..8957c1b
--- /dev/null
+++ b/docs/ja/readme.md
@@ -0,0 +1,40 @@
+# インフォメーション
+
+![GitHub](https://img.shields.io/github/license/facing-dev/vue-facing-decorator) ![npm](https://img.shields.io/npm/v/vue-facing-decorator) ![npm peer dependency version (scoped)](https://img.shields.io/npm/dependency-version/vue-facing-decorator/peer/vue) ![lts](https://img.shields.io/badge/LTS-prepared-blue)
+
+`vue-facing-decorator`は Vue 3 向けに設計され、クラス内に Vue コンポーネントを記述することができます。
+
+TypeScript とデコレーターで動作します。
+
+-   TypeScript のデコレーターを使用して Vue クラスコンポーネントを作成します。
+-   Stage2、および Stage3 の両デコレーターで使用できます。
+-   TypeScript、JavaScript の両プロジェクトで使用できます。
+-   安全性: 指定に応じて、ES クラスを Vue Options API へと変換します。
+-   パフォーマンス: 一度プロジェクトにロードしてしまえば、どこでも利用できます。
+-   ES のクラス継承に加え、Vue の`extends`、`mixins`に対応しています。
+-   [詳細はこちら](https://class-component.vuejs.org)
+
+[](./quick-start/code-what-it-is-example.ts ':include :type=code typescript')
+
+[vue-class-component](https://github.com/vuejs/vue-class-component)および、[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)はいずれも Deprecated です。ご所望の場合はリンクからお試し下さい。
+
+ご提案、ご寄付をお待ちしております。
+
+[クイックスタート > ](/ja/quick-start/quick-start.md)
+
+# ディスカッション
+
+[Discord への入場はこちら https://discord.gg/4exxtFgkcz](https://discord.gg/4exxtFgkcz)
+
+# ドキュメントの翻訳
+
+ドキュメントの翻訳をご希望の場合は以下の手順に従ってください。
+
+1. このリポジトリをフォーク、クローン
+2. cd repo/docs
+3. npm install -g http-server
+4. http-server
+
+その後、ターミナルに表示される URL からドキュメントのサイトにアクセスできます。`en`ディレクトリを修正しプルリクエストを作成してください。
+
+ご協力ありがとうございます。:)
diff --git a/docs/ja/stage3-decorators/stage3-decorators.md b/docs/ja/stage3-decorators/stage3-decorators.md
new file mode 100644
index 0000000..8d3f791
--- /dev/null
+++ b/docs/ja/stage3-decorators/stage3-decorators.md
@@ -0,0 +1,17 @@
+## Stage3 デコレーター
+
+`vue-facing-decorator`と Stage3 デコレーターは互換性がありますが、サードパーティーライブラリの中では Stage3 デコレーターをサポートしていないものもあります。例えば、typescript コードを`.vue`ファイルにコンパイルする`esbuild`などです。
+
+既存のプロジェクトでは Stage2 デコレーターの使用を継続することを推奨します。ただし、新規プロジェクトで Stage3 を使用したい場合はこのドキュメントの内容を参考にしてください。
+
+## 設定
+
+Stage3 のデコレーターを有効化するためには以下の手順に従ってください。
+
+1. `typescript` をバージョン 5 にアップデートします。
+
+2. Stage3 のデコレーターを有効にするには、`compilerOptions.experimentalDecorators` を `false`に設定します。
+
+## 重要
+
+クラスコンポーネントを Vue Option API に即時変換するために`toNative`を使用しなければいけません。
diff --git a/docs/ja/tsx/attribute-types/attribute-types.md b/docs/ja/tsx/attribute-types/attribute-types.md
new file mode 100644
index 0000000..77339e5
--- /dev/null
+++ b/docs/ja/tsx/attribute-types/attribute-types.md
@@ -0,0 +1,31 @@
+## 使用方法
+
+TSX アトリビュートタイプを有効化するために:
+
+1. `TSX`関数をこのリポジトリからインポートしてください。
+
+2. コンポーネント内のプロパティを詳述するためのインタフェースを定義してください。例) `Props`
+
+3. コンポーネント内のイベントを詳述するためのインタフェースを定義してください。例) `Events`
+
+4. `TSX<Props,Events>()(BaseComponent)`を継承したコンポーネントを作成してください。
+
+> `Events`は頭文字が大文字になり、先頭に`on`が付与されます。例) `myEvent` => `onMyEvent`
+
+> `Events`の値が非関数型の場合、自動的に関数型に変換されます。変換された関数の定義は`Events`の値のデータ型のパラメーターを 1 つ受け取り、戻り値は`any`になります。例)`{myEvent:string}` => `{myEvent:(param:string)=>any}`
+
+> `TSX<Props, Events>`の後ろには`()`が必要です。
+
+[](./code-usage.tsx ':include :type=code tsx')
+
+## コンポーネントのプロパティの型チェック
+
+プロパティが`implements`によって実装されている場合、チェック可能です。
+
+[](./code-type-checking.tsx ':include :type=code tsx')
+
+## コンポーネントの継承
+
+TSX アトリビュート はコンポーネントの継承をサポートしています。
+
+[](./code-component-inheritance.tsx ':include :type=code tsx')
diff --git a/docs/ja/tsx/attribute-types/code-component-inheritance.tsx b/docs/ja/tsx/attribute-types/code-component-inheritance.tsx
new file mode 100644
index 0000000..4c3d2e3
--- /dev/null
+++ b/docs/ja/tsx/attribute-types/code-component-inheritance.tsx
@@ -0,0 +1,47 @@
+import { TSX, Prop, Emit, Component, Vue, toNative } from 'vue-facing-decorator'
+
+interface BaseProps {
+    propNumber: number
+}
+
+interface BaseEvents {
+    baseEvent: Function
+}
+
+@Component
+class MyBaseComponent extends TSX<BaseProps, BaseEvents>()(Vue) implements BaseProps {
+    @Prop({
+        required: true
+    })
+    propNumber!: number
+    @Emit('baseEvent')
+    triggerBaseEvent() {
+        return 'baseEvent value'
+    }
+}
+
+interface Props {
+    propString: string
+}
+
+interface Events {
+    event: Function
+}
+
+@Component
+class MyComponent extends TSX<Props, Events>()(MyBaseComponent) implements Props {
+    @Prop({
+        required: true
+    })
+    propString!: string
+    @Emit('event')
+    triggerEvent() {
+        return 'event value'
+    }
+}
+
+const Comp = toNative(MyComponent)
+
+function render() {
+    return <Comp propString='foobar' propNumber={1} onBaseEvent={() => { }} onEvent={() => { }}></Comp>
+}
diff --git a/docs/ja/tsx/attribute-types/code-type-checking.tsx b/docs/ja/tsx/attribute-types/code-type-checking.tsx
new file mode 100644
index 0000000..2289c22
--- /dev/null
+++ b/docs/ja/tsx/attribute-types/code-type-checking.tsx
@@ -0,0 +1,19 @@
+import { TSX, Prop, Component, Vue, toNative } from 'vue-facing-decorator'
+
+interface Props {
+    propString: string
+}
+
+@Component
+export default class MyComponent extends TSX<Props>()(Vue) implements Props {
+    @Prop({
+        required: true
+    })
+    propString!: string
+}
+
+const Comp = toNative(MyComponent)
+
+function render() {
+    return <Comp propString='foobar'></Comp>
+}
diff --git a/docs/ja/tsx/attribute-types/code-usage.tsx b/docs/ja/tsx/attribute-types/code-usage.tsx
new file mode 100644
index 0000000..a822959
--- /dev/null
+++ b/docs/ja/tsx/attribute-types/code-usage.tsx
@@ -0,0 +1,33 @@
+import { TSX, Prop, Emit, Component, Vue, toNative } from 'vue-facing-decorator'
+
+interface Props {
+    propString: string
+}
+
+interface Events {
+    myEvent: Function
+    myEvent2: string
+}
+
+@Component
+class MyComponent extends TSX<Props, Events>()(Vue) {
+    @Prop({
+        required: true
+    })
+    propString!: string
+    @Emit('myEvent')
+    triggerMyEvent() {
+        return 'event value'
+    }
+    @Emit('myEvent2')
+    triggerMyEvent2() {
+        return 'event2 value'
+    }
+}
+
+const Comp = toNative(MyComponent)
+
+//TypeScript will check component attributes in TSX.
+function render() {
+    return <Comp propString='foobar' onMyEvent={(v: string) => { }} onMyEvent2={(v: string) => { }}></Comp>
+}
diff --git a/docs/ja/tsx/tsx-render/tsx-render.md b/docs/ja/tsx/tsx-render/tsx-render.md
new file mode 100644
index 0000000..415aaa4
--- /dev/null
+++ b/docs/ja/tsx/tsx-render/tsx-render.md
@@ -0,0 +1,4 @@
+## 使用方法
+
+こちらの[セッション](/ja/quick-start/quick-start?id=in-separated-files-with-tsx)
+を参考にしてください。
diff --git a/docs/pt-br/_navbar.md b/docs/pt-br/_navbar.md
index 8068c1e..3678647 100644
--- a/docs/pt-br/_navbar.md
+++ b/docs/pt-br/_navbar.md
@@ -1,3 +1,4 @@
 - [Inglês](/en/readme.md)
 - [Chinês](/zh-cn/readme.md)
-- [Português](/pt-br/readme.md)
\ No newline at end of file
+- [Português](/pt-br/readme.md)
+- [Japonês](/ja/readme.md)
\ No newline at end of file
diff --git a/docs/zh-cn/_navbar.md b/docs/zh-cn/_navbar.md
index 7339bd9..1f23c7b 100644
--- a/docs/zh-cn/_navbar.md
+++ b/docs/zh-cn/_navbar.md
@@ -1,3 +1,4 @@
-- [English](/)
-- [简体中文](/zh-cn/)
-- [Portuguese](/pt-br/readme.md)
\ No newline at end of file
+-   [English](/)
+-   [简体中文](/zh-cn/)
+-   [Portuguese](/pt-br/readme.md)
+-   [Japanese](/ja/readme.md)