はじめに

本記事ではVue Apolloを利用して、GraphQLとVueアプリを接続した後に、CRUD機能並びにサブスクリプションの実装を目指す内容となります。

完成イメージ

大まかな概要としては、Apolloサーバーから取得したデータをVueを利用して表示・クライアント側からGraphQLを操作することがゴールとなります。

記事内でGraphQL等の基本的な説明は省略しております。
もし宜しければ、GraphQLの基礎の基礎、並びにApolloサーバーとサブスクリプションについて解説している前回の記事も合わせてご一読ください（Apolloサーバー部分は前回と同一のコードを利用します）

Apolloサーバーを作る（前回の記事で既に作ってある方は省略）

先ずはApolloを使ってGraphQLのAPIサーバーを作ります！

プロジェクトを作った後に、npm経由でapollo-serverをインストールします。

$ mkdir Apollo-Server
$ cd Apollo-Server
$ mkdir resolver
$ touch index.js db.js 
$ resolver/{Query.js,Mutation.js,Subscription.js}
$ npm init
$ npm install apollo-server --save

データベース代わりのJavaScriptファイルを用意します。

db.js

const posts = [{
    id: '1',
    title: 'こころ',
    author: '夏目漱石'
}, {
    id: '2',
    title: '舞姫',
    author: '森鴎外'
}, {
    id: '3',
    title: '羅生門',
    author: '芥川龍之介'
}]

const db = {
    posts,
}

module.exports  = db;

Query,Mutation,Subscriptionに関する処理をまとめたファイルを順番に用意していきます。

Query.js

const Query = {
    posts(parent, args, { db }, info) {
       //クエリを書いた時に引数が「ない」時
       //模擬データベースの内容を全て表示
        if (!args.query) {
            return db.posts
       //クエリを書いた時に引数が「ある」時
       //引数とtitle or authorが一致したものだけを表示
        }else{
            return db.posts.filter((post) => {
            const isTitleMatch = post.title.toLowerCase().includes(args.query.toLowerCase())
            const isAuthorMatch = post.author.toLowerCase().includes(args.query.toLowerCase())
            return isTitleMatch || isAuthorMatch
        })
    }
    }
}

module.exports  = Query

クエリに関する処理をまとめたファイルです。

Mutation.js

const Mutation = {
    createPost(parent, args, { db, pubsub }, info) {
        const postNumTotal = String(db.posts.length + 1)
        const post = {
            id: postNumTotal,
            ...args.data
        }

        //データベース更新
        db.posts.push(post)
        //サブスクリプション着火
        pubsub.publish('post', { 
                post: {
                    mutation: 'CREATED',
                    data: post
                }
             })
        return post
    },
    updatePost(parent, args, { db, pubsub }, info) {
        const { id, data } = args
        const post = db.posts.find((post) => post.id === id)
        if (!post) {
            throw new Error('Post not found')
        }

        if (typeof data.title === 'string' && typeof data.author === 'string') {
            //データベース更新
            post.title = data.title
            post.author = data.author
            console.log(post)
            //サブスクリプション着火
            pubsub.publish('post', {
            post: {
                mutation: 'UPDATED',
                data: post
            }
        })
        }

        return post
    },
    deletePost(parent, args, { db, pubsub }, info) {
        const post = db.posts.find((post) => post.id === args.id)
        const postIndex = db.posts.findIndex((post) => post.id === args.id)

        if (postIndex === -1) {
            throw new Error('Post not found')
        }
        //データベース更新
        db.posts.splice(postIndex, 1)
        //サブスクリプション着火
        pubsub.publish('post', {
                post: {
                    mutation: 'DELETED',
                    data: post
                }
            })
        return post
    },
}

module.exports  = Mutation

ミューテーションの処理内でデータベースの更新とサブスクリプションの着火をしています。

Subscription.js

const Subscription = {
    post: {
        subscribe(parent, args, { pubsub }, info) {
            return pubsub.asyncIterator('post')
        }
    }
}

module.exports = Subscription

サブスクリプションのファイルです。
pubsub.asyncIteratorでサブスクリプションのイベントを非同期でリッスンします。

説明の関係で最後になりましたが、
スキーマの定義とサーバー起動のファイルになります。

index.js

const  {ApolloServer,PubSub,gql} = require('apollo-server');
const db = require('./db')
const Query = require('./resolver/Query')
const Mutation = require('./resolver/Mutation')
const Subscription = require('./resolver/Subscription')

//スキーマ定義
const typeDefs = gql`
type Query {
  posts(query: String): [Post!]!
}

type Mutation {
  createPost(data: CreatePostInput!): Post!
  deletePost(id: ID!): Post!
  updatePost(id: ID!, data: UpdatePostInput!): Post!
}

# サブスクリプション
type Subscription {
  post: PostSubscriptionPayload!
}

input CreatePostInput {
  title: String!
  author: String!
}

input UpdatePostInput {
  title: String
  author: String!
}

type Post {
  id: ID!
  title: String!
  author: String!
}

######################
# サブスクリプションで利用
######################

# enum型でMutation.js内のサブスクリプション着火と連動
enum MutationType {
  CREATED
  UPDATED
  DELETED
}

# サブスクリプションのフィールド
type PostSubscriptionPayload {
  mutation: MutationType!
  data: Post!
}

`
//PubSubのインスタンスを作成,サブスクリプションが利用可能に！
const pubsub = new PubSub()

const server = new ApolloServer({
    typeDefs: typeDefs,
    resolvers: {
        Query,
        Mutation,
        Subscription,
    },
    context: {
        db,
        pubsub
    }
})

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

サーバーを立てる際にスキーマやリゾルバ、PubSubなどを引数に指定しています。
指定した引数はクエリやミューテーションそしてサブスクリプション、それぞれの処理で利用をしています。

準備が出来たらターミナルから起動させます。

$ node index.js
? Server ready at http://localhost:4000/
? Subscriptions ready at ws://localhost:4000/graphql

こちらをGraphQLのエンドポイントとして利用します。
本記事ではサーバーが立ち上がっていないと、クライアント側からデータの表示や更新が出来ないので、必ずサーバーを立てることを忘れないようにしてください?

Apolloクライアントの設定

Vueプロジェクトを作ろう

Vue CLIを使ってプロジェクトを作ります。

$ vue create apollo-client #2系を選択してVueプロジェクトの作成
$ cd apollo-client 
$ npm run serve # 起動

プロジェクトの作成に成功していた場合、下記のような画面になります。
http://localhost:8080/

Vueプロジェクト内の設定

続いてVueでGraphQLを扱うために、Vue Apolloをインストールしていきます。
本記事においては設定は全てデフォルトで進みます（色々聞かれますが「No」と答えてます）

$ vue add apollo

見た目をリッチにするために、Vuetifyもインストールします。

$ vue add vuetify

以上にて、プロジェクトの設定は完了です。
Vue-ApolloとVuetifyの設定はmain.jsに記述があります。

main.js

import Vue from 'vue'
import App from './App.vue'
import { createProvider } from './vue-apollo'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  apolloProvider: createProvider(),
  vuetify,
  render: h => h(App)
}).$mount('#app')

importしているvue-apollo.jsではエンドポイントやログイン/ログアウトなどの設定が出来ます。

クエリの実装

クエリとミューテーションの実装はこちらの記事を参考にさせて頂きました。ありがとうございます！

模擬データベース内のデータを「読み取り」するGraphQLのクエリを作成します。

$ mkdir src/graphql
$ touch src/graphql/post-query.js

前回までの記事でlocalhost内で立ち上げたIDEに書いていたクエリがこちらの部分に該当します。importしているgqlについてはこちらを参照ください。

post-query.js

import gql from 'graphql-tag'

export const ALL_POSTS = gql`
  query{
 posts{
  id
  title
  author
}
}
`

続いてApp.vue内を書き換えます（説明の省略のため、こちらのファイルに書いていますが、component化した方が良いです！）

「apollo」のオプション内で別ファイルで定義したクエリを呼び出し、
dataプロパティで定義したpostsオブジェクトに格納します。

App.vue

<template>
  <v-app>
    <v-main>
        <v-container>
 <v-row
   style="width: 550px;"
>
    <!--ツールバー-->
    <v-toolbar  color="grey lighten-1">
      <v-toolbar-title>本棚</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn color="primary" dark class="mb-1">新規追加</v-btn>
    </v-toolbar>
    <!--本棚の中身-->
<div
v-for="post in posts" :key="post.id"
>
  <v-card
    class="mx-auto"
    width="550px"
    outlined
  >
    <v-list-item three-line>
      <v-list-item-content>
        <v-list-item-title class="headline mb-1">
           {{ post.title}}/{{ post.author}}
        </v-list-item-title>
        <v-list-item-subtitle>From Apollo-Server</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </v-card>
  </div>
  </v-row>
  </v-container>
    </v-main>
  </v-app>
