Skip to content

Commit ec35e4f

Browse files
l-luminl-lumin
authored
feat: Improve documentation in Japanese README.md file (#3650)
1 parent 5b927f1 commit ec35e4f

File tree

1 file changed

+41
-40
lines changed

1 file changed

+41
-40
lines changed

‎docs/ja/README.md

Lines changed: 41 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88

99
<hr>
1010

11-
### **✨ 即時デプロイが可能な、Pure Pythonで作ったパフォーマンスと汎用性が高いWebアプリケーション✨**
11+
### **✨ 即時デプロイが可能な、Pure Python で作ったパフォーマンスと汎用性が高い Web アプリケーション ✨**
12+
1213
[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
1314
![tests](https://github.com/pynecone-io/pynecone/actions/workflows/integration.yml/badge.svg)
1415
![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
1516
[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
1617
[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
18+
1719
</div>
1820

1921
---
@@ -24,26 +26,27 @@
2426

2527
# Reflex
2628

27-
ReflexはPythonのみでフルスタックWebアプリケーションを作成できるライブラリです。
29+
Reflex は Python のみでフルスタック Web アプリケーションを作成できるライブラリです。
2830

2931
主な特徴:
30-
* **Pure Python** - WebアプリケーションのフロントエンドとバックエンドをPythonのみで実装できるため、Javascriptを学ぶ必要がありません。
31-
* **高い柔軟性** - Reflexは簡単に始められて、複雑なアプリケーションまで作成できます。
32-
* **即時デプロイ** - ビルド後、すぐにデプロイが可能です。[単純なCLIコマンド](https://reflex.dev/docs/hosting/deploy-quick-start/)を使ったアプリケーションのデプロイや、自身のサーバーへのホストができます。
3332

34-
Reflexがどのように動作しているかを知るには、[アーキテクチャページ](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)をご覧ください。
33+
- **Pure Python** - Web アプリケーションのフロントエンドとバックエンドを Python のみで実装できるため、Javascript を学ぶ必要がありません。
34+
- **高い柔軟性** - Reflex は簡単に始められて、複雑なアプリケーションまで作成できます。
35+
- **即時デプロイ** - ビルド後、すぐにデプロイが可能です。[単純な CLI コマンド](https://reflex.dev/docs/hosting/deploy-quick-start/)を使ったアプリケーションのデプロイや、自身のサーバーへのホストができます。
36+
37+
Reflex がどのように動作しているかを知るには、[アーキテクチャページ](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture)をご覧ください。
3538

3639
## ⚙️ インストール
3740

38-
ターミナルを開いて以下のコマンドを実行してください。（Python 3.8以上が必要です。）:
41+
ターミナルを開いて以下のコマンドを実行してください。（Python 3.8 以上が必要です。）:
3942

4043
```bash
4144
pip install reflex
4245
```
4346

4447
## 🥳 最初のアプリケーションを作ろう
4548

46-
`reflex`をインストールすると、`reflex`のCLIツールが自動でインストールされます。
49+
`reflex`をインストールすると、`reflex`の CLI ツールが自動でインストールされます。
4750

4851
新しいプロジェクトを作成して、インストールが成功しているかを確認しましょう。（`my_app_name`を自身のプロジェクト名に書き換えて実行ください。）:
4952

@@ -63,11 +66,11 @@ reflex run
6366

6467
http://localhost:3000 にアクセスしてアプリの動作を見ることができます。
6568

66-
`my_app_name/my_app_name.py`のソースコードを編集してみましょう！Reflexはfast refreshなので、ソースを保存した直後に変更がWebページに反映されます。
69+
`my_app_name/my_app_name.py`のソースコードを編集してみましょう！Reflex は fast refresh なので、ソースを保存した直後に変更が Web ページに反映されます。
6770

6871
## 🫧 実装例
6972

70-
実装例を見てみましょう: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node)を中心とした画像生成UIを作成しました。説明を簡単にするためにここでは[OpenAI API](https://platform.openai.com/docs/api-reference/authentication)を呼んでいますが、ローカルで動作している機械学習モデルに置き換えることも可能です。
73+
実装例を見てみましょう: [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node)を中心とした画像生成 UI を作成しました。説明を簡単にするためにここでは[OpenAI API](https://platform.openai.com/docs/api-reference/authentication)を呼んでいますが、ローカルで動作している機械学習モデルに置き換えることも可能です。
7174

7275
&nbsp;
7376

@@ -77,7 +80,7 @@ http://localhost:3000 にアクセスしてアプリの動作を見ることが
7780

7881
&nbsp;
7982

80-
画像生成UIのソースコードの全貌を見てみましょう。下記のように、単一のPythonファイルで作れます！
83+
画像生成 UI のソースコードの全貌を見てみましょう。下記のように、単一の Python ファイルで作れます！
8184

8285
```python
8386
import reflex as rx
@@ -117,14 +120,15 @@ def index():
117120
on_blur=State.set_prompt,
118121
width="25em",
119122
),
120-
rx.button("Generate Image", on_click=State.get_image, width="25em"),
123+
rx.button(
124+
"Generate Image",
125+
on_click=State.get_image,
126+
width="25em",
127+
loading=State.processing
128+
),
121129
rx.cond(
122-
State.processing,
123-
rx.chakra.circular_progress(is_indeterminate=True),
124-
rx.cond(
125-
State.complete,
126-
rx.image(src=State.image_url, width="20em"),
127-
),
130+
State.complete,
131+
rx.image(src=State.image_url, width="20em"),
128132
),
129133
align="center",
130134
),
@@ -137,17 +141,15 @@ app = rx.App()
137141
app.add_page(index, title="Reflex:DALL-E")
138142
```
139143

140-
141144
## それぞれの実装を見てみましょう
142145

143146
<div align="center">
144147
<img src="../../docs/images/dalle_colored_code_example.png" alt="DALL-E appのフロントエンドとバックエンドのパーツの違いを説明しています。" width="900" />
145148
</div>
146149

147-
148150
### **Reflex UI**
149151

150-
UIから見てみましょう。
152+
UI から見てみましょう。
151153

152154
```python
153155
def index():
@@ -158,13 +160,13 @@ def index():
158160

159161
`index`関数において、アプリのフロントエンドを定義しています。
160162

161-
フロントエンドを実装するにあたり、`center`、`vstack`、`input`、`button`など異なるコンポーネントを使用しています。コンポーネントはお互いにネストが可能であり、複雑なレイアウトを作成できます。また、keyword argsを使うことで、CSSの機能をすべて使ったスタイルが可能です。
163+
フロントエンドを実装するにあたり、`center`、`vstack`、`input`、`button`など異なるコンポーネントを使用しています。コンポーネントはお互いにネストが可能であり、複雑なレイアウトを作成できます。また、keyword args を使うことで、CSS の機能をすべて使ったスタイルが可能です。
162164

163-
Reflexは[60を超える内臓コンポーネント](https://reflex.dev/docs/library)があるため、すぐに始められます。私たちは、積極的にコンポーネントを追加していますが、簡単に[自身のコンポーネントを追加](https://reflex.dev/docs/wrapping-react/overview/)することも可能です。
165+
Reflex は[60 を超える内臓コンポーネント](https://reflex.dev/docs/library)があるため、すぐに始められます。私たちは、積極的にコンポーネントを追加していますが、簡単に[自身のコンポーネントを追加](https://reflex.dev/docs/wrapping-react/overview/)することも可能です。
164166

165167
### **ステート**
166168

167-
Reflexはステートの関数を用いてUIを表示します。
169+
Reflex はステートの関数を用いて UI を表示します。
168170

169171
```python
170172
class State(rx.State):
@@ -176,9 +178,9 @@ class State(rx.State):
176178

177179
```
178180

179-
ステートでは、アプリで変更が可能な全ての変数（varsと呼びます）と、varsの変更が可能な関数を定義します。
181+
ステートでは、アプリで変更が可能な全ての変数（vars と呼びます）と、vars の変更が可能な関数を定義します。
180182

181-
この例では、ステートを`prompt`と`image_url`で構成しています。そして、ブール型の`processing`と`complete`を用いて、プログレスサークルと画像の表示を切り替えています。
183+
この例では、ステートを`prompt`と`image_url`で構成しています。そして、ブール型の`processing`と`complete`を用いて、ボタンを無効にするタイミング（画像生成中）や生成された画像を表示するタイミングを示しています。
182184

183185
### **イベントハンドラ**
184186

@@ -197,9 +199,9 @@ def get_image(self):
197199
self.processing, self.complete = False, True
198200
```
199201

200-
ステートにおいて、ステートのvarsを変更できるイベントハンドラ関数を定義しています。イベントハンドラはReflexにおいて、ステートのvarsを変更する方法です。ボタンクリックやテキストボックスの入力など、ユーザのアクションに応じてイベントハンドラが呼ばれます。
202+
ステートにおいて、ステートの vars を変更できるイベントハンドラ関数を定義しています。イベントハンドラは Reflex において、ステートの vars を変更する方法です。ボタンクリックやテキストボックスの入力など、ユーザのアクションに応じてイベントハンドラが呼ばれます。
201203

202-
DALL·E.アプリには、OpenAI APIからイメージを取得する`get_image`関数があります。イベントハンドラの最後でUIの更新がかかるため、関数の途中に`yield`を入れることで先にUIを更新しています。
204+
DALL·E.アプリには、OpenAI API からイメージを取得する`get_image`関数があります。イベントハンドラの最後で UI の更新がかかるため、関数の途中に`yield`を入れることで先に UI を更新しています。
203205

204206
### **ルーティング**
205207

@@ -209,7 +211,7 @@ DALL·E.アプリには、OpenAI APIからイメージを取得する`get_image`
209211
app = rx.App()
210212
```
211213

212-
アプリにページを追加し、ドキュメントルートをindexコンポーネントにルーティングしています。更に、ページのプレビューやブラウザタブに表示されるタイトルを記載しています。
214+
アプリにページを追加し、ドキュメントルートを index コンポーネントにルーティングしています。更に、ページのプレビューやブラウザタブに表示されるタイトルを記載しています。
213215

214216
```python
215217
app.add_page(index, title="DALL-E")
@@ -221,35 +223,34 @@ app.add_page(index, title="DALL-E")
221223

222224
<div align="center">
223225

224-
📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Gallery](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
226+
📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; | &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; | &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; | &nbsp; 🖼️ [Gallery](https://reflex.dev/docs/gallery) &nbsp; | &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start) &nbsp;
225227

226228
</div>
227229

228-
229230
## ✅ ステータス
230231

231-
2022年12月に、ReflexはPyneconeという名前でローンチしました。
232+
2022 年 12 月に、Reflex は Pynecone という名前でローンチしました。
232233

233-
2024年2月に、ホスティングサービスをアルファ版でリリースしました！アルファ版では、だれでもReflexアプリケーションを無料でデプロイできます。今後の予定は[ロードマップ](https://github.com/reflex-dev/reflex/issues/2727)において見れます。
234+
2024 年 2 月に、ホスティングサービスをアルファ版でリリースしました！アルファ版では、だれでも Reflex アプリケーションを無料でデプロイできます。今後の予定は[ロードマップ](https://github.com/reflex-dev/reflex/issues/2727)において見れます。
234235

235-
Reflexは毎週、新しいリリースや機能追加を行っています！最新情報を逃さないために、 :star: Starや :eyes: Watchをお願いします。
236+
Reflex は毎週、新しいリリースや機能追加を行っています！最新情報を逃さないために、 :star: Star や :eyes: Watch をお願いします。
236237

237238
## コントリビュート
238239

239-
様々なサイズのコントリビュートを歓迎しています！Reflexコミュニティに入るための方法を、いくつかリストアップします。
240+
様々なサイズのコントリビュートを歓迎しています！Reflex コミュニティに入るための方法を、いくつかリストアップします。
240241

241-
- **Discordに参加**: [Discord](https://discord.gg/T5WSbC2YtQ)は、Reflexプロジェクトの相談や、コントリビュートについての話し合いをするための、最適な場所です。
242-
- **GitHub Discussions**: GitHub Discussionsでは、追加したい機能や、複雑で解明が必要な事柄についての議論に適している場所です。
243-
- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)はバグの報告に適している場所です。また、課題を解決したPRのサブミットにチャレンジしていただくことも、可能です。
242+
- **Discord に参加**: [Discord](https://discord.gg/T5WSbC2YtQ)は、Reflex プロジェクトの相談や、コントリビュートについての話し合いをするための、最適な場所です。
243+
- **GitHub Discussions**: GitHub Discussions では、追加したい機能や、複雑で解明が必要な事柄についての議論に適している場所です。
244+
- **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues)はバグの報告に適している場所です。また、課題を解決した PR のサブミットにチャレンジしていただくことも、可能です。
244245

245246
スキルや経験に関わらず、私たちはコントリビュータを積極的に探しています。コントリビュートするために、[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)をご覧ください。
246247

247-
248248
## 私たちのコントリビュータに感謝！:
249+
249250
<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
250251
<img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
251252
</a>
252253

253254
## ライセンス
254255

255-
Reflexはオープンソースであり、[Apache License 2.0](LICENSE)に基づいてライセンス供与されます。
256+
Reflex はオープンソースであり、[Apache License 2.0](LICENSE)に基づいてライセンス供与されます。

0 commit comments

Comments
 (0)