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
790
Nuxt.jsとGraphQLから見えたWeb開発の未来
takanorip
April 21, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
540
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
520
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
950
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
Other Decks in Technology
See All in Technology
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
140
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
1
370
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
140
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
640
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
2
1.3k
React19.2のuseEffectEventを追う
maguroalternative
0
250
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
580
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
340
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Context Engineering - Making Every Token Count
addyosmani
6
250
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Designing for humans not robots
tammielis
254
26k
A Tale of Four Properties
chriscoyier
161
23k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
A designer walks into a library…
pauljervisheath
209
24k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Docker and Python
trallard
46
3.6k
Unsuck your backbone
ammeep
671
58k
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の実装に ついて理解する必要がある - フロントからデータを取得するときにクエリを書かないといけない - サーバーサイドフィルタリングなどの機能もサーバーの実装によるので、 どういう機能が使えるのかを把握して提案する必要 - やること増えていくかも…?
まとめ - フロントエンド開発はより便利で効率的になっていってる! - 面倒な部分が少なくなり、より本質的な部分に集中できる - 幅を広げることも大事だけど、得意なことをつくるのが大事かも
おわり ご清聴ありがとうございました! (フォント:コーポレートロゴ)