• 環境
  • CentOS Linux release 7.6.1810 (Core)
  • Sublime Text Version 3.2.1

SublimeLintをインストールする

1. Package Controlをインストールする
2. Package ControlでSublimeLintをインストールする

Node.jsをインストールする

CentOS 7 Node.js のインストール手順 - Qiita

1. リポジトリを追加する

$ curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
## Installing the NodeSource Node.js 8.x LTS Carbon repo...
# 省略
## Run `sudo yum install -y nodejs` to install Node.js 8.x LTS Carbon and npm.
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn

2. Node.jsをインストールする

$ sudo yum install nodejs
Loaded plugins: fastestmirror, ovl
Repository google-chrome is listed more than once in the configuration
# 省略
Installed:
  nodejs.x86_64 2:8.16.0-1nodesource

Complete!

3. バージョンを確認する

$ node -v
v8.16.0

jsHintをインストールする

jsHintとSublimeLinter-jshintを入れるメモ for mac - tweeeetyのぶろぐ的めも

# インストールする
$ sudo npm install -g jshint
/usr/bin/jshint -> /usr/lib/node_modules/jshint/bin/jshint
+ jshint@2.10.2
added 30 packages from 15 contributors in 1.614s

# バージョンを確認する
$ jshint -v
jshint v2.10.2

SublimeLinter-jshintをインストールする

1. Package ControlでSublimeLinter-jshintをインストールする

はじめに

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門本を読んだのでまとめてみました。詳しくはそちらを参照してください、分かりやすかったです。

目標

データの転送を最適化し、Webページの初期表示を高速化する

参考

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門
【電子書籍】Chromeデベロッパーツールを使いこなそう Network編
https://www.seohacks.net/basic/terms/mfi/
https://ferret-plus.com/8056

Webサイト測定ツール

• モバイルページの読み込み速度解析サイト(TEST MY SITE)
  • https://www.thinkwithgoogle.com/intl/ja-jp/feature/testmysite
  • モバイルページのみ
• webページの速度判定(PageSpeedInsights)
  • https://developers.google.com/speed/pagespeed/insights/?hl=ja
  • PC、モバイルの両方診断OK

上記２つは診断内容が少し異なるみたいです
違いについて↓
https://ferret-plus.com/8056

昨今のインターネットの利用環境

• スマホの利用者は85%
• Googleの2017年の調査でモバイルサイトのページ読み込みに3秒以上かかる場合、53％のユーザが離脱
• MFIとは「Mobile First Index（モバイルファーストインデックス）」の略称で、インデキシングの対象をPC向けのページから、モバイル向けのページに変。さらに採点要素にWEbサイトが表示されるスピードが追加

大まかなボトルネックの場所

• 通信環境
• サーバー側(webサーバなど)
• アプリケーション(コンテンツの内容)
  • 重い画像
  • 重い動画
  • 動的に生成など
• クライアント側(PC)

フロントの高速化とは

フロントエンドはもっともWebサイトの高速化に着手しやすい領域

簡単なChrome DevToolsの使い方

• networkタブでdisable cacheにチェック

  • ページの情報をキャッシュしない

• 一番下のステータスバー
  

ステータスバーの各項目

• Finish:
  • ページが表示されるまでかかった時間
• DOMContentLoaded:
  • HTMLの読み込みと解析が終わった時間(CSS、画像含まない)
• Load:
  • ページを完全に読み込み終わった時間
• requests:
  • サーバーからダウンロードしたファイルの数
• transferred:
  • サーバーからダウンロードしたファイルの総容量。数十MB～数百MBだと時間がかかる。

waterfall

ChromDevToolのURLが書かれている行のWaterfall列

• Queued at:
  • ネットワークパネルで計測が始まった時間
• Started at:
  • キューイングの終わった時間
• Queuing:
  • Waterfall所の白いライン。Queued at + Queueing = Started at
• ResourceScheduling:
  • リソース取得のキューイングを表示
• Connection Start:
  • サーバーとの接続状況を表示
• Stalled: リクエストを送信できるようになるまでの待機時間
  • InitialConnection: TCPハンドシェイクやSSLを含んだ初期接続を確立するまでの時間

• SSL:

  • SSLのハンドシェイクに要した時間

• Request/Response

  • 実際にデータのやりとりの状況を扶養時

• Request sent:

  • リクエストの送信にかかった時間

• Waiting(TTFB):

  • 最初の１バイト目を受け取るまでにかかった時間。推奨時間:200ミリ秒。これを超えるとサーバーが遅いか回線が遅いかに着目する。

• ContentDownlad:

  • レスポンスのデータを受信するのにかかった時間

項目について詳細

webページの画像の最適化

• 一番カンタンに削除効果が期待できる
• 画像の特徴にあう形式を選び、適切な大きさに縮小し、圧縮する
  • 画像の容量を減らすことが目的

適切な画像選択

• jpeg
  • 写真ななど素材の色が多い画像に適している
• PNG
  • イラストやロゴなど色が少ない画像に適している
• GIF
  • パラパラアニメーション
• SVG
  • 新しい形式。ロゴや簡単な図形

画像を縮小して圧縮する

• 画像編集ソフトで縦横の幅を小さく縮小
  • そもそも適正な大きさかの確認はChrome Devtoolでもとの大きさと実際に表示されている大きさが確認できる。これに違いがあれば縮小したほうがよさそう
  • Photoshopやwindowsのペイントで縮小できる
• 人には感じにくい色の情報を省く
  • Antelope
  • ImageOptimなど

画像のLazyload

• サイト表示した際に表示されていない画像は読み込まず、スクロール範囲内に近づいてからダウンロードして表示させる
• 縦に長いページで画像を多用しているようなサイトに有効
• JavaScriptのプラグインで対応することが多いみたい

テキストファイルの圧縮

圧縮など

• JavaScriptやCSSをまとめたりするのはWebアプリケーション側で自動でやってくれるので割愛

サーバー側

しかし、サーバ側でHTTP2という通信方式が進化したため、複数ファイルを一つにまとめるというテクニックは過去のものになりつつある

HTTP1

• 上記のChromeDevToolの画像のRequestsでもわかるように、トップページを表示するだけでも多数のTCP接続が走る　→　サーバーの負荷、時間がかかる

HTTP2

• 1つのTCP接続を用いて複数のリクエスト/レスポンスのやり取りできる
  • 3ウェイハンドシェイクが一度だけ　→ サーバーの負荷、時間の軽減
• httpsのみでしか通信できない

詳しいHTTP2のメリット↓
https://qiita.com/uutarou10/items/7698ee3336c70a482843

体感的な表示速度の向上(ファーストビュー＆Above the fold)

• 最初に見える領域をその下の領域よりも優先して表示させるテクニック
• PCのファーストビュー目安
  • 1920×1080
• スマホのファーストビュー目安
  • 375×667

ファーストビュー関連のJavaScriptの最適化

ブラウザがページをレンダリングし始めるのはJavaScriptファイルをすべてダウンロードして解析し終わったあと。そこでJavaScriptの解析が終わるのを待つことなくHTMLのレンダリングをさせることができるようにするためにdefer属性やasyncを利用する

ファストビュー関連のJavaScriptダウンロードを待つことなくファストビューを表示できるようになる

基本deferを使用してasyncは順不同でjavascriptを読み込むので、他のJavaScriptファイルに依存せず、ファーストビュー付近に関連するJavaScriptであればasyncを使う

CSSの最適化

CSSファイルをダウンロードが全て完了してから解析してブラウザはレンダリングを始める

CSSの非同期

