React/ApolloとGraphQL BaaSで作るお手軽Webアプリ開発ハンズオン

（本ハンズオンは、11/18に実施したものとほぼ同じ内容です）

ReactとGraphQLを勉強して手軽にWebアプリを開発してみませんか？ Reactは、JavaScriptでSPA (Single Page Application)を開発するのに向いたビューライブラリの一つです。 GraphQLは、RESTを代替すると言われているデータ通信プロトコル用のクエリ言語です。

ReactやGraphQLに興味はありつつも手を動かせていない人、 環境構築で進まなくなってしまった人、 React/GraphQLでちょっと本格的なアプリを開発してみたい人、 などなど、React/GraphQLでのアプリ開発を体験してみませんか？

本講座は、React/GraphQLでWebアプリを開発する一例を体験するためのハンズオン形式の講座です。

参考情報

本家Reactの解説はこちらをご参照ください。 本家GraphQLの解説はこちらをご参照ください。

GraphQLのバックエンドサービスとしてGraphCMSやGraphcoolを用います。これを利用することでGraphQLのサーバを独自に用意する必要がなくなります。 GraphQLのクライアントライブラリには、JavaScriptのGraphQLライブラリとしては一番人気のApollo Clientを用います。最近v2.0がリリースされました。

Ebisu.JSについて

Ebisu.JSグループでは、JavaScriptでWebアプリを構築する能力を身につけることを目標に、 複数のレベルの要素技術を学習するための講座を開催します。 本講座は、Webアプリを構築する技術の一つであるReact/GraphQLに関して学ぶものです。

開催概要

• 日時　: 12/10 (13:00開場)13:30-17:00
• 場所　: ギークオフィス恵比寿 (東京都渋谷区恵比寿4-7-6 KTビル3F)
• 参加費: 3000円（当日現金でお支払いください、お釣りの必要のないようにお願いします）
• 持ち物: ノートPC

対象者

本講座は、およそ下記が分かることを前提としています。

• JavaScriptの基本（ES2015の基礎を含む）
• HTMLの文法
• Reactの基礎

Reactの基礎に不安がある方は、事前にこちらの教材で学習しておきましょう。

事前準備

下記の準備を事前に済ませておくことをお勧めします。当日の13:00から13:30の間に作業も可能です。

• Chromeのインストール
• Node v8のインストール
• GitHubのアカウント作成
• gitのインストール (難しすぎる場合はスキップ)

既に導入済みの場合は問題ありません。

ハンズオンの内容

下記のような内容を予定しています。

• 概要説明: React, GraphQL, Apollo, GraphQL BaaS等について紹介します
• 開発実行環境の確認: Reactアプリを動作させる実行環境を紹介します
• 例題アプリの解説: GraphCMSを用いた例題を解説します
• Graphcoolセットアップ: 利用するGraphQLサービスに登録します
• GraphQLスキーマ設計: GraphQLのスキーマを定義します
• 例題アプリ: 作ったGraphQLサービスにアプリをつなげます
• アプリの改造: 各自の興味やペースに応じて例題アプリを改造します

適宜、分かりにくいところを解説したり、質問を受け付けたりします。

補足

本ハンズオンは、11/18に開催したものとほぼ同じ内容のため、重複して参加することはお勧めしませんが、参加していただいても問題ありません。

タイムテーブル

上記のタイムテーブルは目安です。参考に応じて変更する場合があります。

注意事項

• 当日の参加者が5名に満たない場合は開催を中止する場合があります
• 会場まではJR恵比寿駅東口から徒歩3分ですが少し迷いやすいです
• 写真による会場までの道順を参照して気をつけてお越しください
• 領収書が必要な方は参加申込時のアンケートにてお知らせください
• 飲み物など必要であればご持参ください
• 会場となるオフィスのドアが開いていない場合は呼び鈴を鳴らしてください