VueJSでタスク管理アプリを作ってみた(初心者向け)

VueJSで簡単なタスク管理アプリを1ヶ月くらいちまちま作ってたので仕組みとか書いていきます。Herokuでテキトーにデプロイしました。
VueJS初学者、仕組みなどが分からない人の参考になれば嬉しいです。

作ったWebアプリはこちら(herokuの無料枠のため時間がかかります)
https://vtodoapp.herokuapp.com/

ソースコードはこちら(VueJS関連のはapp/javascriptに入ってます)
https://github.com/pei223/vtodoapp

 

仕組み

 詳しい人に怒られそうな気がしますが、こんな感じです。間違ってたらぜひコメントください!
サーバーとエンドユーザー間はJSONデータのみやりとりして、受け取ったJSONデータからVueJSがHTMLをレンダリングして、ユーザーにはそのHTMLが表示されるといった感じです。

フロントエンド側の仕組み

 フロントエンド側は左の図のようになっています。他にも認証などのページはありますが、ただ入力フォーム出してPOSTしたり認証用トークンの処理とかなので省略します。
例としてindex.vueについて説明します。index.vueはTODO一覧を表示するページです。出力するTODOのデータや検索条件、現在何ページ目なのか、などのデータを保持します。

paging.vueはindex.vueが保持しているページ数・検索条件を使って指定したページにジャンプしたり、ページのリストを表示する”ページング処理”をします。
指定したページへジャンプする処理はAPIサーバから検索条件とページ数を指定したTODOデータを取得して、index.vueにあるTODOのリストを更新することで再レンダリングするという感じです。

searchbox.vueは検索ボックスの表示、検索の処理をします。検索ボックスで指定された条件を使ってTODOデータを取得して、index.vueにあるTODOのリストを更新することで再レンダリングします。

sign_in_header.vueはログイン中の時のヘッダーを表し、TODO一覧と新規登録などで子コンポーネントとして利用します。ログアウト処理や各メニューへのリンクの表示をします。

 

感想

やはりサーバー側でHTMLレンダリングする構成に比べて速いと感じました。特にサーバ側の処理能力が低いのでより効果を実感しました。
今回はherokuだったため単一デプロイでした。RailsのAPIサーバとVueJS、HTMLを置くHTTPサーバを分けると、より各構成の依存度が低くなると思います。
ちなみに認証関連はDeviseというgemを使っており、テキストエリアはSimpleMDEで装飾してます。レイアウトはBootstrap、fontawesome、jQueryなど使ってます。