見出し画像

「Laravel + Vue.jsではじめる 実践 GraphQL入門」の全貌を大公開します!〜GraphQL + VueでSPAフロントエンドを開発!(開発環境の準備~プロジェクト作成)編〜

こんにちは。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とほぼ同じだと考えていただいて問題ないと思います。

スクリーンショット 2019-11-07 14.51.23


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

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

画像2


apollo-client

画像3


今回使用する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


スクリーンショット 2019-11-07 16.43.46

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

スクリーンショット 2019-11-07 16.44.38

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

スクリーンショット 2019-11-07 16.45.25

スクリーンショット 2019-11-07 16.45.58

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

cd twitter-like-client
npm run serve


スクリーンショット 2019-11-07 16.49.30

確認できましたら、一度 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

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

スクリーンショット 2019-11-07 17.11.24


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


開発の開始

npm run serve

スクリーンショット 2019-11-07 17.13.48

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


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

スクリーンショット 2019-11-07 17.15.18


.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 で開発しております👨🏿‍💻まずはお気軽にお話ししましょう🙋🏿‍♂️


この記事が参加している募集

私の仕事

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
うれしい・・・圧倒的感謝🙇🏿‍♂️
5
FISM株式会社 CTO, Influencer Marketing. Laravel/Python/自然言語処理/Go. 技術書典6にて「Laravel + Vue.jsではじめる 実践 GraphQL入門」を出しました。2児のパパ。

こちらでもピックアップされています

Laravel+Vue.jsではじめる実践GraphQL入門
Laravel+Vue.jsではじめる実践GraphQL入門
  • 10本

「Laravel + Vue.jsではじめる 実践 GraphQL入門」の全貌を大公開します!

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。