こんにちは。kzkohashi です。
FISM という会社でCTOをやっております。

今年4月に「Laravel + Vue.jsではじめる 実践 GraphQL入門」という技術書籍を出版しました。

前回までは、GraphQL + Laravel でのバックエンド開発についてお送りしてきました。

▼ これまで記事をまとめたWantedlyフィードはこちら💁🏿‍♂️

今回から、GraphQL + VueでのSPAフロントエンド開発について少しずつ公開してまいります。どうぞご覧ください！

はじめに

GraphQL + VueでSPAフロントエンドを開発！
GraphQLをSPA(シングルページアプリケーション)で実装する場合、axiosなどのhttpクライアントを利用しても通信自体は可能ですが、今回は、SPA(Vue)コンポーネントに組み込む形での記述が可能になる GraphQL専用のクライアントで、実装をしてゆきたいと思います。

今回説明しない事
Vue以外にvuex/vue-router/vuetifyを使用しますのが、こちらに関しての詳細な解説は省かせていただきます。 なるべく分からなくてもご理解いただけるように説明していきます。

簡単にクライアント側のGraphQL通信を試したい方へ
今回この本では、ツイッターライクのアプリケーションを実装していきますが、クライアント側の通信のみ簡易的に試したいという方は、github が提供しているGraphQL APIで通信を試して見るとよいかと思います。 

qiitaなどで検索すると、githubGraphQL APIを利用したサンプルがあるので 試してみると良いかと思います。

開発前に、登場するライブラリの説明
Vue
Vue.jsは、Webアプリケーションにおけるユーザーインターフェイスを構築するための、オープンソースのJavaScriptフレームワークです。

vuex
vuexは、Vue.jsでのWebアプリケーション実装における状態管理とStoreの役割を提供するライブラリとなります。 ※Reactにおける、fluxとほぼ同じだと考えていただいて問題ないと思います。

vue-router
vue-routerはVue.jsの公式ルーターになります。
URLのパスに対して、表示コンポーネントを指定できます。

vuetify
vuetifyはCSSフレームワークです。マテリアルデザインをvueJSで実現できます。

apollo-client

今回使用するGraphQLクライアントです。
apollo-clientは単体では使用できず、以下の関連コンポーネントのダウンロードで使用ができます。
apollo-boost というものを使用するといくらか使用ライブラリを減らせますので、お試し使用する際は apollo-boost を利用しても良いかもしれません。

- apollo-cache-inmemory
- apollo-client
- apollo-link-context
- apollo-link-http
- graphql
- graphql-tag
- vue-apollo

開発環境の準備

• Node.JSバージョン8.9以降(8.11.0以降を推奨)を使用
　- このバージョンは、VueCLIが推奨しているバージョンとしています
　- 筆者は v10.15.1 を使用しています
　- LTSバージョンでないとワーニングが見られました
　　(開発への影響はないと思います)
• npm(パッケージマネージャ)をインストール yarnでも問題ありません
• VueCLI3のインストール

VueCLIとは
VueCLIはvue.jsのアプリケーションを開発するためのコマンドラインインターフェースです。
もちろん VueCLIを使用しなくても、アプリケーションは作成できますが、cssプリプロセッサやテストフレームワー ク、この後説明しますVuexの使用などを簡単に設定できるため使用していきます。

※2019/03 時点でVueCLIは3系が出ており、こちらですすめます。
※2系の場合、この後制作に影響が出てしまう可能性がございます。

VueCLIインストール

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vueのバージョン確認

vue --version

プロジェクト作成

VueCLI3でプロジェクト作成
下記コマンドを叩きます。

vue create twitter-like-client

このような画面が出ると思いますので、 Manually select features を選びましょう。 続いてプロジェクトの開発プリセットを選択します。 今回は、Babel / Router / Vuex を選択します。

その後の質問の回答は以下にしています。

この時点で、下記のコマンドを実行をすると、Vueアプリケーションの雛形がlocalhost:8080に表示されてるか と思います。

cd twitter-like-client
npm run serve

確認できましたら、一度 control+c でサーブを止めて次の工程に進みましょう。

GraphQLに必要なパッケージをインストール
packack.jsonのdependenciesに以下を追加して、 npm install をします。

"dependencies": {
  "vue": "^2.6.6",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1",
  "apollo-cache-inmemory": "^1.4.3"
  "apollo-client": "^2.4.13",
  "apollo-link-context": "^1.0.14",
  "apollo-link-http": "^1.5.11",
  "graphql": "^14.1.1",
  "graphql-tag": "^2.10.1",
  "vue-apollo": "^3.0.0-beta.28"
}

先ほど説明しました、GraphQLクライアントの「Apollo」を使用する上で必要なライブラリ群となります。

vuetifyをインストール

cssフレームワークの vuetify をインストールします。 ここでは、VueCLIの vue add を使用して、インストールします。

vue add vuetify

プリセットはデフォルトにしました。

npm installとvue addの違いは？
npm installはnode_modulesへのダウンロードのみで、コード自体への書き込みなどは勝手にされません
が、 vue add でいれるVueプラグインは、プロジェクトコードにプラグインを使用するためのコードが書き加えられます。 vuetifyはvue addでいれると、開発の際に記述するコード群が入るため時短目的でvue addからインストールしました。

開発の開始

npm run serve

先ほど、一度確認したvueの表示からvuetifyの表示に切り替わったと思います。

プロジェクトファイルの構成確認
以下のような構成のファイルが作成されたと思います。

.vueファイルの基本構成
.vueの拡張子がつくファイルは大きく、template・script・styleのタグで構成されています。

- template:DOMの記述、旧来のテンプレートエンジンのような存在
- script:イベント、メソッド、データ、コンポーネントの定義などロジックがここに入る
- style: CSSの記述

// ここに描画するDOM
<template>
</template>

// ここにロジック
<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {
      //
    }
  }
}
</script>

// ここにCSS
<style>
</style>

vuetifyで全体のレイアウトを固める
App.vue がrouterのコンテンツを描画する親テンプレートとなるので、 vuetifyのベースレイアウトを記述 template以外の、scriptタグは削除しても問題ありません。

• twitter-like-client/src/App.vue

<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Twitter Like App</span>
        <span class="font-weight-light"> | sample App</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content>
       <!-- ここがrouterで切り替わる場所 -->
      <router-view></router-view>

    </v-content>
  </v-app>
</template>

✂︎ ---------------------

いかがでしたでしょうか？
ここまでお読みいただき、ありがとうございます！

次回も木曜日に、公開いたします！
ぜひ見ながら、実際に手を動かしていただけるとなおうれしいです！

引き続きご覧くださいませ。

Fin.

▼ Twitterもやってます。よければフォローもお願いします🙇🏿‍♂️

▼ FISM社についてはこちら💁🏿‍♂️​

▼ 現在Wantedlyにて開発メンバー募集中です！GraphQL + Laravel + Vue.js + Swift で開発しております👨🏿‍💻まずはお気軽にお話ししましょう🙋🏿‍♂️

www.wantedly.com 業界トップクラスのデータ量を誇る！SPADのPdM候補wanted！ by FISM株式会社

FISM株式会社

募集要項をみる