• レンダリングをブロックせずにCSSを読み込むことができる
• すべてのCSSの読み込みを非同期にしてしまうとページ表示のときにバラバラにCSS適用がされて見栄えが悪くなる=FOUC(Flash of Unstyled Content)
• そこでまずファーストビューのCSSだけをheadタグに直接書き込む。これでファーストビューをうまく表示できるようにする。ファストビューより下の領域のCSSを非同期に読み込む
  • 抽出方法 https://jonassebastianohlsson.com/criticalpathcssgenerator/
  • 自動で抽出してくれる
• その他のCSSにかんしてはpreloadとas=styleを使用して非同期にする

測定方法

Chrome DevTools のAuditsを使うと体感的な表示速度がわかるようになる。

キャッシュの有効活用と不要なコンテンツの排除

• サーバー側(.htaccessなど)で画像やcssなどのブラウザキャッシュ期間を設定できる
• もう一度サイトを見直してファーストビューに重い処理はないか、むやみに画像を使ってないかなど調べて不要なものは取り除く

まとめ

Chrome DevToolsのWaiting(TTFB)項目(最初の１バイト目を受け取るまでにかかった時間)をみて200ミリ秒を超えるようだとサーバーチェック、200ミリ秒以内であればフロント側チェックして上記項目を試してみる価値あり

About

amcharts関連の日本語文献のあまりの少なさから、誰かのお役に立てればと思い記載しています！

最終的には、このようなグラフを作成することができます。

Environment

この記事ではmacbook(unix)にインストールしたruby 2.5.1p57, Rails 5.2.3を使っています。

amchartsとは

前回の記事をご覧ください！

Piechartとは

円グラフです。今回はこちらを作成します。

導入方法

こちらのサイトのページ内を下にスクロールすると、Demo sourceが置いてありますので、コピペで使用可能です。
基本的にはそのままコードを触らずとも、実装可能です。

Demo_source

<!-- Styles -->
<style>
#chartdiv {
  width: 100%;
  height: 500px;
}

</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Add data
chart.data = [ {
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
} ];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;

// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

編集方法

style, htmlについては割愛し、scriptについて筆者がわかる範囲で記載していきます。

index.html.erb

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
// テーマです。
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
// 始めにインスタンスを作成します。Piechart形式であることをここで指定しています。
var chart = am4core.create("chartdiv", am4charts.PieChart);

// Add data
// ここにデータを入力していきます。
chart.data = [ {
  "country": "Lithuania",
  "litres": 501.9
}, {
  "country": "Czech Republic",
  "litres": 301.9
}, {
  "country": "Ireland",
  "litres": 201.1
}, {
  "country": "Germany",
  "litres": 165.8
}, {
  "country": "Australia",
  "litres": 139.9
}, {
  "country": "Austria",
  "litres": 128.3
}, {
  "country": "UK",
  "litres": 99
}, {
  "country": "Belgium",
  "litres": 60
}, {
  "country": "The Netherlands",
  "litres": 50
} ];

// Add and configure Series
// 作成したインスタンスに設定を追加していきます。
var pieSeries = chart.series.push(new am4charts.PieSeries());
// データはlitres(リットル)
pieSeries.dataFields.value = "litres";
// 単位はcountryです
pieSeries.dataFields.category = "country";
pieSeries.slices.template.stroke = am4core.color("#fff");
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;

// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;

}); // end am4core.ready()
</script>

実装例

最後に、私が作成した"sommeil"というアプリケーションのコードの内、一部のamcharts部分を参考までに記載します。

_piechart.html.erb

<!-- Styles -->
<style>
  #chart2div {
    width: 100%;
    height: 300px;
  }
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<!-- Chart code -->
<script>
  am4core.ready(function () {
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    // Create chart instance
    var chart2 = am4core.create("chart2div", am4charts.PieChart);
    // Add data
    var sleeping_time = '<%= @sleeping_time %>';
    chart2.data = [{
      "time": "Sleep",
      "amount": sleeping_time
    }, {
      "time": "Awake",
      "amount": (24 - sleeping_time)
    }];
    // Add and configure Series
    var pieSeries = chart2.series.push(new am4charts.PieSeries());
    pieSeries.labels.template.disabled = true;
    pieSeries.dataFields.value = "amount";
    pieSeries.dataFields.category = "time";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;
    // This creates initial animation
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;
  }); // end am4core.ready()
</script>
<!-- HTML -->
<div id="chart2div"></div>

最後に

注釈や解説できない部分がまだまだありますので、今後検証して追記していきます。
ご覧いただき、ありがとうございました。

筆者について

TECH::EXPERTにて4月よりruby, railsを学習している未経験エンジニアです。
記載内容に不備・不足があればご指摘いただけると幸いです。
至らぬ点ばかりですので、改善点がありましたらどんどんご指摘下さい！

概要

GraphQLクエリを書いたら、graphql-codegenが型を吐いてくれるけど、型をいちいち書くのもラクしたかったので、graphql-codegenのプラグインを自分で書いた。

できた奴

1.スキーマの例

こんなスキーマがあるとして、

schema.graphql

type Tweet {
  id: ID!
  body: String
  date: String
  Author: User
  Stats: Stat
}

type User {
  id: ID!
  username: String
  first_name: String
  last_name: String
  full_name: String
  name: String @deprecated
  avatar_url: String
}

type Stat {
  views: Int
  likes: Int
  retweets: Int
  responses: Int
}

type Notification {
  id: ID
  date: String
  type: String
}

type Meta {
  count: Int
}

type Comment {
  id: String
  content: String
}

type Query {
  Tweet(id: ID!): Tweet
  Tweets(limit: Int, skip: Int, sort_field: String, sort_order: String): [Tweet]
  TweetsMeta: Meta
  User(id: ID!): User
  Notifications(limit: Int): [Notification]
  NotificationsMeta: Meta
}

type Mutation {
  createTweet(body: String): Tweet
  deleteTweet(id: ID!): Tweet
  markTweetRead(id: ID!): Boolean
}

type Subscription {
  commentAdded(repoFullName: String!): Comment
}

参考: https://github.com/marmelab/GraphQL-example/blob/master/schema.graphql

2.クエリの例

こんなクエリを書いたgraphqlファイルを作るとする。

tweet.graphql

query TweetMeta {
  TweetsMeta {
    count
  }
}

query Tweet($id: ID!) {
  Tweet(id: $id) {
    body
    date
    Author {
      full_name
    }
  }
}

mutation CreateTweet($body: String) {
  createTweet(body: $body) {
    id
  }
}

subscription SubscComment($repoFullName: String!) {
  commentAdded(repoFullName: $repoFullName) {
    id
    content
  }
}

3. 生成例

するとこんな感じにtsを吐いてくれる。（監視対象の.graphqlごとにクラスを生やしてくれる）

generated/class.ts

import * as Type from "./types";
import * as Node from "./nodes";
import * as ApolloType from "apollo-client";
import ApolloClient from "apollo-client";
export interface ClientClass {
  readonly client: ApolloClient<any>;
}

export class TweetClient implements ClientClass {
  constructor(readonly client: ApolloClient<any>) {}

  tweetMeta = (
    options?: Omit<
      ApolloType.QueryOptions<Type.TweetMetaQueryVariables>,
      "query"
    >
  ) =>
    this.client.query<Type.TweetMetaQuery, Type.TweetMetaQueryVariables>({
      ...options,
      ...{ query: Node.TweetMeta }
    });

  tweet = (
    options?: Omit<ApolloType.QueryOptions<Type.TweetQueryVariables>, "query">
  ) =>
    this.client.query<Type.TweetQuery, Type.TweetQueryVariables>({
      ...options,
      ...{ query: Node.Tweet }
    });

