Skip to content

Translate Japanese #541

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 48 commits into from
Mar 23, 2017
Merged

Translate Japanese #541

merged 48 commits into from
Mar 23, 2017

Conversation

nasum
Copy link

@nasum nasum commented Dec 16, 2016

  • Introduction
  • Vue Component Spec
  • Setting Up a Project
  • ES2015
  • Scoped CSS
  • CSS Modules
  • PostCSS
  • Hot Reload
  • Pre-Processors
  • Asset URL Handling
  • Advanced Loader Configuration
  • Extracting CSS into a Single File
  • Production Build
  • Linting
  • Testing
  • Testing with Mocks
  • Options Reference
  • Check

@nasum nasum changed the title Translate Japanese [WIP]Translate Japanese Dec 16, 2016
@kazupon
Copy link
Member

kazupon commented Dec 16, 2016

@nasum Thank you for your contribution!
We are looking forward to the completion 👍

Copy link

@negito6 negito6 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commented on some mistakes and typos.
This PR is very nice contribution !


- ES2015、CoffeeScript、TypeScriptのモジュールをプレーンなES5のCommonJS モジュールにトランスパイル;
- オプションでコンパイルを行う前にソースコードを linter に通すことが可能;
- Jade テンプレートをプレーンな HTML にトランスパイルし、JavaScriptの文字列としてに展開;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems a mistake 👀

- 文字列としてに展開
+ 文字列として展開

