close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック 新しい働き方 エクササイズ ビジネスモデルキャンバス 状況認識 ストレス 必須コマンド Web 今日わかる きほん 状況把握 意思決定 心の健康 IT書籍 書籍紹介 営業マン 類推法 クラス プロセス指向 PdM 共用 ウェビナーレポート 地方創生 GraphQL CSS OWASP ZAP セキュリティマネジメント 問題解決 ソフトウェア 新技術 雑談力 テスト見積もり Scala Go Rust Relay Cloud AI Kaggle ITエンジニア フレッシャーズ 経営戦略 事業戦略 マインドフルネス 基本情報技術者試験 ニューノーマル プロジェクト会議 メソドロジ 講師インタビュー システム障害 販売管理システム VMware セキュリティ事例 ケーススタディ インターネット通信 ビジネスマン 品質向上 提案 ロジック図解術 バーチャルマシン 対策事例 アスリート 国の動向 アンチパターン リモートアクセス 脳ヨガ 自律神経 整え方 組み立て方 コミュニケーション術 リーダー 新人 知っておきたいこと 対人能力 洞察力 一文作成 サッカー業界 グループワーク マネジメント手法 IT業界 Octave セキュリティ管理 IT ネットワーク機器の特徴 ネットワーク機器の仕組み 基本のキ プレゼンテーションの組み立て方 伝え力 試験合格後 時短術 作成のコツ 導入事例 メンタルマネジメント メンタルヘルスケア DXプロジェクト プログラミング教育 プログラミング的思考 子供向けプログラミング データ定義言語 DDL モダンWebアプリケーション ドキュメント作成 Docker Compose Docker Hub AR VBAエキスパート試験 Azure メディア掲載 サーバーアーキテクチャ データ操作言語 DML NewSQL ソフトウェアセキュリティ 数学 VR アパレル業界 Kubernetes Power BI Android プロダクトオーナーシップ プロダクトオーナー 内製化 情報システム部門

3 時間で React 入門 ~ GraphQL と Relay で作る Web アプリケーション~|研修コースに参加してみた


2021-06-04 更新

今回参加したコースは 3 時間で React 入門 ~ GraphQL と Relay で作る Web アプリケーション です。

今やモダンなフロントエンドの開発ではスタンダードとなった React を、さらに欲張りに GraphQL を使って API サーバからデータを取得して表示する簡単な Web アプリケーションを書いてみました。

こう書くとモダンな香りがプンプンして、「わたしにはちょっと早いかな」と気後れしてしまいそうです…

が、しかし!

Hello World からテンポよく進められ、たった 3 時間で React の良さやコンポーネントの粒度などお作法がわかりました(それだけ React のエコシステムが充実しているという証でもありますが)! モダンなフロントエンド開発に入門したい方にはとってもオススメのコースでした!!

 

では、どのようなコースだったのかレポートします!

コース情報

想定している受講者
  • JavaScript プログラミングの中級レベルの知識
  • HTML, CSS などの中級レベルの知識
受講目標
  • React の基本的な仕組みを理解する
  • React と GraphQL / Relay を使った簡単な Web アプリケーションの開発がわかる

講師紹介

モダンな技術にも対応できる講師と言えば、米山 学 さんです。

米山 学
米山 学
Java はもちろん Python / PHP などスクリプト言語、 Vue / React など JavaScript だってなんだってテックが大好き。原点をおさえた実践演習で人気

React と並ぶモダンフロントエンドフレームワークの Vue.js のコースでも登壇いただいています。

3 時間で入門する Vue.js 研修コースに参加してみた

React とは

まずは React の説明ですが、これはいろいろなところで紹介されているので簡単に。

  • 3 大フロントエンドフレームワークの一つ
    • Angular / Vue
  • コンポーネントベース (部品) で UI を構築

Hello, React

