Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js使いたい話 / v-kansai-meetup#8

06753262e041911692e9a771b1877036?s=47 Chinen
June 22, 2019
Technology
1
460

Nuxt.js使いたい話 / v-kansai-meetup#8

v-kansai Vue.js/Nuxt.js meetup #8の登壇スライドです。

06753262e041911692e9a771b1877036?s=128

Chinen

June 22, 2019
Tweet

More Decks by Chinen

See All by Chinen
個人開発から学ぶVue.js開発環境 / v-okinawa Meetup #5
06753262e041911692e9a771b1877036?s=48 chinen
0
36
エンジニア目線でのShifter / Shifter Meetup 2021-09-08
06753262e041911692e9a771b1877036?s=48 chinen
1
180
Shifter Staticのサイトを PWAにしよう / PWA Night Conference 2021
06753262e041911692e9a771b1877036?s=48 chinen
0
800
Shifter staticで REST APIしたい / Shifter Meetup 2020-12-02
06753262e041911692e9a771b1877036?s=48 chinen
0
460
実践PWA 2020 / charitycon_oki2020
06753262e041911692e9a771b1877036?s=48 chinen
0
380
Shifterを選定するまでに検討したこと / shifter-meetup0603
06753262e041911692e9a771b1877036?s=48 chinen
0
520
FirebaseとVue.jsでWebアプリモック速攻開発 / v-okinawa #4
06753262e041911692e9a771b1877036?s=48 chinen
1
350
ポートフォリオ作る話 / PWA Night vol.12
06753262e041911692e9a771b1877036?s=48 chinen
0
53
Vue.jsの基礎 / v-okinawa meetup #2
06753262e041911692e9a771b1877036?s=48 chinen
0
110

Other Decks in Technology

See All in Technology
ソフトウェアライセンス 2022 / Software License 2022
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
1
1.1k
誰が正解を知っているのか / Who knows the right answer
95aaab3d693889550fd2e7ae02f2f789?s=48 takaking22
1
240
ROS再入門​-はじめてのSLAM-
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
400
Lessons Learned from Scaling Infrastructure as Code
Be8b596c46f4c9a1aec6a7586af33134?s=48 joatmon08
0
790
今どきのLinux事情
4241bfe2a981350a7950f3875d9f441a?s=48 tokida
31
26k
Custom AppをIP制限ありのままで審査に通す方法
Df8bc8c531e2c5c89c1a007db1cf79a3?s=48 yusuga
0
680
miisan's career talk
253f81535853f9fddcadaec9b37dc1e0?s=48 mii3king
0
220
Autonomous Database Cloud 技術詳細 / adb-s_technical_detail_jp
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
10
18k
Design for Humans: How to make better modernization decisions
4d71670118785e492d724ba8c0ae54ad?s=48 indualagarsamy
2
120
WACATE 2022 夏 ワークショップの目的
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
120
MoT TechTalk #12 タクシーアプリ『GO』大規模トラフィックを捌く分析データ基盤の全容に迫る！
44a210d1299a727e9d601a47dfedeabf?s=48 mot_techtalk
1
370
Camp Digital 2022: tailored advice
8fadc4cc83e533c19a6d13db9d46cb3e?s=48 kyliehavelock
0
150

Featured

See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
4
510
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
597
210k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
Faster Mobile Websites
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Designing with Data
F57e2136eb9895eb95ff5dc8a1c02677?s=48 zakiwarfel
91
3.9k
Thoughts on Productivity
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
43
2.3k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k

