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制約、デフォルト メモ
1 id INTEGER NOT NULL、AUTO INCREMENT
2 name VARCHAR NOT NULL タスク名
3 is_done TINYINT NOT NULL、DEFAULT 0 完了フラグ(0: 未完了、1: 完了)
4 created_at DATETIME NOT NULL 作成日
5 updated_at DATETIME NOT 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

さいごに

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

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

blog-page_footer_336




blog-page_footer_336




-BackEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Go言語

Goのクエリビルダー goqu を使ってみる

1 はじめに2 goquとは2.1 対応するDB3 基本的な使い方3.1 Insert句を生成する3.2 Select句を生成する3.3 Update句を生成する3.4 Delete句を生成する4 よ ...

Go言語

Go言語 gocraft/workを使って常駐プロセスでジョブを処理させる

1 はじめに2 workの特徴3 workを使えるようにする3.1 Redisのインストール3.2 Go用のライブラリインストール4 Enqueue〜ジョブ実行まで4.1 Enqueue側4.2 ジョ ...

postgresql

PostgreSQLでテーブルをパーティショニングする

1 はじめに2 パーティショニングとは3 PostgreSQLでのパーティショニング3.1 パーティションテーブルでの制約3.2 パーティショニングの種類4 パーティションテーブルを定義する4.1 古 ...

Go言語

mutexを使ってGoで排他処理をする

1 はじめに1.1 mutexとは2 mutexを使った排他制御2.1 失敗するケース2.2 mutexを使って排他制御した場合2.3 構造体へmutexを埋め込む3 RWMutexを使う4 さいごに ...

laravel logo

Server-Side Eventsを触ってみた

1 はじめに2 Server-Side Events(SSE) とは3 実装してみる3.1 動作の流れ3.2 Laravel側3.3 React側4 Chat GPTのレスポンス5 さいごに6 おすす ...

フォロー

blog-page_side_responsive

2017年8月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。