【はむ式】フロントエンドエンジニアのためのGraphQL with React 入門

本コースは、 概論編、言語仕様編、そして実践編の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参照