Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 - Takanori Oki (@takanorip) - 株式会社スマートドライブ - フロントエンドエンジニア 
 (Nuxt.js、React、Polymer、ウェブ制作全般) - Polymer Japan 翻訳チーム - 技術書典4でウェブフォントの本頒布します

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

圧倒的リソース不足！！

Slide 12

Slide 12 text

Nuxt.js

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

メリット

Slide 16

Slide 16 text

圧倒的な開発スピード

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

注意

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

GraphQL

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

REST vs GrapgQL ?

Slide 35

Slide 35 text

REST & GrapgQL

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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