</template>

<script>
//Query
import {ALL_POSTS} from "./graphql/post-query"

export default {
   name: "App",
    data: () => ({
      //本棚の中身を定義
      posts: [],
    }),
  apollo: {
    //本棚の中身
    posts: {
      //クエリを書いている部分
      query: ALL_POSTS,
        }
  },
 methods: {
    }
  }
</script>

ここまで書き終えたらブラウザで確認しましょう。

$ npm run serve

http://localhost:8080/

Vueを利用して模擬データベースの値を表示することが出来ました！

ミューテーションの実装

続いてミューテーションの実装を行います。
こちらの章を終えると①書き込み、②更新、③削除 が出来るようになります。

先ずはファイルを作りましょう。

$ touch src/graphql/post-mutation.js

ミューテーションを書いていきます。

post-mutation.js

import gql from 'graphql-tag'

// POSTの新規追加
export const CREATE_POST = gql`mutation ($title: String!, $author: String!) {
    createPost(data: { title: $title, author: $author}) {
        id
         title
        author
     }
  }`

// POSTの更新
export const UPDATE_POST = gql`
    mutation updatePost($id: ID!, $title: String!, $author: String!) {
        updatePost(id:$id,data: {title: $title, author: $author}) {
            id
            title
            author
        }
    }
`

// // POSTの削除
export const DELETE_POST = gql`
    mutation deletePost($id: ID!) {
        deletePost(id:$id){
            title
            author
        }
    }
`

App.vueのmethod内に①書き込み、②更新、③削除の関数を作成。
updateQueryメソッドで上記３つを実行することが出来ます。

App.vue

<template>
  <v-app>
    <v-main>
        <v-container>
   <!--入力フォーム-->
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-container>
          <h2 v-if="isCreate">本棚に追加する</h2>
          <h2 v-if="!isCreate">本棚を更新する</h2>
          <v-form ref="form" v-model="valid" lazy-validation>
            <!--名前-->
            <v-text-field
                v-model="post.title"
                :rules="titleRules"
                :counter="20"
                label="タイトル"
                required
            ></v-text-field>
            <v-text-field
                v-model="post.author"
                :rules="authorRules"
                :counter="20"
                label="作者"
                required
            ></v-text-field>
            <!--追加ボタン-->
            <v-btn
                v-if="isCreate"
                :disabled="!valid"
                @click="createPost"
            >
              追加
            </v-btn>
            <!--更新ボタン-->
            <v-btn
                v-if="!isCreate"
                :disabled="!valid"
                @click="updatePost"
            >
              更新
            </v-btn>
            <v-btn @click="clear">クリア</v-btn>
          </v-form>
        </v-container>
      </v-card>
    </v-dialog>


          <v-row
   style="width: 550px;"
>
    <!--ツールバー-->
    <v-toolbar  color="grey lighten-1">
      <v-toolbar-title>本棚</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn color="primary" dark class="mb-1" @click="showDialogNew">新規追加</v-btn>
    </v-toolbar>

    <!--本棚の中身-->
<div
v-for="post in posts" :key="post.id"
>
  <v-card
    class="mx-auto"
    width="550px"
    outlined
  >
    <v-list-item three-line>
      <v-list-item-content>
        <v-list-item-title class="headline mb-1">
           {{ post.title}}/{{ post.author}}
        </v-list-item-title>
        <v-list-item-subtitle>From Apollo-Server</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
    <!-- 編集・削除ボタン -->
    <v-card-actions>
       <v-btn
              color="success"
              small
              @click="showDialogUpdate(post.id,post.title,post.author)"
          >
            <v-icon small>
              編集する
            </v-icon>
          </v-btn>
          <v-btn
              color="error"
              small
              @click="deletePost(post.id,post.title)"
          >
            <v-icon small>
              削除する
            </v-icon>
          </v-btn>
    </v-card-actions>
  </v-card>
  </div>
  </v-row>
  </v-container>
    </v-main>
  </v-app>
</template>

<script>
//Query
import {ALL_POSTS} from "./graphql/post-query"
//Mutation
import {CREATE_POST,UPDATE_POST,DELETE_POST} from "./graphql/post-mutation";

export default {
   name: "App",
    data: () => ({
      //本棚の中身を定義
      posts: [],
       // フォーム入力値
      post: {
        id: '',
        title: '',
        author: '',
      },
      // バリデーション
      valid: true,
      titleRules: [
        v => !!v || 'タイトルは必須項目です',
        v => (v && v.length <= 20) || 'タイトルは20文字以内で入力してください'
      ],
      authorRules: [
        v => !!v || '作者名は必須項目です',
      ],
      // ローディングの表示フラグ
      progress: false,
      // ダイアログの表示フラグ
      dialog: false,
      // 新規・更新のフラグ
      isCreate: true,
    }),
  apollo: {
    //本棚の中身
    posts: {
      //クエリを書いている部分
      query: ALL_POSTS,
        }
  },
 methods: {
    // --------------------------------
      // 新規作成
      // --------------------------------
      createPost: function () {
        if (this.$refs.form.validate()) {
          this.progress = true
          this.$apollo.mutate({
           mutation: CREATE_POST,
            variables: {
              title: this.post.title,
              author: this.post.author,
            },
          })
          .then(() => {
            //UIの更新
            this.$apollo.queries.posts.fetchMore({
              updateQuery: (previousResult, {fetchMoreResult}) => {
                // console.log(previousResult)  //変更前
                // console.log(fetchMoreResult) //変更後
                return {
                  posts: fetchMoreResult.posts
                }
              }
            })
            this.dialog = false
            this.progress = false
          }).catch((error) => {
            console.error(error)
          })
        }
      }
      ,
      // --------------------------------
      // 更新
      // --------------------------------
      updatePost: function () {
        this.progress = true
        this.$apollo.mutate({
          mutation: UPDATE_POST,
          variables: {
            id: this.post.id,
              title: this.post.title,
              author: this.post.author,
          }
        }).then(() => {
          this.$apollo.queries.posts.fetchMore({
            updateQuery: (previousResult, {fetchMoreResult}) => {
              // console.log(previousResult)  //変更前
              // console.log(fetchMoreResult) //変更後
              return {
                posts: fetchMoreResult.posts
              }
            }
          })
          this.dialog = false
          this.progress = false
        }).catch((error) => {
          console.error(error)
        })
      },
      // --------------------------------
      // 削除
      // --------------------------------
      deletePost: function (id,title) {
        console.log(id)
        console.log(title)
        if (!confirm(title + 'を削除してもよろしいですか？')) {
          return
        }
        this.progress = true
        this.$apollo.mutate({
          mutation: DELETE_POST,
          variables: {
            id: id
          }
        }).then(() => {
          this.$apollo.queries.posts.fetchMore({
            updateQuery: (previousResult, {fetchMoreResult}) => {
              // console.log(previousResult)  //変更前
              // console.log(fetchMoreResult) //変更後
              return {
               posts: fetchMoreResult.posts
              }
            }
          })
          this.progress = false
        }).catch((error) => {
          console.error(error)
        })
      },
       // --------------------------------
      // フォームのクリア
      // --------------------------------
      clear: function () {
        this.$refs.form.reset()
      },
      // --------------------------------
      // 新規追加ダイアログの表示
      // --------------------------------
      showDialogNew: function () {
        // this.clear()
        this.isCreate = true
        this.dialog = true
      },
      // --------------------------------
      // 更新ダイアログの表示
      // --------------------------------
      showDialogUpdate: function (id, title, author) {
        this.post.id = id
        this.post.title = title
        this.post.author = author
        this.isCreate = false
        this.dialog = true
      },
    }
  }
</script>

CRUD処理が出来るようになりました！！

サブスクリプションの実装

最後にサブスクリプションの実装を行います。
こちらの章を終えるとリアルタイムでの書き込みの共有が出来るようになります。
実際のアプリケーションでは通知機能を作る時などに使う部分となります。

今回もファイルを作ります。

$ touch src/graphql/post-subscription.js

サブスクリプションを書きます。

post-subscription.js

import gql from 'graphql-tag'

// サブスクリプション
export const SUBSCRIPTION_POST = gql`
subscription {
  post{
    mutation
  data{
      id
    title
    author
  }
  }
}
`

App.vueを変更します。
「apollo」のオプション内にサブスクリプションの処理を追加しており、既存の投稿と同一の投稿がなかった場合、新規作成した投稿を本棚に追加しています。

App.vue

<template>
  <v-app>
    <v-main>
        <v-container>
   <!--入力フォーム-->
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-container>
          <h2 v-if="isCreate">本棚に追加する</h2>
          <h2 v-if="!isCreate">本棚を更新する</h2>
          <v-form ref="form" v-model="valid" lazy-validation>
            <!--名前-->
            <v-text-field
                v-model="post.title"
                :rules="titleRules"
                :counter="20"
                label="タイトル"
                required
            ></v-text-field>
            <v-text-field
                v-model="post.author"
                :rules="authorRules"
                :counter="20"
                label="作者"
                required
            ></v-text-field>
            <!--追加ボタン-->
            <v-btn
                v-if="isCreate"
                :disabled="!valid"
                @click="createPost"
            >
              追加
            </v-btn>
            <!--更新ボタン-->
            <v-btn
                v-if="!isCreate"
                :disabled="!valid"
                @click="updatePost"
            >
              更新
            </v-btn>
            <v-btn @click="clear">クリア</v-btn>
          </v-form>
        </v-container>
      </v-card>
    </v-dialog>


          <v-row
   style="width: 550px;"
>
    <!--ツールバー-->
    <v-toolbar  color="grey lighten-1">
      <v-toolbar-title>本棚</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn color="primary" dark class="mb-1" @click="showDialogNew">新規追加</v-btn>
    </v-toolbar>

    <!--本棚の中身-->
<div
v-for="post in posts" :key="post.id"
>
  <v-card
    class="mx-auto"
    width="550px"
    outlined
  >
    <v-list-item three-line>
      <v-list-item-content>
        <v-list-item-title class="headline mb-1">
           {{ post.title}}/{{ post.author}}
        </v-list-item-title>
        <v-list-item-subtitle>From Apollo-Server</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
    <!-- 編集・削除ボタン -->
    <v-card-actions>
       <v-btn
              color="success"
              small
              @click="showDialogUpdate(post.id,post.title,post.author)"
          >
            <v-icon small>
              編集する
            </v-icon>
          </v-btn>
          <v-btn
              color="error"
              small
              @click="deletePost(post.id,post.title)"
          >
            <v-icon small>
              削除する
            </v-icon>
          </v-btn>
    </v-card-actions>
  </v-card>
  </div>
  </v-row>
  </v-container>
    </v-main>
  </v-app>
</template>

<script>
//Query
import {ALL_POSTS} from "./graphql/post-query"
//Mutation
import {CREATE_POST,UPDATE_POST,DELETE_POST} from "./graphql/post-mutation";
//Subscription
import {SUBSCRIPTION_POST} from "./graphql/post-subscription";

export default {
   name: "App",
    data: () => ({
      //本棚の中身を定義
      posts: [],
       // フォーム入力値
      post: {
        id: '',
        title: '',
        author: '',
      },
      // バリデーション
      valid: true,
      titleRules: [
        v => !!v || 'タイトルは必須項目です',
        v => (v && v.length <= 20) || 'タイトルは20文字以内で入力してください'
      ],
      authorRules: [
        v => !!v || '作者名は必須項目です',
      ],
      // ローディングの表示フラグ
      progress: false,
      // ダイアログの表示フラグ
      dialog: false,
      // 新規・更新のフラグ
      isCreate: true,
    }),
  apollo: {
    //本棚の中身
    posts: {
      //クエリを書いている部分
      query: ALL_POSTS,
      //サブスクリプション
       subscribeToMore: {
        document: SUBSCRIPTION_POST,
        updateQuery:(previousResult, { subscriptionData }) =>{
            // console.log(previousResult) //前の投稿
            // console.log(subscriptionData.data) //新規作成した投稿
            // 既存の投稿と同一の投稿がなかった場合、新規作成した投稿を本棚に追加
        if (previousResult.posts.find(post => post.id === subscriptionData.data.post.data.id)) {
          return previousResult
        }else{
           return {
          posts: [
            ...previousResult.posts,
            // Add the new data
            subscriptionData.data.post.data,
          ],
        }
        }
            }
            }
        }
  },
 methods: {
    // --------------------------------
      // 新規作成
      // --------------------------------
      createPost: function () {
        if (this.$refs.form.validate()) {
          this.progress = true
          this.$apollo.mutate({
           mutation: CREATE_POST,
            variables: {
              title: this.post.title,
              author: this.post.author,
            },
          })
          .then(() => {
            //UIの更新
            this.$apollo.queries.posts.fetchMore({
              updateQuery: (previousResult, {fetchMoreResult}) => {
                // console.log(previousResult)  //変更前
                // console.log(fetchMoreResult) //変更後
                return {
                  posts: fetchMoreResult.posts
                }
              }
            })
            this.dialog = false
            this.progress = false
          }).catch((error) => {
            console.error(error)
          })
        }
      }
      ,
      // --------------------------------
      // 更新
      // --------------------------------
      updatePost: function () {
        this.progress = true
        this.$apollo.mutate({
          mutation: UPDATE_POST,
          variables: {
            id: this.post.id,
              title: this.post.title,
              author: this.post.author,
          }
        }).then(() => {
          this.$apollo.queries.posts.fetchMore({
            updateQuery: (previousResult, {fetchMoreResult}) => {
              // console.log(previousResult)  //変更前
              // console.log(fetchMoreResult) //変更後
              return {
                posts: fetchMoreResult.posts
              }
            }
          })
          this.dialog = false
          this.progress = false
        }).catch((error) => {
          console.error(error)
        })
      },
      // --------------------------------
      // 削除
      // --------------------------------
      deletePost: function (id,title) {
        console.log(id)
        console.log(title)
        if (!confirm(title + 'を削除してもよろしいですか？')) {
          return
        }
        this.progress = true
        this.$apollo.mutate({
          mutation: DELETE_POST,
          variables: {
            id: id
          }
        }).then(() => {
          this.$apollo.queries.posts.fetchMore({
            updateQuery: (previousResult, {fetchMoreResult}) => {
              // console.log(previousResult)  //変更前
              // console.log(fetchMoreResult) //変更後
              return {
               posts: fetchMoreResult.posts
              }
            }
          })
          this.progress = false
        }).catch((error) => {
          console.error(error)
        })
      },
       // --------------------------------
      // フォームのクリア
      // --------------------------------
      clear: function () {
        this.$refs.form.reset()
      },
      // --------------------------------
      // 新規追加ダイアログの表示
      // --------------------------------
      showDialogNew: function () {
        // this.clear()
        this.isCreate = true
        this.dialog = true
      },
      // --------------------------------
      // 更新ダイアログの表示
      // --------------------------------
      showDialogUpdate: function (id, title, author) {
        this.post.id = id
        this.post.title = title
        this.post.author = author
        this.isCreate = false
        this.dialog = true
      },
    }
  }
</script>

確認してみましょう。ブラウザのウィンドウを２つ用意します。

こちらも上手くいきました！！！

おわりに

以上、今回はGraphQLをVueで扱ってみました。
今回の内容を元に仕様に合わせてクエリやスキーマの数を増やすことで、発展的なアプリケーションを作ることが出来るかと思います。
次回はGraphQLとデータベースの接続について記事にしたいと思います！

それでは、また?

はじめに

　少し苦手意識のあるJSでエラーが出たので、忘れないために…

コードは合っているのに、エラーが出た

JSとHTMLは切っても切れない関係。
HTMLを読み込み、JSが読み込まれることで、JSがしっかりと動いてくれる。
そう、逆だと動かない。
JSを読み込み、HTMLを後から読み込むと、エラーが出る。考えればわかることだが、JSではgetElementByIdなどで、HTMLに記述されているid名を読み出す。
HTMLを読み込んでから、JSが読み込まれるように、次の記述をJSにする。

window.addEventListener('load', () => {
　//処理をここに記述
});

コードの意味は、「ページをloadしたら、イベントを発火させる」
基本これを忘れずに、最初に記述しておく。

@babel/runtimeをインストールする

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.auto-suggestion検索フォーム
5.ジャンルフィルターとページ移動
6.リスト　いいね　通知

今回はログイン後の機能でリストといいねと公開前の映画を通知希望のリストに追加するとヘッダーで通知するようにします。
コードに関しては、githubにて後悔しておりますので、こちらからどうぞ！

リスト

こんな感じでユーザーリストを作理、リストに追加できるようにします。

まずはじめにfirestoreないから、、、

firebase内のデータベース設計

ユーザー１人に、folderコレクションを作ります。
そこにはユーザーとは別のコレクションのfolderに映画をセットしていくようになります。

下記がユーザーの中のfolderコレクションなります。こちらのidからfolderコレクションと紐付けしていきます。

