Skip to content

Commit b5ee1bc

Browse files
committed
修正漏れの対応
1 parent 4b4c02b commit b5ee1bc

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

src/guide/single-file-component.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
## 前書き
44

5-
多くの Vue プロジェクトでは, グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。
5+
多くの Vue プロジェクトでは グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。
66

77
これはある view を拡張する為だけに JavaScript が利用された中小規模のプロジェクトにおいてはとても有効です。しかしながら、あなたのフロントエンドで JavaScript 全体を操作するようなもっと複雑なプロジェクトでは、これらの点において不利益になります。:
88

99
- **グローバル宣言**は全てのコンポーネントに一意な名前を強制すること
10-
- シンタックスハイライトがない**文字列テンプレート**と複数行HTMLの時の醜いスラッシュが強要されること
10+
- シンタックスハイライトがない**文字列テンプレート**と複数行 HTML の時の醜いスラッシュが強要されること
1111
- **CSS サポート無し**だと HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること
12-
- **ビルド処理がない**と Pug(前 Jade)と Babelのようなプリプロセッサよりむしろ、 HTML や ES5 JavaScriptを制限されること
12+
- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること
1313

1414
これらは全ては Webpack や Browserify のビルドツールにより実現された `.vue`拡張子の**単一ファイルコンポーネント**によって解決されます。
1515

@@ -23,17 +23,17 @@
2323
- [CommonJS モジュール](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
2424
- [コンポーネントスコープ CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
2525

26-
約束した通り、 Pug、 Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。
26+
約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。
2727

2828
<a href="https://codesandbox.io/s/vue-single-file-component-with-pre-processors-mr3ik?file=/src/App.vue" target="_blank" rel="noopener noreferrer"><img src="/images/sfc-with-preprocessors.png" width="563" alt="Single-file component with pre-processors example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a>
2929

30-
これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSSなどの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader`  で Webpack を使用しているならば, CSS Modules 向けに素晴らしいサポートがあります。
30+
これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSS などの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader` で Webpack を使用しているならばCSS Modules 向けに素晴らしいサポートがあります。
3131

3232
### 関心の分離について
3333

3434
注意すべき重要な点の1つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、 私たちはコードベースを互いに織りなす3つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。 コンポーネントの内部では、 そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。
3535

36-
単一ファイルコンポーネントのアイディアが好きではなくても, JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます:
36+
単一ファイルコンポーネントのアイディアが好きではなくても JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます:
3737

3838
``` html
3939
<!-- my-component.vue -->
@@ -48,7 +48,7 @@
4848

4949
### サンドボックスの例
5050

51-
すぐに触ってそして単一ファイルコンポーネントを試したい方は、 CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue)
51+
すぐに触ってそして単一ファイルコンポーネントを試したい方は、CodeSandBox 上の [この単純な todo アプリケーション](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue)
5252
をチェックしてみてください。
5353

5454
### JavaScript でモジュールビルドシステムが初めてなユーザ向け
@@ -65,4 +65,4 @@
6565

6666
CLI はツールの設定の大部分の面倒を見てくれますが、[設定オプション](https://cli.vuejs.org/config/)を通してよりきめ細かいカスタマイズをすることもできます。
6767

68-
あなたが独自のビルドセットアップをゼロから作ることを好む場合、 webpack と [vue-loader](https://vue-loader.vuejs.org)を手動で設定する必要があるでしょう。 webpackについてもっと学びたいときは、 [公式ドキュメント](https://webpack.js.org/configuration/) [webpack learning academy](https://webpack.academy/p/the-core-concepts)を参照してください。
68+
あなたが独自のビルドセットアップをゼロから作ることを好む場合、webpack と [vue-loader](https://vue-loader.vuejs.org)を手動で設定する必要があるでしょう。webpackについてもっと学びたいときは、[公式ドキュメント](https://webpack.js.org/configuration/) [webpack learning academy](https://webpack.academy/p/the-core-concepts)を参照してください。

0 commit comments

Comments
 (0)