  createTweet = (
    options?: Omit<
      ApolloType.MutationOptions<
        Type.CreateTweetMutation,
        Type.CreateTweetMutationVariables
      >,
      "mutation"
    >
  ) =>
    this.client.mutate<
      Type.CreateTweetMutation,
      Type.CreateTweetMutationVariables
    >({ ...options, ...{ mutation: Node.CreateTweet } });

  subscComment = (
    options?: Omit<
      ApolloType.SubscriptionOptions<Type.SubscCommentSubscriptionVariables>,
      "query"
    >
  ) =>
    this.client.subscribe<
      Type.SubscCommentSubscription,
      Type.SubscCommentSubscriptionVariables
    >({ ...options, ...{ query: Node.SubscComment } });
}

4. 使い道

gqlタグとか書かずに、補完バリバリで気持ちよく書ける。嬉しい。

main.ts

import { TweetClient } from "./generated/class";
import ApolloClient from "apollo-boost";
import "isomorphic-fetch";

const client = new TweetClient(
  new ApolloClient({ uri: "http://localhost:4000/" })
);

async function main() {
  const hoge = await client.tweetMeta();
  console.log(JSON.stringify(hoge.data.TweetsMeta));

  const huga = await client.createTweet({
    variables: {
      body: "aaa"
    }
  });
  //dataはnullチェックしないと怒られる
  console.log(JSON.stringify(huga.data && huga.data.createTweet));

  const piyo = await client.tweet({ variables: { id: "hoga" } });
  console.log(JSON.stringify(piyo.data));
}

main();

作り方

環境

yarnなり、npmでよしなに入れる。

package.json

{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.yml --watch",
    "server": "node server.js"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.3.1",
    "@graphql-codegen/typescript": "^1.3.1",
    "@graphql-codegen/typescript-document-nodes": "^1.3.1-alpha-21fe4751.62",
    "@graphql-codegen/typescript-operations": "1.3.1",
    "@types/graphql": "^14.2.2",
    "apollo-client": "^2.6.3",
    "change-case": "^3.1.0",
    "graphql": "^14.4.2",
    "prettier": "^1.18.2",
    "typescript": "^3.5.2"
  },
  "dependencies": {
    "apollo-boost": "^0.4.3",
    "apollo-server": "^2.6.7",
    "isomorphic-fetch": "^2.2.1"
  }
}

適当にモックサーバを立てる。

ApolloServerのmockをtrueにすれば適当にサーバが立つ。

モックサーバーの立て方の例

server.js

const { ApolloServer, gql } = require("apollo-server");

const typeDefs = `
type Tweet {
  id: ID!
  body: String
  date: String
  Author: User
  Stats: Stat
}

type User {
  id: ID!
  username: String
  first_name: String
  last_name: String
  full_name: String
  name: String @deprecated
  avatar_url: String
}

type Stat {
  views: Int
  likes: Int
  retweets: Int
  responses: Int
}

type Notification {
  id: ID
  date: String
  type: String
}

type Meta {
  count: Int
}

type Comment {
  id: String
  content: String
}

type Query {
  Tweet(id: ID!): Tweet
  Tweets(limit: Int, skip: Int, sort_field: String, sort_order: String): [Tweet]
  TweetsMeta: Meta
  User(id: ID!): User
  Notifications(limit: Int): [Notification]
  NotificationsMeta: Meta
}

type Mutation {
  createTweet(body: String): Tweet
  deleteTweet(id: ID!): Tweet
  markTweetRead(id: ID!): Boolean
}

type Subscription {
  commentAdded(repoFullName: String!): Comment
}

`;

