Skip to content

Commit fb66fdc

Browse files
authored
Translate structure.md via GitLocalize (#94)
1 parent 4ef8e98 commit fb66fdc

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

ja/structure.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# ソースコードの構造
22

3-
## ステートフルなシングルトンは避ける
3+
## ステートフルなシングルトンの回避
44

55
クライアントのみのコードを書くとき、私たちはコードが毎回新しいコンテキストで評価されるという事実に慣れています。しかし、 Node.js サーバーは長時間実行されるプロセスです。私たちのコードがプロセスに要求されるとき、それは一度評価されメモリにとどまります。つまりシングルトンのオブジェクトを作成したとき、それは全ての受信リクエスト間でシェアされると言うことです。
66

77
基本的な例としては、私たちは **リクエストごとに新しいルート Vue インスタンスを作成します**。それは各ユーザがそれぞれのブラウザでアプリケーションの新しいインスタンスを使用することに似ています。もし私たちが複数のリクエストをまたいでインスタンスを共有すると、それは容易にクロスリクエスト状態の汚染につながるでしょう。
88

9-
そのため、直接アプリケーションのインスタンスを作成するのではなく、各リクエストで繰り返し実行される新しいアプリケーションのインスタンスを作成するファクトリ関数を公開する必要があります
9+
そのため、直接アプリケーションのインスタンスを作成するのではなく、各リクエストで繰り返し実行される新しいアプリケーションのインスタンスを作成するファクトリ関数を公開する必要があります:
1010

1111
```js
1212
// app.js
@@ -21,7 +21,7 @@ module.exports = function createApp (context) {
2121
}
2222
```
2323

24-
そして私たちのサーバーコードはこうなります
24+
そして私たちのサーバーコードはこうなります:
2525

2626
```js
2727
// server.js
@@ -30,13 +30,13 @@ server.get('*', (req, res) => {
3030
const context = { url: req.url }
3131
const app = createApp(context)
3232
renderer.renderToString(app, (err, html) => {
33-
// エラーをハンドリングします
33+
// エラーを処理 ...
3434
res.end(html)
3535
})
3636
})
3737
```
3838

39-
同じルールがルータ、ストア、イベントバスのインスタンスに適用されます。モジュールから直接エクスポートしアプリケーションにインポートするのでは無く、 `createApp` で新しいインスタンスを作成し、ルート Vue インスタンスから注入する必要があります。
39+
同じルールがルータ、ストア、イベントバスのインスタンスに適用されます。モジュールから直接エクスポートしアプリケーションにインポートするのでは無く、 `createApp` で新しいインスタンスを作成し、ルート (root) Vue インスタンスから注入する必要があります。
4040

4141
> `{ runInNewContext: true }` でバンドルレンダラを使用するとき、その制約を取り除くことが可能です。しかし各リクエストに対して新しい VM コンテキストを作成する必要があるため、いくらか重大なパフォーマンスコストがかかります。
4242
@@ -53,11 +53,11 @@ server.get('*', (req, res) => {
5353

5454
セットアップの詳細については次のセクションで議論されます。今のところ、ビルドのセットアップが分かっていると仮定すると、webpack を有効にして Vue アプリケーションコードを書くことが可能になっています。
5555

56-
## Webpackによるコード構造
56+
## webpackによるコード構造
5757

5858
webpack を使用してサーバーとクライアントのアプリケーションを処理しているので、ソースコードの大部分はユニバーサルに書かれており、すべての webpack の機能にアクセスできます。 同時に、ユニバーサルなコードを書くときに留意すべき[いくつかあります。](./universal.md)
5959

60-
シンプルなプロジェクトは以下のようになります
60+
シンプルなプロジェクトは以下のようになります:
6161

6262
```bash
6363
src
@@ -78,11 +78,11 @@ src
7878
```js
7979
import Vue from 'vue'
8080
import App from './App.vue'
81-
// 新しいアプリケーションルータストアを作成するためのファクトリ関数をエクスポートします
81+
// 新しいアプリケーションルータストアを作成するためのファクトリ関数をエクスポートします
8282
// インスタンス
8383
export function createApp () {
8484
const app = new Vue({
85-
// ルートインスタンスは単にAppコンポーネントをレンダリングします
85+
// ルートインスタンスは単に App コンポーネントを描画します
8686
render: h => h(App)
8787
})
8888
return { app }
@@ -103,7 +103,7 @@ app.$mount('#app')
103103

104104
### `entry-server.js`:
105105

106-
サーバーエントリはレンダリングごとに繰り返し呼び出すことができる関数をデフォルトでエクスポートします。現時点では、アプリケーションインスタンスを作成して返す以外のことはほとんど行いませんが、後でサーバーサイドのルートマッチングとデータプリフェッチロジックを実行します。
106+
サーバーエントリは描画ごとに繰り返し呼び出すことができる関数をデフォルトでエクスポートします。現時点では、アプリケーションインスタンスを作成して返す以外のことはほとんど行いませんが、後でサーバーサイドのルートマッチングとデータプリフェッチロジックを実行します。
107107

108108
```js
109109
import { createApp } from './app'

0 commit comments

Comments
 (0)