【無料で読める】Vue.jsでCRUD操作を行ってみよう

[概要] Vue.jsでのアプリケーション開発に慣れてくると、サーバーと連携したアプリケーションを作りたいと思うようになるかもしれません。

サーバーと連携したアプリケーションではクライアントとサーバーがHTTP通信を行って処理が進められますので、その仕組みや実装の仕方を理解する必要があります。

そこで、本書ではまずWebアプリケーションの基礎知識として「フレームワーク」、「Single Page Application」、「REST API」といったクライアントとサーバーの連携で関係してくる登場人物について整理します。

その後、まずPostmanというツールを使ってサーバーに対してCRUD（Create/Read/Update/Delete）操作を行うことでクライアントとサーバー間でどのようなやりとりが行われているのかを理解します。

そして、ブラウザ（JavaScript）でHTTP通信を行う際に必要となるFetch APIについての基本を理解した上で、JavaScriptでFetch APIを使ってREST APIに対してCRUD操作を行ってみます。

最後にVue.jsでREST APIに対してCRUD操作を行うアプリを作成します。

[想定する読者] Vue.jsでのアプリケーションの開発経験のある方で、サーバーが提供するREST APIを利用してCRUD（Create/Read/Update/Delete）操作を行うようなアプリを開発しようと考えられている方を想定しています。

[本書の構成] Chapter 1ではWebアプリケーションの基礎知識として「フレームワーク」、「Single Page Application」、「REST API」について整理します。

Chapter 2ではJSON ServerでREST APIを作成し、そのREST APIに対してPostmanを使ってCRUD操作を行います。

Chapter 3ではJSON Serverで作成したREST APIに対してFetch APIを使ってCRUD操作を行います。まずはJavaScriptでCRUD操作を行うアプリを作成し、その後Vue.jsでCRUD操作を行うアプリを作成します。

Chapter 4ではルーティング機能を使って３画面で構成されたCRUD操作を行うアプリを作成します。その後Bootstrapを使ってデザインを変更します。

[実行環境] Windows 10上でアプリケーションの作成や実行を行っています。

コマンドの実行はコマンドプロンプト上で行っています。

アプリケーションはChromeブラウザ上で動かしています。

■使用しているソフトウェアのバージョン
Vue CLI 3.2.1
Vue 2.5.17
Vue Router 3.0.1
JSON Server 0.14.0
Bootstrap 4.2.1

[目次] はじめに
想定する読者
本書の構成
開発環境
事前準備
Chapter1 Webアプリケーションの基礎知識
1-1 Webアプリケーションとフレームワーク
1-2 Single Page Applicationとは
1-3 REST APIとは
1-4 REST APIを利用する方法
Chapter2 PostmanによるCRUD操作
2-1 JSON Serverの準備
2-2 Postmanの準備
2-3 PostmanによるCRUD操作
Chapter3 Fetch APIによるCRUD操作
3-1 ブラウザでREST APIを利用する方法
3-2 Fetch APIの基本
3-3 JavaScriptでのCRUD操作のサンプルコード
3-4 「JavaScript + Fetch API」によるCRUD操作
3-5 Vue.jsでのCRUD操作のサンプルコード
3-6 「Vue.js + Fetch API」によるCRUD操作
Chapter4 CRUD操作の実践（Vue.jsアプリの作成）
4-1 画面遷移のあるアプリの作成１（基本構成）
4-2 画面遷移のあるアプリの作成２（Bootstrapの適用）
おわりに