pei’s blog

情報系の大学を出たSE1年生。主にプログラミング(機械学習寄り)の話題を書いていきます。

VueJSでタスク管理アプリを作ってみた。

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


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


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



仕組み


f:id:peiprog:20180303190941p:plain

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


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


f:id:peiprog:20180303190630p:plain

 フロントエンド側は左の図のようになっています。他にも認証などのページはありますが、ただ入力フォーム出して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だったため単一デプロイでした。RailsAPIサーバとVueJS、HTMLを置くHTTPサーバを分けると、より各構成の依存度が低くなると思います。
 ちなみに認証関連はDeviseというgemを使っており、テキストエリアはSimpleMDEで装飾してます。レイアウトはBootstrap、fontawesome、jQueryなど使ってます。