まずは JSX で書くのではなく、わかりやすく HTML で Hello World ならぬ Hello React を書いてみます。

  1. HTML を書く
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <title>Hello React</title>
      </head>
      <body>
      </body>
    </html>
  2. script タグで必要なライブラリを指定
    • 今回は開発用の development を使う
    • 本番リリースのときは production を使う
    <head>
      <meta charset="utf-8" />
      <title>Hello React</title>
      <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    </head>
  3. DOM を指定
    <body>
      <div id="root" /></div>
    </body>
  4. JavaScript を書く
    <div id="root" />
      <script>
        const element = React.createElement('h1', [], 'Hello React!'); // createElement で要素を作成
        ReactDOM.render( // render は書き出す。第1引数は対象となるオブジェクト。第2引数は対象となる要素を取得
          element,
          document.getElementById('root')
        );
      </script>
    </div>

VSCode では Alt + B で実行できるので、やってみます。


JSX で書く

JSX とは、 JavaScript ですべて完結させるために HTML を表現する記述方式で、 React では HTML ではなく JSX を使います。

  1. JSX は JavaScript ではないので、 Babel というコンパイラ(トランスコンパイル)で JavaScript に変換する
    <head>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <script type="text/babel"></script>
  2. JSX で書く
    <script type="text/babel">
      const element = <h1>Hello React!</h1>; // <h1>..</h1> は JSX
      ReactDOM.render(
        element,
        document.getElementById('root')
      );
    </script>
    
    • JSX の書き方の注意
      • 単一要素しか render できない
        • NG
          <h1>...</h1>
          <h2>...</h2>
          
        • OK
          <div>
            <h1>...</h1>
            <h2>...</h2>
          </div>
          

これだけ見ると、 HTML も JSX もそれほど変わりはありませんね。

React コンポーネント

React は UI をコンポーネントという部品で構成します。例えば、 ボタンやアイコンなどの細かな部品を作り共通化、そこからさらにヘッダーのような大きな部品にして、ページ全体を作ります。

と説明を伺いながら、個人的にはコンポーネントの粒度が難しいなと感じてました。ちなみに、素人考えですが、データの更新があるかないかで切り分けすると良さそうに思いますが、何かベターなやり方はあるんでしょうかねぇ。

と主観はさておき、コンポーネントとはどのようなものか解説いただきました。

  • 関数コンポーネント
    • 関数であって、状態は保持しない
    • 副作用がない
    • React Hooks という API が追加されたため、これだけを使うのが主流
  • クラスコンポーネント
    • 状態を保持する
    • 副作用がある
    • 現在は使わなくなっている

ここでも関数型言語っぽい、単一方向のデータの流れが見えますね。やはりオブジェクト指向ではない考え方が普及していると感じます。