そしてこちらがユーザーとは別のfolderコレクションの中身で実際にはこちらに映画をセットしていきます。

リスト作成

export const makeFolder = (uid: string, folderName: string) => {
    return async (dispatch:any) => {
        const ref = folderRef.doc()
        const folderId = ref.id
        folderRef.doc(folderId).set({
            created_at: FirebaseTimestamp.now(),
            name: folderName,
            uid: uid,
        })
        usersRef.doc(uid).collection('folder').doc(folderId).set({
            name: folderName,
            id: folderId,
            created_at: FirebaseTimestamp.now(),
        })
    }
}

まずfolderコレクションに作成日時とfolderの名前と作成者をセット、
そしてユーザーのfolderコレクションにも紐付けを行うためにfolderIdをセットします。

リスト削除

export const deleteFolder = (uid: string, folderId: string) => {
    return async (dispatch:any) => {
        folderRef.doc(folderId).delete()
        usersRef.doc(uid).collection('folder').doc(folderId).delete()
    }
}

削除ボタンを押すと削除できるようにこちらも書いておきます。

リストへの追加

export const addFolderMovie = (folderId: string, movie:movie) => {
    return async (dispatch: any) => {
        folderRef.doc(folderId).collection('movie').get()
        .then(snapshot => {
            const match = []
            snapshot.docs.forEach(doc => {
                const data  = doc.data()
                if(data.id === movie.id){
                    match.push(data)
                }
            })
            if(match.length > 0){
                return false
            }else{
                const ref = usersRef.doc(folderId).collection('movie').doc()
                const movieId = ref.id
                const data = {
                    movieId: movieId,
                    id: movie.id,
                    title: movie.title,
                    poster_path: movie.poster_path,
                    backdrop_path: movie.backdrop_path,
                    release_date: movie.release_date,
                    genres: movie.genres,
                    overview: movie.overview,
                    vote_average: movie.vote_average,
                    timestamp: FirebaseTimestamp.now()   
                }
                folderRef.doc(folderId).collection('movie').doc(movieId).set(data)
            }
        })
    }
}

これがfolderへの追加のコードですが、同じ映画がセットされることのないように一度、追加するfolder内の映画を取得して入ってきた映画とかぶっていないか確認しています。
そして被っていなければ映画をセットするようにしています。

リストから映画を削除

export const deleteFolderMovie = (folderId:string, movie: movie) => {
    return async (dispatch:any) => {
        folderRef.doc(folderId).collection('movie').get()
        .then(snapshot => {
            const match:any = []
            snapshot.docs.forEach(doc => {
                const data = doc.data()
                if(data.id === movie.id){
                    match.push(data)
                }
            })
            if(match.length === 0){
                return false
            }else{
                folderRef.doc(folderId).collection('movie').doc(match[0].movieId).delete()        
            }
        })
    }
}

こちらでも同様に削除するものがなければfalseを返しています。
そしてあればfirestore内から削除するようにしています。

これがリストの作成、削除、映画の追加、削除の処理になります。

いいね

こちらはユーザーログイン時にデフォルトで入っているお気に入り機能になります。
そのため、先ほどのリストへ映画追加と削除のコードとほとんど同じですので詳しい説明は省きます。

export const deleteFavoriteMovie = (id: number) => {
    return async (dispatch:any, getState:any) => {
        const uid = getState().user.uid
        usersRef.doc(uid).collection('favorite').get()
        .then(snapshot => {
            const match:any = []
            snapshot.docs.filter(doc => {
                const data = doc.data()
                if(data.id === id){
                match.push(data)
                }
            })
            if(match.length === 0){
                return false
            }else{
                console.log(match)
                usersRef.doc(uid).collection('favorite').doc(match[0].movieId).delete()
            }
        })  
    }
}

export const addFavoriteMovie = (movie: movie) => {
    return async (dispatch: any, getState:any) => {
        const uid = getState().user.uid
        usersRef.doc(uid).collection('favorite').get()
        .then(snapshot => {
            const match = snapshot.docs.filter(doc => {
                const data = doc.data()
                return data.id === movie.id
            })
            if(match.length > 0){
                return false
            }else{
                const ref = usersRef.doc(uid).collection('favorite').doc()
                const movieId = ref.id
                const data = {
                    movieId: movieId,
                    id: movie.id,
                    title: movie.title,
                    poster_path: movie.poster_path,
                    backdrop_path: movie.backdrop_path,
                    release_date: movie.release_date,
                    genres: movie.genres,
                    overview: movie.overview,
                    vote_average: movie.vote_average,
                    timestamp: FirebaseTimestamp.now()
                }
                usersRef.doc(uid).collection('favorite').doc(movieId).set(data)
            }
        })
    }
}

公開作品通知

ユーザーコレクションのnotificationコレクションを用意、こちらも同様に初ログインからデフォルトで入っているリストになります。
そして未公開の場合にだけこちらのリストに追加できるようにします。

これに関しては、映画のfetchした情報の中に公開日も入っているので、その日にちがまだきていなければnotificationコレクションへの追加ボタンを用意します。

今回のコードはいいねの追加と全く同じなので追加と削除のコードは省きます。

firestoreからnotificatioコレクションをfetchしてきて公開日から一週間を切った場合、ヘッダーから通知されるようになります。

    const [message, setMessage] = useState("")

    useEffect(() => {
        const release = movie.release_date.split('-')
        const year = release[0]
        const month = release[1]
        const date = release[2]
        const releaseDate = `${year}/${month}/${date} 00:00:00`
        let today:any = new Date()
        const data:any = Date.parse(releaseDate)
        const item = data - today
        if(item > 0){
            if(item < 86400000){
                setMessage("明日公開!!")
            }else if(item < 172800000){
                setMessage('残り2日!')
            }else if(item < 259200000){
                setMessage('残り3日!')
            }else if(item < 345600000){
                setMessage('残り4日!')
            }else if(item < 432000000){
                setMessage('残り5日!')
            }else if(item < 518400000){
                setMessage('残り6日!')
            }else if(item < 604800000){
                setMessage('残り7日!')
            }
        }else{
            if(item > -604800000){
                setMessage('公開中')
            }else{
                db.collection('user').doc(displayUid).collection('notification').doc(movie.movieId).delete()
            }
        }
    },[])

ここでは、fetchした映画の配列を回し、映画オブジェクトを渡されている状態です。
そして渡ってきた映画が公開日から何日過ぎているか残り７日から通知するようになっています。
公開まで7日以上の場合は、通知されないようになっています。
公開してから一週間がすぎると、自動でnotificationコレクションから削除するようします。

終わりに

今回でこのアプリについての記事を終わろうと思います。
主な機能の実装方法のみ記事にしております。ので他の詳しいコードなどが知りたい方はこちらのgithubからどうぞ！

今回、UI構築は、material-uiをふんだんに使いました。
そのおかげでデザインの知識がない私でも、充実したものになったので、本当に便利だと感じました。
そしてそのデザインもTMDB公式のアプリを大いに似せていただきました。これから勉強を重ねていきたいと思っております。

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.auto-suggestion検索フォーム
5.ジャンルフィルターとページ移動
6.リスト　いいね　通知

今回はログイン後の機能でリストといいねと公開前の映画を通知希望のリストに追加するとヘッダーで通知するようにします。
コードに関しては、githubにて後悔しておりますので、こちらからどうぞ！

リスト

こんな感じでユーザーリストを作理、リストに追加できるようにします。

まずはじめにfirestoreないから、、、

firebase内のデータベース設計

ユーザー１人に、folderコレクションを作ります。
そこにはユーザーとは別のコレクションのfolderに映画をセットしていくようになります。

下記がユーザーの中のfolderコレクションなります。こちらのidからfolderコレクションと紐付けしていきます。

そしてこちらがユーザーとは別のfolderコレクションの中身で実際にはこちらに映画をセットしていきます。

リスト作成

export const makeFolder = (uid: string, folderName: string) => {
    return async (dispatch:any) => {
        const ref = folderRef.doc()
        const folderId = ref.id
        folderRef.doc(folderId).set({
            created_at: FirebaseTimestamp.now(),
            name: folderName,
            uid: uid,
        })
        usersRef.doc(uid).collection('folder').doc(folderId).set({
            name: folderName,
            id: folderId,
            created_at: FirebaseTimestamp.now(),
        })
    }
}

まずfolderコレクションに作成日時とfolderの名前と作成者をセット、
そしてユーザーのfolderコレクションにも紐付けを行うためにfolderIdをセットします。

リスト削除

export const deleteFolder = (uid: string, folderId: string) => {
    return async (dispatch:any) => {
        folderRef.doc(folderId).delete()
        usersRef.doc(uid).collection('folder').doc(folderId).delete()
    }
}