vue: {
// ... 他の Vue のオプション
loaders: {
// すべての<script>を lang属性なしでcoffee-loaerでロードする
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mistake: loaer -> loader

@@ -0,0 +1,22 @@
# アセット URL ハンドリング

デフォルトで `vu-loader` は [css-loader](https://github.com/webpack/css-loader) と Vueテンプレートコンパイラーでスタイルとテンプレートファイルは自動で処理されます。このコンパイル処理中で全ての `<img src="...">`、`background: url(...)` やCSSの `@import` のようなアセットのURLは **モジュールの依存関係として処理されます**。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mistype:

- デフォルトで `vu-loader` は 
+ デフォルトで `vue-loader` は 

``` js
createElement('img', { attrs: { src: require('../image.png') }})
```
もちろん `.png` ファイルは JavaScriot のファイルではありません。[file-loader](https://github.com/webpack/file-loader) または [url-loader](https://github.com/webpack/url-loader) を使用して Webpack を設定する必要があります。`vue-cli` でスキャフォールドされたプロジェクトでは同じような設定が成されています。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mistake: JavaScriot -> JavaScript

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo の修正お願いします!

}
```

vue-loaderを構成する方法の詳細については、[高度なloaderの設定](./ advanced.md)セクションを参照してください。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

an unnecessary space was injected?

- ./ advanced.md
+ ./advanced.md

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo の修正お願いします!


- デフォルトで ES2015 が有効 ;
- `<style>` には SASS、 `<template>` には Jade など、Vue コンポーネントの各パーツに他の Webpack の loader が使用可能 ;
- `<style>と` <template> `で参照される静的なアセットをモジュールの依存として扱い、Webpack の loader で処理可能 ;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing backquote after <style>


#### `<script>`

- デフォルトは `js`(`babel-loader` や `buble-loader' が検出される場合、自動的にES2015がサポートされる)
Copy link

@negito6 negito6 Feb 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A single quote exists after buble-loader, but backquote is currect.


- `<style>` タグは `scoped`か`module` (詳しくは [Scoped CSS](../features/scoped-css.md) と [CSS Modules](../features/css-modules.md) をみてください)を使用してコンポーネントにスタイルをカプセル化する事が出来る。異なるカプセルモードをもつ複数の`<style>` タグは同じコンポーネント内で混在させることが出来る。

- デフォルトではコンテンツは `style-loader` を使用して実際の `<style>` タグとして抽出され、ドキュメントの `<head>` に動的に挿入される。また、[すべてのコンポーネントのすべてのスタイルが単一のCSSファイルに抽出されるようにWebpackを設定する](../ configurations / extract-css.md)こともできる。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

unnecessary spaces in the path ../ configurations / extract-css.md


プロダクション用にバンドルを構築するときは二つのことをやります:

1. アプリケーションコードをミニファイルス
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ミニファイ is correct ?


### コメント

それぞれのブロック内でそれぞれの言語のコメントシンタックスを使用することが出来る(HTML、CSS、JavaScript、Jade、etc...)。最上部のコメントはHTMLコメントシンタックスを使用してください: `<!-- コメントはこちら -->`
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

出来る was wrote, できます will be fit in this document style.

Copy link
Member

@kazupon kazupon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

レビュー 👀 しました。
まだ作業途中かもしれませんが、レビューコメント 💬 ご確認ください。


- デフォルトで ES2015 が有効 ;
- `<style>` には SASS、 `<template>` には Jade など、Vue コンポーネントの各パーツに他の Webpack の loader が使用可能;
- `<style>` と `<template>` で参照される静的なアセットをモジュールの依存として扱い、Webpack の loader で処理可能;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Allows custom sections in a .vue file that can have custom loader chains applied to them
が抜けているのこちらお願いします。

- 各コンポーネントで scoped CSS をシミュレートすることが可能;
- 開発時のコンポーネントのホットリロードをサポート

つまり、Webpack と `vue-loader` の組み合わせは Vue.js アプリケーションを作成するための、モダンで柔軟かつとても強力なフロントエンドワークフローを実現することが可能になります。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

モダン現代的で訳しましょう!

@@ -0,0 +1,21 @@
- Getting Started
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SUMMARY.md 全般、翻訳忘れているようなので、お願いします!

@@ -0,0 +1,56 @@
# 高度なloaderの設定
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

翻訳したときの内容と原文が変わっているので、原文の最新内容を反映させてください。

https://vue-loader.vuejs.org/en/configurations/advanced.html

``` js
createElement('img', { attrs: { src: require('../image.png') }})
```
もちろん `.png` ファイルは JavaScriot のファイルではありません。[file-loader](https://github.com/webpack/file-loader) または [url-loader](https://github.com/webpack/url-loader) を使用して Webpack を設定する必要があります。`vue-cli` でスキャフォールドされたプロジェクトでは同じような設定が成されています。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

typo の修正お願いします!

const ExampleInjector = require('!!vue?inject!./example.vue')
```

注意。クレイジーな文字列を必要とします - ここではいくつかのインライン[webpack loader](https://webpack.github.io/docs/loaders.html)を使用しています。簡単な説明としては:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Notice that crazy require string ですが、狂気じみた文字列を必要とします にしましょう!

注意。クレイジーな文字列を必要とします - ここではいくつかのインライン[webpack loader](https://webpack.github.io/docs/loaders.html)を使用しています。簡単な説明としては:

- `!!`は "グローバル設定からすべてのローダを無効にする"ことを意味します;
- `vue?inject!`は "'vue`ローダーを使い、`?inject`クエリを渡す"ことを意味します。 これは`vue-loader`に、依存性注入モードでコンポーネントをコンパイルするように指示します。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- "'vue`ローダー
+ `vue` loader

bake-tickが抜けているのでお願いします。


``` js
// 要求があれば同じWebpackの設定を使用することが可能です
// however, remember to delete the original entry since we don't
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原文が残っているようです。削除お願いします。

},
// webpackの設定を使用します
webpack: webpackConfig,
// 使用しないテキストの壁を避ける
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不要なテキスト出力を回避するで意味は通じると思います。

npm test
```

最後にもう一度、[webpack vue-cli template](https://github.com/vuejs-templates/webpack)には、テストに関する完全な実例が含まれています。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここでの原文の意図は、リファレンスあるのでそれを見て欲しいという意図があるので、そちらを参照してくださいのような註釈的な訳も加えると読み手に分かりやすいでしょう。

@nasum
Copy link
Author

nasum commented Mar 14, 2017

@kazupon レビューありがとうございます!時間かかってしまい申し訳ありません:bow:

@nasum nasum changed the title [WIP]Translate Japanese Translate Japanese Mar 22, 2017
Copy link
Member

@kazupon kazupon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

レビュー 👀 しました!
コメント 💬 内容の対応お願いします!

後、もう少しです!
頑張りましょう!


[CSS Modules spec](https://github.com/css-modules/css-modules) を参照してください。モードの詳細については [global exceptions](https://github.com/css-modules/css-modules#exceptions) と [composition](https://github.com/css-modules/css-modules#composition)を参照してください。

### カスタム代入
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

injectionは一般的に注入と訳されているのでその訳で統一しましょう!

- [カスタムブロック](configurations/custom-blocks.md)
- ワークフロー
- [プロダクションビルド](workflow/production.md)
- [Linting](workflow/linting.md)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここでの Linting の訳は、リント で通じるのでそれにしましょう!


時折こうしたくなるかもしれません:

1. `vue-loader` が推測するのではなく、カスタム loader の文字列を言語に適用する。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここの箇条書きの部分ですが、読点がない方読みやすいので、削除しましょう!


#### sass-loader 使用時の注意

その名前が示すものとは対照的に、[* sass * -loader](https://github.com/jtangelder/sass-loader) はデフォルトで *SCSS* の構文を解析します。インデントされた *SASS* 構文を実際に使用する場合は、それに応じて sass-loader へ vue-loader のオプションを設定する必要があります。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- * sass * -loader
+ *sass*-loader

余白は削除できるなら、しましょう!

}
```

vue-loader の `cssModules`オプションを使って` css-loader`に追加のクエリオプションを提供することができます:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- ` css-loader`
+ `css-loader`

スペースを削除しましょう!

```

``` js
// 要求があれば同じWebpackの設定を使用することが可能です
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- 同じWebpackの
+ 同じ Webpack の

スペースお願いします!

frameworks: ['jasmine'],
// これはすべてのテストのエントリーファイルです。
files: ['test/index.js'],
// バンドルのためにエントリーファイルをwebpackに渡します。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- エントリーファイルをwebpackに渡します。
+ エントリーファイルを webpack に渡します

スペースお願いします!

preprocessors: {
'test/index.js': ['webpack']
},
// webpackの設定を使用します
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- webpackの設定を使用します
+ webpack の設定を使用します

ここもスペースお願いします!


``` js
// test/index.js
// 特別なWebpackの機能を使用してすべてのテストファイルを必要とさせます
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- 特別なWebpackの機能
+ 特別な Webpack の機能

ここもスペースお願いします!


describe('a.vue', function () {

// JavaScriptのオプションのアサーション
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

- JavaScriptのオプション
+ JavaScript のオプション

スペースお願いします!

@yyx990803
Copy link
Member

@kazupon maybe you can directly push to the PR's branch to fix those small issues? Looks like we can merge this soon.

@kazupon
Copy link
Member

kazupon commented Mar 23, 2017

@yyx990803 OK, I'll try to improve later.

@kazupon kazupon merged commit 08fdb92 into vuejs:master Mar 23, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants