Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsとGraphQLから見えたWeb開発の未来
Search
takanorip
April 21, 2018
Technology
0
660
Nuxt.jsとGraphQLから見えたWeb開発の未来
takanorip
April 21, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.3k
早わかり W3C Community Group
takanorip
0
330
Ubieとアクセシビリティのこれからを考える
takanorip
0
310
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.3k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.9k
デザインシステム運用とOKRの良い関係
takanorip
0
1.8k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
210
メンタルヘルスチューニング
takanorip
0
290
Other Decks in Technology
See All in Technology
Azure AI ことはじめ
tsubakimoto_s
0
130
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
How to Think Like a Performance Engineer
csswizardry
4
590
Code Reviewing Like a Champion
maltzj
517
39k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
How to name files
jennybc
67
96k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
A Modern Web Designer's Workflow
chriscoyier
689
190k
For a Future-Friendly Web
brad_frost
173
9.2k
Teambox: Starting and Learning
jrom
130
8.6k
Being A Developer After 40
akosma
72
580k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
16
1.6k
How STYLIGHT went responsive
nonsquared
93
5k
Transcript
Nuxt.jsとGraphQLから見えた Web開発の未来 Takanori Oki @BCU30 2018/04/21
自己紹介 - Takanori Oki (@takanorip) - 株式会社スマートドライブ - フロントエンドエンジニア
(Nuxt.js、React、Polymer、ウェブ制作全般) - Polymer Japan 翻訳チーム - 技術書典4でウェブフォントの本頒布します
None
今日は4月に新しくリリースした サービス開発の話をします
※コードはほとんど出てきません…
None
SmartDrive Cars -「安全運転がドライバーに還元される社会の実現を目指す」 -カーリース+コネクテッドカー -ポイント還元、走行データの可視化、安全運転診断
技術構成 -Nuxt.js - Ruby on Rails -GraphQL ( フロントエンドはNuxtのapollo-module )
- Heroku
開発体制 - フロントエンドエンジニア(1人) - サーバーサイドエンジニア(1人) - デザイナー(1人) - UIデザイナー・ディレクター(1人) -
マークアップエンジニア(外注:1人)
状況 - SPAで作りたい - リリース日は決まっていて変更できなそう - 度重なる仕様変更(外部協力会社の関係により) - FIXされないデザイン -
マークアップは外部の方にお願いする - 実装期間は2ヶ月弱
圧倒的リソース不足!!
Nuxt.js
ユニバーサル Vue.js アプリケーション
Nuxt.js vue-router vue-meta vuex vue-server-renderer Vue2
メリット
圧倒的な開発スピード
- 環境構築が爆速 - めんどくさい設定全部やってくれる - HTMLやCSSをそのまま使える! - デザイナーや外部エンジニアと協業しやすい - ディレクトリ構成とかある程度決まっているので悩む部分が少ない
- nuxt-communityを中心としたエコシステム
None
None
None
None
コアな部分(設計や機能開発)に 集中できる
注意
Nuxt.jsはブラックボックスなので 中でどんなことをやっているのか 知っておくことが大事
GraphQL
GraphQL -クライアントからサーバーへのリクエストを送信するための クエリー言語 -クライアント/サーバアプリケーションのデータモデルの機能 と要件を説明 -エンドポイントは1つ -型システムを提供してくれる
今回導入を決めた理由 - フロントエンドとサーバーサイドの開発を分離したい - デザインがなかなか決まらない - サーバーのモデリングだけFIX - ルーティングやUIに左右されずにサーバーサイドの開発がしたい -
(完全に分離はできないけど、ある程度疎結合にできる)
今回導入を決めた理由 - それなりの変更に耐えられる実装がしたい - 仕様が局所的にFIXされていくので全体の見通しがたたない - (僕は実装していないので詳細不明…) - (サーバーサイドの人曰く)導入コストは2日くらい
メリット - 必要なデータを1回のリクエストで取得できるようになる - リクエストするクエリを変えれば様々なデータに1回のリクエストで アクセスできる - 不必要なデータは取得しないので、サーバーから返ってくるデータが シンプルになる -
欲しいデータが変わったらフロント側でクエリを変更すればOK
メリット - サーバーサイドフィルタリングができる(特殊な実装が必要) - フロントエンドでフィルタリングしなくて良いので、バグが減る
メリット - Store(のサーバーサイドのデータを結合する部分)がいらない - そもそもエンドポイントが1つなのでデータを結合する必要がない - 複雑なレーヤーを排除して、データとUIを直結させることが可能
REST APIの場合 API API API View Store 複数のAPIから取得したデータを StoreでまとめてViewで表示している
GraphQLの場合 API View Store APIが1つなので、Storeでまとめる必要がない
REST vs GrapgQL ?
REST & GrapgQL
それぞに得意、不得意があるので 状況によって使い分ける
フロントエンド開発の未来?
-Nuxt.jsのようなフレームワークの登場で、 フロントエンド開発の敷居が下がり、 誰でもそれなりに動くものはすぐに 作れるようになりそう
-開発者はよりコアな部分で価値を発揮できる - 設計、機能開発、アニメーション、パフォーマンス、etc… - 今まではVue.jsやReactでアプリケーション作れるだけで 価値があったけど、これからはそうはいかないかも?
-ライブラリの中まで理解できる人はやっぱり強い - 今までもそうだったけど、これからもそう
-GraphQLの登場により、データとUIがより ダイレクトに結びつくような設計が可能になる - StoreとかViewModelとかの複雑なレイヤーを排除して、 本質的な開発をUIとデータを直結合して行うことができる
-フロントエンドエンジニアもGraphQLの実装に ついて理解する必要がある - フロントからデータを取得するときにクエリを書かないといけない - サーバーサイドフィルタリングなどの機能もサーバーの実装によるので、 どういう機能が使えるのかを把握して提案する必要 - やること増えていくかも…?
まとめ - フロントエンド開発はより便利で効率的になっていってる! - 面倒な部分が少なくなり、より本質的な部分に集中できる - 幅を広げることも大事だけど、得意なことをつくるのが大事かも
おわり ご清聴ありがとうございました! (フォント:コーポレートロゴ)