これもさておき、実際にコンポーネントを作成してみます。

  1. React Hooks を使った関数コンポーネントを作成
    • JavaScript で関数を書く
    • 必ず return で JSX を返すこと
    • まずは Hook を使わないで書く (カウントしないボタンになる)
    function Counter() {
        let count = 0; // 初期化してしまうのでカウントアップせず 0 のまま
        return (
          <div>
            <p>You clicked {count} times</p>
            <button onClick={() => ++count}>Click me</button>
          </div>
        );
    }
  2. State Hook を使う
    function Counter() {
      const [count, setCount] = React.useState(0); // useState が Hook。引数は現在の値と、更新した関数コンポーネントの2つが必要
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

実際に動かしてみます。


Create-react-app を使ってみる

React の初歩的な使い方がわかったところで、現場での使い方に進みます。

  • これまでのように生で書くことはなく、いまはスケルトンとして用意されている Create-react-app を使う
  • webpack や babel, ESlint などが同梱されている

これはいちいち考えなくてよいので、便利ですね。

ビルドする

  • インストールには npx を使用する
    • npm パッケージのバイナリを実行する(めっちゃいい!高速!!)
    $ npx create-react-app my-app

インストールの結果、このような構成になりました。


続いて、ビルドします。

  • CSS を Javascript から読み込んでレンダリングする
  • テスト用の Web サーバも実行される
$ npm start # yarn もあるが、今回は npm を使う

便利すぎまする!!


このあと、 app.js を Hello World に変更し、必要のないライブラリを削除しました。

Web アプリケーションを開発しよう

続いて、いよいよ Web アプリケーションの開発を進めていきます。

  • お題: 書籍データを表示するページを作成する
    • コンポーネントでわける
    • 今回の場合は テーブル と 行 でファイルをわける

テーブル と 行 に分ける感覚が新鮮でした。やはりデータ更新する単位でコンポーネントを分けたほうが良さそうです。

では、実際にベースとなる テーブル と 行 のコンポーネントを書きます(まずは書籍データを静的に書く)。

codeBooksRow.js
function BooksRow(props) {
  return (
    <tr>
      <td>01</td>
      <td>Sample</td>
    </tr>
  );
}
export default BooksRow;
codeBooksTable.js
import BooksRow from './BooksRow'

function BooksTable() {
  return (
    <table>
      <thead>
        <tr>
          <th>ISBN</th>
          <th>TITLE</th>
        </tr>
      </thead>
      <tbody>
        <BooksRow />
      </tbody>
    </table>
  );
}
export default BooksTable;

ここから直に書いていた書籍データを変数にします。

  1. 関数の引数に props で指定する

    codeBooksRow.js
    function BooksRow(props) {
      return (
        <tr>
          <td>{props.isbn}</td>
          <td>{props.title}</td>
        </tr>
      );
    }
    export default BooksRow;
    codeBooksTable.js
    import BooksRow from './BooksRow'
    
    function BooksTable() {
      return (
        <table>
          <thead>
            <tr>
              <th>ISBN</th>
              <th>TITLE</th>
            </tr>
          </thead>
          <tbody>
            <BooksRow isbn='001' title='Sample' />
          </tbody>
        </table>
      );
    }
    export default BooksTable;
  2. データを投入する
    • この時点では書籍のダミーデータを定数で定義
    • 親コンポーネントから投入する
    codeBooksTable.js
    import BooksRow from './BooksRow'
    
    function BooksTable() {
        const rows = [
            <BooksRow isbn='001' title='SampleA' />,
            <BooksRow isbn='002' title='SampleB' />,
            <BooksRow isbn='003' title='SampleC' />
        ];
    
        return (
          <table>
            <thead>
              <tr>
                <th>ISBN</th>
                <th>TITLE</th>
              </tr>
            </thead>
            <tbody>
              {rows}
            </tbody>
          </table>
        );
    }
    export default BooksTable;

ブラウザで確認すると、無事に表示されていました!


GraphQL でデータ投入する

続いて、定数でデータを書いたところを変えて API サーバから投入します。

WebAPI とは

まずは WebAPI について説明いただいたのですが、以前のコースでも紹介していますので、ここでは割愛します。

Python / FastAPI でつくる WebAPI 入門 研修コースに参加してみた

GraphQL とは

  • Facebook が開発
  • REST API の様々な欠点を解決
    • 厳密にリソースを指定できる (今回のお題では isbn や title )
      • クエリが作れる
      • 今までは様々な REST API を叩いて取得していた
    • 通信パフォーマンスが良くなる

従来の REST API では必要不要構わず、リクエストに対してガバっと丸ごとのデータを JSON で返されることが多く、フロントエンドでパースして必要なデータを抽出・整形して表示する必要がありました。

なお、 GraphQL は GitHub の API として採用されたことで一躍有名になりました。

GraphQL の API サーバを立てる

GraphQL のインストールから API サーバを立てるまでの手順です。

  1. react-app 配下に server ディレクトリを作成

  2. Node.js の Express という Web アプリケーションフレームワークを使う
  3. npm で、そのほか必要なパッケージをインストール

実際にサンプルをやっていきます。

  1. 必要なパッケージを npm でインストール
    $ npm init -y
    $ npm install express graphql express-graphql cors
  2. GraphQL API サーバを作成 hello-gql.js
    • スキーマ(データの定義)とクエリの種類を定義します
    const app = require('express')();
    const {graphqlHTTP} = require('express-graphql');
    const {buildSchema} = require('graphql');
    const cors = require('cors');
    
    const greetingSchema = buildSchema(`
      type Query {
        message: String
      }
    `);
    
    app.use(cors());
    app.use('/graphql', graphqlHTTP({
      schema: greetingSchema,
      rootValue: {message: 'Hello GraphQL!' },
      graphiql: true
    }));
    
    app.listen(4000, () => console.log('GraphQL Server is running on localhost:4000/graphql'));
    • 7 行目: GraphQL のクエリには Query と Mutation がある
      • 今回は Query を使う( SQL でいう SELECT )
      • Mutation は SQL でいう INSERT, UPDATE, DELETE
      • message という key で string 型という定義をしている
    • 12 行目: cors というライブラリを使っている。これで異なるドメインのサーバでもアクセスでき HTTP リクエストを飛ばせる
    • 15 行目: データを投入
  3. graphql サーバを起動
    $ node .\hello-gql.js
    GraphQL Server is running on localhost:4000/graphql

起動したので http://localhost:4000/graphql にアクセスしてみます。


おお~!やりました!!

また、 GraphiQL と呼ばれるブラウザで使える GUI 開発環境が立ち上がっていますので、試しにクエリを叩いてみます!


パラメータでデータを取得できる API サーバを作成

続いて、サンプルではなく今回のアプリケーション用に書籍データを入れた GraphQL API サーバを立てます。

  1. books-api.js を作成
    const app = require('express')();
    const {graphqlHTTP} = require('express-graphql');
    const {buildSchema} = require('graphql');
    const cors = require('cors');
    
    const bookSchema = buildSchema(`
      type Query {
        Book(isbn: String!): Book
        Books(title: String): [Book]
      },
      type Book {
        isbn: String
        title: String
        authors: [String]
        price: Float
      }
    `);
    
    const books = [
      {
        isbn: '978-111',
        title: 'Web API Design Handbook',
        authors: ['George Reese', 'Christian Reilly'],
        price: 4.99
      },
      {
        isbn: '978-222',
        title: 'React Programming Basics',
        authors: ['Eric Freeman', 'Elisabeth Robson'],
        price: 38.97
      },
      {
        isbn: '978-333',
        title: 'GraphQL in Depth',
        authors: ['Matthias Biehl'],
        price: 9.99
      }
    ]
    
    const BookQuery = args => {
      const isbn = args.isbn;
      return books.filter(Book => Book.isbn === isbn)[0];
    }
    
    const BooksQuery = args => {
      if (args.title) {
        const title = args.title;
        return books.filter(Book => Book.title.match(new RegExp(title)));
      }
      return books;
    }
    
    app.use(cors());
    app.use('/books', graphqlHTTP({
      schema: bookSchema,
      rootValue: {
        Book: BookQuery,
        Books: BooksQuery
      },
      graphiql: true
    }));
    
    app.listen(4000, () => console.log('GraphQL Server is running on localhost:4000/books'));
    • ! はクエリを投げるときに必須の key であることを示す
        type Query {
          Book(isbn: String!): Book
          Books(title: String): [Book]
        },
  2. サーバを起動
    $ node books-api.js

実際に GUI の GraphiQL でクエリを投げて、レスポンスを取得してみます。

  1. ISBN から Book を問い合わせるリクエスト
    {
        Book(isbn: "978-111") {
            title
            authors
            price
        }
    }
    • 結果

  2. Books (全件表示)のリクエスト
    {
        Books {
            title
            price
      }
    }
    • 結果

  3. 実際には直接クエリを書かずに、 query 関数を使って動的に処理する
    query getBook($isbn: String!) {
        Book(isbn: $isbn) {
            title
            authors
            price
        }
    }
    • 結果

さすがに SQL のようなクエリは書けませんが、パーサを書いて目的のデータを取得するより、はるかに直感的で楽ですね!

フロントエンドと GraphQL を連携する

最終段階として書籍データを表示するフロントエンドと GraphQL サーバを繋ぎます。

  • 副作用処理と呼ばれる
  • React Hooks の useEffect() を使う
  • データを取得するために JavaScript の async / await と FetchAPI を使う

では、やっていきます。

  1. データを取得する fetchGraphQL.js を作成
    async function fetchGraphQL(gqlQuery, params) {
      const response = await fetch('http://localhost:4000/books', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        },
        body: JSON.stringify({
          query: gqlQuery,
          variables: params
        })
      });
      return await response.json();
    }
    
    export default fetchGraphQL;
  2. BooksTable.js のデータ取得と表示部分を変更
    import React, {useState, useEffect} from 'react';
    import fetchGraphQL from './fetchGraphQL';
    import BooksRow from './BooksRow';
    
    function BooksTable() {
      const [books, setBooks] = useState([]);
    
      const query = `query getBooks($title: String!) {
        Books(title: $title) {
          isbn
          title
        }
      }`;
    
      useEffect(() => {
        fetchGraphQL(query, { title: 'a' })
          .then(response => {
            setBooks(response.data.Books);
          }).catch(error => {
            console.error(error);
          });
      });
    
      const rows = [];
      books.forEach(book => {
        rows.push(
          <BooksRow isbn={book.isbn}
            title={book.title}
            key={book.isbn} />
        );
      });
    
      return (
        <table>
          <thead>
            <tr>
              <th>ISBN</th>
              <th>TITLE</th>
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
      );
    }
    export default BooksTable;
    • useEffect() の仕様
      • promise を返す
      • then (正常処理)と catch (エラー処理)を書く

