Vue.js (NuxtJS) + TypeScriptでSlickを使うならvue-slick-carouselがおすすめ

デザイナーさんが作ったHTML + CSSをNuxtJS + TypeScript化していましたが、カルーセルにslickというライブラリが使われていました。

レスポンシブにも対応していて、非常に高機能です。

kenwheeler.github.io

しかし、jQueryに依存しており、メンテナンス性や、ファイルサイズ的によろしくないので代替案を探しました。

結論

結論としてはvue-slick-carouselを使いました。
slickと互換性もあり、TypeScriptの型定義はなかったもののSSRにも対応していて素晴らしい。

www.npmjs.com

他の選択肢

Vueのコンポーネントとして使えるだけで、結局jQueryを使うし、メンテが終わっているのでNG
github.com

シンプルで良かったけどwindowを使っており、SSR対応が面倒そうだったのでNG
ssense.github.io

PC画面で3つ表示させたいけど対応してなかった、機能的にNG。関係ないけどMacへのインストール大変だった。
vuetifyjs.com

型定義

TypeScriptでエラーが出てしまうので、とりあえずdeclareだけしました。型書きたい。

# ./types/vue-slick-carousel.d.ts
declare module 'vue-slick-carousel'

# tsconfig.json
// 省略
"types": [
      "@types/node",
      "@nuxt/types",
      "./types/"
    ]
// 省略

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

Nuxt.jsビギナーズガイド

Firebase Functions + TypeScriptで複数リージョン指定する方法

デフォルトでus-central1で動くFirebase Functionsですが、やっぱりネットワークでレスポンス遅くなるので日本でも動かしたいなと思ってやってみたら下記のエラーが起きたのでメモ。

Cloud Functions のロケーション  |  Firebase

functions.region() でカンマ区切りの複数のリージョン文字列を渡すことで、複数のリージョンを指定できます。推奨手順の詳細については、関数のリージョンを変更するをご覧ください。

「カンマ区切りの複数のリージョン文字列」って'us-central1,asia-northeast1'だろって思って書いたのが下記。

# だめだったコード１
export const example = functions
  .region('us-central1,asia-northeast1')
  .https
  .onRequest(app)

エラー内容↓

Error: The only valid regions are: us-central1, us-east1, us-east4, europe-west1, europe-west2, europe-west3, asia-east2, asia-northeast1

TypeScriptでビルドできません。

試しにregionをつなげて見たところ、ビルドは通るものの、ローカルエミュレータでは後ろのasia-northeast1しか起動していないもよう。

# だめだったコード２
export const example = functions
  .region('us-central1')
  .region('asia-northeast1')
  .https
  .onRequest(app)

落ち着いてVS Codeで型定義を見てみると・・・

(method) FunctionBuilder.region(...regions: ("us-central1" | "us-east1" | "us-east4" | "europe-west1" | "europe-west2" | "europe-west3" | "asia-east2" | "asia-northeast1")[]): functions.FunctionBuilder

なんかよくわからない・・・。

リファレンスを見たらExampleがありました。こっちを最初にみるべきだった。
https://firebase.google.com/docs/reference/functions/function_builder_.functionbuilder#region

Example
functions.region('us-east1')

Example
functions.region('us-east1', 'us-central1')

# OKなコード
export const example = functions
  .region('us-central1', 'asia-northeast1')
  .https
  .onRequest(app)

あいまいな「カンマ区切りの複数のリージョン文字列」という説明に振り回されただけだった。

でも、ここまで来たら型定義も"us-central1" 、"us-east1"等の配列を「...」で展開したものっていうのがわかった。

結局ローカルエミュレーターは最初の一つのリージョンしか起動しなかったけど、firebase deployしたところ無事2つ生えました。

Step #3 - "Deploy to Firebase": i  functions: creating Node.js 10 function example(asia-northeast1)...
Step #3 - "Deploy to Firebase": i  functions: updating Node.js 10 function example(us-central1)...

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

TypeScriptでdate-fnsを使って先月の最初と最後の日付を取得する

集計系だとデフォルトで先月1ヶ月分のってのをよくやる。結局使わなくなったけどメモ。

日付でだいたい必要なものはdate-fnsで足りてます。TypeScriptでも問題なく使えます。

date-fns.org

実行時の日にちになるように関数。

import { format, startOfMonth, endOfMonth, subMonths } from 'date-fns'

const DATE_FORMAT = 'yyyy-MM-dd'
const lastMonth = (): Date => subMonths(new Date(), 1)
const defaultDateStringFrom = (): string => format(startOfMonth(lastMonth()), DATE_FORMAT)
const defaultDateStringTo = (): string => format(endOfMonth(lastMonth()), DATE_FORMAT)

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発