Slide 1
Slide 1 text
Nuxt.js使いたい話
株式会社TAM 知念昌史
2019/6/22
Slide 2
Slide 2 text
知念 昌史 @TAM inc.
● フロントエンドエンジニア（CSS、Vue.jsが好き）
● 沖縄出身、大学卒業後に上京。美容師からWeb業界に転職。Web未経験
からスタートしてフロントエンド8年目
● 得意分野：HTML / CSS設計 / JavaScript / Vue.js / PWA
/ Movable Type / WordPress
● 新人エンジニアのメンター
● 企業向けにGit導入レクチャー
Slide 3
Slide 3 text
まぁし@chocodogmagic（Twitter）
● 技術コミュニティ【PWA Night】自称アンバサダー
● 技術書典6でPWA初心者向け本「実践PWA」を共著で頒布
● 今月から沖縄移住（フルリモートワーク）
● ポケモンが好き｜主に公式ゲーム（ソード欲しい）
● 映画も好き｜6/28公開スパイダーマンの新作が楽しみ
Slide 4
Slide 4 text
Vue.js楽しいよね！
Slide 5
Slide 5 text
こんなの作って遊んでます
365日貯金
1～365までの数字の書いた表を作って、一日一回、好きな数
字を選んでその金額を貯金するという方法。
1年間クリアすると、なんと66,795円！！！
Slide 6
Slide 6 text
こんなの作って遊んでます
コスパ計算PWA
スーパーの特売商品で量が違うとき、ど
ちらが安いか片手で計算できる！！
Slide 7
Slide 7 text
これはVue.jsだけど.vueじゃない
Slide 8
Slide 8 text
普通のHTMLでvue.js読み込んでJSでごにょごにょ
jQueryみたいな使い方をしているだけ！
本当は、
テンプレート分割してパーツ化（.vue）したり、
画面遷移をスムーズ（SPA）にしたりしたい！！
Slide 9
Slide 9 text
.vueでテンプレート使いたい
Nuxt.js使いたい・・！
Slide 10
Slide 10 text
新規プロジェクトの相談
Slide 11
Slide 11 text
要望
● 読み物系のコンテンツ
● 記事の検索機能が欲しい
● 記事のお気に入り機能が欲しい
● ログイン機能はつけたくない・・・ブラウザで記憶する
● アプリにしたかったけど、開発大変だからPWAにしたい
Slide 12
Slide 12 text
ふむふむ・・・Vue.js良さそう？！
コンテンツはCMSで更新
REST APIで
記事データ取得
Vue.jsで画面表示
Web更新の担当者 一般ユーザー
・お気に入り機能
・リアルタイム検索
Slide 13
Slide 13 text
せっかくVue.jsで作るなら
Nuxt.js導入したい
Slide 14
Slide 14 text
何でNuxt.js？？？
● Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルア
プリケーション、静的に生成されるアプリケーション、シングルページアプリケーショ
ンの中から作成するアプリケーションを選ぶことができます。（参照：Nuxt.jsドキュメ
ント https://ja.nuxtjs.org/）
● SSRは魅力
○ 静的ファイルなら、ブラウザでの表示速度が早い
○ CDNでさらに高速化も検討できる
○ 検索エンジンにも優しい（SEO）
● Vue.jsのテンプレートが使える
Slide 15
Slide 15 text
ところでSSRってどうやるの？
Slide 16
Slide 16 text
なんとなくSSRのイメージ
Slide 17
Slide 17 text
AWSか、Herokuかな、
最近はNetlifyの事例も多いみたい
Firebaseは規模的にきついか・・？
Slide 18
Slide 18 text
要件定義
サーバーは、レンタルサーバーで決まりました！
契約進めてるんで来月から使えます！
仕事が早い！
さすがさすが！
・・・ん？
ディレクター
Slide 19
Slide 19 text
どうやってSSRさせるんだ？
レンタルサーバーって、
Node.js動かせるの？
Slide 20
Slide 20 text
ふぇぇぇ
Slide 21
Slide 21 text
レンタルサーバーでNuxt.js使って
SSRしてる事例、全然ない！！
Slide 22
Slide 22 text
諦める方向へ・・・
でも、
SSRじゃなくても [nuxt generate] で静的ファイル化すればOKかも？
（試したことないな・・・）
スケジュール確認 → あれ、なんだこれ短納期（^^）
（検証の時間がとれない・・・）
とりあえず、Vue.jsだけ導入して作ろう！！
Slide 23
Slide 23 text
絶賛、Nuxt.js無しで制作中です。
Slide 24
Slide 24 text
もし知っている方いたら、教えてください！！
● レンタルサーバーでもSSRするためにNode.js動かしたりでき
るの？
● nuxt generate で静的化する場合、ただの.vue使う想定で構
築して、Laravel-mix環境でコンパイルしているんだけど、この
ファイルそのまま移行できるの？
Slide 25
Slide 25 text
まとめ
● Nuxt.jsは、すごく便利
○ SSRもSPAもPWAの実装もサポートしてる！
○ Vue.js使っている人、使いたい人にはオススメ！！
● だけど環境も気にしてあげよう
○ 実際どのような状況で使われるのか
○ サーバーやデプロイ、更新体制は
どうなっているのか
目的と手段を間違えないように！！
Slide 26
Slide 26 text
ちょっとだけ宣伝
沖縄にVue.jsコミュニティを作りたい！！！
v-okinawaを作ります！！
Vue.jsに興味ある沖縄のエンジニア、
運営をお手伝いしてくださる方を
募集してます！
紹介してください。。
Slide 27
Slide 27 text
ありがとうございました！！！
Twitter 良かったらフォローしてね！
まぁし@chocodogmagic
PWAに興味ある人も
声かけてください！！