書籍データが表示されているか確認します!


Relay を使う

今回はさらに欲張りに Relay というデータの fetch を行うライブラリを使ってみました。

  • 今回のような単純なアプリケーションでは使わなくてもよいもの
  • 様々なデータを取得して更新しながら、ちゃんと順番に表示されることを助ける仕組み
    • 具体的にはサスペンス ( Suspense ) と呼ばれる遅延実行の仕組み
    • Relay のような仕組みがないと A -> B → C と順番に表示したいところ、データ全部が揃うまで待ったり、 B が先に取得された場合、 B が先に表示されてしまう

実際にアプリケーションを書こうとすると、ここは悩むところなのですが、ページの都合上、今回はこれを割愛しました…。

「どうやるのか知りたい!」という方はぜひコースにご参加ください!

まとめ

今やモダンなフロントエンドのスタンダードとなった React を、さらに欲張りに GraphQL を使って API サーバからデータを取得して簡単なアプリケーションを書いてみました。

受講前は「モダンな技術が満載なので頑張って追いつかねば」と気負っていましたが、 Hello World からテンポよく進められ、 React の良さとコンポーネントの分け方の粒度、データ取得などがわかりました! GraphQL も触れて大満足です。

以前に Vue.js のコースに参加した際は、 JSX で書かず、今まで親しんだ HTML や CSS で書けるのでいいかなぁと思っていましたが、なかなかどうして Create-react-app や React Hooks のようなライブラリや API を使ってみるとエコシステムの発展ぶりがわかり、これは React 一択なのではと感じられました。

モダンなフロントエンド技術を身につけたいという方には、 3 時間で高速道路のように React のお作法がわかるので、とってもオススメです!!

 


SEカレッジについて

label SEカレッジを詳しく知りたいという方はこちらから !!

SEcollege logo
SEカレッジ
IT専門の定額制研修 月額28,000円 ~/ 1社 で IT研修 制度を導入できます。
年間 670 講座をほぼ毎日開催中!!

午前免除 FAQ

タグ一覧