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

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

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

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

Chinen

More Decks by Chinen

Other Decks in Technology

Featured

Transcript

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

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

Vue.js楽しいよね！

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

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

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

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

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

新規プロジェクトの相談

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

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

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

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

なんとなくSSRのイメージ

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

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

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

ふぇぇぇ

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

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

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

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

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