diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js index 75293509..28939012 100644 --- a/src/.vuepress/config.js +++ b/src/.vuepress/config.js @@ -6,7 +6,8 @@ const sidebar = { children: [ '/cookbook/', '/cookbook/editable-svg-icons', - // '/cookbook/debugging-in-vscode' + '/cookbook/debugging-in-vscode', + '/cookbook/automatic-global-registration-of-base-components' ] } ], diff --git a/src/.vuepress/public/images/breakpoint_hit.png b/src/.vuepress/public/images/breakpoint_hit.png new file mode 100644 index 00000000..35020edc Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_hit.png differ diff --git a/src/.vuepress/public/images/breakpoint_set.png b/src/.vuepress/public/images/breakpoint_set.png new file mode 100644 index 00000000..af5a7064 Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_set.png differ diff --git a/src/.vuepress/public/images/config_add.png b/src/.vuepress/public/images/config_add.png new file mode 100644 index 00000000..a99ae3e2 Binary files /dev/null and b/src/.vuepress/public/images/config_add.png differ diff --git a/src/.vuepress/public/images/devtools-timetravel.gif b/src/.vuepress/public/images/devtools-timetravel.gif new file mode 100644 index 00000000..83d007b8 Binary files /dev/null and b/src/.vuepress/public/images/devtools-timetravel.gif differ diff --git a/src/.vuepress/public/images/editable-svg-icons-sizes.png b/src/.vuepress/public/images/editable-svg-icons-sizes.png new file mode 100644 index 00000000..348d813c Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons-sizes.png differ diff --git a/src/.vuepress/public/images/editable-svg-icons.jpg b/src/.vuepress/public/images/editable-svg-icons.jpg new file mode 100644 index 00000000..fb9b8e23 Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons.jpg differ diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md new file mode 100644 index 00000000..c0ebf77e --- /dev/null +++ b/src/cookbook/automatic-global-registration-of-base-components.md @@ -0,0 +1,76 @@ +# ベースコンポーネントの自動グローバル登録 + +## 基本的な例 + +多くのコンポーネントは割と一般的なもので、あるいは入力やボタンをラップするだけのものかもしれません。わたしたちは、このようなコンポーネントを [ベースコンポーネント](../style-guide/#base-component-names-strongly-recommended) と呼ぶことがあって、コンポーネント全体に渡ってとても頻繁に使われる傾向があります。 + + +その結果、多くのコンポーネントはベースコンポーネントの長いリストに含まれていることがあります: + +```js +import BaseButton from './BaseButton.vue' +import BaseIcon from './BaseIcon.vue' +import BaseInput from './BaseInput.vue' +export default { + components: { + BaseButton, + BaseIcon, + BaseInput + } +} +``` + +テンプレート内の比較的小さなマークアップをサポートするためだけのものです: + +```html + + + + +``` + +幸いなことに、webpack（または [Vue CLI](https://github.com/vuejs/vue-cli)、これは内部的に webpack を使っています）を使う場合、これらのとても汎用的なベースコンポーネントだけをグローバルに登録するのに `require.context` を使うことができます。このコード例は、アプリケーションのエントリファイル（例えば `src/main.js`）でベースコンポーネントをグローバルにインポートするのに使えるでしょう: + +```js +import { createApp } from 'vue' +import upperFirst from 'lodash/upperFirst' +import camelCase from 'lodash/camelCase' +import App from './App.vue' + +const app = createApp(App) + +const requireComponent = require.context( + // コンポーネントフォルダの相対パス + './components', + // サブフォルダ内を探すかどうか + false, + // ベースコンポーネントのファイル名とマッチさせるための正規表現 + /Base[A-Z]\w+\.(vue|js)$/ +) + +requireComponent.keys().forEach(fileName => { + // コンポーネント設定の取得 + const componentConfig = requireComponent(fileName) + + // コンポーネントのパスカルケースでの名前を取得 + const componentName = upperFirst( + camelCase( + // フォルダの深さに関わらずファイル名を取得 + fileName + .split('/') + .pop() + .replace(/\.\w+$/, '') + ) + ) + + app.component( + componentName, + // `.default` にあるコンポーネントのオプションを探す。 + // コンポーネントが `export default` でエクスポートされていれば存在して、 + // そうでなければモジュールのルートのフォールバックする。 + componentConfig.default || componentConfig + ) +}) + +app.mount('#app') +``` diff --git a/src/cookbook/debugging-in-vscode.md b/src/cookbook/debugging-in-vscode.md new file mode 100644 index 00000000..2a7402e9 --- /dev/null +++ b/src/cookbook/debugging-in-vscode.md @@ -0,0 +1,124 @@ +# VS Code でのデバッグ + +あらゆるアプリケーションは、小さなものから大きなものまでエラーを理解する必要がある段階に到達します。このレシピでは、 VS Code ユーザがブラウザでアプリケーションをデバッグするためのワークフローをいくつか紹介します。 + +このレシピでは、 [Vue CLI](https://github.com/vuejs/vue-cli) アプリケーションをブラウザで実行しながら、 VS Code でデバッグする方法を紹介します。 + +## 必要なもの + +VS Code と好みのブラウザがインストールされていて、対応するデバッガー拡張機能の最新バージョンがインストールされ、有効化されていることを確認してください: + +- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) +- [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug) + +[Vue CLI ガイド](https://cli.vuejs.org/) の説明にしたがって、 [vue-cli](https://github.com/vuejs/vue-cli) をインストールしてプロジェクトを作成します。新しく作成したアプリケーションのディレクトリに移動して、 VS Code を開きます。 + +### ブラウザにソースコードを表示 + +VS Code で Vue コンポーネントをデバッグできるようにする前に、生成された Webpack の設定を更新してソースマップをビルドする必要があります。これはデバッガが圧縮ファイルの中のコードを、元のファイルの位置に一致させる方法を持つためです。これにより、アセットが Webpack で最適化された後でも、アプリケーションのデバッグが可能になります。 + +Vue CLI 2 を使っているならば、`config/index.js` 内の `devtool` プロパティを設定、または更新してください: + +```json +devtool: 'source-map', +``` + +使っているのが Vue CLI 3 ならば、`vue.config.js` 内の `devtool` プロパティを設定、または更新してください: + +```js +module.exports = { + configureWebpack: { + devtool: 'source-map', + }, +} +``` + +### VS Code からアプリケーションを起動 + +::: info +ここではポートを `8080` と仮定します。そうでない場合（例えば `8080` が使われていて、Vue CLI が自動的に別のポートを選択したとき）は、適宜設定を変更してください。 +::: + +アクティビティバーのデバッグアイコンをクリックして、デバッグ表示に切り替え、歯車アイコンをクリックして launch.json ファイルを設定したら、環境として **Chrome/Firefox: Launch** を選択します。生成された launch.json の内容を対応する設定に置き換えます: + +![Add Chrome Configuration](/images/config_add.png) + +```json +{ + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "vuejs: chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}/src", + "breakOnLoad": true, + "sourceMapPathOverrides": { + "webpack:///src/*": "${webRoot}/*" + } + }, + { + "type": "firefox", + "request": "launch", + "name": "vuejs: firefox", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}/src", + "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] + } + ] +} +``` + +## ブレークポイントの設定 + +1. **src/components/HelloWorld.vue** の `line 90` にある `data` 関数が文字列を返す部分にブレークポイントを設定します。. + +![Breakpoint Renderer](/images/breakpoint_set.png) + +2. ルートフォルダでお気に入りのターミナルを開き、Vue CLI を使ってアプリケーションを配信します: + +``` +npm run serve +``` + +3. デバッグ表示に移動して、**'vuejs: chrome/firefox'** の設定を選択したら、F5 キーを押すか、緑色の再生ボタンをクリックします。 + +4. ブレークポイントに到達すると、新しいブラウザのインスタンスが `http://localhost:8080` を開きます。 + +![Breakpoint Hit](/images/breakpoint_hit.png) + +## 代替パターン + + ### Vue Devtools + +もっと複雑なデバッグの方法もあります。最も一般的で単純な方法は、優れた Vue.js devtools [Chrome 向け](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) と [Firefox 向け](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) を使うことです。Devtools を使うことのいくつかの利点は、データのプロパティを Live Edit（ライブエディット）して、その変更がすぐに反映されることです。その他の主な利点は、Vuex のタイムトラベルデバッグが可能になることです。 + +![Devtools Timetravel Debugger](/images/devtools-timetravel.gif) + +Vue.js の本番向け・縮小化ビルド（CDN からの標準的なリンクなど）を使っているページでは、Devtools の検知がデフォルトで無効になっているため、Vue ペインが表示されないことに注意してください。縮小されていないバージョンに切り替えた場合は、それを表示するためにページのハード再読み込みが必要になるかもしれません。 + +### 単純な Debugger の記述 + +上記の例はすばらしいワークフローを持っています。しかし、[ネイティブの debugger 文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger) をコードの中で直接使うという別の方法もあります。この方法を選択した場合には、作業が終わったらこの debugger 文を削除することを忘れないようにするのが重要です。 + +```vue + +``` + +## 謝辞 + +このレシピは、[Kenneth Auchenberg](https://twitter.com/auchenberg) 氏からの寄稿を元にしています。[元の記事](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli)。 diff --git a/src/cookbook/editable-svg-icons.md b/src/cookbook/editable-svg-icons.md index 804924ac..4c534983 100644 --- a/src/cookbook/editable-svg-icons.md +++ b/src/cookbook/editable-svg-icons.md @@ -1,26 +1,26 @@ -# Editable SVG Icon Systems +# 編集可能な SVG アイコンシステム -## Base Example +## 基本的な例 -There are many ways to create an SVG Icon System, but one method that takes advantage of Vue's capabilities is to create editable inline icons as components. Some of the advantages of this way of working is: +SVG アイコンシステムを作成する方法はいろいろありますが、 Vue の機能を生かした方法として、編集可能なインラインのアイコンをコンポーネントとして作成する方法があります。この方法のいくつかの利点としては: -- They are easy to edit on the fly -- They are animatable -- You can use standard props and defaults to keep them to a typical size or alter them if you need to -- They are inline, so no HTTP requests are necessary -- They can be made accessible dynamically +- 即座に編集することが簡単です +- アニメーションが可能です +- 標準的なプロパティとデフォルトを利用して標準サイズを保つことができ、必要に応じて変更することもできます +- インラインなので HTTP リクエストが不要です +- 動的にアクセスすることが可能です -First, we'll create a folder for all of the icons, and name them in a standardized fashion for easy retrieval: +まず、すべてのアイコンを入れるフォルダを作り、検索しやすいように一定のルールで命名します: - `components/icons/IconBox.vue` - `components/icons/IconCalendar.vue` - `components/icons/IconEnvelope.vue` -Here's an example repo to get you going, where you can see the entire setup: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) +ここにセットアップの全体像を見られるサンプルのリポジトリがあります: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/) -![Documentation site](https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/screendocs.jpg 'Docs demo') +![Documentation site](/images/editable-svg-icons.jpg 'Docs demo') -We'll create a base icon (`IconBase.vue`) component that uses a slot. +スロットを利用した基本となるアイコン（`IconBase.vue`）コンポーネントを作成します。 ```html ``` -You can use this base icon as is- the only thing you might need to update is the `viewBox` depending on the `viewBox` of your icons. In the base, we're making the `width`, `height`, `iconColor`, and name of the icon props so that it can be dynamically updated with props. The name will be used for both the `` content and its `id` for accessibility. +アイコンの `viewBox` に応じて `viewBox` を更新する必要があるだけで、この基本となるアイコンをそのまま使うことができます。この基本では、 `width` と `height` と `iconColor` とアイコン名をプロパティにして、プロパティから動的に更新できるようにしています。名前は `<title>` のコンテンツと、アクセシビリティのための `id` の両方に使われます。 -Our script will look like this, we'll have some defaults so that our icon will be rendered consistently unless we state otherwise: +スクリプト部分はこのようになります。いくつかのデフォルトがあり、特に指定しない限り、アイコンが一貫してレンダリングされるようにします: ```js export default { @@ -67,32 +67,32 @@ export default { } ``` -The `currentColor` property that's the default on the fill will make the icon inherit the color of whatever text surrounds it. We could also pass in a different color as a prop if we wish. +塗りつぶし色のデフォルト `currentColor` プロパティは、アイコンの周囲のテキスト色を継承します。必要なら、別の色をプロパティとして渡すこともできます。 -We can use it like so, with the only contents of `IconWrite.vue` containing the paths inside the icon: +アイコンのパスを内包する `IconWrite.vue` だけを内容にすると、このように使えます: ```html <icon-base icon-name="write"><icon-write /></icon-base> ``` -Now, if we'd like to make many sizes for the icon, we can do so very easily: +さまざまなサイズのアイコンを作りたいとなったら、とても簡単にできます: ```html <p> - <!-- you can pass in a smaller `width` and `height` as props --> + <!-- より小さい `width` と `height` をプロパティとして渡せます --> <icon-base width="12" height="12" icon-name="write"><icon-write /></icon-base> - <!-- or you can use the default, which is 18 --> + <!-- あるいはデフォルトも使えます。デフォルトは 18 です --> <icon-base icon-name="write"><icon-write /></icon-base> - <!-- or make it a little bigger too :) --> + <!-- または少し大きくすることも :) --> <icon-base width="30" height="30" icon-name="write"><icon-write /></icon-base> </p> ``` -<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Screen%20Shot%202018-01-01%20at%204.51.40%20PM.png" width="450" /> +<img src="/images/editable-svg-icons-sizes.png" width="450" /> -## Animatable Icons +## アニメーション可能なアイコン -Keeping icons in components comes in very handy when you'd like to animate them, especially on an interaction. Inline SVGs have the highest support for interaction of any method. Here's a very basic example of an icon that's animated on click: +アイコンをコンポーネントに入れておくと、特にインタラクションによってアニメーションさせたいときにとても便利です。インライン SVG は、いろいろなやり方の中で最もインタラクションをサポートします。これはクリックでアニメーションするアイコンのとても基本的な例です: ```html <template> @@ -141,27 +141,27 @@ export default { } ``` -We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser. +移動する必要のあるパスのグループに `refs` を適用します。また、はさみの両側は連動して動く必要があるので、 `refs` を渡す再利用可能な関数を作成します。 GreenSock を使うとアニメーションのサポートや、ブラウザ間の `transform-origin` の問題を解決することができます。 <common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" /> <p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p> -You can see more animated examples in the repo [here](https://github.com/sdras/vue-sample-svg-icons/) +他のアニメーションの例は、 [こちらの](https://github.com/sdras/vue-sample-svg-icons/) リポジトリで見ることができます。 -## Additional Notes +## 補足 -Designers may change their minds. Product requirements change. Keeping the logic for the entire icon system in one base component means you can quickly update all of your icons and have it propagate through the whole system. Even with the use of an icon loader, some situations require you to recreate or edit every SVG to make global changes. This method can save you that time and pain. +デザイナーの考えは変わるかもしれません。製品要件は変わります。アイコンシステム全体のロジックを 1 つの基本となるコンポーネントにまとめておけば、すべてのアイコンを素早く更新して、システム全体に広めることができます。アイコンローダーを使っても、場合によってはグローバルな変更を行うために、すべての SVG を再作成または編集しなければなりません。この方法ならば、そのような時間と苦痛からあなたを救うことができます。 -## When To Avoid This Pattern +## このパターンを回避するケース -This type of SVG icon system is really useful when you have a number of icons that are used in different ways throughout your site. If you're repeating the same icon many times on one page (e.g. a giant table with a delete icon in each row), it might make more sense to have all of the sprites compiled into a sprite sheet and use `<use>` tags to load them. +このような SVG アイコンシステムは、サイト全体にさまざまな方法で使われているアイコンがたくさんある場合にとても便利です。1 つのページで同じアイコンを繰り返し使うならば（例えば、各行に削除アイコンのある巨大なテーブル）、すべてのスプライトをスプライトシートにコンパイルして `<use>` タグで読み込むほうが合理的でしょう。 -## Alternative Patterns +## 代替パターン -Other tooling to help manage SVG icons includes: +SVG アイコンを管理するのに役立つ他のツールには、以下のものがあります: - [svg-sprite-loader](https://github.com/kisenka/svg-sprite-loader) - [svgo-loader](https://github.com/rpominov/svgo-loader) -These tools bundle SVGs at compile time, but make them a little harder to edit during runtime, because `<use>` tags can have strange cross-browser issues when doing anything more complex. They also leave you with two nested `viewBox` properties and thus two coordinate systems. This makes the implementation a little more complex. +これらのツールはコンパイル時に SVG をバンドルしますが、実行時にそれらを編集することが少し難しくなります。これは `<use>` タグが複雑な処理をする際に、おかしなクロスブラウザの問題を引き起こす可能性があるからです。2 つの入れ子になった `viewBox` プロパティがあるために、2 つの座標系が存在します。このため実装が少し複雑になります。 diff --git a/src/cookbook/index.md b/src/cookbook/index.md index 714a89ca..32dfa922 100644 --- a/src/cookbook/index.md +++ b/src/cookbook/index.md @@ -65,7 +65,7 @@ ### このパターンを回避するケース <Badge text="任意" /> -このセクションは必須ではありませんが、書くことを強くお勧めします。 状態変化に応じてクラスを切り替えるような非常に単純なものには意味がありませんが、mixins のようなより高度なパターンには不可欠です。開発に関するほとんどの質問に対する答えは ["It depends!"]](https://codepen.io/rachsmith/pen/YweZbG) であり、このセクションではそれを受け入れます。ここでは、そのパターンがどのような時に役立つのか、避けるべき時はどのような時なのか、他の何かがより意味を持つ時はどのような時なのかを率直に見ていきましょう。 +このセクションは必須ではありませんが、書くことを強くお勧めします。 状態変化に応じてクラスを切り替えるような非常に単純なものには意味がありませんが、mixins のようなより高度なパターンには不可欠です。開発に関するほとんどの質問に対する答えは ["It depends!"](https://codepen.io/rachsmith/pen/YweZbG) であり、このセクションではそれを受け入れます。ここでは、そのパターンがどのような時に役立つのか、避けるべき時はどのような時なのか、他の何かがより意味を持つ時はどのような時なのかを率直に見ていきましょう。 ### 代替パターン <Badge text="必須 回避のセクションに付随する" type="warning" /> @@ -73,4 +73,4 @@ ## 謝辞 -ドキュメンテーションに貢献するには時間がかかりますが、この部分に時間をかけてプルリクエストを提出してくれると、感謝の気持ちを込めてやってくれます。 \ No newline at end of file +ドキュメンテーションに貢献するには時間がかかりますが、この部分に時間をかけてプルリクエストを提出してくれると、感謝の気持ちを込めてやってくれます。