Vue.js + ES6: Vue公式サイトの「例」にチュートリアルを書いた

Vue.js公式サイトには「[例](https://jp.vuejs.org/v2/examples/)」のページがあり、12の作例のコードが掲げられています(図001)。けれど、コードに少しだけコメントがあるほかは、一切説明はありません。そのうちの6作例について、これまで解説を書きためてきました。本稿では、それをご紹介します。なお、構文はECMAScript 2015に改め、一部のコードには改善を加えました。

#### 図001■Vue.js「例」の12の作例
![qiita_2001001_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128949/44eac0f3-86c8-d1f3-c45f-780434d68c25.png)


# Markdownエディタ
「[Vue.js + ES6: 簡単なMarkdownエディタをつくる](http://www.fumiononaka.com/Business/html5/FN1703004.html)」は、わずかなコードでつくられた「[Markdown エディタ の例](https://jp.vuejs.org/v2/examples/)」の解説です。Vue以外にもライブラリを使うことで、JavaScriptコードは20行足らずに収められています。

Markdownライブラリの仕様が変わったことにもとづき、サニタイジングには専用のライブラリを用いました。公式サイトの「Markdown エディタ の例」にはないアップデートです。


#### サンプル001■Vue.js + ES6: Markdown Editor Example
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="FumioNonaka" data-slug-hash="YzzgYyL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Markdown Editor Example">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/YzzgYyL">
  Vue.js + ES6: Markdown Editor Example</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# グリッドコンポーネント
「[Vue.js + ES6: グリッドコンポーネントをつくる](http://www.fumiononaka.com/Business/html5/FN1710004.html)」は、公式サイトの「[グリッドコンポーネントの例](https://jp.vuejs.org/v2/examples/grid-component.html)」にもとづき、コンポーネントの使い方を知るのによい作例です。、データのコレクション(リスト)は、`Array`クラスの新しいメソッドとアロー関数式`=>`で扱うようにしました。

#### サンプル002■Vue.js + ES6: Grid component with sort and search
<p class="codepen" data-height="320" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="ZEEZOXZ" style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Grid component with sort and search">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/ZEEZOXZ">
  Vue.js + ES6: Grid component with sort and search</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# ツリー表示
「[Vue.js + ES6: 再帰的なコンポーネントでツリー表示をつくる](http://www.fumiononaka.com/Business/html5/FN1802008.html)」は、テンプレートに自分自身を入れ子にして読み込む「[ツリー表示の例](https://jp.vuejs.org/v2/examples/tree-view.html)」について解説しました。基本となる構造を階層化して表現する公式サイト「[再帰的なコンポーネント](https://jp.vuejs.org/v2/guide/components-edge-cases.html#%E5%86%8D%E5%B8%B0%E7%9A%84%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)」の作例です。

#### サンプル003■Vue.js + ES6: Tree view
<p class="codepen" data-height="400" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="zYxoRbZ" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Tree view">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/zYxoRbZ">
  Vue.js + ES6: Tree view</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# SVGグラフ
「[Vue.js + ES6: SVGでレーダーチャートを操作する](http://www.fumiononaka.com/Business/html5/FN1803005.html)」は、公式サイトの「[SVGグラフの例](https://jp.vuejs.org/v2/examples/svg.html)」がお題です。SVGでレーダーチャートを描き、値がスライダで動的に操作できます。さらに、データを新たに加えたり除いたりすることも可能です。

このチュートリアルでは、構文をECMAScript 2015に改めるだけでなく、コードにいくつかの手を加えました。「[Vue.js公式サイトの『SVGグラフの例』を改善する](https://qiita.com/FumioNonaka/items/09eeec1dd24ac422a9bb)」にまとめましたので、興味のある方はお読みください。

#### サンプル004■Vue.js + ES6: Radar chart with SVG controlled dynamically - final
<p class="codepen" data-height="400" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="yLLdJJp" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Radar chart with SVG controlled dynamically - final">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/yLLdJJp">
  Vue.js + ES6: Radar chart with SVG controlled dynamically - final</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# ラッパーコンポーネント
「[Vue.js + ES6: コンポーネントをラップする](http://www.fumiononaka.com/Business/html5/FN1803003.html)」は、Vue.js公式サイト「[ラッパーコンポーネントの例](https://jp.vuejs.org/v2/examples/select2.html)」にもとづき、カスタムコンポーネントの中にjQueryプラグインSelect2をラップしました。また、コードはより簡潔に書き改めています。

#### サンプル005■Vue.js + ES6: Wrapper component using jQuery plugin Select2
<p class="codepen" data-height="320" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="abzmeBg" style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Wrapper component using jQuery plugin Select2">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/abzmeBg">
  Vue.js + ES6: Wrapper component using jQuery plugin Select2</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

さらに、複数項目が選べる応用例も加えました。

#### サンプル006■Vue.js + ES6: Wrapper component of multi-select dropdown list with Select2
<p class="codepen" data-height="320" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="rNaMXmR" style="height: 320px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Wrapper component of multi-select dropdown list with Select2">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/rNaMXmR">
  Vue.js + ES6: Wrapper component of multi-select dropdown list with Select2</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


# TodoMVC
Vue.js公式サイト「[TodoMVC の例](https://jp.vuejs.org/v2/examples/todomvc.html)」は、SPA(シングルページアプリケーション)のチュートリアルでよく採り上げられるTodoリストのサンプルです。けれど、やたらとボタンが並ぶことなく、必要に応じて表示されたり、確定や取り消しは[enter]/[esc]といったキー入力で済ますなど、インタフェースが洗練されています。

このチュートリアルは単発でなく、シリーズでの解説です。さらに、Vue CLIによる単一ファイルコンポーネントで組み立てたり、Vuexも加えた別シリーズに展開するなど、手を変え品を変えた記事が書き上がりました。詳しくは「[Vue.js + ES6: 公式サイトTodoMVCの例をいろいろな手法でつくってみる](https://qiita.com/FumioNonaka/items/9769638c1a113f08d585)」をお読みください。

#### サンプル007■Vue.js + ES6: Vue TodoMVC 05
<p class="codepen" data-height="360" data-theme-id="default" data-default-tab="js,result" data-user="FumioNonaka" data-slug-hash="bGGmXqW" style="height: 360px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue.js + ES6: Vue TodoMVC 05">
  <span>See the Pen <a href="https://codepen.io/FumioNonaka/pen/bGGmXqW">
  Vue.js + ES6: Vue TodoMVC 05</a> by Fumio Nonaka (<a href="https://codepen.io/FumioNonaka">@FumioNonaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>