【翻訳】自分の Vue アプリを 2.0 に移行し始めた件、及びこれまでに私が見つけたリソースに関する短い投稿
この記事はhttps://benjaminlistwon.com/blog/vue-20/の翻訳です。翻訳を快諾してくれたBenjaminさん、ありがとうございました。
原文のくだけた感じを残しつつ翻訳するように努めましたが、日本語がこなれていない部分もあるかと思います。そのような箇所を見つけた場合はコメント欄にて指摘してもらえると幸いです。
自分のVueアプリを2.0に移行し始めた件、及びこれまでに私が見つけたリソースに関する短い投稿
2016/9/14
数週間前に私は休暇から戻り、息子は新学期が始まったので、再び自宅オフィスは平穏で静かになりました。私が留守の間、VueのアプリでHandsontable（HOT）を使うために私が書くと言及していたVueコンポーネントに誰かが着手していました。私は素晴らしい将来のために、それをVue 2.0に書き換えようとしており、それが済んだら喜んでGitHubに追加したいと私は述べていました。
おやおや、大変な目に逢いそうだなぁ。
3行で頼む この記事の末尾にリソースのリンク集があります。またVue 2.0のHOTコンポーネントは来週完成の予定です（訳注：9/28付の記事"VUEX CHAT PART 2"によると「作業中」）。それまでの間、もし0.xのHOTコンポーネントを探しているなら、あなたはfundonによる偉大なプロジェクトを形成しているこのサンプル（訳注：リンク切れ修正）をベースにできます。
ところでVue 1.xについては？
確かに、もし少しの間Vueから離れていた、あるいは多分ちょっと瞬きしていただけでも、あなたは多くを逃している可能性があります。いくつかのハイライトを要約します：
- 2016年6月10日：v2.0.0-alpha.1 最初のv2リリース（続く6日間で3つ以上）
- 2016年6月16日：v1.0.25 まだv1で懸命に取り組んでいます
- 2016年7月28日：v1.0.26 現在の1.x安定版リリース
- 2016年7月7日：v2.0.0-beta.1 最初の2.0βリリース（8つのαの後、#やれやれ）
- 2016年8月10日：v2.0.0-rc.1 最初の2.0 RC（8つのβの後、#何ともはや）
- 2016年9月13日：v2.0.0-rc.6（ひと月に6リビジョン！）
- （訳注：2016年10月1日：v2.0正式版リリース）
OK、2.0への移行は何がそんなに難しいの？
私がすぐ見つけたように、様々なRCのリリースノートには「破壊的な変更」という言葉がたくさん使用されています。変更点とその理由、そしてどのように移行するかについてより多く説明しているいくつかの有用なリソースを偶然見つけるまでに私はしばらく時間がかかりましたが、0.8→2.0あるいは1.0→2.0でさえどのように移行するかの文書にはまだ多くのギャップがあります。
Vue 2.0は完全に書き直され、私が見ることができるほぼすべてのもの - より良いコードの構造、優れたパイプライン、より魅力的で、より速く、より少ないリソース消費など - は、どれを取っても2.0がアプリの構築のために本当に素晴らしいことをしようとしていることを意味するものです。
しかし、結果として2.0は間違いなくまだ非常に移ろいやすいです。あなたがA→Bのシナリオを探している場合、Bは良く知られているものですが、それはまだありません。そのことは既存のアプリを変換するのに時間を要することになります。
でも待って、もっとあるよ！
Vueの変更を把握したと思ったちょうどその時、2.0をサポートするためにvuexも2.0になっていたことに私は気づきました！
私のHOTコンポーネントはローカルコンポーネントdataとcomputedプロパティで動作するように作られていたため、vuex（訳注：原文の"vex"はtypoと思われる）のstoreを通すのみならず、全面書き直しの羽目になることも私は理解しました。
Vuexの変更はVueの変更と連動しており、ぶっちゃけ、主にmapGetters、mapActions、mapStateそしてmapMutationsの追加は、多くのVue自体の変更よりも私にとってはより魅力的です。
これら四騎士（訳注：mapGetters、mapActions、mapState、mapMutationsの4つ）はヨハネの黙示録のそれではなく、その代わりあなたがコンポーネントを書く生活をものすごく楽にします。これらをES6のスプレッド演算子（...）と組み合わせることで、すべてのimport foo from vuex/action、その他過去にコンポーネント上で散らかしたもの無しに、あなたは非常に簡単にstoreのイベントやアクションにコンポーネントを添付できます。
マジで、mapStateはあなたの人生を変えるでしょう。
刑事コロンボが言うように、「あとひとつだけいいですか」
vue-routerのことを思い浮かべたあなた、大変良くできました。どのようにvuexが変更をディスパッチするかを同期し、一般的にして保持しするために、vue-router（訳注：原文の"vie"はtypoと思われる）は新しいリリースの束を持っています。最大の変更は最初のβ版のリリースノートで文書化されています。
正直に言うと、私はこれまでvue-routerの変更をこんなに深く掘り下げたことがありませんでした。なぜなら私のアプリのほとんどが「ページ」全体をロードするよりも、component :is=、またはv-forループの一部として一緒に使用するtype変数に基づいて動的にコンポーネントを挿入するためです。
アプリで「戻る」機能をサポートしたい場合、私はここで深堀りする必要があることを期待しています。
虎穴に入らずんば虎児を得ず
0.x上のこれら多くのためのこの中ですべての大きな変化 - 少なくともこれらオーサリングコンポーネントまたはより複雑な、データ駆動型アプリのためのもの - は2つの基礎的な変更に要約されます：
1. Vue 2.0では$dispatchと$broadcastが非推奨なので、もしあなたがコンポーネント間、またはアプリ内でのどこであってもイベントリスニングのためにそれらを使用している/していた場合、$emitと$onに移行する必要があります。これは単一のコンポーネント内ではあまり悪いことではありません（ほぼ単なる検索＆置換）が、あなたが集中store、またはvuexを使用していなかった場合には、コンポーネント間通信は巨大な書き直しに等しいです。
2. Vuexは現在ミューテーションを次々commitするアクションをトリガするためにdispatchを使い、そしてdispatchとcommitの両方はもはや可変引数を取りません。すなわち、それらは固定数の引数を受け入れるだけであり、1番目はトリガされるアクションまたはミューテーション、2番目はペイロード（より多くの構造化データのblobを持つ必要がある場合は、オブジェクトにすることが可能）です。
このすべてがより良くするためのものです。2.0で動くようにスタンドアロンコンポーネントとアプリを移植した結果、私はVueがどのように動作するかについてより学んだだけでなく、すこし優れた、よりレスポンシブルなプログラマーになりました。
ここで重要なのは、Vueの基本（またはリアクティブなフロントエンド）は、コンポーネントはデータによって駆動されるべきであるということです。以上。
全てのデータの変更はそれらが発生するコンポーネントに反映され、そしてmapStateのようなツールの魔法はそこに出番があり重宝します。多く（ほとんど？）のケースでは追加のgetterを構築する必要はありません、なぜならcomputedプロパティオブジェクトは直接共有状態への参照を含めることができるからです。
それ以上に、多くの理由によりデータのミューテーションを求めるどんなユーザーインタラクションもそのデータを直接操作すべきではありません。少なくともユーザーアクションを直接ミューテーションに縛ることはあまりに密結合なためそのアクションの将来の変更や修正が許されなくなることを意味します
このことはvuexのmodulesを動かす方法のためコードを少し冗長にします。サンプルやドキュメントでも、アクション、ミューテーション、その他に分割された面倒な個別のファイルを持っています。数十のモジュールのために数百の機能を持っていたファイルの単一モジュールのために何かを突きとめることはしばしば複雑でした。
2.0では、モジュール自体の中にミューテーションをカプセル化し、アクションのすべてをstoreのルートに配置することが容易です。これはモジュール間のミューテーションを構成することができるアクションを可能にし、すべてのアクションを参照するための単一点を提供します。より良いカプセル化のためにはいいですよね。
私は2.0に移行すべき？
- もし本番アプリで作業している場合は、いいえ、まだです。
- もしちょうど始めようとしている場合は、はい、2.0で始めましょう。
- もしなんとなく何かの途中、または周辺をいじっている場合は、それは間違いなくあなたがより良いアプリを書くのに役立ちますので、調べる価値があるかもしれません。
助けて、ドキュメントが無いよ
確かに、現時点では"どうやって ○○ Vue 2.0"でググっても100のStackOverflowの答えを得ることは期待できません。なので、私は可能な限りネットの海を彷徨って（訳注：原文の"beens"は"been"のtypoと思われる）、移行を容易にする（そしておそらくあなたを1,2錠のイブプロフェン（訳注：頭痛薬）から守る）のに役立ついくつかのリソースをここに置きます：
- Vue 2.0アナウンス：2.0がキックオフされています
- Vue 2.0変更リスト：何が入って、何が無くなり、そして何が変わったかの仕様書とチェックリスト
- Vue 2.0リリースノート：2.0が登場するのに合わせてフォローしてください
- Vue 2.0ドキュメント：私はこれを見つけるのに長い時間がかかりました。大切にし、共有し、決してリンクを失わないように！（訳注：現在はhttps://vuejs.org/が2.0化されています）
- Vue 2.0スターターキット：ちょうど今日見つけました。webpackを使用している場合は大きな修正を1つ備えています。
- Vuex 2.0リリースノート：Vueのリリースと足並みを揃えていますが、vuex固有の変更が含まれています
- Vue-router2.0リリースノート：これもまたVueのリリースと足並みを揃えています。
- Vueフォーラム：ぜひ参加しましょう。問題を解決するたくさんの議論とグループ。
- Gitter上のVue：slackと似ていますが、よりコアな技術オタクのために。