const server = new ApolloServer({
  typeDefs,
  mocks: true
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

起動

terminal

yarn server

Graphql-codegenを走らす

graphql-codegenの設定ファイルを書く。

codegen.yaml

overwrite: true
schema: "http://localhost:4000" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates:
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts:
    plugins:
      - typescript-document-nodes

監視対象として、さっきの例のtweet.graphqlをqueries/に作っておく。

そしてgraphql-codegenを走らせる。

terminal

yarn codegen

すると./generated/types.tsに型を吐くし、./generated/nodes.tsにクエリにgqlタグ付けた定数が吐かれる。また、これらはqueriesのファイルの変化に応じて逐次更新される。

なお、"codegen": "graphql-codegen --config codegen.yml --watch"からwatchオプションを外せば、自動更新は無効になる。

ts:generated/nodes.ts(自動生成)

generated/nodes.ts(自動生成)

import { DocumentNode } from "graphql";
import gql from "graphql-tag";

export const TweetMeta: DocumentNode = gql`
  query TweetMeta {
    TweetsMeta {
      count
    }
  }
`;

export const Tweet: DocumentNode = gql`
  query Tweet($id: ID!) {
    Tweet(id: $id) {
      body
      date
      Author {
        full_name
      }
    }
  }
`;

export const CreateTweet: DocumentNode = gql`
  mutation CreateTweet($body: String) {
    createTweet(body: $body) {
      id
    }
  }
`;

export const SubscComment: DocumentNode = gql`
  subscription SubscComment($repoFullName: String!) {
    commentAdded(repoFullName: $repoFullName) {
      id
      content
    }
  }
`;

ts:generated/types.ts(自動生成)

generated/types.ts(自動生成)

export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
  Upload: any;
};

export enum CacheControlScope {
  Public = "PUBLIC",
  Private = "PRIVATE"
}

export type Comment = {
  __typename?: "Comment";
  id?: Maybe<Scalars["String"]>;
  content?: Maybe<Scalars["String"]>;
};

export type Meta = {
  __typename?: "Meta";
  count?: Maybe<Scalars["Int"]>;
};

export type Mutation = {
  __typename?: "Mutation";
  createTweet?: Maybe<Tweet>;
  deleteTweet?: Maybe<Tweet>;
  markTweetRead?: Maybe<Scalars["Boolean"]>;
};

export type MutationCreateTweetArgs = {
  body?: Maybe<Scalars["String"]>;
};

export type MutationDeleteTweetArgs = {
  id: Scalars["ID"];
};

export type MutationMarkTweetReadArgs = {
  id: Scalars["ID"];
};

export type Notification = {
  __typename?: "Notification";
  id?: Maybe<Scalars["ID"]>;
  date?: Maybe<Scalars["String"]>;
  type?: Maybe<Scalars["String"]>;
};

export type Query = {
  __typename?: "Query";
  Tweet?: Maybe<Tweet>;
  Tweets?: Maybe<Array<Maybe<Tweet>>>;
  TweetsMeta?: Maybe<Meta>;
  User?: Maybe<User>;
  Notifications?: Maybe<Array<Maybe<Notification>>>;
  NotificationsMeta?: Maybe<Meta>;
};

export type QueryTweetArgs = {
  id: Scalars["ID"];
};

export type QueryTweetsArgs = {
  limit?: Maybe<Scalars["Int"]>;
  skip?: Maybe<Scalars["Int"]>;
  sort_field?: Maybe<Scalars["String"]>;
  sort_order?: Maybe<Scalars["String"]>;
};

export type QueryUserArgs = {
  id: Scalars["ID"];
};

export type QueryNotificationsArgs = {
  limit?: Maybe<Scalars["Int"]>;
};

export type Stat = {
  __typename?: "Stat";
  views?: Maybe<Scalars["Int"]>;
  likes?: Maybe<Scalars["Int"]>;
  retweets?: Maybe<Scalars["Int"]>;
  responses?: Maybe<Scalars["Int"]>;
};

export type Subscription = {
  __typename?: "Subscription";
  commentAdded?: Maybe<Comment>;
};

export type SubscriptionCommentAddedArgs = {
  repoFullName: Scalars["String"];
};

export type Tweet = {
  __typename?: "Tweet";
  id: Scalars["ID"];
  body?: Maybe<Scalars["String"]>;
  date?: Maybe<Scalars["String"]>;
  Author?: Maybe<User>;
  Stats?: Maybe<Stat>;
};

export type User = {
  __typename?: "User";
  id: Scalars["ID"];
  username?: Maybe<Scalars["String"]>;
  first_name?: Maybe<Scalars["String"]>;
  last_name?: Maybe<Scalars["String"]>;
  full_name?: Maybe<Scalars["String"]>;
  name?: Maybe<Scalars["String"]>;
  avatar_url?: Maybe<Scalars["String"]>;
};
export type TweetMetaQueryVariables = {};

export type TweetMetaQuery = { __typename?: "Query" } & {
  TweetsMeta: Maybe<{ __typename?: "Meta" } & Pick<Meta, "count">>;
};

export type TweetQueryVariables = {
  id: Scalars["ID"];
};

export type TweetQuery = { __typename?: "Query" } & {
  Tweet: Maybe<
    { __typename?: "Tweet" } & Pick<Tweet, "body" | "date"> & {
        Author: Maybe<{ __typename?: "User" } & Pick<User, "full_name">>;
      }
  >;
};

export type CreateTweetMutationVariables = {
  body?: Maybe<Scalars["String"]>;
};

export type CreateTweetMutation = { __typename?: "Mutation" } & {
  createTweet: Maybe<{ __typename?: "Tweet" } & Pick<Tweet, "id">>;
};

export type SubscCommentSubscriptionVariables = {
  repoFullName: Scalars["String"];
};

export type SubscCommentSubscription = { __typename?: "Subscription" } & {
  commentAdded: Maybe<
    { __typename?: "Comment" } & Pick<Comment, "id" | "content">
  >;
};

オレオレプラグインを書く

graphql_codegenのプラグインを自分で書こう。returnがtsの文字列さえ吐ければ良い。

参考: Write your first Plugin · GraphQL Code Generator

プラグイン名.js

module.exports = {
  plugin: (schema, documents, config) => {
    //graphql_codegenがかき集めた、おおよそ人が読むようにできていない、documentsを読み込みながら、jsでts（文字列）を書く。
    //ここでtsをreturnする。
    //出力は勝手にgraphql_codegenがprettierが走らせて整形してくれるので、改行とかタブとか気にせず書く。
  }
};

自分が作ったプラグインの読み込み

codegen.yaml

overwrite: true
schema: "schema.graphql" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates: # 生成先
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts: # 生成先
    plugins:
      - typescript-document-nodes
  ./generated/class.ts: # 生成先
      - プラグイン名.js # プラグイン読み込み

プラグインを書くにあたっては、キャメルケースなりを変換してくれるchange-caseパッケージが助かった。

結局何を書いたか？

結局こう言うコードを書いた。

type-apollo-class.js

var path = require("path");
var changeCase = require("change-case");

const imp = `
    import * as Type from "./types";
    import * as Node from "./nodes";
    import * as ApolloType from "apollo-client";
    import ApolloClient from "apollo-client";
    export interface ClientClass {readonly client: ApolloClient<any>;}        
`;

function makeClassHeader(basename) {
  return `
    export class ${changeCase.pascalCase(
      basename
    )}Client implements ClientClass{
        constructor(readonly client: ApolloClient<any>) {}          
    `;
}

function makeClassMethods(operations) {
  return operations.map(e => {
    const camelName = changeCase.camelCase(e.name);
    const pascalName = changeCase.pascalCase(e.name);
    const pascalOperation = changeCase.pascalCase(e.operation);

    const queryType = `Type.${pascalName + pascalOperation}`;
    const variableType = `Type.${pascalName + pascalOperation + "Variables"}`;
    const optionType = getOptionName(e.operation, queryType, variableType);

    return `
    ${camelName} = (options?:Omit<${optionType},"${operationQueryName[e.operation]}">) => 
        this.client.${operationName[e.operation]}<${queryType},${variableType}>
        ({...options,...{${operationQueryName[e.operation]}:Node.${pascalName}}})    
    `;
  });
}

const operationName = {
  query: "query",
  mutation: "mutate",
  subscription: "subscribe"
};

function getOptionName(operation, query, variable) {
  switch (operation) {
    case "query":
      return `ApolloType.QueryOptions<${variable}>`;
    case "mutation":
      return `ApolloType.MutationOptions<${query},${variable}>`;
    case "subscription":
      return `ApolloType.SubscriptionOptions<${variable}>`;
  }
}

const operationQueryName = {
    query: "query",
    mutation: "mutation",
    subscription: "query"
};

module.exports = {
  plugin: (schema, documents, config) => {
    const classes = documents
      .map(doc => {
        const filePath = doc.filePath;
        const baseName = path.basename(filePath, path.extname(filePath));

        const classHeader = makeClassHeader(baseName);

        const definitions = doc.content.definitions;
        const operations = definitions.map(e => ({
          operation: e.operation,
          name: e.name.value
        }));
        const methods = makeClassMethods(operations);

        return [classHeader, methods.join("\n"), `}`].join("\n");
      })
      .join("\n");

    return [imp, classes].join("\n");
  }
};

そして設定ファイルをこう書いた

codegen.yaml

overwrite: true
schema: "schema.graphql" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates:
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts:
    plugins:
      - typescript-document-nodes
  ./generated/class.ts:
      - type-apollo-class.js

ごちゃっとしているけど、余は満足。

できた奴

https://github.com/NanimonoDemonai/graphql-query-apollo-client-code-sample/tree/master

まとめ

• GraphQL楽しい
• JSでTS(文字列)を書くと楽しい。

概要

GraphQLクエリを書いたら、graphql-codegenが型を吐いてくれるけど、型をいちいち書くのもラクしたかったので、graphql-codegenのプラグインを自分で書いた。

できた奴

1.スキーマの例

こんなスキーマがあるとして、

schema.graphql

type Tweet {
  id: ID!
  body: String
  date: String
  Author: User
  Stats: Stat
}

type User {
  id: ID!
  username: String
  first_name: String
  last_name: String
  full_name: String
  name: String @deprecated
  avatar_url: String
}

type Stat {
  views: Int
  likes: Int
  retweets: Int
  responses: Int
}

type Notification {
  id: ID
  date: String
  type: String
}

type Meta {
  count: Int
}

type Comment {
  id: String
  content: String
}

type Query {
  Tweet(id: ID!): Tweet
  Tweets(limit: Int, skip: Int, sort_field: String, sort_order: String): [Tweet]
  TweetsMeta: Meta
  User(id: ID!): User
  Notifications(limit: Int): [Notification]
  NotificationsMeta: Meta
}

type Mutation {
  createTweet(body: String): Tweet
  deleteTweet(id: ID!): Tweet
  markTweetRead(id: ID!): Boolean
}

type Subscription {
  commentAdded(repoFullName: String!): Comment
}

参考: https://github.com/marmelab/GraphQL-example/blob/master/schema.graphql

2.クエリの例

こんなクエリを書いたgraphqlファイルを作るとする。

tweet.graphql

query TweetMeta {
  TweetsMeta {
    count
  }
}

query Tweet($id: ID!) {
  Tweet(id: $id) {
    body
    date
    Author {
      full_name
    }
  }
}

mutation CreateTweet($body: String) {
  createTweet(body: $body) {
    id
  }
}

subscription SubscComment($repoFullName: String!) {
  commentAdded(repoFullName: $repoFullName) {
    id
    content
  }
}

3. 生成例

するとこんな感じにtsを吐いてくれる。（監視対象の.graphqlごとにクラスを生やしてくれる）

generated/class.ts

import * as Type from "./types";
import * as Node from "./nodes";
import * as ApolloType from "apollo-client";
import ApolloClient from "apollo-client";
export interface ClientClass {
  readonly client: ApolloClient<any>;
}

export class TweetClient implements ClientClass {
  constructor(readonly client: ApolloClient<any>) {}

  tweetMeta = (
    options?: Omit<
      ApolloType.QueryOptions<Type.TweetMetaQueryVariables>,
      "query"
    >
  ) =>
    this.client.query<Type.TweetMetaQuery, Type.TweetMetaQueryVariables>({
      ...options,
      ...{ query: Node.TweetMeta }
    });

  tweet = (
    options?: Omit<ApolloType.QueryOptions<Type.TweetQueryVariables>, "query">
  ) =>
    this.client.query<Type.TweetQuery, Type.TweetQueryVariables>({
      ...options,
      ...{ query: Node.Tweet }
    });

  createTweet = (
    options?: Omit<
      ApolloType.MutationOptions<
        Type.CreateTweetMutation,
        Type.CreateTweetMutationVariables
      >,
      "mutation"
    >
  ) =>
    this.client.mutate<
      Type.CreateTweetMutation,
      Type.CreateTweetMutationVariables
    >({ ...options, ...{ mutation: Node.CreateTweet } });

  subscComment = (
    options?: Omit<
      ApolloType.SubscriptionOptions<Type.SubscCommentSubscriptionVariables>,
      "query"
    >
  ) =>
    this.client.subscribe<
      Type.SubscCommentSubscription,
      Type.SubscCommentSubscriptionVariables
    >({ ...options, ...{ query: Node.SubscComment } });
}

4. 使い道

gqlタグとか書かずに、補完バリバリで気持ちよく書ける。嬉しい。

main.ts

import { TweetClient } from "./generated/class";
import ApolloClient from "apollo-boost";
import "isomorphic-fetch";

const client = new TweetClient(
  new ApolloClient({ uri: "http://localhost:4000/" })
);

async function main() {
  const hoge = await client.tweetMeta();
  console.log(JSON.stringify(hoge.data.TweetsMeta));

  const huga = await client.createTweet({
    variables: {
      body: "aaa"
    }
  });
  //dataはnullチェックしないと怒られる
  console.log(JSON.stringify(huga.data && huga.data.createTweet));

  const piyo = await client.tweet({ variables: { id: "hoga" } });
  console.log(JSON.stringify(piyo.data));
}

main();

作り方

環境

yarnなり、npmでよしなに入れる。

package.json

{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.yml --watch",
    "server": "node server.js"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.3.1",
    "@graphql-codegen/typescript": "^1.3.1",
    "@graphql-codegen/typescript-document-nodes": "^1.3.1-alpha-21fe4751.62",
    "@graphql-codegen/typescript-operations": "1.3.1",
    "@types/graphql": "^14.2.2",
    "apollo-client": "^2.6.3",
    "change-case": "^3.1.0",
    "graphql": "^14.4.2",
    "prettier": "^1.18.2",
    "typescript": "^3.5.2"
  },
  "dependencies": {
    "apollo-boost": "^0.4.3",
    "apollo-server": "^2.6.7",
    "isomorphic-fetch": "^2.2.1"
  }
}

