BackEnd

Vue.js入門その4〜TODOアプリにサーバーサイドを追加してみる〜

投稿日:2017年8月16日 更新日:

はじめに

最近Vue.jsの勉強をしているtonnyです。
前回は、DockerでRails + Vue.jsの環境を作ってみる記事を書かせていただきました。

今回はその環境を使用して、以前のTODOアプリにサーバーサイドAPIを追加したいと思います。

今までの記事はこちらになります。

準備

今回作成したいもの

動きとしては、以前のTODOアプリと同じです。

  1. タスク一覧画面
  2. タスク新規登録機能
  3. タスク完了機能(論理削除)

環境構築

今回は、DockerでRails + Vue.jsの環境を作ってみるをそのまま使おうと思いますので、環境構築の詳細は割愛します。

Rails環境がすでに整っている方は、下記のコマンドでVue.js込みの新規プロジェクトを作成できます。

また、Node.jsも使用しますので、合わせてインストールしておいてください。

サーバーサイド

Scaffoldを使用して省エネ実装したいと思います。
また、Vue.js部分のコードを記事で書きたい関係上、Rails部分のコードはGithubリンクのみで失礼します。
(記事が無駄に長くなってしまうので。。。)

DB

タスクは、タスク名と完了したかどうかのフラグだけあれば良いかと思いますので、下記のような簡単なテーブルを作成します。

Noカラム名NULL制約、デフォルトメモ
1idINTEGERNOT NULL、AUTO INCREMENT
2nameVARCHARNOT NULLタスク名
3is_doneTINYINTNOT NULL、DEFAULT 0完了フラグ(0: 未完了、1: 完了)
4created_atDATETIMENOT NULL作成日
5updated_atDATETIMENOT NULL更新日

メモ:rails generateで余分なファイルを生成しない

Scaffoldで生成していくと、CSSやJS、テストなども生成されます。
これはこれで便利なのですが、今回のように特に実装する予定がないときや、自分で作成したい場合などは、いささか鬱陶しいです。

config/application.rbに追記することで、rails generateする場合の生成ファイルを制御できます。

今回はassetsファイルとhelper、およびテストを生成しないようにしました。

作成したファイル

APIなので、routes.rbではnamespaceを切ってルーティングを生成します。
例えば、タスク一覧を取得するAPIは、/api/tasksといった具合になるようにします。

Scaffoldで生成される、余分なアクションは消去しておきます。

また、JSONで返却したいので、ビューはjbuilderを使用しました。

試しに数件レコードを登録して、curlで確認してみてください。

作成、編集したファイルはGithubをご覧ください。
https://github.com/naoki85/rails-vue-practice/tree/todo_application

ビューの作成

JQueryとBootstrapを取得

今回もBootstrapを使用したいので、Gemfileに記載してbundle installします。
Rails 5.1からはJQueryがデフォルトから外れてしまったので、JQueryもインストールしておきます。

もとになるビューを作成

まずは、TODOアプリを描画する部分のコントローラーとビューファイルを作成します。

ビューファイルは、前回のVue.js入門その3〜簡単にTODOアプリを作ってみたよ〜を使いました。

なお、javascript_pack_tagと記載することで、後ほど作成するVue.jsのファイルを読み込むことができます。

Vue.jsのファイルの作成

webpackでインストールすると、appディレクトリの下に、javascriptディレクトリができているかと思います。
さらにそのディレクトリの下に、packsというディレクトリがあります。

その中に今回はtodo_vue.jsというファイルを作成します。

まずはVueインスタンスにdataプロパティを持たせるところまで記載します。

tasksプラパティは、はじめは空配列にしておき、インスタンス生成時にAjaxでタスク一覧を取得したいと思います。

Ajax通信に便利なaxios

axiosは、Ajax通信ライブラリです。
まずはこれをインストールします。

さて、それではインスタンスが生成されたタイミングで、タスク一覧を取得したいと思います。

まずはaxiosをインポートすることで、使用可能になります。
Vue.jsにはcreatedフックがあるため、そちらに登録してあげます。

後々、一覧表示は使用しそうなので、methodsに登録しておきます。

axiosからgetでつなぐことでGETリクエストできます。
このあたりはJQueryと似たような感覚で使用できます。

新規登録と完了も実装してしまう

基本的には流れは、

  • 新規作成、もしくは更新のAPIを叩く
  • レスポンスが返ってきたら、再度一覧のAPIを叩く

とします。
(再度一覧のAPIを叩くことは良くないので、改善の余地があります。)

再度一覧APIを叩いてリロードするのは、refreshTasks()という関数にしています。

ここまで実施していただければ、Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜と同じような動きをしつつ、DBに保存できるかと思います。
ソースコードはこちらになります。

https://github.com/naoki85/rails-vue-practice/tree/todo_application

さいごに

前回の記事を少し改良してみました。

まだ、コンポーネントは使用していないので、次回はコンポーネントに関して記載できればな、と思います。

page_footer_300rect




page_footer_300rect




-BackEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

rails

Ruby2.4でCookieを手動で復号する際に発生したエラーの対処

1 はじめに1.1 前提条件2 発生したエラー2.1 実際のコード2.2 エラー詳細2.3 原因3 どう対処したか3.1 修正後のコード はじめに こんにちは、onoです。 現在開発中のアプリケーショ ...

rails

Rails Developer Meetup に参加してきました【2日目】

1 はじめに2 Rails Developer Meetup3 テストのないレガシーなRailsアプリをリファクタした話3.1 なぜリファクタリングしたのか3.2 コードを3種類に分類する3.3 モデ ...

PHPerだけどKotlinを勉強したって良いよね その1〜クラス編〜

1 はじめに2 インターフェース2.1 基本2.2 デフォルト実装付メソッド2.3 同じメソッド名を持つ複数のインターフェース3 修飾子3.1 open3.2 abstract4 可視性修飾子5 さい ...

rails

さらば「rails migrate」、よろしく「ridgepole」

1 はじめに2 Ridgepoleとは3 rails migrateではなく、Ridgepoleを選定した理由4 rails migrateからRidgepoleへの移行手順5 capistrano3 ...

Pythonで書かれたスクレイピングのコードをRubyで書いてみる

1 はじめに2 仕様3 ソースコード4 使用したモジュール、Gem5 対象ページを取得6 XPATHから目的のものを抜き出す7 次のページのリンクを取得する8 さいごに はじめに 以前、技術評論社さん ...

page_side_300rect

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

フォロー

follow us in feedly
2017年8月
« 7月 9月 »
 12345
6789101112
13141516171819
20212223242526
2728293031 

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。