vue.js のドキュメントを日本語にする


勝手にドキュメントを日本語にするシリーズ、第二弾。先日行われたウェブ勉強会、Dist #14 のテーマでもあった Vue.js のドキュメントを勝手に日本語にします。既に日本語版のドキュメントは作られているのですが、自分の勉強のために車輪の再発明をします。

Introduction

What is Vue.js?

Vue.js とは

パス

 

Getting Started

始めてみよう

The easiest way to try out Vue.js is using the JSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. Or, you can simply create an .html file and include Vue with:

Vue.js を試してみるには、私達が JSFiddle 上に用意したサンプルを使うのが一番簡単です。(JSFiddle Hello World example) これを、このサイトとは別のタブで開いて、これから説明するいくつかのデモを一緒に実行していきましょう。もしくは HTML ファイルをつくり、<script src=“https://unpkg.com/vue/dist/vue.js”></script> とヘッダーに記述することで、 Vue.js を読み込んで使用してもいいでしょう。

The Installation page provides more options of installing Vue. Note that we do not recommend beginners to start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

インストール方法を説明したページでは、これ以外にもたくさんのイントール方法を紹介していますが、Node.js ベースのビルドツールに慣れていない初心者には、vue-cli の使用をおすすめしません。

Declarative Rendering

宣言するだけで表示する

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

Vue.js の中核は、データを宣言するだけで、自動的に DOM にレンダリングしてくれるシステムにあります。しかも、回りくどくないテンプレート用の記法を用いてそれを実現します。

We have already created our very first Vue app! This looks pretty similar to just rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive. How do we know? Just open your browser’s JavaScript console (right now, on this page) and set app.message to a different value. You should see the rendered example above update accordingly.

上記のコードを作成したので、私達は最初の Vue.js によるアプリケーションを創造したことになります!このアプリケーションは単に文字列をテンプレートエンジンを用いて表示しただけのように思うかもしれませんが、実は Vue.js がその背後で沢山の仕事をしてくれています。データと DOM が結び付けられ、一方に変更を加えれば、もう一方がそれに反応するようになっています。(訳注:これを reactive と表現する) 確認してみましょう。ブラウザで JavaScript のコンソールを開いて(さあ今すぐ開いてください。このページでです。) app.message 今とは別の値を指定しましょう。(訳注:例えば、コンソールでapp.message=”something new”と実行する) すると上記のデモの値が変更されることが確認できるはずです。

In addition to text interpolation, we can also bind element attributes like this:

文章のインターポレーション(訳注:今デモで行った、HTMLに記述された”{{データ名}}”をVueインスタンスのデータに基づいて変更する機能)だけではなく、要素の属性を指定することもできます。

Hover your mouse over me for a few seconds to see my dynamically bound title!

マウスを私の上に何秒か重ねると、動的に指定されたタイトルを見ることができますよ!

Here we are encountering something new. The v-bind attribute you are seeing is called a directive. Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”

さあ、新しい概念が登場しました。v-bind 属性です。これをディレクティブと呼ぶことにします。ディレクティブには、冒頭に「v-」をつけます。この「v-」は  Vue.js によって提供される特殊な属性であることを示しています。そしてお気づきのように、これによってリアクティブな挙動を表示されたDOMに与えます。要するにここでは「この要素のタイトル属性を、Vue インスタンスの message プロパティに従って、常に更新する」という機能を与えています。

If you open up your JavaScript console again and enter app2.message = ‘some new message’, you’ll once again see that the bound HTML – in this case the title attribute – has been updated.

JS コンソールをもう一度開いて、app2.message = ‘some new message’ と入力すると、指定されたHTML(ここではタイトル属性ですね)が更新されるのを確認できるはずです。

Conditionals and Loops

条件分岐と繰り返し

It’s quite simple to toggle the presence of an element, too:

要素を存在させるか消すかを切り替えるのも、とても簡単にできます。

Go ahead and enter app3.seen = false in the console. You should see the message disappear.

さあコンソールで app3.seen = false と入力してください。メッセージが消えたことを確認できたはずです。

This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

この例からわかるように、Vue.js はデータをテキストや属性だけではなく、DOMの構造に対しても関連付けることができます。さらに、Vue.js は強力なエフェクトをもっており、Vue.js によって要素が挿入されたり、更新されたり取り除かれた際には、自動的にトランジション・エフェクトを適用させることができます。

There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:

他にも独自の機能を持った、沢山のディレクティブがあります。例えば v-for ディレクティブは、vue インスタンス内の配列を用いてアイテムを作成し、リストを表示するために使うこともできます。

In the console, enter app4.todos.push({ text: ‘New item’ }). You should see a new item appended to the list.

コンソールで enter app4.todos.push({ text: ‘New item’ }) と入力してみましょう。するとリストの最後に新しいアイテムが追加されたことを確認できるはずです。

