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使いたい話 / v-kansai-meetup#8
Search
Chinen
June 22, 2019
Technology
1
600
Nuxt.js使いたい話 / v-kansai-meetup#8
v-kansai Vue.js/Nuxt.js meetup #8の登壇スライドです。
Chinen
June 22, 2019
Tweet
Share
More Decks by Chinen
See All by Chinen
MTDDC Meetup TOKYO 2024 / フロントエンドエンジニアの成長に繋がるCMS設計
chinen
0
78
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
2.3k
MTDDC Meetup TOKYO 2023
chinen
2
360
Nuxt 3でJamstackテンプレートを作るときの考え方
chinen
3
1.9k
WWDC2023-Recap-LT
chinen
1
140
Web Push対応状況2023
chinen
0
540
技術記事が書けない人はGPTに背中を押してもらおう
chinen
2
170
Three.jsで3Dぷわんを動かす / PWA Night vol.46
chinen
0
190
PWA開発を基礎からおさらい / PWA Night CONFERENCE 2022
chinen
3
1.5k
Other Decks in Technology
See All in Technology
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
190
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
IAMのマニアックな話2025
nrinetcom
PRO
4
820
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
630
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
OPENLOGI Company Profile
hr01
0
60k
AWSを活用したIoTにおけるセキュリティ対策のご紹介
kwskyk
0
360
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
990
Faster Mobile Websites
deanohume
306
31k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for humans not robots
tammielis
250
25k
Automating Front-end Workflow
addyosmani
1368
200k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Transcript
Nuxt.js使いたい話 株式会社TAM 知念昌史 2019/6/22
知念 昌史 @TAM inc. • フロントエンドエンジニア(CSS、Vue.jsが好き) • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 •
得意分野:HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 新人エンジニアのメンター • 企業向けにGit導入レクチャー
まぁし@chocodogmagic(Twitter) • 技術コミュニティ【PWA Night】自称アンバサダー • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 今月から沖縄移住(フルリモートワーク) • ポケモンが好き|主に公式ゲーム(ソード欲しい)
• 映画も好き|6/28公開スパイダーマンの新作が楽しみ
Vue.js楽しいよね!
こんなの作って遊んでます 365日貯金 1~365までの数字の書いた表を作って、一日一回、好きな数 字を選んでその金額を貯金するという方法。 1年間クリアすると、なんと66,795円!!!
こんなの作って遊んでます コスパ計算PWA スーパーの特売商品で量が違うとき、ど ちらが安いか片手で計算できる!!
これはVue.jsだけど.vueじゃない
普通のHTMLでvue.js読み込んでJSでごにょごにょ jQueryみたいな使い方をしているだけ! 本当は、 テンプレート分割してパーツ化(.vue)したり、 画面遷移をスムーズ(SPA)にしたりしたい!!
.vueでテンプレート使いたい Nuxt.js使いたい・・!
新規プロジェクトの相談
要望 • 読み物系のコンテンツ • 記事の検索機能が欲しい • 記事のお気に入り機能が欲しい • ログイン機能はつけたくない・・・ブラウザで記憶する •
アプリにしたかったけど、開発大変だからPWAにしたい
ふむふむ・・・Vue.js良さそう?! コンテンツはCMSで更新 REST APIで 記事データ取得 Vue.jsで画面表示 Web更新の担当者 一般ユーザー ・お気に入り機能 ・リアルタイム検索
せっかくVue.jsで作るなら Nuxt.js導入したい
何でNuxt.js??? • Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルア プリケーション、静的に生成されるアプリケーション、シングルページアプリケーショ ンの中から作成するアプリケーションを選ぶことができます。(参照:Nuxt.jsドキュメ ント https://ja.nuxtjs.org/)
• SSRは魅力 ◦ 静的ファイルなら、ブラウザでの表示速度が早い ◦ CDNでさらに高速化も検討できる ◦ 検索エンジンにも優しい(SEO) • Vue.jsのテンプレートが使える
ところでSSRってどうやるの?
なんとなくSSRのイメージ
AWSか、Herokuかな、 最近はNetlifyの事例も多いみたい Firebaseは規模的にきついか・・?
要件定義 サーバーは、レンタルサーバーで決まりました! 契約進めてるんで来月から使えます! 仕事が早い! さすがさすが! ・・・ん? ディレクター
どうやってSSRさせるんだ? レンタルサーバーって、 Node.js動かせるの?
ふぇぇぇ
レンタルサーバーでNuxt.js使って SSRしてる事例、全然ない!!
諦める方向へ・・・ でも、 SSRじゃなくても [nuxt generate] で静的ファイル化すればOKかも? (試したことないな・・・) スケジュール確認 → あれ、なんだこれ短納期(^^) (検証の時間がとれない・・・) とりあえず、Vue.jsだけ導入して作ろう!!
絶賛、Nuxt.js無しで制作中です。
もし知っている方いたら、教えてください!! • レンタルサーバーでもSSRするためにNode.js動かしたりでき るの? • nuxt generate で静的化する場合、ただの.vue使う想定で構 築して、Laravel-mix環境でコンパイルしているんだけど、この ファイルそのまま移行できるの?
まとめ • Nuxt.jsは、すごく便利 ◦ SSRもSPAもPWAの実装もサポートしてる! ◦ Vue.js使っている人、使いたい人にはオススメ!! • だけど環境も気にしてあげよう ◦
実際どのような状況で使われるのか ◦ サーバーやデプロイ、更新体制は どうなっているのか 目的と手段を間違えないように!!
ちょっとだけ宣伝 沖縄にVue.jsコミュニティを作りたい!!! v-okinawaを作ります!! Vue.jsに興味ある沖縄のエンジニア、 運営をお手伝いしてくださる方を 募集してます! 紹介してください。。
ありがとうございました!!! Twitter 良かったらフォローしてね! まぁし@chocodogmagic PWAに興味ある人も 声かけてください!!