適当にモックサーバを立てる。

ApolloServerのmockをtrueにすれば適当にサーバが立つ。

モックサーバーの立て方の例

server.js

const { ApolloServer, gql } = require("apollo-server");

const typeDefs = `
type Tweet {
  id: ID!
  body: String
  date: String
  Author: User
  Stats: Stat
}

type User {
  id: ID!
  username: String
  first_name: String
  last_name: String
  full_name: String
  name: String @deprecated
  avatar_url: String
}

type Stat {
  views: Int
  likes: Int
  retweets: Int
  responses: Int
}

type Notification {
  id: ID
  date: String
  type: String
}

type Meta {
  count: Int
}

type Comment {
  id: String
  content: String
}

type Query {
  Tweet(id: ID!): Tweet
  Tweets(limit: Int, skip: Int, sort_field: String, sort_order: String): [Tweet]
  TweetsMeta: Meta
  User(id: ID!): User
  Notifications(limit: Int): [Notification]
  NotificationsMeta: Meta
}

type Mutation {
  createTweet(body: String): Tweet
  deleteTweet(id: ID!): Tweet
  markTweetRead(id: ID!): Boolean
}

type Subscription {
  commentAdded(repoFullName: String!): Comment
}

`;

const server = new ApolloServer({
  typeDefs,
  mocks: true
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

起動

terminal

yarn server

Graphql-codegenを走らす

graphql-codegenの設定ファイルを書く。

codegen.yaml

overwrite: true
schema: "http://localhost:4000" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates:
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts:
    plugins:
      - typescript-document-nodes

監視対象として、さっきの例のtweet.graphqlをqueries/に作っておく。

そしてgraphql-codegenを走らせる。

terminal

yarn codegen

すると./generated/types.tsに型を吐くし、./generated/nodes.tsにクエリにgqlタグ付けた定数が吐かれる。また、これらはqueriesのファイルの変化に応じて逐次更新される。

なお、"codegen": "graphql-codegen --config codegen.yml --watch"からwatchオプションを外せば、自動更新は無効になる。

ts:generated/nodes.ts(自動生成)

generated/nodes.ts(自動生成)

import { DocumentNode } from "graphql";
import gql from "graphql-tag";

export const TweetMeta: DocumentNode = gql`
  query TweetMeta {
    TweetsMeta {
      count
    }
  }
`;

export const Tweet: DocumentNode = gql`
  query Tweet($id: ID!) {
    Tweet(id: $id) {
      body
      date
      Author {
        full_name
      }
    }
  }
`;

export const CreateTweet: DocumentNode = gql`
  mutation CreateTweet($body: String) {
    createTweet(body: $body) {
      id
    }
  }
`;

export const SubscComment: DocumentNode = gql`
  subscription SubscComment($repoFullName: String!) {
    commentAdded(repoFullName: $repoFullName) {
      id
      content
    }
  }
`;

ts:generated/types.ts(自動生成)

generated/types.ts(自動生成)

export type Maybe<T> = T | null;
/** All built-in and custom scalars, mapped to their actual values */
export type Scalars = {
  ID: string;
  String: string;
  Boolean: boolean;
  Int: number;
  Float: number;
  Upload: any;
};

export enum CacheControlScope {
  Public = "PUBLIC",
  Private = "PRIVATE"
}

export type Comment = {
  __typename?: "Comment";
  id?: Maybe<Scalars["String"]>;
  content?: Maybe<Scalars["String"]>;
};

export type Meta = {
  __typename?: "Meta";
  count?: Maybe<Scalars["Int"]>;
};

export type Mutation = {
  __typename?: "Mutation";
  createTweet?: Maybe<Tweet>;
  deleteTweet?: Maybe<Tweet>;
  markTweetRead?: Maybe<Scalars["Boolean"]>;
};

export type MutationCreateTweetArgs = {
  body?: Maybe<Scalars["String"]>;
};

export type MutationDeleteTweetArgs = {
  id: Scalars["ID"];
};

export type MutationMarkTweetReadArgs = {
  id: Scalars["ID"];
};

export type Notification = {
  __typename?: "Notification";
  id?: Maybe<Scalars["ID"]>;
  date?: Maybe<Scalars["String"]>;
  type?: Maybe<Scalars["String"]>;
};

export type Query = {
  __typename?: "Query";
  Tweet?: Maybe<Tweet>;
  Tweets?: Maybe<Array<Maybe<Tweet>>>;
  TweetsMeta?: Maybe<Meta>;
  User?: Maybe<User>;
  Notifications?: Maybe<Array<Maybe<Notification>>>;
  NotificationsMeta?: Maybe<Meta>;
};

export type QueryTweetArgs = {
  id: Scalars["ID"];
};

export type QueryTweetsArgs = {
  limit?: Maybe<Scalars["Int"]>;
  skip?: Maybe<Scalars["Int"]>;
  sort_field?: Maybe<Scalars["String"]>;
  sort_order?: Maybe<Scalars["String"]>;
};

export type QueryUserArgs = {
  id: Scalars["ID"];
};

export type QueryNotificationsArgs = {
  limit?: Maybe<Scalars["Int"]>;
};

export type Stat = {
  __typename?: "Stat";
  views?: Maybe<Scalars["Int"]>;
  likes?: Maybe<Scalars["Int"]>;
  retweets?: Maybe<Scalars["Int"]>;
  responses?: Maybe<Scalars["Int"]>;
};

export type Subscription = {
  __typename?: "Subscription";
  commentAdded?: Maybe<Comment>;
};

export type SubscriptionCommentAddedArgs = {
  repoFullName: Scalars["String"];
};

export type Tweet = {
  __typename?: "Tweet";
  id: Scalars["ID"];
  body?: Maybe<Scalars["String"]>;
  date?: Maybe<Scalars["String"]>;
  Author?: Maybe<User>;
  Stats?: Maybe<Stat>;
};

export type User = {
  __typename?: "User";
  id: Scalars["ID"];
  username?: Maybe<Scalars["String"]>;
  first_name?: Maybe<Scalars["String"]>;
  last_name?: Maybe<Scalars["String"]>;
  full_name?: Maybe<Scalars["String"]>;
  name?: Maybe<Scalars["String"]>;
  avatar_url?: Maybe<Scalars["String"]>;
};
export type TweetMetaQueryVariables = {};

export type TweetMetaQuery = { __typename?: "Query" } & {
  TweetsMeta: Maybe<{ __typename?: "Meta" } & Pick<Meta, "count">>;
};

export type TweetQueryVariables = {
  id: Scalars["ID"];
};

export type TweetQuery = { __typename?: "Query" } & {
  Tweet: Maybe<
    { __typename?: "Tweet" } & Pick<Tweet, "body" | "date"> & {
        Author: Maybe<{ __typename?: "User" } & Pick<User, "full_name">>;
      }
  >;
};

export type CreateTweetMutationVariables = {
  body?: Maybe<Scalars["String"]>;
};

export type CreateTweetMutation = { __typename?: "Mutation" } & {
  createTweet: Maybe<{ __typename?: "Tweet" } & Pick<Tweet, "id">>;
};

export type SubscCommentSubscriptionVariables = {
  repoFullName: Scalars["String"];
};

export type SubscCommentSubscription = { __typename?: "Subscription" } & {
  commentAdded: Maybe<
    { __typename?: "Comment" } & Pick<Comment, "id" | "content">
  >;
};

オレオレプラグインを書く

graphql_codegenのプラグインを自分で書こう。returnがtsの文字列さえ吐ければ良い。

参考: Write your first Plugin · GraphQL Code Generator

プラグイン名.js

module.exports = {
  plugin: (schema, documents, config) => {
    //graphql_codegenがかき集めた、おおよそ人が読むようにできていない、documentsを読み込みながら、jsでts（文字列）を書く。
    //ここでtsをreturnする。
    //出力は勝手にgraphql_codegenがprettierが走らせて整形してくれるので、改行とかタブとか気にせず書く。
  }
};

自分が作ったプラグインの読み込み

codegen.yaml

overwrite: true
schema: "schema.graphql" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates: # 生成先
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts: # 生成先
    plugins:
      - typescript-document-nodes
  ./generated/class.ts: # 生成先
      - プラグイン名.js # プラグイン読み込み

プラグインを書くにあたっては、キャメルケースなりを変換してくれるchange-caseパッケージが助かった。

結局何を書いたか？

結局こう言うコードを書いた。

type-apollo-class.js

var path = require("path");
var changeCase = require("change-case");

const imp = `
    import * as Type from "./types";
    import * as Node from "./nodes";
    import * as ApolloType from "apollo-client";
    import ApolloClient from "apollo-client";
    export interface ClientClass {readonly client: ApolloClient<any>;}        
`;

function makeClassHeader(basename) {
  return `
    export class ${changeCase.pascalCase(
      basename
    )}Client implements ClientClass{
        constructor(readonly client: ApolloClient<any>) {}          
    `;
}

function makeClassMethods(operations) {
  return operations.map(e => {
    const camelName = changeCase.camelCase(e.name);
    const pascalName = changeCase.pascalCase(e.name);
    const pascalOperation = changeCase.pascalCase(e.operation);

    const queryType = `Type.${pascalName + pascalOperation}`;
    const variableType = `Type.${pascalName + pascalOperation + "Variables"}`;
    const optionType = getOptionName(e.operation, queryType, variableType);

    return `
    ${camelName} = (options?:Omit<${optionType},"${operationQueryName[e.operation]}">) => 
        this.client.${operationName[e.operation]}<${queryType},${variableType}>
        ({...options,...{${operationQueryName[e.operation]}:Node.${pascalName}}})    
    `;
  });
}

const operationName = {
  query: "query",
  mutation: "mutate",
  subscription: "subscribe"
};

function getOptionName(operation, query, variable) {
  switch (operation) {
    case "query":
      return `ApolloType.QueryOptions<${variable}>`;
    case "mutation":
      return `ApolloType.MutationOptions<${query},${variable}>`;
    case "subscription":
      return `ApolloType.SubscriptionOptions<${variable}>`;
  }
}

const operationQueryName = {
    query: "query",
    mutation: "mutation",
    subscription: "query"
};

module.exports = {
  plugin: (schema, documents, config) => {
    const classes = documents
      .map(doc => {
        const filePath = doc.filePath;
        const baseName = path.basename(filePath, path.extname(filePath));

        const classHeader = makeClassHeader(baseName);

        const definitions = doc.content.definitions;
        const operations = definitions.map(e => ({
          operation: e.operation,
          name: e.name.value
        }));
        const methods = makeClassMethods(operations);

        return [classHeader, methods.join("\n"), `}`].join("\n");
      })
      .join("\n");

    return [imp, classes].join("\n");
  }
};

そして設定ファイルをこう書いた

codegen.yaml

overwrite: true
schema: "schema.graphql" # サーバのアドレス。勝手にスキーマを呼んでくれる
documents: "queries/*.graphql" # 監視対象　ここのファイルに更新があれば自動的に型を作成
generates:
  ./generated/types.ts:
    plugins:
      - typescript
      - typescript-operations
  ./generated/nodes.ts:
    plugins:
      - typescript-document-nodes
  ./generated/class.ts:
      - type-apollo-class.js

ごちゃっとしているけど、余は満足。

できた奴

https://github.com/NanimonoDemonai/graphql-query-apollo-client-code-sample/tree/master

まとめ

• GraphQL楽しい
• JSでTS(文字列)を書くと楽しい。

はじめに

肥大化していく複雑さに対抗しうるはテストの存在。
Vuexにてテストを欲するはmutationsとactions。
テストフレームワークには手に馴染むJest。
いざ書かん。

Failure.test.js

import store from '@pass/to/store'

describe('Test Vuex module', () => {
  /**
   * store内部では
   * state = {
   *  items: []
   * }
   * で初期化されています。
   */

  test('itemsでstate.itemsを初期化', () => {
    const items = [
      { id: 1, name: 'hoge' }
    ]
    store.commit('models/User/setItems', items)
    expect(store.state.items).toEqual(items) //pass
  })

  test('state.itemに要素を追加', () => {
    const item = { id: 1, name: 'hoge' }
    store.commit('models/User/addItem', item)
    expect(store.state.items.length).toBe(1) //failure, received 2
  })
})

そして敗れる我がテスト。

上記のテストでは１つ目のテストは成功するものの、２つ目のテストでは配列の要素数が期待どおりではなく失敗しています。
Vuex自体の動作としては望ましいですが、stateの状態をテストスイート全体で追いかけるのは不便で面倒です。
（公式のチュートリアルではmutationやactionを個別でインポートし、stateをモックすることでテストを行っています。）

テストはそれ自体、書きやすくあってほしいものです。

そこで本記事ではVuexにまつわる諸々をモック化し、mutationやactionのテストが楽になるような方法を提案します。
本記事で使用したコードはここにあるので気になった方は見てみてください。

モック後のテストコードのイメージはこんな感じです。

mockedVuex.test.js

describe('Test your Vuex module', () => {

  test('mutationでstateを初期化', () => {
    const items = [
      { id: 1, name: 'hoge' }
    ]
    const store = new MockedVuexStore(state, mutations, actions)
    store.commit('setItems', items)
    expect(store.state.items).toEqual(items)
  })

  test('非同期なactionで要素を追加', () => {
    const item = { id: 1, name: 'hoge' }

    const store = new MockedVuexStore(state, mutations, actions)

    store.dispatch('add', item).then(res => {
      expect(store.state.items.length).toBe(1)
    })
  })
})

mutation、action、同期、非同期関わらず割と見通しの良いテストコードではないでしょうか。

さっそく書いていきます。

Vuex.StoreクラスをモックしたものをここではMockedVuexStoreクラスとします。

MockedVuexStoreクラスに期待するは、
- テストケース毎に独立したStateを持てる
- commit(mutationName, payload)メソッドからmutationを発火させる
- dispatch(actionName, payload)メソッドからactionを発火させる

てところでしょうか。

下記がクラス本文です。

mocks.js

export class MockedVuexStore {
  constructor(state, mutations, actions) {
    this.state = state
    this.mutations = {
      ...mutations
    }
    this.actions = {
      ...actions
    }
  }

  commit(type, payload = null) {
    try {
      this.mutations[type](this.state, payload)
    } catch (e) {
      if (!e instanceof TypeError) {
        throw e
      }
      console.log(`unknown mutation "${type}" is called`)
    }
  }

  dispatch(type, payload = null) {
    try {
      return this.actions[type](
        {
          commit: (type, payload) => this.commit(type, payload)
        },
        payload
      )
    } catch (e) {
      if (!e instanceof TypeError) {
        throw e
      }
      console.log(`unknown action "${type}" is called`)
    }
  }
}

コンストラクタの引数としてstate, mutations, actionsを外部から受け取っております。
- stateは、テストケース内で定義されたもの
- mutationsは、テスト対象モジュールのmutation
- actionsは、テスト対象モジュールのaction
です。

dispatchメソッド内の

return this.actions[type](
  {
    commit: (type, payload) => this.commit(type, payload)
  },
  payload
)

ですが、呼び出し先のactionにおいてgetters,dispatch,stateが使用される場合は、それらについて適宜モックする必要があります。（今回は言及しません。）

ともあれこれで私たちはシンプルにモック化されたVuex.Storeを手に入れることができました。

テスト書きます。

肥大化していく複雑さに対抗しうるはテストの存在。
Vuexにてテストを欲するはmutationsとactions。
テストフレームワークには手に馴染むJest。
モックされるはVuex.Store
いざ書かん。

Success.test.js

import $axios from '../store/HttpClient'
import { mutations, actions } from '../store/Models/User'
import { MockedVuexStore } from './mocks'

/* axiosをモック */
jest.mock('../store/HttpClient')

describe('Test your Vuex module', () => {

  test('mutationでstateを初期化', () => {
    const state = {
      items: []
    }

    const items = [
      { id: 1, name: 'hoge' }
    ]

    const store = new MockedVuexStore(state, mutations, actions)
    store.commit('setItems', items)

    expect(store.state.items).toEqual(items)
  })

  test('非同期なactionで要素を追加', () => {
    const state = {
      items: []
    }

    const item = { id: 1, name: 'hoge' }

    /* axiosのメソッドをモック */
    $axios.post.mockResolvedValue({
      data: item,
      status: 200
    })

    const store = new MockedVuexStore(state, mutations, actions)

    store.dispatch('add', item).then(res => {
      expect(store.state.items.length).toBe(1)
    })
  })
})

そして成功する我がテスト。

なお、外部のAPIを叩くのに使っているaxiosはJestのMock Functions でモックしています。

import $axios from '../store/HttpClient'

/* axiosをモック */
jest.mock('../store/HttpClient')

/* axiosのpostメソッドをモック */
$axios.post.mockResolvedValue({
  data: item,
  status: 200
})

その他もろもろ

ディレクトリ構成

.
├── babel.config.js
├── jest.config.js
├── node_modules
├── package.json
├── store
│   ├── HttpClient.js
│   ├── Models
│   │   ├── User.js
│   │   └── index.js
│   └── index.js
├── tests
│   ├── Failure.test.js
│   ├── Success.test.js
│   ├── User.test.js
│   └── mocks.js
└── yarn.lock

テスト対象のUserストア

./store/Models/User.js

import $axios from '../HttpClient'

const state = {
  items: []
}

const getters = {}

export const mutations = {
  setItems(state, data) {
    state.items = data
  },

  addItem(state, data) {
    state.items.push(data)
  },

  updateItem(state, data) {
    const index = state.items.findIndex(item => item.id == data.id)
    Object.assign(state.items[index], data)
  },

  deleteItem(state, id) {
    const index = state.items.findIndex(item => item.id == id)
    state.items.splice(index, 1)
  }
}

export const actions = {
  async fetch(context) {
    const response = await $axios.get('/api/users')
    context.commit('setItems', response.data)
    return 'OK'
  },

  async add(context, data) {
    const response = await $axios.post(`/api/users/add`, data)
    context.commit('addItem', response.data)
    return 'OK'
  },

  async edit(context, data) {
    const response = await $axios.post(`/api/users/${data.id}/edit`, data)
    context.commit('updateItem', response.data)
    return 'OK'
  },

  async delete(context, id) {
    await $axios.delete(`/api/users/${id}/delete`)
    context.commit('deleteItem', id)
    return false
  }
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

HTTP通信用のaxiosインスタンス

./store/HttpClient.js

import axios from 'axios'

let baseURL = '/'
const $axios = axios.create({
  headers: {
    'X-Requested-With': 'XMLHttpRequest'
  },
  baseURL: baseURL
})

export default $axios

終わりに

なるべくいつものVuexに近い形でテストが実行できるようにモックしてみました。
今後の課題としては、
- {root: true}なcommitやdispatchへの対応
- TypeScriptによる型安全な開発

あたりを頑張ればより複雑なケースに対しても対応できるのかなあとと思います。
本記事で使用したコードはここにあります。

ありがとうございました！

概要

TECH::EXPERTのカリキュラムでオリジナルのミニアプリを作成する機会があり、
その一部のページでMaterializecssのCarouselを使用し、3秒ごとに画像が切り替わるページを作成したので紹介します。

MaterializecssのCarouselとは

画像をくるくると回せる機能です。

https://materializecss.com/carousel.html

自分が作成したページ紹介

作成する前提

MaterializecssがCDNで読み込めている

編集するファイル

・ビューファイル
・CSSファイル
・jsファイル

ビューファイル

about.html.erb

<section class="about-main" >
  <div class="carousel carousel-slider" data-indicators="true" id="big3" >
    <div class="carousel-fixed-item">
      <div class="container">
        <h1 class="white-text">Work Hard See Result</h1>
      <% if user_signed_in? %>
        <a class="btn waves-effect white black-text darken-text-2" href="/" target="_blank">HOME</a>
      <%else%>
        <a class="btn waves-effect white black-text darken-text-2" href="/users/sign_in" target="_blank">Log in</a>
      <%end%>
      </div>
    </div>
    <div class="carousel-item big3pic" id="benchpress">
      <div class="container">
        <h3 class="white-text">Bench Press</h3>
        <p class="white-text">chest</p>
      </div>
    </div>
    <div class="carousel-item big3pic" id="deadlift">
      <div class="container">
        <h3 class="white-text">Dead Lift</h3>
        <p class="white-text">back</p>
      </div>
    </div>
    <div class="carousel-item big3pic"  id="squat">
      <div class="container">
        <h3 class="white-text">Squat</h3>
        <p class="white-text">legs</p>
      </div>
    </div>
  </div>
</section>

"carousel carousel-slider" を用いました。
"carousel-fixed-item"は固定して表示したいものを書きます。
"carousel carousel-item"の部分がそれぞれの画像のクラスです。

CSSファイル

style.css

#big3{
  height: 100vh;
}
#benchpress{
  background-image: url('benchpress.jpg');
  background-size: 100%;
}
#deadlift{
  background-image: url('deadlift.jpg');
  background-size: 100%;
}
#squat{
  background-image: url('squat.jpg');
  background-size: 100%;
}

