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
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
510
Bulletproof Design System with TypeScript
takanorip
7
4.2k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
170
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
940
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.5k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
510
Ubieとアクセシビリティのこれからを考える
takanorip
0
480
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
190
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.5k
バイブコーディングと継続的デプロイメント
nwiizo
2
470
How to achieve interoperable digital identity across Asian countries
fujie
0
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
510
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
140
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
130
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
630
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
290
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
自動テストのコストと向き合ってみた
qa
0
200
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Agile that works and the tools we love
rasmusluckow
331
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Pragmatic Product Professional
lauravandoore
36
6.9k
KATA
mclloyd
32
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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の実装に ついて理解する必要がある - フロントからデータを取得するときにクエリを書かないといけない - サーバーサイドフィルタリングなどの機能もサーバーの実装によるので、 どういう機能が使えるのかを把握して提案する必要 - やること増えていくかも…?
まとめ - フロントエンド開発はより便利で効率的になっていってる! - 面倒な部分が少なくなり、より本質的な部分に集中できる - 幅を広げることも大事だけど、得意なことをつくるのが大事かも
おわり ご清聴ありがとうございました! (フォント:コーポレートロゴ)