🎃

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

1 min read

今回開発したもの

キャッパー川柳/大喜利

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

Discussion

ログインするとコメントできます