それぞれidを付与してるので、idによって画像を変更してください。

jsファイル

about.js

$(document).ready(function(){
  $('#big3').carousel(
  {
    dist: 0,
    padding: 0,
    fullWidth: true,
    indicators: true,
    duration: 100,
  }
  );
  autoplay()
  function autoplay() {
      $('#big3').carousel('next');
      autoplay: true,
      setTimeout(autoplay, 3000);
  }
});

autoplayの関数を定義してます。
id=big3に対して3000ミリ秒で次のcarousel-itemを
表示するように設定してます。

オプションは下記を参照しました。

• [1] dist: 0, => 遠近ズーム0
• [2] padding: 0, =>　中央以外の項目の余白0
• [3] fullWidth: true, => carouselを全幅のスライダーへ
• [4] indicators: true, =>　インジケータを表示
• [5] duration: 100, =>　次のスライドへ移動しきるまでの時間100ミリ秒

最後に

この記事を書いた目的

・自分なりに工夫した点をアウトプットして、理解を深める。
・あわよくば有識者にフィードバックをもらいたい。
・私と同じ初学者からも奇譚のない意見をもらいたい。（自分だったらどうこうする的な）

筆者について

TECH::EXPERTにて4月27日より52期夜間・休日コースでruby/railsを学習している未経験エンジニアです。
ご不備等ありましたら、ご指摘ください。ちなみに本記事が初投稿になります。
言わずもがなかもしれませんが、趣味はボディメイク・筋トレでございます。
余談ですが、120kg⇨66kgまで減量して大会出場した経験があり
ダイエットについての質問はなんでも答えられるかと思います

