Skip to content

Japanese translations #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Jul 9, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
6814194
Translate SUMMARY.md via GitLocalize
dear-lizhihua May 8, 2017
4206b1e
Merge pull request #15 from sotayamashita/gitlocalize-33
sotayamashita May 9, 2017
247270a
Revert "Chinese Translation: zh/summary"
sotayamashita May 9, 2017
c19f732
Merge pull request #16 from open-source-translators/revert-15-gitloca…
sotayamashita May 9, 2017
6b84b05
Revert "Revert "Chinese Translation: zh/summary""
sotayamashita May 9, 2017
0ccbc90
Merge pull request #17 from open-source-translators/revert-16-revert-…
sotayamashita May 9, 2017
8aa9472
Japanese Translation: ja/css.md (#19)
kaorios May 16, 2017
27c7d6c
Translate api.md via GitLocalize
chping2125 May 16, 2017
66493d1
Translate streaming.md via GitLocalize (#22)
sotayamashita May 17, 2017
97577df
Translate caching.md via GitLocalize (#23)
re-fort May 19, 2017
f82408d
Merge pull request #21 from sotayamashita/gitlocalize-46
sotayamashita May 22, 2017
f0d82a2
Japanese Translation: ja/routing.md (#18)
sotayamashita May 30, 2017
39a226b
Translate universal.md via GitLocalize (#29)
kitak May 30, 2017
4416cbe
ja/api.md (#28)
hikimon May 31, 2017
ee0fd86
Translate build-config.md via GitLocalize (#27)
hisako135 Jun 6, 2017
d30ee3f
Japanese translation: bundle-renderer.md (#30)
doutori Jun 8, 2017
d1e98d0
Translate basic.md (#32)
satotakumi Jun 15, 2017
d35744d
Japanese Translation: ja/data.md (#25)
inouetakuya Jun 16, 2017
dd4e707
"Client Side Hydration" の翻訳 (#36)
hikimon Jun 20, 2017
c7d6627
Japanese Translation: ja/head.md (#33)
inouetakuya Jun 20, 2017
b71774c
Japanese Translation: ja/routing.md (#38)
re-fort Jun 21, 2017
a226a91
Japanese Translation: ja/caching.md (#37)
re-fort Jun 21, 2017
6dc3006
translated the "source code structure" into Japanese. (#26)
Jul 1, 2017
a7ee150
Japanese Translation: ja/SUMMARY.md (#35)
inouetakuya Jul 2, 2017
803f1d0
Japanese translation: readme.md (#39)
doutori Jul 9, 2017
4eb0af4
merge from vuejs/vue-ssr/docs
kazupon Jul 9, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions ja/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
# Vue.js サーバサイドレンダリングガイド

> **注意:** このガイドは Vue.js またはサポートしているライブラリの以下の最小バージョンを必須としています:
> - vue & vue-server-renderer >= 2.3.0
> - vue-router >= 2.5.0
> - vue-loader >= 12.0.0 & vue-style-loader >= 3.0.0もしあなたが以前に、 SSR で Vue 2.2 を使用していた場合、 推奨されるコードの構造が[少しだけ違うこと](./structure.md)に気がつくでしょう (新しいオプションの [runInNewContext](./api.md#runinnewcontext) を `false` にしている場合)。あなたの既存のアプリケーションは依然として動作はするでしょうが、新しく推奨される方に移行されることをオススメします。

## サーバサイドレンダリング (SSR) とは何か?

Vue.js はクライアントサイドアプリケーションを構築するためのフレームワークです。通常では、Vue コンポーネントはブラウザで DOM を生成し操作がされます。しかし、同じ Vue コンポーネントをサーバー上の HTML 文字列にレンダリングし、ブラウザに直接送信し、最終的に静的なマークアップとしてクライアント上の完全なインタラクティブアプリケーションに "ハイドレート" することもできます。

サーバでレンダリングされた Vue.js のアプリケーションは、アプリケーションのコードの大部分が、サーバとクライアントの**両方**で実行されるという意味で、"isomorphic" や "universal" と見なすことができます。

## どうして SSR なのか?

従来の SPA(シングルページアプリケーション)と比べて、SSR の利点は主に次の点にあります:

- 検索エンジンのクローラーが完全にレンダリングされたページを直接解析するため、SEO が向上します。

現在のところ、Google と Bing は同期的 JavaScript アプリケーションのインデックスを作成できます。同期がキーワードです。あなたのアプリケーションが読み込み中にスピナーが表示され、Ajax 経由でコンテンツを取得する場合、クローラーはあなたが完了するまで待たないでしょう。つまり、SEO が重要なページで非同期にコンテンツを取得する場合は、SSR が必要な場合があります。

- 特にインターネットの遅さや遅いデバイスでは、コンテンツの再生時間が短縮されます。サーバでレンダリングされたマークアップは、すべての JavaScript がダウンロードされて表示されるまで待つ必要がないので、ユーザーは完全にレンダリングされたページをすぐに見ることができます。これにより、一般的にユーザーエクスペリエンスが向上し、コンテンツの所要時間が直接コンバージョン率に関連付けられているアプリケーションにとっては重要になります。

SSR を使用する際に考慮すべきトレードオフも何点かあります:

- 開発上の制約。 ブラウザ固有のコードは、特定のライフサイクルフック内でのみ使用できます。一部の外部ライブラリは、サーバレンダリングされたアプリケーションで実行できるように特別な処理が必要な場合があります。
- より複雑なセットアップと開発の要件を構築します。静的ファイルサーバに展開できる完全静的 SPA とは異なり、サーバレンダリングされたアプリケーションでは Node.js サーバを実行できる環境が必要になります。
- サーバ側の負荷が増えます。 Node.js の完全なアプリケーションをレンダリングすることは、静的ファイルを提供するだけでなく、CPU を多用することになるので、トラフィックが多いことが見込まれる場合は、対応するサーバーの負荷に備え、キャッシュの対策を賢明に行なってください。

あなたのアプリケーションに SSR を使用する前に、まず初めに、実際に SSR が必要かどうかを考える必要があります。これは主に、アプリケーションのコンテンツに対する時間の重要性によります。 例えば、最初の負荷の数百ミリ秒がそれほど重要ではない内部的なダッシュボードを構築する場合、SSR は過度なものとなるでしょう。しかし、コンテンツの所要時間が非常に重要な場合は、SSR を使用してできるだけ早く初期ロードパフォーマンスを保つことができます。

## SSR vs プリレンダリング

もしあなたが、幾つかのマーケティングのページの SEO を向上させるためだけに SSR を調べているとしたら (たとえば `/`, `/about`, `/contact` など)、代わりに**プリレンダリング**を使用することをオススメします。 HTML を急いでコンパイルするために Web サーバーを使用するのではなく、プリレンダリングは、ビルド時に特定のルートに対して静的な HTML ファイルを生成します。利点はプリレンダリングを設定する方が遥かに簡単で、フロントエンドを完全に静的なサイトとして保つことができることです。

もしあなたが webpack を使用している場合、[prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin) を使用することで簡単にプリレンダリングを実装することができます。 これは Vue アプリケーションで広くテストが行われています。 - 実際には、[作成者は](https://github.com/chrisvfritz) Vue のコアチームメンバーです。

## このガイドについて

このガイドでは、Node.js をサーバとして使用しサーバレンダリングされたシングルページアプリケーションに焦点を当てています。 Vue SSR と他のバックエンドの設定を混在させることは、独自のトピックであり、このガイドでは説明していません。

このガイドは、Vue.js 自体に精通しており、且つ Node.js と webpack に関する実用的な知識を持っていることを前提としています。もしあなたが、すぐに使用できる高度なソリューションを求めている場合は、[Nuxt.js](http://nuxtjs.org/) を試してみてください。これは同じ Vue スタック上に構築されていますが、多くの定型文が抽象化されており、静的なサイト生成などの追加機能を提供します。しかし、アプリケーションの構造をより直接的に制御する必要がある場合は、ユースケースに合わない場合があります。いずれにしても、仕組みをより理解するために、このガイドを読むことはまだ有益です。

また、あなたが読まれているように、このガイドで説明されている技術のほとんどが [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/) にて使用されており、そちらを参照するととても役立つことでしょう。

最後に、このガイドの解決策は決定的なものではないことを覚えておいてください。 - 私たちはこれらがうまく働くことを見つけていますが、これ以上改善がされないということではありません。将来改訂されるかもしれません - プルリクエストを送ることによって貢献することも、もちろん自由です!
27 changes: 27 additions & 0 deletions ja/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
- [基本的な使い方](basic.md)
- [ユニバーサルなコードを書く](universal.md)
- [ソースコードの構造](structure.md)
- [ルーティングとコード分割](routing.md)
- [データのプリフェッチとステート](data.md)
- [クライアントサイドでのハイドレーション](hydration.md)
- [バンドルレンダラの紹介](bundle-renderer.md)
- [ビルド設定](build-config.md)
- [CSS の管理](css.md)
- [ヘッドの管理](head.md)
- [キャッシュ](caching.md)
- [ストリーミング](streaming.md)
- [API リファレンス](api.md)
- [createRenderer](api.md#createrendereroptions)
- [createBundleRenderer](api.md#createbundlerendererbundle-options)
- [クラス: Renderer](api.md#class-renderer)
- [クラス: BundleRenderer](api.md#class-bundlerenderer)
- [Renderer 生成時のオプション](api.md#renderer-options)
- [template](api.md#template)
- [clientManifest](api.md#clientmanifest)
- [inject](api.md#inject)
- [shouldPreload](api.md#shouldpreload)
- [runInNewContext](api.md#runinnewcontext)
- [basedir](api.md#basedir)
- [cache](api.md#cache)
- [directives](api.md#directives)
- [Webpack プラグイン](api.md#webpack-plugins)
Loading