削除ボタンを押すと削除できるようにこちらも書いておきます。

リストへの追加

export const addFolderMovie = (folderId: string, movie:movie) => {
    return async (dispatch: any) => {
        folderRef.doc(folderId).collection('movie').get()
        .then(snapshot => {
            const match = []
            snapshot.docs.forEach(doc => {
                const data  = doc.data()
                if(data.id === movie.id){
                    match.push(data)
                }
            })
            if(match.length > 0){
                return false
            }else{
                const ref = usersRef.doc(folderId).collection('movie').doc()
                const movieId = ref.id
                const data = {
                    movieId: movieId,
                    id: movie.id,
                    title: movie.title,
                    poster_path: movie.poster_path,
                    backdrop_path: movie.backdrop_path,
                    release_date: movie.release_date,
                    genres: movie.genres,
                    overview: movie.overview,
                    vote_average: movie.vote_average,
                    timestamp: FirebaseTimestamp.now()   
                }
                folderRef.doc(folderId).collection('movie').doc(movieId).set(data)
            }
        })
    }
}

これがfolderへの追加のコードですが、同じ映画がセットされることのないように一度、追加するfolder内の映画を取得して入ってきた映画とかぶっていないか確認しています。
そして被っていなければ映画をセットするようにしています。

リストから映画を削除

export const deleteFolderMovie = (folderId:string, movie: movie) => {
    return async (dispatch:any) => {
        folderRef.doc(folderId).collection('movie').get()
        .then(snapshot => {
            const match:any = []
            snapshot.docs.forEach(doc => {
                const data = doc.data()
                if(data.id === movie.id){
                    match.push(data)
                }
            })
            if(match.length === 0){
                return false
            }else{
                folderRef.doc(folderId).collection('movie').doc(match[0].movieId).delete()        
            }
        })
    }
}

こちらでも同様に削除するものがなければfalseを返しています。
そしてあればfirestore内から削除するようにしています。

これがリストの作成、削除、映画の追加、削除の処理になります。

いいね

こちらはユーザーログイン時にデフォルトで入っているお気に入り機能になります。
そのため、先ほどのリストへ映画追加と削除のコードとほとんど同じですので詳しい説明は省きます。

export const deleteFavoriteMovie = (id: number) => {
    return async (dispatch:any, getState:any) => {
        const uid = getState().user.uid
        usersRef.doc(uid).collection('favorite').get()
        .then(snapshot => {
            const match:any = []
            snapshot.docs.filter(doc => {
                const data = doc.data()
                if(data.id === id){
                match.push(data)
                }
            })
            if(match.length === 0){
                return false
            }else{
                console.log(match)
                usersRef.doc(uid).collection('favorite').doc(match[0].movieId).delete()
            }
        })  
    }
}

export const addFavoriteMovie = (movie: movie) => {
    return async (dispatch: any, getState:any) => {
        const uid = getState().user.uid
        usersRef.doc(uid).collection('favorite').get()
        .then(snapshot => {
            const match = snapshot.docs.filter(doc => {
                const data = doc.data()
                return data.id === movie.id
            })
            if(match.length > 0){
                return false
            }else{
                const ref = usersRef.doc(uid).collection('favorite').doc()
                const movieId = ref.id
                const data = {
                    movieId: movieId,
                    id: movie.id,
                    title: movie.title,
                    poster_path: movie.poster_path,
                    backdrop_path: movie.backdrop_path,
                    release_date: movie.release_date,
                    genres: movie.genres,
                    overview: movie.overview,
                    vote_average: movie.vote_average,
                    timestamp: FirebaseTimestamp.now()
                }
                usersRef.doc(uid).collection('favorite').doc(movieId).set(data)
            }
        })
    }
}

公開作品通知

ユーザーコレクションのnotificationコレクションを用意、こちらも同様に初ログインからデフォルトで入っているリストになります。
そして未公開の場合にだけこちらのリストに追加できるようにします。

これに関しては、映画のfetchした情報の中に公開日も入っているので、その日にちがまだきていなければnotificationコレクションへの追加ボタンを用意します。

今回のコードはいいねの追加と全く同じなので追加と削除のコードは省きます。

firestoreからnotificatioコレクションをfetchしてきて公開日から一週間を切った場合、ヘッダーから通知されるようになります。

    const [message, setMessage] = useState("")

    useEffect(() => {
        const release = movie.release_date.split('-')
        const year = release[0]
        const month = release[1]
        const date = release[2]
        const releaseDate = `${year}/${month}/${date} 00:00:00`
        let today:any = new Date()
        const data:any = Date.parse(releaseDate)
        const item = data - today
        if(item > 0){
            if(item < 86400000){
                setMessage("明日公開!!")
            }else if(item < 172800000){
                setMessage('残り2日!')
            }else if(item < 259200000){
                setMessage('残り3日!')
            }else if(item < 345600000){
                setMessage('残り4日!')
            }else if(item < 432000000){
                setMessage('残り5日!')
            }else if(item < 518400000){
                setMessage('残り6日!')
            }else if(item < 604800000){
                setMessage('残り7日!')
            }
        }else{
            if(item > -604800000){
                setMessage('公開中')
            }else{
                db.collection('user').doc(displayUid).collection('notification').doc(movie.movieId).delete()
            }
        }
    },[])

ここでは、fetchした映画の配列を回し、映画オブジェクトを渡されている状態です。
そして渡ってきた映画が公開日から何日過ぎているか残り７日から通知するようになっています。
公開まで7日以上の場合は、通知されないようになっています。
公開してから一週間がすぎると、自動でnotificationコレクションから削除するようします。

終わりに

今回でこのアプリについての記事を終わろうと思います。
主な機能の実装方法のみ記事にしております。ので他の詳しいコードなどが知りたい方はこちらのgithubからどうぞ！

今回、UI構築は、material-uiをふんだんに使いました。
そのおかげでデザインの知識がない私でも、充実したものになったので、本当に便利だと感じました。
そしてそのデザインもTMDB公式のアプリを大いに似せていただきました。これから勉強を重ねていきたいと思っております。

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.ジャンルフィルターとページ移動
5.リスト　いいね　通知

アプリの概要など他にもこのアプリケーションについての記事を載せておりますのでそちらの方がみたい方はそちらをどうぞ！
コードもgithubにてのせておりますので、こちらからどうぞ！
今回は、ジャンルを選択したときにフィルターにかけてapiをたたいて映画の取得を行います。

そしてページ遷移ができるコードも載せていきたい思っております。

ジャンルフィルター

こんな感じのジャンルフィルターを作っていきます。

//selectGenreは、ジャンルボタンを選択した時にそのジャンルをこのstateにせっとする。この中にジャンルが入ってくる！
    const [selectGenre, setSelectGenre] = useState<genre[]>([])

//ジャンルボタンの選択後の挙動
    const toggleGenre = (genre: genre) => {
        const filteredGenres = selectGenre.filter((g:genre) => g.id !== genre.id)
        if(filteredGenres.length === selectGenre.length){
            setSelectGenre([
                ...filteredGenres,
                genre,
            ])
        }else{
            setSelectGenre([
                ...filteredGenres,
            ])
        }
    }
//selectGenreがセットされるたびにfetchするようにする
    useEffect(() => {
        const genreIDs = selectGenre.map((g: genre):number => {
            return g.id
        })
        if(path === '/'){
            dispatch(fetchMovieList(API_GET_MOVIE_POPULAR, genreIDs))
        }else if(path === '/upcoming'){
            dispatch(fetchMovieList(API_GET_MOVIE_UPCOMING, genreIDs))
        }else if(path === '/now_playing'){
            dispatch(fetchMovieList(API_GET_MOVIE_NOW_PLAYING, genreIDs))
        }else if(path === '/top_rated'){
            dispatch(fetchMovieList(API_GET_MOVIE_TOP_RATED, genreIDs))
        }
    },[selectGenre, path])

export const API_GET_MOVIE_POPULAR = 'movie/popular';
export const API_GET_MOVIE_UPCOMING = 'movie/upcoming'
export const API_GET_MOVIE_NOW_PLAYING = 'movie/now_playing'
export const API_GET_MOVIE_TOP_RATED = 'movie/top_rated'

1.selectGenreをフィルターにかけて、一個目にセットしたジャンルとかぶっていた場合は、それ以外をstateにセットする、またかぶっていなければそのままstateをセット

2.そしてselectGenreのstateがセットされるごとにデータをfetchする（ジャンルボタンをクリック）
今回は、公開中(/now_playing)、人気(/)、高評価(top_rated)、新作公開(upcoming)も同じコンポーネントで表示するのでパスによってfetchするときのURIが変わるようにしています。

