Hanami + Vue.jsでTODOアプリを作った
REST APIで動くSPAを作ってみたかったので、TODOアプリ*1を作った。
まずはバックエンドとフロントエンドの分離を目指したかった。構成はこんな感じ:
- バックエンド:Hanami
- フロントエンド:Vue.js with webpack
資料
- Vue.jsではじめるMVVM入門 - DeNA Design
- Hanamiでwebpackを使う方法 - Qiita
- Vue.js初心者向け:Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita
やったこと
- バックエンド:Hanami
- 1.REST APIの作成(これは以前このブログでやりましたね)
- フロントエンド:Vue.js with webpack
- 2.Hanamiのassetsの仕組みを使わずに、assets-webpack-pluginで、javascriptをビルドして配信
- 3.あとはVue.jsではじめるMVVM入門の記事のとおりにVueのコードを書いて、HanamiとAjaxでつなげます
- 4.Ajaxにはaxiosというライブラリを使用しました、使いやすかったです
以下、もう少し詳しく
バックエンド:Hanami
1.REST APIの作成
以下の記事を参照
nantonaku-shiawase.hatenablog.com
フロントエンド:Vue.js with webpack
2.assets-webpack-pluginで、javascriptをビルドして配信
ほとんどHanamiでwebpackを使う方法 - Qiitaに書かれていることを実行したのみです。ざっくりとした流れ。
- Hanamiのassetsの仕組みを無効化
- yarnで依存するjavascriptのパッケージをインストール → package.jsonに依存関係が記録される
- webpackを実行してjavascriptを単一ファイルで読み込めるようにする
- それをassets-webpack-pluginで読み込む
これにより、Hanamiのアーキテクチャを利用しつつwebpackの恩恵を享受できるようです。yarnとwebpackはすばらです!何が素晴らしいかって、完全なパッケージ管理システムができていることです。
3.Vue.jsではじめるMVVM入門の記事のとおりにVueのコードを書いて
ここは順当にVue.jsのドキュメントを読んで実装しました。
- Vue.jsを使うと、WEBアプリのイベントをGUIアプリのイベントのように細かく扱えます
- 細かいHTML要素はプログラマーに対してうまく隠蔽されているので、やりやすいです。感銘を受けました。
- 下記は「hidden要素がVue.jsで使えないのか?」という質問ですが、解答は「使う必要はない」なのです
- 例えば、今までのアプリならWEBアプリからDBの1要素を削除する場合、HTMLにその1要素のキー値をhiddenなどで用意する必要がありましたが、Vue.jsを使えばそのようなものを用意する必要がなくなります。なぜならVue.jsが自分の中でid要素をオブジェクトとして持っているからです。
*1:本棚アプリのような練習用アプリです https://github.com/hangingman/vue_hanami_test