Transcript

  1. Nuxt.js使いたい話 株式会社TAM 知念昌史 2019/6/22

  2. 知念 昌史 @TAM inc. • フロントエンドエンジニア（CSS、Vue.jsが好き） • 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験 からスタートしてフロントエンド8年目 •

    得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA / Movable Type / WordPress • 新人エンジニアのメンター • 企業向けにGit導入レクチャー

  3. まぁし@chocodogmagic（Twitter） • 技術コミュニティ【PWA Night】自称アンバサダー • 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布 • 今月から沖縄移住（フルリモートワーク） • ポケモンが好き｜主に公式ゲーム（ソード欲しい）

    • 映画も好き｜6/28公開スパイダーマンの新作が楽しみ

  4. Vue.js楽しいよね！

  5. こんなの作って遊んでます 365日貯金 1～365までの数字の書いた表を作って、一日一回、好きな数 字を選んでその金額を貯金するという方法。 1年間クリアすると、なんと66,795円！！！

  6. こんなの作って遊んでます コスパ計算PWA スーパーの特売商品で量が違うとき、ど ちらが安いか片手で計算できる！！

  7. これはVue.jsだけど.vueじゃない

  8. 普通のHTMLでvue.js読み込んでJSでごにょごにょ jQueryみたいな使い方をしているだけ！ 本当は、 テンプレート分割してパーツ化（.vue）したり、 画面遷移をスムーズ（SPA）にしたりしたい！！

  9. .vueでテンプレート使いたい Nuxt.js使いたい・・！

  10. 新規プロジェクトの相談

  11. 要望 • 読み物系のコンテンツ • 記事の検索機能が欲しい • 記事のお気に入り機能が欲しい • ログイン機能はつけたくない・・・ブラウザで記憶する •

    アプリにしたかったけど、開発大変だからPWAにしたい

  12. ふむふむ・・・Vue.js良さそう？！ コンテンツはCMSで更新 REST APIで
 記事データ取得 Vue.jsで画面表示
 Web更新の担当者 一般ユーザー ・お気に入り機能
 ・リアルタイム検索


  13. せっかくVue.jsで作るなら Nuxt.js導入したい

  14. 何でNuxt.js？？？ • Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルア プリケーション、静的に生成されるアプリケーション、シングルページアプリケーショ ンの中から作成するアプリケーションを選ぶことができます。（参照：Nuxt.jsドキュメ ント https://ja.nuxtjs.org/）

    • SSRは魅力 ◦ 静的ファイルなら、ブラウザでの表示速度が早い ◦ CDNでさらに高速化も検討できる ◦ 検索エンジンにも優しい（SEO） • Vue.jsのテンプレートが使える

  15. ところでSSRってどうやるの？

  16. なんとなくSSRのイメージ

  17. AWSか、Herokuかな、 最近はNetlifyの事例も多いみたい Firebaseは規模的にきついか・・？

  18. 要件定義 サーバーは、レンタルサーバーで決まりました！ 契約進めてるんで来月から使えます！ 仕事が早い！ さすがさすが！ ・・・ん？ ディレクター

  19. どうやってSSRさせるんだ？ レンタルサーバーって、 Node.js動かせるの？

  20. ふぇぇぇ

  21. レンタルサーバーでNuxt.js使って SSRしてる事例、全然ない！！

  22. 諦める方向へ・・・ でも、 SSRじゃなくても [nuxt generate] で静的ファイル化すればOKかも？ （試したことないな・・・） スケジュール確認　→　あれ、なんだこれ短納期（^^） （検証の時間がとれない・・・） とりあえず、Vue.jsだけ導入して作ろう！！

  23. 絶賛、Nuxt.js無しで制作中です。

  24. もし知っている方いたら、教えてください！！ • レンタルサーバーでもSSRするためにNode.js動かしたりでき るの？ • nuxt generate で静的化する場合、ただの.vue使う想定で構 築して、Laravel-mix環境でコンパイルしているんだけど、この ファイルそのまま移行できるの？

  25. まとめ • Nuxt.jsは、すごく便利 ◦ SSRもSPAもPWAの実装もサポートしてる！ ◦ Vue.js使っている人、使いたい人にはオススメ！！ • だけど環境も気にしてあげよう ◦

    実際どのような状況で使われるのか ◦ サーバーやデプロイ、更新体制は どうなっているのか 目的と手段を間違えないように！！

  26. ちょっとだけ宣伝 沖縄にVue.jsコミュニティを作りたい！！！ v-okinawaを作ります！！ Vue.jsに興味ある沖縄のエンジニア、 運営をお手伝いしてくださる方を 募集してます！ 紹介してください。。

  27. ありがとうございました！！！ Twitter　良かったらフォローしてね！ まぁし@chocodogmagic PWAに興味ある人も 声かけてください！！