Handling User Input

ユーザーの操作に対応する

To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:

ユーザーの行動がアプリケーションに反映されるように、v-on ディレクティブを用いて、Vue インスタンスのメソッドを起動するイベントリスナーを、DOM 要素に付加することができます。

Note in the method we simply update the state of our app without touching the DOM – all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.

注目してほしいのは、メソッド内で DOM を操作することなく、アプリの状態を変更している点です。DOM は全て Vue によって操作されており、あなたはロジックだけを書けばいいのです。

Vue also provides the v-model directive that makes two-way binding between form input and app state a breeze:

Vue.js にはインプットとアプリケーションの状態を、双方向にバインディングするためのディレクティブもあります。v-model です。

Composing with Components

The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

コンポーネントシステムは、Vue.js におけるもう一つの重要なコンセプトで、何故重要かといえば抽象化をしてくれるからです。抽象化とはつまり、大きなアプリケーションを、小さくて、しかも自身に内容が内包されていて、使い回しができるコンポーネントによって構成するということです。どんなアプリケーションのインターフェイスも、コンポーネントのツリーに抽象化出来るはずなのです。

In Vue, a component is essentially a Vue instance with pre-defined options. Registering a component in Vue is straightforward:

Vue.js においてコンポーネントは、Vue コンストラクタ? に予め定義されたオプションによって作成されたインスタンスです。コンポーネントの登録は非常に簡単です。

//「todo-item」という名前の新しいコンポーネントを追加する方法

Now you can compose it in another component’s template:

さきほど定義したコンポーネントを使ってみましょう。定義したコンポーネント名をタグに持つ要素を作成すると、todo-item というコンポーネントを担うインスタンスが作成されます。

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let’s modify the component definition to make it accept a prop:

しかしこれでは全ての todo-item コンポーネントには同じテキストが表示されてしまいます。親から子コンポーネントに情報を渡せた方がいいですよね。コンポーネントが prop (訳注: = 親と子をつなぐ柱、つまりこれを介して情報を受け取る) を受け取れるように、内容を変えてみましょう。

// todo-item コンポーネントはこう書き換えることで、”prop” を受け取ります。これはカスタム属性のようなものです。ここでは todo という名前を与えられています。

Now we can pass the todo into each repeated component using v-bind:

(訳注:かなり勝手に足しました。) コンポーネントの中で使用される props であり、todo という名前を与えられたオブジェクトを、繰り返し使用されるそれぞれのコンポーネントに、v-bind を使って与えることができます。(訳注:v-bind:コンポーネントで定義したprops名=”与える値”でコンポーネントに値を渡すことができる。)

// このリストは state と紐付けられ、それを表示しているので、コンテンツは state の変化に伴って更新されます。

This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our <todo-item> component with more complex template and logic without affecting the parent app.

上記の例はいささか不自然なところもありますが、しかしアプリケーションを2つの小さなユニット分けることができ、そして props インターフェイスを使うことで、子コンポーネントを親コンポーネントから上手く切り離すことができました。さらに改良するためにはもう少し複雑なテンプレートとロジックを使っていけばいいでしょう。そうすれば、親コンポーネントに影響を与えることなくより改良されたアプリケーションを作ることができます。

In a large application, it is necessary to divide the whole app into components to make development manageable. We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:

大きなアプリケーションにおいて開発を管理できるようにするためには、アプリ全体をコンポーネントに分けることが必要不可欠です。コンポーネントについてはガイドで後ほど話しますが、イメージとしては次のようなコードになります。

Relation to Custom Elements

カスタム属性との関係

You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec. That’s because Vue’s component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API and the is special attribute. However, there are a few key differences:

Vue が扱うコンポーネントは、ウェブコンポーネント規格である「カスタム属性」によく似ていることにお気づきでしょう。Vue コンポーネントの構文はその規格のをなんとなく参考にしているからです。例えば、Vue コンポーネントは”Slot” API と “is 特殊属性” を実装していたりします。しかし、幾つかの大きな違いもあります。

  1. The Web Components Spec is still in draft status, and is not natively implemented in every browser. In comparison, Vue components don’t require any polyfills and work consistently in all supported browsers (IE9 and above). When needed, Vue components can also be wrapped inside a native custom element.

  2. Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.

  1. ウェブコンポーネント規格は、まだ草稿段階であり、全てのブラウザにネイティブで実装されてはいません。しかし Vue コンポーネントは polyfill などを必要とせずに、Vue.js がサポートする全てのブラウザで動きます。(IE9 とそれ以上のブラウザ)  また、必要であれば Vue コンポーネントをネイティブのカスタム属性でラップすることも可能です。
  2. Vue コンポーネントは 通常のカスタム属性にはない重要な機能を提供します。主なものとして、コンポーネント間でデータをやり取りする機能、カスタムイベントによる連携、ビルトツールへの統合(訳注:おそらくvue-cliなどでビルドした時にvue コンポーネントをうまいこと色々やってくれる機能のこと) などです。

