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

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

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に興味ある人も 声かけてください！！