なんとな~くしあわせ?の日記

「そしてそれゆえ、知識そのものが力である」 (Nam et ipsa scientia potestas est.) 〜 フランシス・ベーコン

Hanami + Vue.jsでTODOアプリを作った

REST APIで動くSPAを作ってみたかったので、TODOアプリ*1を作った。

まずはバックエンドとフロントエンドの分離を目指したかった。構成はこんな感じ:

  • バックエンド:Hanami
  • フロントエンド:Vue.js with webpack

vue-hanami-todo.herokuapp.com

f:id:panzer-jagdironscrap1:20180325230054p:plain

資料

やったこと

  • バックエンド: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のドキュメントを読んで実装しました。

  • 細かいHTML要素はプログラマーに対してうまく隠蔽されているので、やりやすいです。感銘を受けました。
    • 下記は「hidden要素がVue.jsで使えないのか?」という質問ですが、解答は「使う必要はない」なのです
    • 例えば、今までのアプリならWEBアプリからDBの1要素を削除する場合、HTMLにその1要素のキー値をhiddenなどで用意する必要がありましたが、Vue.jsを使えばそのようなものを用意する必要がなくなります。なぜならVue.jsが自分の中でid要素をオブジェクトとして持っているからです。

github.com

4.Ajaxにはaxiosというライブラリを使用しました

特に感想なし、ここはjQueryで書くのとそんなに変わんないかな?

*1:本棚アプリのような練習用アプリです https://github.com/hangingman/vue_hanami_test