Ready for More?

さらにガイドを読み進めましょう

We’ve just briefly introduced the most basic features of Vue.js core – the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!

簡単に Vue.js の重要な機能を紹介してきましたが、ガイドの残りのページでは、他の高度の機能やをより詳細に解説していきますので、是非全てに目を通してほしいです。

The Vue Instance

Constructor

難しいのでパス

Properties and Methods

プロパティとメソッド

Each Vue instance proxies all the properties found in its data object:

それぞれの Vue インスタンスは、それ自体が持つ data オブジェクトの全てのプロパティに対して擬似的にアクセスできます。(= proxies) (訳注:簡単にいうと、次の例でいえば、vm.data.a と正式にはアクセスするが、これを簡易的に vm.a とアクセすることも出来るということ)

It should be noted that only these proxied properties are reactive. If you attach a new property to the instance after it has been created, it will not trigger any view updates. We will discuss the reactivity system in detail later.

 

In addition to data properties, Vue instances expose a number of useful instance properties and methods. These properties and methods are prefixed with $ to differentiate them from proxied data properties. For example:

Template Syntax

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Vue.js はHTML ベースのテンプレート書式を用いています。このテンプレート書式は、宣言するだけで、レンダーされる DOM とVue インスタンス内部のデータとを結びつけます。全ての Vue.js のテンプレートは、正当なHTMLなので、仕様に準拠したブラウザとHTML構文解析システムによって処理されます。(訳注:HTMLなのでコンパイルしなくても、最初からブラウザが読んでくれる、ということをいっているのではないかと予想)

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal amount of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Vue.js の内部では、これらのテンプレートはコンパイルされ、ヴァーチャル・DOM・レンダー関数に変換されます。Vue.js は reactivity system が組み込まれているので、アプリケーションの状態が変化した場合には、再レンダリングすべき最小限のコンポーネントの対象を知的に把握し、最小限の DOM 操作を適用します。

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

パス

Interpolations

インターポレーション

Text

The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

一番基礎的なデータバインディング(訳注:= データと DOM を関連付けること)は「口ひげ=(2つの{のこと。つまり{{)」構文を用いた、文章のインターポレーションです。

The mustache tag will be replaced with the value of the msg property on the corresponding data object. It will also be updated whenever the data object’s msg property changes.

{{msg}}タグは、Vue インスタンス内のデータオブジェクトのうち、msg プロパティを持つオブジェクトの「値」に、置き換えられます。{{msg}}の置き換えは、もちろんデータオブジェクトのmsg プロパティが変更された場合に、常に実行されます。

You can also perform one-time interpolations that do not update on data change by using the v-once directive, but keep in mind this will also affect any binding on the same node:

データの更新によってアップデートをせず、一度だけインターポレーションさせることもできます。その場合にはv-on ディレクティブを使用します。しかしこの場合には同じノード?の全てに影響を与える点に注意してください。(訳注:よくわからない)

Raw HTML

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:

{{}}構文によるテキストのインターポレーションでは、データは単なるテキストとして処理されますが、HTMLに置き換えたい場合は、v-html ディレクティブを使用してください。

See the Pen vuejs html by nakanishi (@nakanishi) on CodePen.

The contents are inserted as plain HTML – data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

単なるHTMLが挿入されるので、データバインディングは無視されます。(訳注:例えば上記 codepenデモを見てほしいのだが、binding というデータの中で{{}}を用いてバインディングをさせよう試みても、単なる文字列として書き出されてしまうということではないか) 注意してほしいのですが、v-html ディレクティブを使用して、テンプレート部品を作成しないでください。何故なら Vue.js は文字列ベースの「テンプレートエンジン」ではないからです。その代わりにコンポーネントを使用することが望ましいです。

(HTML インターポレーションは危険性もあるので、その安全性を担保できるように注意してねとのこと)

Attributes

属性

Mustaches cannot be used inside HTML attributes, instead use a v-bind directive:

{{}}はHTML属性の中では使用できないので、代わりにv-bind ディレクティブを使用します。

It also works for boolean attributes – the attribute will be removed if the condition evaluates to a falsy value:

(訳注:文章と挙動が一致していないように思えたので補足。例えばv-bind:disabled=”something” はsomethingがtrueであれば、disabled属性=disabledをHTMLに加えている)

See the Pen vuejs boolean by nakanishi (@nakanishi) on CodePen.

Using JavaScript Expressions

パス

So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:

Filters

Vue.js allows you to define filters that can be used to apply common text formatting. Filters are usable in two places: mustache interpolations and v-bind expressions. Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol:

See the Pen vuejs filter by nakanishi (@nakanishi) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *