$30 off During Our Annual Pro Sale. View Details »

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

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

takanorip

April 21, 2018
Tweet

More Decks by takanorip

Other Decks in Technology

Transcript

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

    View Slide

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

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

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

  9. 開発体制
    - フロントエンドエンジニア(1人)
    - サーバーサイドエンジニア(1人)
    - デザイナー(1人)
    - UIデザイナー・ディレクター(1人)
    - マークアップエンジニア(外注:1人)

    View Slide

  10. 状況
    - SPAで作りたい
    - リリース日は決まっていて変更できなそう
    - 度重なる仕様変更(外部協力会社の関係により)
    - FIXされないデザイン
    - マークアップは外部の方にお願いする
    - 実装期間は2ヶ月弱

    View Slide

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

    View Slide

  12. Nuxt.js

    View Slide

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

    View Slide

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

    View Slide

  15. メリット

    View Slide

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

    View Slide

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

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

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

    View Slide

  23. 注意

    View Slide

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

    View Slide

  25. GraphQL

    View Slide

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

    View Slide

  27. 今回導入を決めた理由
    - フロントエンドとサーバーサイドの開発を分離したい
    - デザインがなかなか決まらない
    - サーバーのモデリングだけFIX
    - ルーティングやUIに左右されずにサーバーサイドの開発がしたい
    - (完全に分離はできないけど、ある程度疎結合にできる)

    View Slide

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

    View Slide

  29. メリット
    - 必要なデータを1回のリクエストで取得できるようになる
    - リクエストするクエリを変えれば様々なデータに1回のリクエストで

    アクセスできる
    - 不必要なデータは取得しないので、サーバーから返ってくるデータが

    シンプルになる
    - 欲しいデータが変わったらフロント側でクエリを変更すればOK

    View Slide

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

    View Slide

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

    View Slide

  32. REST APIの場合
    API
    API
    API
    View Store
    複数のAPIから取得したデータを

    StoreでまとめてViewで表示している

    View Slide

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

    View Slide

  34. REST vs GrapgQL ?

    View Slide

  35. REST & GrapgQL

    View Slide

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

    View Slide

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

    View Slide

  38. -Nuxt.jsのようなフレームワークの登場で、

    フロントエンド開発の敷居が下がり、

    誰でもそれなりに動くものはすぐに

    作れるようになりそう

    View Slide

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

    価値があったけど、これからはそうはいかないかも?

    View Slide

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

    View Slide

  41. -GraphQLの登場により、データとUIがより

    ダイレクトに結びつくような設計が可能になる
    - StoreとかViewModelとかの複雑なレイヤーを排除して、

    本質的な開発をUIとデータを直結合して行うことができる

    View Slide

  42. -フロントエンドエンジニアもGraphQLの実装に

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

    View Slide

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

    View Slide

  44. おわり
    ご清聴ありがとうございました!
    (フォント:コーポレートロゴ)

    View Slide