ページ遷移

こちらはページ遷移です。

//次にページをセット
   const prevPage = (page - 1) <= 0 ? 1 : (page - 1);
//ページを一個戻る挙動
    const nextPage = (page + 1) > total_pages ? total_pages : (parseInt(Page, 10) + parseInt('1', 10));
//そして次へボタンへのchangePageは、nextPageを戻るボタンへのchangePageは、prevPageを渡す
    const changePage = (page: number) => {
        if(page === 0){
            alert('該当の作品はありませんでした。')
            return false
        }else{
            if(typeof(Storage) !== 'undefined'){
                localStorage.setItem('currentPage', JSON.stringify(page))
            }
            const GenresID = selectGenre.map((g:genre) => g.id)
            if(path === '/'){
                dispatch(fetchMovieList(API_GET_MOVIE_POPULAR, GenresID, page))
            }else if(path === '/upcoming'){
                dispatch(fetchMovieList(API_GET_MOVIE_UPCOMING, GenresID, page))
            }else if(path === '/now_playing'){
                dispatch(fetchMovieList(API_GET_MOVIE_NOW_PLAYING, GenresID, page))
            }else if(path === '/top_rated'){
                dispatch(fetchMovieList(API_GET_MOVIE_TOP_RATED, GenresID, page))
            }        
         }
    }

return(
          <button
            type="button"
            title="Previous 20 movies"
            onClick={() => changePage(prevPage)}
          >
            Prev
          </button>
          <div>
            {page}
            <span> / </span>
            {total_pages}
          </div>
          <button
            type="button"
            title="Next 20 movies"
            onClick={() => changePage(nextPage)}
          >
            Next
          </button>
)

1.prevPageは、page数が1以外の場合は、pageステートを-1する

2.nextPageは、fetchしてきた情報の中にトータルのページ数も入っているので、そのトータルページ数とpageステートが同じではない場合は、pageを+1するようになっている。

3.このprevPageは、戻るボタンをクリックした時にchangePageの引数として渡す。次へボタンを押したらnextPageを下記のように引数として渡す。

4.前、次のページのボタンがクリックされるとpageステートがそれに応じて変化してそれを各pathの映画のfetchメソッドに渡すことでpageを戻ったり、次へ進んだりできるようになる。

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.auto-suggestion検索フォーム
5.ジャンルフィルターとページ移動
6.リスト　いいね　通知

アプリの概要など他にもこのアプリケーションについての記事を載せておりますのでそちらの方がみたい方はそちらをどうぞ！
コードもgithubにてのせておりますので、こちらからどうぞ！
今回は、ジャンルを選択したときにフィルターにかけてapiをたたいて映画の取得を行います。

そしてページ遷移ができるコードも載せていきたい思っております。

ジャンルフィルター

こんな感じのジャンルフィルターを作っていきます。

//selectGenreは、ジャンルボタンを選択した時にそのジャンルをこのstateにせっとする。この中にジャンルが入ってくる！
    const [selectGenre, setSelectGenre] = useState<genre[]>([])

//ジャンルボタンの選択後の挙動
    const toggleGenre = (genre: genre) => {
        const filteredGenres = selectGenre.filter((g:genre) => g.id !== genre.id)
        if(filteredGenres.length === selectGenre.length){
            setSelectGenre([
                ...filteredGenres,
                genre,
            ])
        }else{
            setSelectGenre([
                ...filteredGenres,
            ])
        }
    }
//selectGenreがセットされるたびにfetchするようにする
    useEffect(() => {
        const genreIDs = selectGenre.map((g: genre):number => {
            return g.id
        })
        if(path === '/'){
            dispatch(fetchMovieList(API_GET_MOVIE_POPULAR, genreIDs))
        }else if(path === '/upcoming'){
            dispatch(fetchMovieList(API_GET_MOVIE_UPCOMING, genreIDs))
        }else if(path === '/now_playing'){
            dispatch(fetchMovieList(API_GET_MOVIE_NOW_PLAYING, genreIDs))
        }else if(path === '/top_rated'){
            dispatch(fetchMovieList(API_GET_MOVIE_TOP_RATED, genreIDs))
        }
    },[selectGenre, path])

export const API_GET_MOVIE_POPULAR = 'movie/popular';
export const API_GET_MOVIE_UPCOMING = 'movie/upcoming'
export const API_GET_MOVIE_NOW_PLAYING = 'movie/now_playing'
export const API_GET_MOVIE_TOP_RATED = 'movie/top_rated'

1.selectGenreをフィルターにかけて、一個目にセットしたジャンルとかぶっていた場合は、それ以外をstateにセットする、またかぶっていなければそのままstateをセット

2.そしてselectGenreのstateがセットされるごとにデータをfetchする（ジャンルボタンをクリック）
今回は、公開中(/now_playing)、人気(/)、高評価(top_rated)、新作公開(upcoming)も同じコンポーネントで表示するのでパスによってfetchするときのURIが変わるようにしています。

ページ遷移

こちらはページ遷移です。

//次にページをセット
   const prevPage = (page - 1) <= 0 ? 1 : (page - 1);
//ページを一個戻る挙動
    const nextPage = (page + 1) > total_pages ? total_pages : (parseInt(Page, 10) + parseInt('1', 10));
//そして次へボタンへのchangePageは、nextPageを戻るボタンへのchangePageは、prevPageを渡す
    const changePage = (page: number) => {
        if(page === 0){
            alert('該当の作品はありませんでした。')
            return false
        }else{
            if(typeof(Storage) !== 'undefined'){
                localStorage.setItem('currentPage', JSON.stringify(page))
            }
            const GenresID = selectGenre.map((g:genre) => g.id)
            if(path === '/'){
                dispatch(fetchMovieList(API_GET_MOVIE_POPULAR, GenresID, page))
            }else if(path === '/upcoming'){
                dispatch(fetchMovieList(API_GET_MOVIE_UPCOMING, GenresID, page))
            }else if(path === '/now_playing'){
                dispatch(fetchMovieList(API_GET_MOVIE_NOW_PLAYING, GenresID, page))
            }else if(path === '/top_rated'){
                dispatch(fetchMovieList(API_GET_MOVIE_TOP_RATED, GenresID, page))
            }        
         }
    }

return(
          <button
            type="button"
            title="Previous 20 movies"
            onClick={() => changePage(prevPage)}
          >
            Prev
          </button>
          <div>
            {page}
            <span> / </span>
            {total_pages}
          </div>
          <button
            type="button"
            title="Next 20 movies"
            onClick={() => changePage(nextPage)}
          >
            Next
          </button>
)

1.prevPageは、page数が1以外の場合は、pageステートを-1する

2.nextPageは、fetchしてきた情報の中にトータルのページ数も入っているので、そのトータルページ数とpageステートが同じではない場合は、pageを+1するようになっている。

3.このprevPageは、戻るボタンをクリックした時にchangePageの引数として渡す。次へボタンを押したらnextPageを下記のように引数として渡す。

4.前、次のページのボタンがクリックされるとpageステートがそれに応じて変化してそれを各pathの映画のfetchメソッドに渡すことでpageを戻ったり、次へ進んだりできるようになる。

どうも7noteです。select要素にcssが使いにくいので、他の方法を考えてみました。

select要素にはCSSが調整難しいため、自由に調整できるdiv要素でできる方法を書いていきます。
また、PCとスマホでselect要素風とそうじゃない動きに切り分けるなどが必要な時にも使えると思います。

書き方

※jQueryを使用しています。

index.html

<ul>
  <li class="check" link="no1" style="display: list-item;">その１</li> // linkの値と、pタグのクラスを揃える
  <li link="no2">その２</li>
  <li link="no3">その３</li>
  <li link="no4">その４</li>
  <li link="no5">その５</li>
</ul>

<p class="no1">テキスト１</p>
<p class="no2">テキスト２</p>
<p class="no3">テキスト３</p>
<p class="no4">テキスト４</p>
<p class="no5">テキスト５</p>

style.css

ul {
  width: 200px;                   /* セレクトボックスの横幅 */
  border: solid 1px #333;         /* 見やすく境界線を引く */
  position: absolute;             /* 選択肢が開いた時に高さが変わるので指定 */
  top: 0px;                       /* 好きな位置に */
  left: 0px;                      /* 好きな位置に */
}
ul li {
  padding: 5px 10px 5px 20px;     /* optionの余白と同等 */
  display: none;                  /* 最初は非表示 */
  list-style: none;               /* 「・」を非表示にする */
}
ul li.check {
  color: #fff;                    /* 選択されたもののみ装飾 */
  font-weight: bold;              /* 選択されたもののみ装飾 */
  background: #999;               /* 選択されたもののみ装飾 */
}