これって、Qiita記事の種になりませんか？

つまり、こういうことになります

• /layoutsにヘッダーのコンポーネントを含めつつ
• /pagesのファイルから/layoutsで使用しているコンポーネントの値を設定する（値を渡す）

基本構成

• レイアウト内でヘッダーコンポーネントを読み込み、表示している。
• 上記レイアウトを適用してpagesを表示。
• layout(components) > pagesの親子関係

フォルダ

/components
  - Header.vue 
/layouts
  - ore.vue
/pages
  - index.vue 

ファイル

components/Header.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

layouts/ore.vue

<template>
  <div>
    <Header />
    <nuxt />
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  components: {
    Header
  }
}
</script>

pages/index.vue

<template>
  <div>
    abc
  </div>
</template>

<script>
export default {
  name: 'sample',
  layout: 'ore'
}
</script>

方法

1. page側から$emitでlayout側に値を渡す。

1. dataに値を定義。
2. methodsに$emitで渡すメソッドを定義。
3. mountedのタイミングで2のメソッドを実行。

pages/index.vue

<template>
  <div>
    abc
  </div>
</template>

<script>
export default {
  name: 'sample',
  layout: 'ore',
  data(){
    return {
      header: {
        title: 'ページタイトル'
      }
    }
  },
  mounted() {
    this.updateHeader()
  },
  methods: {
    updateHeader() {
      // タイトルとして使いたい情報を渡す
      $nuxt.$emit('updateHeader', this.header.title)
      // thisはあってもなくてもOKだった
      // this.$nuxt.$emit('updateHeader', this.header.title)
    }
  }
}
</script>

