Oct 18, 2017からサンフランシスコで開催されている BADCAMP 2017 に来ています。非常に興味深いセッションが多く開催されていますが、特に面白いと感じたものを紹介していこうと思います。

A look into a possible Future for all of us: React, GraphQL and Drupal

セッションの内容

フロントエンドとバックエンドを完全に分離して設計する、いわゆる Full decoupledなシステム設計がここ数年に渡って継続的に議論、研究されてきました。実際にこのアーキテクチャを採用した事例やチームはいくつか存在しますが、SEO対策、APIの変更によるリファクタリングのコスト、フロントエンド向けの管理メニューの表示など、様々な課題があります。

amazeelabs では、単一のDrupal Backendを使い、コンテンツを共有しながら12個のReactで実装されたサイトを構築したそうです。フロントエンドの要素技術としては、React, Appolo, Reduxというメジャーな組み合わせで、バックエンドはDrupal 8 + GraphQL モジュールというシステム構成とのことです、意外とシンプルですね。プロダクション環境では更にCDNも使っているようです。

データの取得にGraphQLを使うことで従来のREST APIを使う方式よりバックエンドとの通信の回数が減少し、GraphQL モジュールがDrupalのキャッシュ及びキャッシュタグをサポートするため、パフォーマンス的にも非常に優れているのことです。また、Node.jsを使ってReactアプリケーションがサーバーサイドでレンダリングした結果をブラウザに返すことにより、通常のWebサイトと同様にBotやクローラーからのアクセスも受付けることができ、SEO対策も問題ないとのことでした。

同じアーキテクチャを採用したサンプルアプリケーションがgithubに公開されているので、興味がある方はぜひ試してみてください。

https://github.com/drupal-graphql/drupal-decoupled-app

まとめ

ReactとGraphQLというトレンドの技術とDrupalを組み合わせてどのような事が実現できるか。また、実際にプロダクション環境に展開する際にどのような問題があり、どのように解決したかなど、技術的に突っ込んだ内容が聞ける非常に良いセッションでした。

GraphQLは直感的で柔軟なクエリ言語ですが、使う側がデータの構造を意識する必要があります。GraphiQL のようにクエリを書く際に補完してくれる仕組みはありますが、それでも扱うデータが複雑になってくると簡単にクエリを書くのは難しくなってきます。

GraphQLのバックエンドデータベースとしてDrupalを使うことで、全体的に統一されたスキーマを維持しつつ、コードベースの開発を極力せずにデータ構造を拡張していけるため、GraphQL + Drupalは非常に相性の良い組み合わせであると感じました。