p {
  display: none;                  /* 最初は非表示 */
  margin-left: 220px;             /* セレクトボックスとかぶらないように位置調整 */
}

script.js

$(function () {
  var click_flg = true;                   // クリックを許可する変数を設定
  $('.check').show();                     // ページ読み込み時、任意のselect1つだけ表示
  $('.no1').show();                       // ページ読み込み時、任意のテキスト1つだけ表示
  $('ul li').on('click', function(){      // セレクトボックスのどれかがクリックされた時
    if(click_flg){                        // クリックが許可されているかどうか
      click_flg = false;                  // ボタンを一時的に無効
      $('ul li').removeClass('check');    // 全てのliからcheckを削除してから、
      $(this).addClass('check');          // 選択されたものにcheckのクラスを付ける
      $('ul li').not('.check').fadeToggle(400, function() { // check以外の表示と非表示を切り替える
        click_flg = true;                   // コールバック関数を使い、アニメーションが終わってからtrueにするように指定
      });
      $('p').hide();                        // pを全て非表示
      $('.' + $(this).attr('link')).show(); // selectされているlinkと同じクラスをもつpだけ表示
    }
  });
});

解説

各行で行なっている動きはコメントでご確認ください。
大まかな処理の流れとしては、、、

① ページ読み込み時、任意のselectとテキストを表示。
② li要素がクリックされた時、他のliを表示状態に切り換え（fadeToggle）
③ liが全て開いている状態の時、liがクリックされたら、クリックされたものにのみcheckのクラスを付与、かつ他のliを非表示状態に切り換え。
④ また同時に、pを全て非表示にしてクリックされたliのlinkと同じクラスを持つpだけ表示。
⑤ 結果、選択したli要素と、紐づいているp要素のみ表示状態になる。

そして、click_flg変数を設定しておくことで、フェードインアウトの処理中にクリックされても不具合を起こさないように処理をしています。

まとめ

正直な話をするとselectboxを使うほうが早いですし、わりと無理な作りになっていると思うので、

「どうしてもdivでselectのような動きを実装したいんだぁぁぁ」

ってときにだけお使いください。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.auto-suggestion検索フォーム
5.ジャンルフィルターとページ移動
6.リスト　いいね　通知

今回は実際にapi叩く処理を載せていきます。
tmdbのapiは充実しているのでより詳しく映画の詳細の表示やフィルタリングができました。
どんなアプケーションかは、1回目の記事にて載せておりますのでみていただけると幸いです。

コードがあればいいという方は、こちらからどうぞ！

概要

今回は、新作公開(upcoming)、人気(popular)、公開中(now_playing)、高評価(top_rated)を映画のリストを表示できるようにします。
それごとにジャンルのフィルターをかけられるようにしています。

映画リストfetch

export const fetchMovieList = (API_GET_MOVIE_BY = API_GET_MOVIE_POPULAR, genreIDs: number[], page = 1) => {
    const genreParams = genreIDs ? `${API_PARAMS_GENRE}${genreIDs.join('%2C')}` : '';
        return async (dispatch: any) => {
        dispatch(fetchMovie())
        return fetch(`${URL}${API_GET_MOVIE_BY}${API_KEY}${API_PARAMS_PAGE}${page}${genreParams}`)
        .then(response => response.json())
        .then(json => dispatch(fetchMovieSuccess(json.results, json.page, json.total_pages)))
        .catch(error => dispatch(fetchMovieFailure(error)))
    }
}
export const URL = 'https://api.themoviedb.org/3/';
export const API_GET_MOVIE_POPULAR = 'movie/popular';
export const API_GET_MOVIE_UPCOMING = 'movie/upcoming'
export const API_GET_MOVIE_NOW_PLAYING = 'movie/now_playing'
export const API_GET_MOVIE_TOP_RATED = 'movie/top_rated'

こちらが、映画のジャンルのリストを叩く処理になります。
最初に引数であるAPI_GET_MOVIE_BYは、デフォルトだと人気popularのapiを叩くので、デフォルトはpopularのapiを設定しておきます。

genresIDsは、ジャンル選択した時にgenreIDsを引数でわたします。page遷移も行いますので最初はデフォルトの１を設定しておきます。

https://api.themoviedb.org/3/movie/now_playing?api_key=API_KEY&page=1&with_genres=99%2C35

urlは上記の形で叩くのでgenresのパラメータでは、genreIdごとに%2Cを入れなければいけないので、genreParamsにて代入します。
fetchしている時、fetchが成功した時、失敗した時にそれぞれreducerに渡してstoreで更新します。

映画検索fetch

export const searchMovieList = (keyword: string) => {
    let url = URL_SEARCH + keyword + API_KEY_ALT;
    return async (dispatch: any) => {
        dispatch(searchMovie(keyword))
        return fetch(url)
        .then(response => response.json())
        .then(json => json.results)
        .then(data => dispatch(searchMovieSuccess(data, keyword)))
        .catch(error => dispatch(searchMovieFailure(error)))
    }
}

export const URL_SEARCH = 'https://api.themoviedb.org/3/search/movie?query=';

映画詳細関連fetch

export const fetchMovieDetail = (id: string) => {
    const url_movie = URL_DETAIL + id + API_KEY;
    return async (dispatch: any) => {
        dispatch(fetchMovieDetailAction())
        return fetch(url_movie)
            .then(response => response.json())
            .then(data => dispatch(fetchMovieDetailSuccess(data)))
            .catch(error => dispatch(fetchMovieDetailFailure(error)))
    }
} 

export const URL_DETAIL = 'https://api.themoviedb.org/3/movie/';

まずここでは、映画のidを使って映画の詳細取得します。
そしてその取得後の情報をもとに、youtubeの関連動画、俳優リスト、関連映画の取得を行います。

export const fetchTrailerList = (id: string) => {
    const url_trailers = URL_DETAIL + id + URL_VIDEO + API_KEY;
    return async (dispatch: any) => {
        dispatch(fetchTrailers())
        return fetch(url_trailers)
        .then(response => response.json())
        .then(json => json.results)
        .then(data => {
            let youtubeTrailers = data.filter((trailer:any) => {
                return trailer.site === 'YouTube';
            })
            dispatch(fetchTrailersSuccess(youtubeTrailers));
        })
        .catch(error => dispatch(fetchTrailersFailure(error)))
    }
}

export const fetchCastList = (id: string) => {
    const url_casts = URL_DETAIL + id + URL_CAST + API_KEY;
    return async (dispatch: any) => {
        dispatch(fetchCasts())
        return fetch(url_casts)
            .then(response => response.json())
            .then(json => json.cast)
            .then(data => dispatch(fetchCastsSuccess(data)))
            .catch(error => dispatch(fetchCastsFailure(error)))      
    }
}

export const fetchSimilarMovies = (movieID: string) => {
    let url = URL + API_GET_MOVIE_SIMILAR(movieID) + API_KEY
    return async (dispatch: any) => {
        dispatch(fetchMovie())
        return fetch(url)
            .then(responnse => responnse.json())
            .then(json => json.results)
            .then(data => dispatch(fetchMovieSuccess(data, 0, 0)))
            .catch(error => dispatch(fetchMovieFailure(error)))
    }
}
export const URL_VIDEO = '/videos';
export const URL_CAST = '/casts';
export const URL_DETAIL = 'https://api.themoviedb.org/3/movie/';
export const URL = 'https://api.themoviedb.org/3/';
export const API_GET_MOVIE_SIMILAR = (movieID: any) => `movie/${movieID}/similar`;

tmdbのapiでは、関連の予告動画などやキャストや似ている映画などのapiも続けて叩けるようになっているので、それをつかって
より詳しく映画の詳細を表示できるようになっています。

映画の詳細はこんな感じです！

俳優詳細fetch

export const fetchActorDetail = (id: string) => {
    const url_actor = URL_PERSON + id + API_KEY;
    return async (dispatch:any) => {
        dispatch(fetchActor())
        return fetch(url_actor)
            .then(response => response.json())
            .then(data => dispatch(fetchActorSuccess(data)))
            .catch(error => dispatch(fetchActorFailure(error)))
    }
}

export const URL_PERSON = 'https://api.themoviedb.org/3/person/';

actorIdを使って俳優の詳細を取得します。
そしてその俳優の出演作品の情報を取得します

export const fetchActorMovieList = (id:string) => {
    let url: string;
    if(id)url = URL_LIST + API_KEY + '&with_cast=' + id;
    else url = URL_LIST + API_KEY;
    return async (dispatch:any) => {
        dispatch(fetchMovie());
        return fetch(url)
            .then(response => response.json())
            .then(json => json.results)
            .then(data => dispatch(fetchMovieSuccess(data, 0, 0)))
            .catch(error => dispatch(fetchMovieFailure(error)))
    }
}

