Nuxt.jsとGraphQLから見えたWeb開発の未来

Transcript

1. Nuxt.jsとGraphQLから見えた Web開発の未来 Takanori Oki @BCU30 2018/04/21

2. 自己紹介 - Takanori Oki (@takanorip) - 株式会社スマートドライブ - フロントエンドエンジニア 


   (Nuxt.js、React、Polymer、ウェブ制作全般) - Polymer Japan 翻訳チーム - 技術書典4でウェブフォントの本頒布します
3. None

4. 今日は4月に新しくリリースした サービス開発の話をします

5. ※コードはほとんど出てきません…

6. None

7. SmartDrive Cars -「安全運転がドライバーに還元される社会の実現を目指す」 -カーリース＋コネクテッドカー -ポイント還元、走行データの可視化、安全運転診断

8. 技術構成 -Nuxt.js - Ruby on Rails -GraphQL ( フロントエンドはNuxtのapollo-module )

   - Heroku

9. 開発体制 - フロントエンドエンジニア（1人） - サーバーサイドエンジニア（1人） - デザイナー（1人） - UIデザイナー・ディレクター（1人） -

   マークアップエンジニア（外注：1人）

10. 状況 - SPAで作りたい - リリース日は決まっていて変更できなそう - 度重なる仕様変更（外部協力会社の関係により） - FIXされないデザイン -

    マークアップは外部の方にお願いする - 実装期間は2ヶ月弱

11. 圧倒的リソース不足！！

12. Nuxt.js

13. ユニバーサル Vue.js アプリケーション

14. Nuxt.js vue-router vue-meta vuex vue-server-renderer Vue2

15. メリット

16. 圧倒的な開発スピード

17. - 環境構築が爆速 - めんどくさい設定全部やってくれる - HTMLやCSSをそのまま使える！ - デザイナーや外部エンジニアと協業しやすい - ディレクトリ構成とかある程度決まっているので悩む部分が少ない

    - nuxt-communityを中心としたエコシステム
18. None
19. None
20. None
21. None

22. コアな部分（設計や機能開発）に 集中できる

23. 注意

24. Nuxt.jsはブラックボックスなので 中でどんなことをやっているのか 知っておくことが大事

25. GraphQL

26. GraphQL -クライアントからサーバーへのリクエストを送信するための クエリー言語 -クライアント/サーバアプリケーションのデータモデルの機能 と要件を説明 -エンドポイントは1つ -型システムを提供してくれる

27. 今回導入を決めた理由 - フロントエンドとサーバーサイドの開発を分離したい - デザインがなかなか決まらない - サーバーのモデリングだけFIX - ルーティングやUIに左右されずにサーバーサイドの開発がしたい -

    （完全に分離はできないけど、ある程度疎結合にできる）

28. 今回導入を決めた理由 - それなりの変更に耐えられる実装がしたい - 仕様が局所的にFIXされていくので全体の見通しがたたない - （僕は実装していないので詳細不明…） - （サーバーサイドの人曰く）導入コストは2日くらい

29. メリット - 必要なデータを1回のリクエストで取得できるようになる - リクエストするクエリを変えれば様々なデータに1回のリクエストで
 アクセスできる - 不必要なデータは取得しないので、サーバーから返ってくるデータが
 シンプルになる -

    欲しいデータが変わったらフロント側でクエリを変更すればOK

30. メリット - サーバーサイドフィルタリングができる（特殊な実装が必要） - フロントエンドでフィルタリングしなくて良いので、バグが減る

31. メリット - Store(のサーバーサイドのデータを結合する部分)がいらない - そもそもエンドポイントが1つなのでデータを結合する必要がない - 複雑なレーヤーを排除して、データとUIを直結させることが可能

32. REST APIの場合 API API API View Store 複数のAPIから取得したデータを
 StoreでまとめてViewで表示している

33. GraphQLの場合 API View Store APIが1つなので、Storeでまとめる必要がない

34. REST vs GrapgQL ?

35. REST & GrapgQL

36. それぞに得意、不得意があるので 状況によって使い分ける

37. フロントエンド開発の未来？

38. -Nuxt.jsのようなフレームワークの登場で、
 フロントエンド開発の敷居が下がり、
 誰でもそれなりに動くものはすぐに
 作れるようになりそう

39. -開発者はよりコアな部分で価値を発揮できる - 設計、機能開発、アニメーション、パフォーマンス、etc… - 今まではVue.jsやReactでアプリケーション作れるだけで
 価値があったけど、これからはそうはいかないかも？

40. -ライブラリの中まで理解できる人はやっぱり強い - 今までもそうだったけど、これからもそう

41. -GraphQLの登場により、データとUIがより
 ダイレクトに結びつくような設計が可能になる - StoreとかViewModelとかの複雑なレイヤーを排除して、
 本質的な開発をUIとデータを直結合して行うことができる

42. -フロントエンドエンジニアもGraphQLの実装に
 ついて理解する必要がある - フロントからデータを取得するときにクエリを書かないといけない - サーバーサイドフィルタリングなどの機能もサーバーの実装によるので、 どういう機能が使えるのかを把握して提案する必要 - やること増えていくかも…？

43. まとめ - フロントエンド開発はより便利で効率的になっていってる！ - 面倒な部分が少なくなり、より本質的な部分に集中できる - 幅を広げることも大事だけど、得意なことをつくるのが大事かも

44. おわり ご清聴ありがとうございました！ （フォント：コーポレートロゴ）