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

今回開発したもの

キャッパー川柳/大喜利
https://cap-senryu.vercel.app/post/1477e9dd-f584-4190-9ddd-06e834012682

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

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

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

使った技術

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

node-canvasで苦労したこと

今回は投稿された川柳/大喜利からtwitterカードの画像を自動生成している。
https://www.memory-lovers.blog/entry/2020/10/10/110000

ただ現在vercelのdocker imageに不具合があるらしく、node-canvasがビルドエラーになってしまうので2.6.1までバージョンを落とす必要がある。
https://github.com/Automattic/node-canvas/issues/1448#issuecomment-841454963

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);
    });
  });
}