Overview

本コースは、 概論編、言語仕様編、そして実践編の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-inmemoryapollo-clientapollo-linkapollo-link-httpgraphql-tagGraphQLクライアントの作成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とFunctionwriteQueryを利用しstarの総数を書き換える矛盾問題の解決策の2つ目をハンズオンでご紹介Mutationのupdateオプションによるコールバック処理キャッシュオブジェクトstore再びstore.readQueryによるキャッシュの読取りstore.writeQueryによるキャッシュの更新ReactのrefでonChangeによる過剰なquery送信を回避する過剰なquery送信問題についての紹介不要なイベントハンドラの削除控えめなsetState()onSubmitの本領発揮React.createRef()の機能の紹介refのcurrent属性(attribute)によるDOM参照

Skills

Reviews