2016の12月22日の記事です。他の方とは、全然違う雰囲気になってしまいましたが、読んでいただけると幸いです。Vue.js??普段の仕事では、Ruby/Railsなので、フロントエンド周りは、jQueryにCoffeeScriptで片手間感覚...↓しかし最近のフロントエンド界隈は、良くも悪くも盛り上がっていて楽しそうだなあと思う日々。Redux??「落ち着け!とりあえず日本語でOK」状態。この記事で書かれている状態そのものでした。↓Reactとかでイケてるフロントエンド開発をちょっと試したいと思っても、BabelやWebpackの設定など環境構築でつまづき、肝心のアプリケーション開発に着手できず、疲弊していく自分。「高性能」だそうです。https://jp.vuejs.org/ポイントとしては、以下の3点が主な特徴シンプルリアクティブコンポーネント指向ひとつずつ見ていきましょう。Vueというインスタンスを作り、ビューで指定したIDを元に呼び出すというイメージで割りと違和感なく理解できた。Vue他にも便利な機能がたくさん。詳細は、Vue.js公式APIドキュメントリアクティブそもそもの「リアクティブ」自体の定義が、難しいが、Vue.jsにおける「リアクティブ」は、JavaScript上で、定義したデータが何か変更されたと同時にビューも同期的(synchronize)に変更されるシステムだと解釈する(もっと抽象化したよい表現があるかもしれない)。自分もまだまだよくわかっていないが、Vue.jsのおけるリアクティブシステムは以下の図で表すことができ、データの状態を監視するWatcher(ウォッチャー)というのが、欠かせない存在らしい。ここらへんはまだよくわかってないですね、すみません🙇Vuex公式ドキュメントより引用コンポーネント指向DOMを構造的に管理するためのアーキテクチャイメージとしては、以下の図がわかりやすい。データの状態管理を整理できるといった恩恵が受けられる。実装例として、ちょっとしたTodoアプリで、Todo一覧を表示しようとする例で考察してみる。todo-itemというコンポーネントを作成する。このコンポーネントの役割としては、todoというオブジェクトが持つtextをリスト形式で表示することである。次にgroceryListのような実際のデータを持つVueインスタンスを作成する。id="app">のDOMとして指定する。これで、このDOMにおいてVueインスタンス変数であるappのデータを呼び出すことができる。作成したコンポーネントをこのDOMに注入し、v-bindでVueインスタンスで定義したtodoをループして呼び出すことができる。実際に、ビューにデータを受け渡しているのはコンポーネント内にあるpropsである。これは、親となるスコープ(この場合は、Vueインスタンス変数app)から子コンポーネントであるtodo-itemへとデータを渡す。それは、内容を動的にできるように表します。</ol></div>この例から言えることは、アプリケーションを小さな単位で分割できる疎結合な子コンポーネントの作成ができる親コンポーネントに影響を与えず改良できるつまり、jQueryでは難しかったDOMの構造化をフレームワークとして担保することができると言える。eat他にも、フォーム入力のバリデーション機能やアニメーション機能もあるが、ここでは、Vue.jsがどのような思想で、UIを構築していくかについて、触れたかったため、詳細は、素晴らしい公式ドキュメントで動くものを作ってみる月並みですが、題材は、Todoアプリにしました。対象のフレームワークがどのようにデータの入力・出力を行うかを知れば、基本的なフレームワークの理解は進むと思ったためです。モダンで普段使いを意識した構成で開発してみようと思います。実装は、ES6Electronでデスクトップアプリ化Fluxアーキテクチャに基づいたアプリケーション作成DOMをMVCで管理するのは辛いよねというところから、提唱されたアーキテクチャーFluxの概要については、漫画で説明するFluxがわかりやすかったので、これを読むと良いかも簡単に言うと、MVCだと、規模が大きくなり、どのモデルがどのイベントによっていつ何にデータが変更されたのかが把握することが難しいFluxによって、データの変更を受け付けつけるもの、変更を監視するもの、実際に変更を行うものなどのように責務を分けるようにしたそして、このFluxアーキテクチャーに基づいたライブラリが各JSフレームワーク毎に用意されている。Vuexとは?Vue.jsにおける状態管理パターンを実現するためのアーキテクチャであり、ライブラリ。Architectureから影響を受けている。状態管理パターンとは?まず、状態管理パターンの必要性として、比較的ビュー部分というのは変更が激しい部分という前提がある。そのため、ビューの表示を構成するDOMオブジェクトの状態が、いつどのように変更したのかを把握するためにこのパターンが、一つの解法アプローチとなっている。具体的には、以下の3つの概念が状態管理パターンの中心となる。実際にユーザーに表示される画面。そこから、ユーザーからの入力など何らかのリクエストを受け付ける場所アクションビューからのユーザー入力に反応して、状態の変更を行う。Vuex公式ドキュメント「Vuexとは何か?」より引用これで、単方向データフローにもとづいて、ビューをコンポーネントとして分ければ、管理しやすくなりそうだ。これだけ見ると、非常にシンプルと言える。複数の異なるビューやアクションによって、共通の状態を変更したり、共有しようとすると、状態管理はたちまち大変になり辛みが増してくる。このような課題を解決するため、Vuexでは、共有されている状態を、一箇所に集約し、それをグローバルシングルトンで管理するという方法が取られている。この方法により、コンポーネントツリーが大きなビューとなり、どのコンポーネントからでも状態へのアクセスやアクションをトリガーできる。環境構築ES6で実装したいので、トランスパイラーとして、Babelを使用するが、バンドルツールとして、Webpackも必要になってくる。自分は、Webpackの使い方があまりわかっておらず、あまりこういうところで時間もかけたくない。https://github.com/vuejs/vue-cliこれは、ドキュメントにある指示通りにコマンドを叩けば、BabelやWebpackの設定を自動で構築してくれる優れものである。今回は、これで環境構築をしてみる。initのコマンドを実行するとこんな感じで、いろいろとオプションの設定を聞かれるので、お好みで!今回は、vuexなどを使うので、ひたすらEnterファイル構成は、このように自動生成され、基本的には、app以下のファイルを実装していく。</body></html>main.jsで、各種モジュールをインポートし、Vueインスタンスを作成する。lang=scss></style>個人的には、このvueというファイルに、それぞれhtml部分のtemplate、js部分のscript、CSS部分のstyleという構成がすごく気に入っている。<taskList></taskList>というタグは、親コンポーネントであるLandingPaageView.vueの子コンポーネントを呼び出している部分である。次にVuexによる状態管理を実装していくまずは、アプリケーションの状態を保持するコンテナであるStoreを作っていく。このStoreで宣言されたミューテーション(mutations)を介して、状態の変更が、リアクティブに更新される。true})次に、mutationnsでどのような変更を行うかを宣言的に記述していく。オプションであるが、mutation-type.jsというファイルを介してのmutationnsの実装を行うとさらに良い。理由として、自分以外の誰かが、アプリケーションの実装を読んだ際、mutation-type.jsさえ読めば、そのアプリケーションがどんな動作をするのかを理解することが簡単になるからである。今回で言えば、Todoアプリケーションであるため、以下のようなミューテーションとなる。'CLEAR_COMPLETED'そして、実際にミューテーションを実装していく。}}Vuexにおいて、状態の変更を行う際には、ミューテーションをコミットすることで初めて状態の変更が可能となる。具体的なコミットの実装は以下のとおりである。実際に状態を変更するためにミューテーションをコミットするそして最後に実際のTodoアプリケーションの実装を進めていく。全ソースはこちらhttps://github.com/samuraikun/electron-vue-todo今回のTodoアプリの要件としては、大雑把にこんな感じ基本的なTodoの追加、編集、削除Todoが終わったかどうかはチェックのON/OFF終わったTodoとまだ終わっていないTodoをフィルタリングして表示/非表示を切り替えまずは、Todoの一覧リストそのものを実装していく。</div>......</template>v-forで複数あるTodoを表示したり、Todoをフィルタリングするためのメソッドを呼び出している。フィルタリングのロジックは、<script></sript>タグ内で実装していく。}</script>実装を読むと、なんとなくその意味がわかる。特徴的なのは、computedだが、これは算出型プロパティと呼ばれるVue.jsの機能の1つである。一見すると、methodsと同じように何かしらの処理を実装しており、その違いは何だろうか?という疑問が出るかもしれない。算出プロパティは依存関係にもとづきキャッシュされるという点である。再度、computedで定義された処理を即座に呼び出すことができる。これは、巨大な配列をループしたり多くの計算を必要とする際に、便利な機能と言える。Todo一覧のコンポーネントができたので、その子コンポーネントであるTask.vueを実装していく。</li></template>Todoの編集、削除機能のロジックを実装していくちなみにmapMutationsは、コンポーネント内でミューテーションをコミットできるようにするヘルパーである。今後PHPフレームワークのLaravelがVue.jsを導入したり、私たちはなぜReactではなくVue.jsを選んだのかの記事で言われているように、React、Angularで違和感を感じた部分をVue.jsが補っている部分があるから人気が出ているかなあと感じた。requestStockLike527samuraikun@samuraikunトッキョーで、ウェッブエンジニャーやってます。upLoginユーザーは見つかりませんでした。