Nuxt+Vuetifyで新規サービスを爆速リリース/Fast release of new service with Nuxt + Vuetify

ポケモン剣盾の素早さ比較ツールをNuxt+Vuetify+Netlifyで実装して、作成した話です。

作成サイト: ポケモン剣盾素早さ比較ツール
https://pokemon-tools.netlify.com/speed-checker/

Qiita: ポケモン剣盾の素早さ比較ツールをNuxt.jsで作成してNetlifyで公開するまで
https://qiita.com/inosy22/items/8761170b86f0f433bedf

Github: ポケモン系のツール (現在は素早さ比較ツールのみ)
https://github.com/inosy22/pokemon-tools

Transcript

1. Nuxt と Vuetify で 新規サービスを爆速リリース @inosy22 Roppongi.vue#5 ２０２０/０２/２５
2. どんな発表内容？ 簡単なサービスの開発であれば 　Nuxt.js + Vuetify.js + Netlify の組み合わせが、爆速リリースできて、オススメという話！ それぞれは、基本的な機能の説明なので初級者向けです
3. 自己紹介 • 名前：猪野 凌也 @inosy22 • 所属：株式会社GameWith • 役割：サーバーサイドエンジニア • 勉強中： Vue(Nuxt)/Golang/C#(Unity) • 今まで： React/PHP/Java/C++ • 将来の夢： ポケモンマスター
4. 将来の夢：ポケモンマスター
5. Nuxt と Vuetify で 新規サービスを爆速リリース ↓ ポケモンマスターになるために
6. ポケモンマスターになるために ポケモンマスターになるためには まず、ポケモンの「すばやさ」の情報を制する必要がある！
7. ポケモンマスターになるために ポケモンマスターになるためには まず、ポケモンの「すばやさ」の情報を制する必要がある！ → 自分にとって使いやすいツールがない
8. ポケモンマスターになるために ポケモンマスターになるためには まず、ポケモンの「すばやさ」の情報を制する必要がある！ → 自分にとって使いやすいツールがない → 自分でポケモンすばやさ比較ツールを作ろう！
9. ポケモンマスターになるために ↓ Nuxt と Vuetify で 新規サービスを爆速リリース
10. ※注意 こちらの資料は 株式会社GameWith の事業とは全く関係なく 発表者の ポケモンマスター への想いが溢れてしまった 個人的なものです。
11. どんなものを作りたかったか - 2つのポケモンの素早さを条件に応じて比較できる - 条件の変更はリアクティブに比較結果に反映される - バトル中に即座に計算しやすいUI
12. 完成したもの
14. どうやって作るか？ • Nuxt.js で静的ページを作る • Vuetify.js のコンポーネント利用 • Netifyでホスティングして公開
15. Nuxt.js で静的ページを作る
16. なぜ Nuxt.js ？ • Vue.js 用のフレームワーク ◦ 用意された規約/ルーティング機能 などが vue-cli より便利と判断 • 静的ページのジェネレート機能が使いたい Vueテンプレート記法は、Reactのjsxに比べて簡単 → さらっとサービス作るのに向いている
17. Nuxt.jsのモードとGenerateについて • SSRモード: サーバーとクライアントを両方実装できる • SPAモード: クライアントのみのバンドルファイル生成 ↓ どちらでもコマンド実行でGenerate可能 ルーティングに従って静的ファイルをページごとに生成 サーバーいらずで、SPAでもないので軽量で高速（なはず）＿
18. 今回 Vue.js で利用した機能 • Vueテンプレート記法 • CompositionAPIの基礎的な記述 • フォーム入力バインディング（v-model） HTMLとJSの基本知識があれば、上記の3つを抑えれば、 簡単な静的アプリケーションぐらいは作成可能
19. CompositionAPI を試してみた • Vue3から採用される予定の関数型コンポーネント定義 • 処理の再利用性向上やファイルの見通しがよくなる！ • (TypeScriptとも相性が良さそう) とても記述しやすかったので、 勉強コスト含めても採用した価値ありと感じた！
20. フォーム入力バインディング v-model ディレクティブを使うことで、データ連携が可能 フォームのHTMLタグに v-model でデータを紐づける これによって、ユーザーから入力された値などを リアクティブに処理して見た目に反映することができる
21. v-model と CompositionAPI のサンプル <template> <div> <select v-model="state.selected"> <option disabled value=""> Please select one </option> <option>A</option> <option>B</option> <option>C</option> </select> <span> Selected: {{ state.selected }} </span> </div> </template> <script> import { createComponent, reactive } from '@vue/composition-api' export default createComponent({ setup() { const state = reactive({ selected: '' }) return { state } } }) </script> input値とJS部分をバインド 「computed」を使うと 変更にフックして処理を走らせ ることも可能
22. Component設計 繰り返し使われる部分を、 Propsで機能や値を渡せば動 作するように、抽象的なコン ポーネントにする
23. OGPの設定 nuxt.config.js に記載して、 埋め込み可能 head: { titleTemplate: '%s', title: 'ポケモン剣盾素早さ比較ツール ', meta: [ { hid: 'description', name: 'description', content: '速攻計算！ポケモン剣盾 (ポケモンソードシールド )素早さ比較ツール' }, { hid: 'twitter:card', name: 'twitter:card', content: 'summary' }, { hid: 'twitter:site', name: 'twitter:site', content: '@inosy22' }, { hid: 'og:type', property: 'og:type', content: 'website' }, { hid: 'og:title', property: 'og:title', content: 'ポケモン剣盾素早さ比較ツール ' }, ~~~~~~~~~~~~~~~~~~~~~~~~
24. Vuetify.js のコンポーネント利用
25. なぜ Vuetify.js ？ • Vue.js用コンポーネントフレームワーク • マテリアルデザインのコンポーネントが利用できる • 機能とデザインがセットになっているので実装コストを大幅に 削減できる！ • アイコンも簡単に利用できる
26. デザインテーマ Light / Dark がデフォルトで 選べる。自分でテーマカラー を決めることも可能 今回は Dark を使用
27. Vuetify.jsのコンポーネント利用 Vuetify.js - API explorer → ドキュメントから利用したい コンポーネントを検索して、 使い方を見る
28. 例: インクリメンタルサーチの実現
29. 例: インクリメンタルサーチの実現 「autocomplete」って 　検索して関連から発見！
30. 例: インクリメンタルサーチの実現 Comboboxコンポーネントを利用する <v-combobox v-model="state.pokemonName" // Componentとstateをバインディング :items="pokemonsForSearch" // 検索候補の文字列の配列を渡す :error="!compute.speed.isValid" // エラー条件 (エラー中は赤く表示 ) @click:clear="clearText" // 消すボタンが押された時に事項される関数 clear-icon="mdi-close-circle" // 消すボタンのアイコンを決める (マテリアルデザインアイコンから選ぶ ) clearable // 消すための×ボタンを有効にする autocomplete="off" // ブラウザのオートコンプリートが邪魔なので消す label="ポケモン" // 表示名 dense // デザイン調整 />
31. 基本的なコンポーネントは揃っている v-radio-group: v-checkbox: v-selectbox: ← ボタンはMaterialDesignIcons v-progress-liner:
32. レスポンシブ対応 スマホの場合は計算条件のカードが　　縦 に並ぶようにする また、計算結果はリアクティブに確認できる ように、フッターのコンポーネントを固定した
33. レスポンシブ対応：グリッドシステム Veutifyのグリッドシステム利用 縦に12分割した際に各サイズで何 カラム使うかを宣言する xs12: スマホサイズで横一杯表示 sm6: xsより大きい時横半分表示 <v-flex xs12 style="text-align: center"> <h2>ポケモン剣盾素早さ比較ツール </h2> </v-flex> <v-flex xs12 sm6 class="card-container"> <CalculatorCard :title="`自分のポケモン`" :calculated-speed="calculatedOwnSpeed" /> </v-flex> <v-flex xs12 sm6 class="card-container"> <CalculatorCard :title="`相手のポケモン`" :calculated-speed="calculatedOpponentSpeed" /> </v-flex>
34. レスポンシブ対応：固定フッター フッター固定フラグ（fixed） をスマホサイズ（xs） の時に、 true にすることで 固定を実現する <!-- スマホの場合だけ、固定フッターにする --> <v-footer :fixed="$vuetify.breakpoint.xs"> <v-flex xs12 sm12> 　<CalculatedResult /> </v-flex> </v-footer>
35. Vuetify.js最高！ やりたいと思ったことは、 大体コンポーネントで用意されているので、 ほとんどは配置だけ考えれば済む → 実装は短時間で、機能の企画に集中できる
36. Netlify でホスティングして公開
37. なぜ Netlify ？ • 無料で使えるホスティングサービス • Github連携したデプロイが簡単に設定可能 • 無料SSL/カスタムドメイン/FaaSとかもあり • PR毎にプレビューサイトを作れる • Firebase と比較するとできることは少ないが、必要最低限な ので設定が簡単で扱いやすい
38. Github連携 ①リポジトリURL ②ビルド用コマンドと ③成果物ディレクトリ を設定するだけ ① ② ③
39. *.netlify.com のサブドメイン名を独 自で設定できる Domainの変更
40. デプロイする際に、 <head>タグ内に埋め込 む文字列を設定できる GoogleAnalitics設定
41. デプロイイメージ Githubの master ブランチが変更されたらDeploy
42. 勉強時間も含めて 企画 → 開発 → リリースまで 約 12 時間
43. リリース後
44. Google検索で1ページ目に表示される！ Netlifyのサイトで Netlifyのドメインでも クローリングはOK
45. Twitterで少し反響がありました！
46. 2ヶ月程で 1万人以上 が利用してくれている！
47. サービス開発って楽しい✌
48. まとめ • Nuxt.js で簡単にWebサービスを作成 • Vuetify.js で実装コストを大幅削減 • Netlify で 簡単にWebサービスを公開 • 上記３つの組み合わせで爆速サービス開発できる！
49. そういえば ポケモンマスターに近づいた？
51. 世界 117 位！ 100以内なら全国大会出場権獲得レベル ポケモンマスターへの道見えてきた...！？
52. まとめ • Nuxt.js で簡単にWebサービスを作成できる • Vuetify.js で実装コストを大幅削減 • Netlify で 簡単にWebサービスを公開 • 上記３つの組み合わせで爆速サービス開発できる！ • ポケモンマスターに近づくには、素早さを制する ← NEW!
53. 関連リンク ポケモン: トップページ｜『ポケットモンスター ソード・シールド』公式サイト 作成サイト: ポケモン剣盾素早さ比較ツール Qiita: ポケモンの素早さ比較ツールをNuxt.jsで作成してNetlifyで公開するまで Github: inosy22/pokemon-tools: ポケモン系のツール
54. EOP ありがとうございました！