🎃

React経験者が独学でVueを勉強した

2021/05/18に公開

Nuxt

今回開発したもの

キャッパー川柳/大喜利

開発期間:丸3日(48時間)ぐらい

ついぎり
https://twigiri.app/

のターゲット縮小版のイメージです。

使った技術

NuxtJS
NodeJS
Docker
Firebase
node-canvas
- 主にOGPに使用
vercel serverless function
- 主にOGPに使用

node-canvasで苦労したこと

今回は投稿された川柳/大喜利からtwitterカードの画像を自動生成している。

ただ現在vercelのdocker imageに不具合があるらしく、node-canvasがビルドエラーになってしまうので2.6.1までバージョンを落とす必要がある。

vueの勉強メモ

ライフサイクル

mounted ≒ componentDidMount(useEffect)
data ≒ state(useState)
- data内に定義したステートに直接this.hoge = fugaなどの形で更新する
methods(コンポーネント内メソッド) ≒ useCallback/useMemo

NuxtJS

pages命名規則

ディレクトリ構造は一緒。
ダイナミックルーティングの書き方が若干異なる。

NextJSでは[id].tsx
- NextRouterでrouter.query.idで取得できる
NuxtJSでは_id.vue
- コンポーネント内でthis.$route.params.idで取得できる

Vueコンポーネントの登録

Reactと異なり、Vueではカスタムコンポーネントを登録しないとtemplate内で使用できないようだ。

import Vue from 'vue'

import List from '../components/List.vue';
import Menu from '../components/Menu.vue';

Vue.component('List', List);
Vue.component('Menu', Menu)

firebase

作法が合っているかどうかわからないが、ユーザがfirebaseログインが終わった状態だとこういう形でfirebaseUserが取得できるのでvuexに保持しなかった。
vuexのstoreを更新できなかったので今回はvuexを使わなかった。

import firebase from "./firebase";

export default function(): Promise<firebase.User | null> {
  return new Promise(function(resolve, reject) {
    firebase.auth().onAuthStateChanged(function(user) {
      resolve(user || null);
    });
  });
}