2. layout側でイベントを受け取るようにする

• dataにタイトルの初期値を定義。
• createdのタイミングでイベントリスナーを設定。$nuxt.onで定義する。
  • 要素に@eventNameの形式で記述する形だとmounted以後にしか設定されない。
  • そのため、mounted直後の子要素のイベント発火を検知できなかった。
• イベントを検知した後、タイトルを書き換える処理を追加。

layouts/ore.vue

<template>
  <div>
    <Header />
    <nuxt />
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  components: {
    Header
  },
data() {
    return {
      title: ''
    }
  },
  created() {
    this.setListener()
  },
  methods: {
    setListener() {
      // emitで発火させたイベント名にする
      // こちらはthisがないとダメ
      this.$nuxt.$on('updateHeader', this.setHeader)
    },
    setHeader(title) {
      // 第1引数にはemitで渡した値が入ってくる。
      // 第2引数以降を渡す場合も同様に、それ以降の引数で受け取れる
      this.title = title || ''
    }
  }
}
</script>

3.受け取った値を反映させる

• レイアウトのHeaderコンポーネントに対し、:propsの名前="dataで定義している値" の記述を追加する

layouts/ore.vue

<template>
  <div>
    <Header :title="title" />
    <nuxt />
  </div>
</template>

...略

最終的なファイルの状態

※コンポーネントは最初と変化なし

components/Header.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

layouts/ore.vue

<template>
  <div>
    <Header :title="title" />
    <nuxt />
  </div>
</template>

<script>
import Header from '@/components/Header'

export default {
  components: {
    Header
  },
data() {
    return {
      title: ''
    }
  },
  created() {
    this.setListener()
  },
  methods: {
    setListener() {
      this.$nuxt.$on('updateHeader', this.setHeader)
    },
    setHeader(title) {
      this.title = title || ''
    }
  }
}
</script>

pages/index.vue

<template>
  <div>
    abc
  </div>
</template>

<script>
export default {
  name: 'sample',
  layout: 'ore',
  data(){
    return {
      header: {
        title: 'ページタイトル'
      }
    }
  },
  mounted() {
    this.updateHeader()
  },
  methods: {
    updateHeader() {
      $nuxt.$emit('updateHeader', this.header.title)
    }
  }
}
</script>

まとめ

• $nuxt.$emitでイベント発火＋親に値を渡す。
• this.$nuxt.$on('イベント名')で、イベントと値を受け取る。
• イベントリスナーはcreatedのタイミングで付与しないとまともにイベントが受け取れない。
• $nuxtの存在を知らないと設定方法で詰む
• propsの直接の書き換えは怒られるので、dataでやる。

さらにカスタマイズ

• $emitで複数渡す場合はlayout側のdataを増やし、コンポーネントのバインドも複数にすればOK。
• setListenerに複数のイベントリスナーを定義すれば、いろんな更新イベントを受け取れる。
• 今回はヘッダーしか更新しないからupdateHeaderだけど、複数のコンポーネントを更新するならupdateLayoutになりそう。
  • イベント発火はコンポーネント単位で分割したほうが良い
  • 複数のイベント発火をする処理をupdateLayoutで実行するイメージ

参考文献

• 【Vue.js】子コンポーネントから親コンポーネントにデータを受け渡す方法
• Vue.js / Nuxt.js を採用した Web 開発で得た知見