0からGraphQLをどう学習するか？
6月に入社しましたフロントエンドエンジニアの村上(@pipopotamasu)です。 普段はideagramというプロダクトのフロントエンドをメインに開発をしています。
ideagramではフロントエンドとバックエンド間のAPIにGraphQLを採用しています。
私は今まで業務でGraphQLを使う機会がなかったので、入社を機にGraphQLの学習を本格的に始めました。 しかし、学習を始めた当初は一体何から手をつけていいのかわかりませんでした。 GraphQLのフロントエンド、バックエンド、apollo、relayなどなど、GraphQL自体の規格、その実装ライブラリなどGraphQLに関するものは多岐に渡ります。
さらに学習リソースも公式サイト、書籍、動画、技術記事など様々です。
今回の記事では、私自身がどうGraphQLをキャッチアップしたかについて書いていきます。
※ 万人のための学習方法というよりは業務で使用するという目的上、弊社の技術スタックに基づいた学習内容(apollo, React)になります。
- apolloのチュートリアルはいいぞ
ただ単に「GraphQLを勉強する」ということをゴールにしてしまうと、前述の通りGraphQLは規格や周辺ライブラリ含め幅が広いので「一体何から手をつけていいかわからない」という状態に陥ります。 なので私は以下のような学習のゴールを設定しました。
- 業務で使えるまでキャッチアップする
- (GraphQLの)フロントエンドだけでなく、バックエンドも実装できるようになる
- 自作アプリをGraphQLを用いて作ることができるようになる
1に関しては言わずもがな、私のGraphQL学習の最大の目的です。 細かくブレイクダウンすると、GraphQLはどういったものなのかの理解、業務で使用されているGraphQLのライブラリの使い方・仕組みをキャッチアップ、GraphQLのフロントエンド部分を実装できるようになるというのがゴールになります。
2に関して、私自身フロントエンドエンジニアなので本来はフロントエンドの実装ができれば最低限OKなのですが、より深い理解をするためにもバックエンドも実装できるようになりたいという理由から設定しました。
最後の3は、最終テストのようなものです。1と2がちゃんとできていれば3もできるはずだろうということと、自作アプリを作ってみた方がより理解が深まるだろうということで設定しました。
上記のゴール設定をして最初の教材に選んだのがapolloの公式チュートリアルです。 https://www.apollographql.com/docs/tutorial/introduction/
※1 日本語のチュートリアルもありますが、内容が古かったりするので(2020/8/18時点)英語のチュートリアルをお勧めします。
※2 チュートリアルで作るサンプルアプリケーションにはReactが使用されています。
チュートリアルの内容としてはSpaceXが公開しているAPIを利用しながら、サンプルアプリケーションを作るというものです。 なぜこれを選んだかというと理由は単純で、弊社でapolloが使われているからです。
という具合の軽いノリで選んだわけですが、これが予想以上に素晴らしかったです。 なんとこれだけで上記のゴールの1,2を達成できてしまいます。
個人的によかった点を以下にまとめてみます。
- GraphQL自体の解説がある
- フロントエンド~バックエンドまでのapolloを用いたGraphQLの実装を一通り学べる
- apollo独自の機構(cacheやstate management等)を学習できる
- 複数リソースからのデータ取得に対応している
- DB
- REST API
- 認証の実装もあり
- サンプルアプリケーション用のレポジトリが公開されている
- GraphQL PlayGroundやapollo-toolingといった周辺ツールの使い方もチュートリアルに含まれている
- 公式の質問場所がある(これは英語のみです)
といった具合に、至れり尽せりなチュートリアル内容となっており私自身としてはこれだけでかなり満足する内容でした。
さて、これで1と2のゴールは表面上は達成されました。 なぜ「表面上は」という言葉を使っているかというと、チュートリアル自体は写経すれば理解していなくてもできてしまうからです。
本当にちゃんと理解できているかを確認するためには、自作アプリを作ってみることが一番の方法だと私は思っています。 そのため3のゴール、自作アプリを作ってみることにしました。
自作アプリといっても色々とありますが、私はThe・勉強ということでTodoアプリを作りました。
https://github.com/pipopotamasu/gql-todo
実際に作ってみた感想として、やはりチュートリアルをやっただけでは学習として不十分ということでした。
いざ自分でアプリを書こうとするとコードが全然書けません。写経と実践は違うので当たり前ですね。何度もチュートリアルを見返したり、apolloのドキュメントを読んだりしながら少しずつ進めていきました。
またチュートリアルではカバーできていない範囲の問題に遭遇することもありました。 例えばGraphQLのSchemaです。未知のSchemaを書く際には逐次GraphQLの公式サイトで書き方を確認する必要がありました。
このように自分でものを作っていくことでより理解が深まっていくものだと感じました。
以上のように、私は「apolloのチュートリアルをやる」、「自作アプリを作る」という２つのステップでGraphQLを学習しました。
元々apolloのチュートリアルの後に書籍等を読んでから自作アプリを作ろうと考えていたのですが、前述したようにapolloのチュートリアルの網羅性がよくそのまま自作アプリ作成のフェーズに行くことができました。
とはいうものの、この２つは本当にGraphQLの触りの部分だと思いますので今後も引き続きGraphQLの学習を続けていきたいと思います。
もしGraphQLの学習教材に迷っている方で、apollo・Reactと組み合わせて使うという方がいましたら、apolloのチュートリアルは本当にお勧めですので是非試してみてください。