export const URL_LIST = 'https://api.themoviedb.org/3/discover/movie';

俳優詳細のページに出演作品も掲載します。

こんな感じで表示します。デザインはTMDBに似せております。

ページのデザインやなどはgithubのコードにて確認できます。
ここでは省かせていただきます。

はじめに

1.アプリケーション紹介
2.認証機能
3.TMDB api fetch
4.auto-suggestion検索フォーム
5.ジャンルフィルターとページ移動
6.リスト　いいね　通知

今回TMDBのapiを使って映画検索のアプケーションを作ってみました。
cssの勉強不足なのでデザインに関しては、TMDBのアプリケーションをまねて作らせていただきました。
こちらになります。
プログラミング勉強したての初心者の制作物になりますので、暖かくみていただけると幸いです。
githubにて公開もしておりますので、コードのみ知りたい方は以下からどうぞ！！
https://github.com/yuuki008/movie-box

今回は、単にどういったアプケーションかの紹介になります。

主な機能紹介

ジャンルボタンをクリックすることで、TMDBapiを叩いて映画を取得できるようにします。

人気だけでなく、公開中、高評価、新作公開のapiもあったので、それごとにapiに上記のようなジャンルフィルターに掛けられるようにしています。

つぎに認証機能にログインするといいねとリスト作成、追加、削除ができます。

映画未公開の場合は、一週間前から通知されるようにしました。

映画の検索フォームに入力すると１文字ごとにapiを叩き、検索結果が出力されるようになっています。

以上が大体のアプリ紹介になります。

使ったパッケージ

"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/styles": "^4.10.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"connected-react-router": "^6.8.0",
"firebase": "^7.21.0",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-notification-system": "^0.4.0",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"redux": "^4.0.5",
"redux-action": "^1.2.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"router": "^1.3.5",
"thunk": "0.0.1"

ディレクトリ構成

├── AuthWrapper.tsx
├── api.tsx
├── assets
│   ├── actor.css
│   ├── genreList.css
│   ├── images
│   │   ├── logo.svg
│   │   ├── logo_square.svg
│   │   ├── no_image.png
│   │   ├── themoviedb.png
│   │   └── themoviedb_green.svg
│   ├── movieDetail.css
│   ├── pageButton.css
│   ├── profile.css
│   └── search.css
├── components
│   ├── Card
│   │   ├── Cast.tsx
│   │   ├── DefaultCard.tsx
│   │   ├── MovieCard.tsx
│   │   ├── MovieCard2.tsx
│   │   └── Trailer.tsx
│   ├── Modal
│   │   └── FolderList.tsx
│   ├── PageComponent
│   │   ├── Favorite.tsx
│   │   ├── FolderMovie.tsx
│   │   ├── Genre.tsx
│   │   ├── Header.tsx
│   │   └── Release.tsx
│   ├── UIkit
│   │   ├── BoxLabel.tsx
│   │   ├── FormControl.tsx
│   │   ├── LightTooltip.tsx
│   │   ├── MenuButton.tsx
│   │   ├── Notification.tsx
│   │   ├── PageButton.tsx
│   │   ├── PrimaryButton.tsx
│   │   ├── RatingStar.tsx
│   │   ├── ReleaseMovie.tsx
│   │   ├── SelectBox.tsx
│   │   ├── Suggestion.tsx
│   │   ├── TextInput.tsx
│   │   └── index.tsx
│   └── index.ts
├── containers
│   ├── Actor.tsx
│   ├── Auth
│   │   ├── Reset.tsx
│   │   ├── SignIn.tsx
│   │   ├── SignUp.tsx
│   │   └── index.tsx
│   ├── MovieContainer.tsx
│   ├── MovieDetail.tsx
│   ├── MyList.tsx
│   └── index.ts
├── firebase
│   ├── config.tsx
│   └── index.tsx
├── index.css
├── index.tsx
├── react-app-env.d.ts
├── redux
│   ├── actor
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducers.tsx
│   ├── castlist
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducers.tsx
│   ├── folder
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducers.tsx
│   ├── movie
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducer.tsx
│   ├── movielist
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducers.tsx
│   ├── selectors.tsx
│   ├── store.tsx
│   ├── trailerlist
│   │   ├── actions.tsx
│   │   ├── operations.tsx
│   │   └── reducers.tsx
│   └── user
│       ├── actions.tsx
│       ├── operations.tsx
│       └── reducers.tsx
├── serviceWorker.ts
└── setupTests.ts

こちらがpackage.jsonの中身になります。
認証機能とdatabase管理は、firebaseを使いました。
UI構築は、material-uiをふんだんに使いました。
今回は、typescriptを使いましたが、まだ勉強し始めのため、any型を多く使ってしまっております！！
申し訳ないです！！

終わりに

今回は、主な機能の実装方法しか載せておりませんので、コードを全て細かく知りたい方はこちらからどうぞ!
ではあと4つ記事を上げていきますので、みていただけると幸いです。

社内チームで今年一年の成果物として出欠管理システムを作成しました！！
この記事ではその概要を紹介します。

プロジェクト概要

成果物として何を作成するかチームで話し合い、社内全体で利用でき作業効率化につながるシステムについて考えました。
社内行事の出欠管理がExcel管理されており、作業負荷がかかる状態だったため、この改善としてQR認証を利用した出欠管理システムを作ることになりました。

システム運用イメージ

1. 管理者がユーザーのQRコードを発行
   

2. 管理者がユーザーへQRコードを送付（Slack・メール等）
   

3. 開催者がイベント開催日を登録

4. ユーザーがイベント参加時にQRコードをかざす
   （開催者はQR認証画面を表示しておく）
   

5. 開催者がイベントの出席状況を確認する

システムの使い方

QRコード発行

• 「QRコードを生成する」を選択します。
  

• ユーザーコード・ユーザー名を入力します。
  

• QRコードが発行されます。
  管理者は各ユーザーへQRコードを通知します。
  

イベント登録/QRコード読み取り

• 「QRコードを読み取る」を選択します。
  

• イベント名・イベント日付を入力します。
  

• 登録したイベントを選択します。
  

• QRコード読み取り画面が表示されるので、QRコードを認証します。
  

• QRコードの認証に成功するとこのような画面になります。
  

イベント履歴確認

• 「イベント履歴を見る」を選択します。
  

• 登録済みのイベントが表示されます。
  

• イベント参加者が確認できます。
  

活用技術

メンバーの各々が得意な分野を用いて作成されています。

• 実行環境
  • GCP
    • Compute Engine
    • Cloud DNS
    • Cloud Load Balancing
  • Docker
    • Nginx
    • PostgreSQL
• Webアプリ
  • JavaScript
    • node.js
    • Vue.js
    • TypeScript
• API
  • Python
    • Flask

システム構成

GCPを利用して環境を構築しました。
Web画面、API、DBをVM上にDockerコンテナとして常駐させています。
タブレットでブラウザからURLへアクセスするとDNS・LB・Nginxを経由、Web画面またはAPIへリクエストし、QRコード生成/認証・イベント履歴閲覧などの各処理を行う実装方式としています。
QR認証履歴などの各データへのアクセスはAPIからDBへSQLを発行することで保存するようにしました。

開発期間

主担当3人で日常業務の片手間で約3か月ほどかかりました。
実際の作業時間はもっと短かったです。

苦労した点

• 担当者3人で作った成果物の結合
  インフラ面で統一した開発環境を用意せず進めたため、実際に結合した際にCORSの考慮漏れ等でwebアプリがうまく動作しませんでした。
  躓いた点はIssueに整理して今後のチーム開発では気を付けていきます。
• クライアントからAPIへのアクセス
  Web画面からAPIにリクエストする際、クライアントからリクエストを飛ぶことを意識していなかったため、ファイアウォールやDNS・LB・Nginxの設定に苦労しました。
  今後システム構成を考える際は意識していきたいと思います。

今後の展開

• 管理画面へのログイン認証機能の実装
  実装工数が足りなかったため実装できませんでした。
  Amazon Cognitoを利用した実装を検討中です。
• システム基盤をAWSへ移行
  前述のAWS Cognito実装などAWSサービスの勉強も今後チームで実施していきたいと考えています。
  併せて、基盤移行も検討中です。
• 各社内イベントでの運用
  コロナの影響で実際に人が集まる機会がなく、テストが不十分です。
  データ量や負荷など分からない点が多いので、今後活用してもらっていきたいと考えています。