React/GraphQLで作るサーバレスWebアプリ開発ハンズオン

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

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

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

参考情報

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

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

Ebisu.JSについて

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

開催概要

• 日時　: 11/18 (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のアカウント作成

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

ハンズオンの内容

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

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

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

補足

本ハンズオンは今回が初めての開催のため、構成が不十分だったり予期せぬ不具合があるかもしれませんが、あらかじめご了承ください

タイムテーブル

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

注意事項

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