フロントエンドエンジニアのためのGraphQL with React 入門 2018年版

GraphQLの言語仕様を学習し、GitHubのGraphQL APIと連携するReactアプリケーションを実装します!React/GraphQL/Apolloを利用し、近未来を見据えたAPI開発手法を習得しよう!

Ratings 3.39 / 5.00
フロントエンドエンジニアのためのGraphQL with React 入門 2018年版

What You Will Learn!

  • GraphQLの言語仕様が分かるようになる
  • GraphQLのクライアントサイドアプリケーションの実装方法が分かるようになる
  • GraphQLのquery(クエリ)やmutation(ミューテーション)を理解し実装できるようになる
  • GitHubのGraphQL APIと連携するアプリケーションが実装できるようになる
  • GraphQLでPagination(ページネーション)が実装できるようになる

Description

本コースは、 概論編言語仕様編、そして実践編の3つのセクションで構成されています。

概論編では、GraphQL独特の概念を掴んでもらうために、RESTと比較しながらその特徴について学んでいきます。

言語仕様編では、実際に手を動かしながらGraphQL APIサーバと対話できるフロントエンドアプリケーションの開発に必要となる知識を体系的に身につけて頂きます。

そして実践編です。この実践編ではフロントエンドアプリケーションで最も実績のあるReactライブラリを用いてGraphQLクライアントアプリケーションの実装を行います。 GraphQLで使用されるQueryやMutationといったリクエストを Apolloという定評のあるライブラリを用いてGraphQLリクエストの送受信を行う方法についてみっちり学習します。

以上、計7.5時間のコースとなります。(但し、コースのアップデートにより時間増減の可能性あり)

尚、本コースではGraphQLの学習を第一の目的としています。 そして、Reactの基本的な学習を修了されている方を前提としています。そのため、ReactやES2015等のモダンなJavaScriptの言語仕様についての説明はコースの中では割愛させていただいております。しかしながら、GraphQLの理解の妨げになるほどの支障がある場合には積極的にこちらのQ&Aでご質問頂ければと思います。もちろん、GraphQLについてのご質問も大歓迎です。どしどしご質問をお寄せください。基本的には、日本の暦の土日祝日を除く、3営業日以内で回答をさせて頂く方針ですので、宜しくお願い致します。

Udemyの返金保証についてです。 Udemyでは、30日以内であれば100%返金保証となっております。 何かしらの理由でコースにご満足いただけない場合は、返金対応できますので その際は返金保証のシステムの活用をご検討ください。


概論編

  • GraphQLとは?

    • GraphQLにおける3つの特徴についてご紹介します。

  • RESTがMcDonald's方式だとすれば、GraphQLは何方式になる?

    • 既存のREST APIと比較しながらGraphQLについての概念を理解します。

    • RESTは静的なAPI、GraphQLは動的なAPI

    • マルチエンドポイントのREST、シングルエンドポイントのGraphQL

言語仕様編

  • GitHub GraphQL APIを利用する上での準備

    • GraphiQLの紹介

    • GitHubとのAuthorization

    • 初めてのQuery

  • クエリ(query)、フィールド(Fields)、型(Types)

    • Documentation ExplorerでGraphQL Queryの仕様を確認しながらQueryを組み立てる

  • 引数(Arguments)

    • 引数を指定し該当のフィールドを取得する

  • エイリアス(Aliases)

    • エイリアスで同名のフィールドの競合を回避する

  • フラグメント(Fragments)

    • フラグメントで重複フィールドの指定をDRYにする

  • 操作名(Operation Name)

    • 操作名(Operation Name)により多様なQueryやMutationのリクエストを確保できるようにする

  • 変数(Variables)

    • 変数(Variables)で動的なリクエストに変更する

    • ウェブアプリケーションに組み込める実践的な形式に近づける

  • ミューテーション(Mutations)

    • ミューテーション(Mutations)でデータを変更する

    • CRUDのC、U、Dを担うのがミューテーション

  • インラインフラグメント(Inline Fragments) と型名(__typename)

    • 抽象的なフィールドの指定

    • 具体的なフィールドの指定

    • 型名(__typename)の紹介とそれが解決する問題とは

  • 型システム(Type System)、スカラー型(Scalar Types)、オブジェクト型(Object Types)、そしてスキーマ(Schemas)

    • 型についてのおさらい

    • スカラー型とオブジェクト型の違い

    • スキーマ定義の存在

  • ページネーション(Pagination)

    • Relay-Style Cursor Paginationについて

    • 3つのケーススタディーでページネーションを完全理解

    • Forward方向のページ遷移

    • Backward方向のページ遷移

    • pageInfoフィールド(startCursor、endCursor、hasPreviousPage、hasNextPage)の存在とその役割

    • connectionとは

    • edgesとは

    • cursorの役割とbase64エンコードされたcursorを解剖してみよう

