|
2 | 2 |
|
3 | 3 | ## 前書き
|
4 | 4 |
|
5 |
| -多くの Vue プロジェクトでは, グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。 |
| 5 | +多くの Vue プロジェクトでは、 グローバルコンポーネントは `app.mount('#app')` の後に各ページの body においてコンテナ要素のターゲットすることに続いて、`app.component()` を使用して定義されています。 |
6 | 6 |
|
7 | 7 | これはある view を拡張する為だけに JavaScript が利用された中小規模のプロジェクトにおいてはとても有効です。しかしながら、あなたのフロントエンドで JavaScript 全体を操作するようなもっと複雑なプロジェクトでは、これらの点において不利益になります。:
|
8 | 8 |
|
9 | 9 | - **グローバル宣言**は全てのコンポーネントに一意な名前を強制すること
|
10 |
| -- シンタックスハイライトがない**文字列テンプレート**と複数行HTMLの時の醜いスラッシュが強要されること |
| 10 | +- シンタックスハイライトがない**文字列テンプレート**と複数行 HTML の時の醜いスラッシュが強要されること |
11 | 11 | - **CSS サポート無し**だと HTML と JavaScript がコンポーネントにモジュール化されている間、これ見よがしに無視されること
|
12 |
| -- **ビルド処理がない**と Pug(前 Jade)と Babelのようなプリプロセッサよりむしろ、 HTML や ES5 JavaScriptを制限されること |
| 12 | +- **ビルド処理がない**と Pug(前 Jade)と Babel のようなプリプロセッサよりむしろ、 HTML や ES5 JavaScript を制限されること |
13 | 13 |
|
14 | 14 | これらは全ては Webpack や Browserify のビルドツールにより実現された `.vue`拡張子の**単一ファイルコンポーネント**によって解決されます。
|
15 | 15 |
|
|
23 | 23 | - [CommonJS モジュール](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module)
|
24 | 24 | - [コンポーネントスコープ CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html)
|
25 | 25 |
|
26 |
| -約束した通り、 Pug、 Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。 |
| 26 | +約束した通り、Pug、Babel (ES2015 モジュールと一緒に) や Stylus など 綺麗で機能が豊富なコンポーネントもプリプロセッサとして利用することができます。 |
27 | 27 |
|
28 | 28 | <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>
|
29 | 29 |
|
30 |
| -これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSSなどの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader` で Webpack を使用しているならば, CSS Modules 向けに素晴らしいサポートがあります。 |
| 30 | +これらの特定の言語は単なる一例です。TypeScript、SCSS、PostCSS などの生産的なプリプロセッサも簡単に使うことができます。もし `vue-loader` で Webpack を使用しているならば、CSS Modules 向けに素晴らしいサポートがあります。 |
31 | 31 |
|
32 | 32 | ### 関心の分離について
|
33 | 33 |
|
34 | 34 | 注意すべき重要な点の1つは、**関心の分離がファイルタイプの分離とは等しくないことです。** 現代の UI 開発では、 私たちはコードベースを互いに織りなす3つの巨大なレイヤーに分割するのではなく、それらを疎結合なコンポーネントに分割して構成する方がはるかに理にかなっていることを発見しました。 コンポーネントの内部では、 そのテンプレート、ロジック、スタイルが本質的に結合しており、実際にそれらを配置することでコンポーネントの一貫性と保守性が高くなります。
|
35 | 35 |
|
36 |
| -単一ファイルコンポーネントのアイディアが好きではなくても, JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます: |
| 36 | +単一ファイルコンポーネントのアイディアが好きではなくても、 JavaScript と CSS を別々ファイルに分けることによってホットリロードとプリコンパイル機能を活用することができます: |
37 | 37 |
|
38 | 38 | ``` html
|
39 | 39 | <!-- my-component.vue -->
|
|
48 | 48 |
|
49 | 49 | ### サンドボックスの例
|
50 | 50 |
|
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) |
52 | 52 | をチェックしてみてください。
|
53 | 53 |
|
54 | 54 | ### JavaScript でモジュールビルドシステムが初めてなユーザ向け
|
|
65 | 65 |
|
66 | 66 | CLI はツールの設定の大部分の面倒を見てくれますが、[設定オプション](https://cli.vuejs.org/config/)を通してよりきめ細かいカスタマイズをすることもできます。
|
67 | 67 |
|
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