Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js x Composition API x TypeScript
Search
y-tsuzaki
September 05, 2021
Technology
0
670
Nuxt.js x Composition API x TypeScript
2021年9月8日に行われるNuxt道場 弐面にて発表予定のスライドです。
y-tsuzaki
September 05, 2021
Tweet
Share
More Decks by y-tsuzaki
See All by y-tsuzaki
PHPカンファレンス福岡2024 【超特急】SQLアンチパターン総おさらいLT
ytsuzaki
0
920
PHPカンファレンス北海道2024 リーダブルSQL
ytsuzaki
5
580
ある日PHPerがベンチャー企業のデータ基盤を作ることになったら
ytsuzaki
1
350
【PhpStorm】モブプログラミングの実践と学び【結局はバランス?】
ytsuzaki
0
350
PHPerKaigi 2022 【Laravel】 サクッとN + 1問題を見つけて倒しチャオ!
ytsuzaki
1
2.7k
【超特急】「SQLアンチパターン」 総おさらいLT 【4分で25個】
ytsuzaki
2
750
Nuxt Composition API 使ってみた
ytsuzaki
0
160
PHPerKaigi 2021 LT PHPで簡単コード生成! 同じようなコードをたくさん書くなら コード生成しチャイナ!
ytsuzaki
0
110
アクセス制御ライブラリ Casbinを使ってみた
ytsuzaki
2
1.4k
Other Decks in Technology
See All in Technology
ファインディの4年にわたる技術的負債の返済 / Repaying 4 Years of Technical Debt at Findy
ma3tk
6
3.3k
ソフトウェアエンジニアとしてキャリアの螺旋を駆け上がる方法 - 経験と出会いが人生を変える / Career-Anchor-Drive
soudai
2
870
突き破って学ぶコンテナセキュリティ/container-breakout-cncj-lt
mochizuki875
6
970
Entra ID の多要素認証(Japan Microsoft 365 コミュニティ カンファレンス 2024 )
murachiakira
0
1.9k
マルチプロダクト、マルチデータ基盤での Looker活用事例 〜BQじゃなくてもLookerはいいぞ〜
gappy50
0
130
【Oracle Cloud ウェビナー】【入門&再入門】はじめてのOracle Cloud Infrastructure [+最新情報]
oracle4engineer
PRO
2
270
AWS認定試験の長文問題を早く解くコツ
keke1234ke
0
150
開発者向けツールを魔改造してセキュリティ診断ツールを作っている話 - 第1回 セキュリティ若手の会 LT
pizzacat83
0
270
Engineer Recruting Deck
siva_official
PRO
1
3.3k
Kubernetes だけじゃない!Amazon ECS で実現するクラウドネイティブな GitHub Actions セルフホストランナー / CNDW2024
ponkio_o
PRO
6
430
Explain EXPLAIN
keiko713
5
970
Advancing the 3D Geospatial Ecosystem in Japan via Global Collaborations
osgeojp
0
130
Featured
See All Featured
BBQ
matthewcrist
85
9.3k
Gamification - CAS2011
davidbonilla
80
5k
Agile that works and the tools we love
rasmusluckow
328
21k
Done Done
chrislema
181
16k
For a Future-Friendly Web
brad_frost
175
9.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
1
71
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Code Review Best Practice
trishagee
64
17k
Navigating Team Friction
lara
183
15k
Fireside Chat
paigeccino
34
3k
Writing Fast Ruby
sferik
627
61k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Transcript
Nuxt.js x Composition API x TypeScript 2021年9月8日 Nuxt道場 弐面 株式会社
M&Aクラウド 津崎 善昭
自己紹介 津崎 善昭(つざき よしあき) Twitter: @820zacky 趣味:たまにキャンプ、たまに筋トレ(サボり中) 2019年にM&AクラウドにJoin 本日が人生初の20分登壇
None
プロダクト紹介
LaravelからNuxt.jsへ Laravel(PHP)製のアプリケーション 現在フロントエンドをNuxt.jsに移行中 バックエンドはLaravelでHTTP APIを提供 Composition API(@vue/composition-api)を利用 Typescriptで開発
Nuxt.js選定理由 ページ表示速度改善のためSSRしたい メンバがVue.jsに馴染みがあり導入しやすそう コンポーネントをデザイナーもコーディングできそう Vue.jsのコンポーネントはHTMLに似ている
話すこと Nuxt.js, Compsition API, TypeScript そもそもなんなのか なぜComposition APIなのか メリット、デメリット 開発環境を作る
話さないこと Webの基礎などあんまり細かいこと 他のフレームワークとの比較
各技術ざっくり紹介
Nuxt.jsとは Vue.jsのフレームワーク ルーティング, データ管理(ストア), メタタグ管理などWebフロントエンド開発に必要 な機能が組み込まれている サーバサイドレンダリング(ユニバーサルモード) 静的サイト生成(SSG)
サーバサイドレンダリング、ユニバーサルモードとは? サーバサイドレンダリングとは サーバ側でHTMLを生成するWebアプリケーションの方式 クライアントはHTMLを描画するだけなので高速 反対にブラウザでHTMLを生成するのがクライアントサイドレンダリング(通常の vue.jsやReact) = SPA (Single Page
Application) ユニバーサルモードとは サーバサイドレンダリングをした上で、クライアント側で追加のレンダリングなど を行う方式 クライアントで追加のレンダリングを行うため、動的なサイトを作ることができる 高速でリッチなアプリケーションを実現する
Composition API Vue.jsのコンポーネントをいい感じに書く手法 2020年9月にリリースされたVue 3にて導入された 標準の書き方はOptions APIという コンポーネントからロジックを分離し、再利用可能にする 大規模・複雑なコンポーネントを作る時に便利
Typescript 型のあるJavascriptみたいな言語 TypeScriptからJavascirptに変換(トランスパイル)して使う 型の力でポカミスを防ぐことができる 一方で、強力な型の縛りに翻弄されることもある
なぜComposition APIなのか
処理をまとめられる
(無理矢理拡大した図) data()内にいろんな関心事の変数が定義されている
関心事ごとに変数を用意できる
ロジックを抽出して再利用 ref, reactiveなどのリアクティブな値を作成するメソッドや、onMountedなどのコ ールバック登録するメソッドなど、細かく機能が分割されているため、共通化した いロジックや肥大化したロジックを別ファイルに移することができる。 Options APIではMixinというTrait的なやり方でしか分離できず、再利用性が悪かっ た
Nuxt.jsでComposition APIを使う二つのやり方 @vue/composition-api と @nuxtjs/comopsition-api (2021年9月現在)
@vue/composition-api 従来のやり方 Vueの純正composition-api M&Aクラウドが使っているのはこれ SSRとCSRで値をハイドレーションできない問題があり困った (https://speakerdeck.com/kubotak/nuxt-dot-jsdecompositionapiwoshi-u? slide=16) 弊社ではVuexストアを使って値を共有している
@nuxtjs/comopsition-api = Nuxt Composition API 新しいやり方 nuxt-communityが提供している Nuxt 3 のための実験的なもの
Nuxt 3 ではメソッド名がかわるかもしれない Nuxt固有の機能を使える 弊社もこちらへの意向を検討中
Nuxt Composition API @vue/composition-apiの機能に加えてNuxt固有の機能を提供している useMeta : Metaタグの情報にアクセスするメソッド useAsync : NuxtのAsyncDataフックを使うメソッド
useFetch : NuxtのFetchフックを使うメソッド など reqRef, reqSsrRef, ssrRefなど新しい概念も登場している (まだよくわかってないがSSRとCSRで値を共有する方法っぽい)
メリット、デメリット
メリット Nuxtについて Webアプリケーション開発に必要なものが揃っている SSR、SSGできる Composition APIについて 関心事ごとに処理をまとめて書くことができる 大規模な開発にも耐えられる構成にできる TypeScriptについて 型によるポカミス防止
補間による開発スピード向上 ※ JSで開発したことがないのでわからないけど
デメリット フロントエンド初心者にとっては複雑 Nuxtのコードを書いてるのか、Composition APIを書いてるのか、TypeScriptを書 いてるのかよくわからない @vue/composition-api ではVuexを使わないとSSRとCSRで値を共有化(ハイドレー ション)できない Nuxt Comopsition
APIのreqRef、ssrRefなどの新しい概念が難しい Nuxt.jsはコードが増えるとビルドが遅くなる(開発用ビルドで3分) hard-source-webpack-pluginで負荷軽減してもやっぱり遅い(1分程度) コンポーネントやCSSの更新はビルドが早い(10秒)
Nuxt Composition APIの開発環境を作る
Nuxtインストール yarn create nuxt-app sample-app 言語はTypeScriptを選択する Composition APIを導入する yarn add
@nuxtjs/composition-api 今回は新しいやりかたである@nuxtjs/composition-apiを試してみる
nuxt.config.jsを編集する { buildModules: [ '@nuxt/typescript-build', + '@nuxtjs/composition-api/module' ] }
サーバーを起動する yarn dev localhost:3000でサイトが起動する
サンプルコード https://qiita.com/zackey2/items/8a2675c14d73e91267fe
まとめ Nuxt.js x Composition API x TypeScriptという構成について話した 複雑なアプリケーションを作る場合、Composition APIを導入するとよい 今からComposition
APIを導入するならNuxt Composition API がよさそう TypeScriptもセットアップが簡単なので同時に採用してもよいかも