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

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

inosy22
February 25, 2020

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

inosy22

February 25, 2020
Tweet

More Decks by inosy22

Other Decks in Programming

Transcript

  1. 自己紹介 • 名前:猪野 凌也 @inosy22 • 所属:株式会社GameWith • 役割:サーバーサイドエンジニア •

    勉強中: Vue(Nuxt)/Golang/C#(Unity) • 今まで: React/PHP/Java/C++ • 将来の夢: ポケモンマスター
  2. なぜ Nuxt.js ? • Vue.js 用のフレームワーク ◦ 用意された規約/ルーティング機能 などが vue-cli

    より便利と判断 • 静的ページのジェネレート機能が使いたい Vueテンプレート記法は、Reactのjsxに比べて簡単 → さらっとサービス作るのに向いている
  3. 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」を使うと 変更にフックして処理を走らせ ることも可能
  4. 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: 'ポケモン剣盾素早さ比較ツール ' }, ~~~~~~~~~~~~~~~~~~~~~~~~
  5. 例: インクリメンタルサーチの実現 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 // デザイン調整 />
  6. レスポンシブ対応:グリッドシステム 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>
  7. なぜ Netlify ? • 無料で使えるホスティングサービス • Github連携したデプロイが簡単に設定可能 • 無料SSL/カスタムドメイン/FaaSとかもあり •

    PR毎にプレビューサイトを作れる • Firebase と比較するとできることは少ないが、必要最低限な ので設定が簡単で扱いやすい
  8. まとめ • Nuxt.js で簡単にWebサービスを作成 • Vuetify.js で実装コストを大幅削減 • Netlify で

    簡単にWebサービスを公開 • 上記3つの組み合わせで爆速サービス開発できる!
  9. まとめ • Nuxt.js で簡単にWebサービスを作成できる • Vuetify.js で実装コストを大幅削減 • Netlify で

    簡単にWebサービスを公開 • 上記3つの組み合わせで爆速サービス開発できる! • ポケモンマスターに近づくには、素早さを制する ← NEW!