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