実践編 - GitHubリポジトリ検索アプリケーションの開発にチャレンジ

  • 本セクションで扱うソースコード

    • GitHub上のリポジトリをご紹介

    • 各レクチャーとブランチ名との対応表のご紹介

    • ソースコードをGitHubで管理する際によく聞かれる質問と回答(FAQ)のご紹介

  • デモアプリの説明

    • React製ページネーション対応のGitHubのリポジトリ検索アプリケーションのご紹介

    • このアプリケーションの実装方法を学びます

  • GitHub Tokenの作成

    • GitHubのアクセストークンの発行

  • Reactアプリケーションの作成からGitHubリポジトリの作成

    • create-react-appによるアプリケーション作成

    • GitHubリポジトリへのfirst push

  • 必要なnpmパッケージ(apollo-boost、graphql、react-apollo)をインストールする

    • apollo-boostのご紹介

    • 各種npm パッケージのインストール

  • 不要なコードやファイル等を除去する

  • dotenvをセットアップする

    • dotenvのセットアップ

    • GitHubアクセストークンを設定しロードする

  • GraphQLクライアントをセットアップする

    • apollo-boostの依存パッケージの説明

      • apollo-cache-inmemory

      • apollo-client

      • apollo-link

      • apollo-link-http

      • graphql-tag

    • GraphQLクライアントの作成

    • GraphQLクライアントによるGitHub GraphQL APIサーバとの通信を行う

    • 初めてのリクエストとレスポンスで疎通確認を行う

  • GraphQLのコードを別のファイルに分離する

    • 関心の分離(Separation of Concerns) により、graphqlのコードは別のファイルへ分離する

  • search queryとVariablesをアプリケーションに適用する

    • 検索のためのクエリの実行

    • 変数(Variables)の活用

  • 検索フォームを作成し動的に検索を実行できるようにする

    • 検索フォームの作成とイベントハンドラの作成

    • 状態(ReactのState)の管理

    • thisコンテキストのbind

  • タイトルを表示する

    • タイトル

    • 件数が0件の場合は、単数形(Repository)?それとも複数形(Repositories)?

  • 検索結果一覧をリスト表示する

    • 取得したdataからedgesを取り出し、nodeを掴み、名前を取得し一覧に表示する

  • 次ページ(Next)ボタンを実装する

    • target="_blank" による脆弱性とその対応についてのご紹介

    • cursorを用いてForward方向へページ遷移するボタンを実装する

  • 前ページ(Previous)ボタンを実装する

    • cursorを用いてBackward方向へページ遷移するボタンを実装する

  • starの数を表示する

    • Let's See the Stargazers!

  • starを付けているかどうかの状態を表示する

    • starred か、それとも unstarredかの状態の取得と表示

  • onClickでstarを付与する

    • starrableフィールドのviewerHasStarred状態をfalse からtrueへ変える

  • onClickでstarを解除する

    • starrableフィールドのviewerHasStarred状態をtrue からfalseへ変える

  • refetchQueriesを利用しstarの総数をstarの付与/解除に同期させる

    • partialな状態変化に伴う全体で保持する状態との矛盾の紹介

    • 矛盾問題の解決策を2つご紹介、そして1つ目をハンズオンでご紹介

    • refetchQueriesに渡すArrayとFunction

  • writeQueryを利用しstarの総数を書き換える

    • 矛盾問題の解決策の2つ目をハンズオンでご紹介

    • Mutationのupdateオプションによるコールバック処理

    • キャッシュオブジェクトstore再び

    • store.readQueryによるキャッシュの読取り

    • store.writeQueryによるキャッシュの更新

  • ReactのrefでonChangeによる過剰なquery送信を回避する

    • 過剰なquery送信問題についての紹介

    • 不要なイベントハンドラの削除

    • 控えめなsetState()

    • onSubmitの本領発揮

    • React.createRef()の機能の紹介

    • refのcurrent属性(attribute)によるDOM参照

Who Should Attend!

  • GraphQLの言語仕様について学習したい方
  • GraphQLのクライアントサイドアプリケーションをReactで実装してみたい方

TAKE THIS COURSE

Tags

  • React JS
  • REST API
  • GraphQL

Subscribers

3022

Lectures

39

TAKE THIS COURSE



Related Courses