くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

TypeScript

新しい日付ライブラリのTempoをさわってみた

day.jsを使ってたけど、サイズも小さく軽量とのことで、 ちょっと試してみたときの備忘録(*´ω`*) tempo.formkit.com FormKitのチームが開発したらしい formkit.com Tempoとは nativeのDateを操作するユーティリティなライブラリ。 day.jsとは違い、Date自体…

TypeSpec(OpenAPI)でTypeScriptとDartのモデルを共通化する

Firestoreを使ってアプリとサーバを開発していて、 FlutterとCloud FunctionsやNitro Serverでモデルを共通化したいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) TypeSpecでOpenAPIの定義を書いて、 それぞれの言語で生成するのがいいかもしれない。 …

ts-nodeでtypes.d.tsが読み込まれないときの設定

こんな感じの型定義ファイルを用意して、 ts-nodeで実行したときになぜかエラーになってしまった。。 declare module "express" { interface Request { user?: { id: string } | null; } } 色々調べてみると、実行対象に関係しないものは読み込んでくれない…

VSCodeのTSのimport補完で相対パスにしない設定

importを補完しようとすると、 ../../XXXとかになってしまうのが嫌だな。。と思ったので、 いろいろ調べてみた時の備忘録(*´ω`*) VSCodeのsettings.jsonに以下を設定すればOK { "typescript.preferences.importModuleSpecifier": "non-relative" } shortest…

ブラウザで音声を再生する(howler)

ブラウザで音声を再生したいなと思って、 いろいろ調べてみたときの備忘録(*´ω`*) github.com あまりないけど、howlerがよさそうだった(*´ω`*) 使い方 まずはインストール $ npm i howler 再生するだけならこれでOK(*´ω`*) import { Howl } from 'howler'…

Stringをcamelcaseに変換する(camelcase/decamelize)

JS/TSでキャメルケースとかの変換をしたいなと思ったときに、 いろいろ調べたときの備忘録(*´ω`*) まさになライブラリがあった(*´ω`*) camelcase 'foo-bar' => 'fooBar' 'Foo-Bar' => 'FooBar' // pascalCase Options 'Foo-BAR' => 'fooBAR' // preserveCo…

TypeScriptのPromiseでretryしたい(async-retry/node-retry)

TypeScriptのPromiseでretryしたいなと思って、 いろいろ調べたときの備忘録。 vercelが公開してるasync-retryがよさそう。 ・vercel/async-retry: Retrying made simple, easy and async 中身は60行ほどで、node-retryを使っている感じ。 ・tim-kos/node-re…

TypeScriptのESMでハマる

markdownからhtmlに変換したいなーと思い、 micromarkを使おうとしたら、 ES Modulesでかなりハマったので、その時の備忘録。 はじまり 今まで使っていたらちょっとしたツールのプロジェクトに、 micromarkをインストールしたら、こんなエラーが。。 $ npx t…

nanoidでランダムな文字列を生成する

IDやパスワードなど、ランダムな文字列を生成したいなと思ったので、 いろいろ調べてみたときの備忘録。 nanoidが便利そうだった(*´ω`*) 型定義もあるので、TypeScriptでも使いやすい インストール $ npm i nanoid 使い方 import { customAlphabet } from '…

Promise.allで並列数を制限する(supercharge/promise-pool)

並列実行できるPromise.all 便利だけど、リストが多いと、並列数がすごくなるので、 制限したいなと思ったときに、いろいろ調べたときの備忘録。 @supercharge/promise-poolを使うとよさそう(´ω`) インストール $ npm i @supercharge/promise-pool 使い方 …

TypeScriptのデコレータを使って、expressのRoutingを楽にする

ExpressをつかってAPIサーバを作っていたけど、 Spring Bootみたいに、デコレータでマッピングしたいなと思い、 いろいろ調べてみたときの備忘録。 ※ routing-controllersというライブラリもあるけど、デコレータ理解のためreflect-metadataを使ってます。 …

TypeScript ORM「Prisma」のはじめかた

Node.js/TypeScript ORMのPrisma。 高機能なので理解することがたくさんあるので、はじめ方をまとめてみた。 既存のDBがすでにあって、あとからPrismaを導入するときのイメージ。 全体の流れ Prismaを使った開発の流れはこんな感じ。 事前準備 初期設定 ... …

Cropper.jsで画像切り抜きWebアプリを作ってみる

画像の一部を簡単に切り抜きたいなと思って、いろいろ調べてみたら、 Cropper.jsという便利なライブラリがあったのでお試し(´ω`) こんなのを作りました(´ω`) いろいろ遊んでたらなんかできた(*´ω`*)https://t.co/FPc1ylaVqH pic.twitter.com/KdDLeXiY1q— …

JavaScript/TypeScriptで独自のエラークラスを利用する

JavaScriptでカスタム例外クラスを作りたいなと思ったら、 めんどうだったので、その時調べたときの備忘録。 以下がすごく参考になった(´ω`) ・例外処理 — 仕事ですぐに使えるTypeScript ドキュメント カスタム例外 こんな感じ。 export class CustomError …

Firebase Emulator Suiteを使ってみた

Firebase Local Emulator Suiteを使ってみたときの備忘録。 初期設定 # バージョンの確認。CLIがv8.14.0以降じゃないと使えない。 $ firebase --version # Firebase自体の初期設定 $ firebase init # Emulator Suiteの初期設定 $ firebase init emulators コ…

Cloud Functions for Firebase + jest + TypeScript

Cloud Functions for Firebase + TypeScriptでテストを書くときの初期設定の備忘録。 ディレクトリ構成 . ├── __tests__ ... テストのコード ├── src ... ソースのコード ├── lib ... コンパイルしたコードの出力先 ├── jest.config.js ├── package-lock.jso…

nuxt-property-decoratorでfetchやfetchOnServerを利用できるようにする

Nuxt+TypeScriptで開発する時は、nuxt-property-decoratorを使ってるけど、 Nuxtv2.12から追加されたfetchやfetchOnServerがうまく動かない。。 その時、調べたときの備忘録。 一部のメソッドは、Component.registerHooksを使って登録する必要があるらしい。…

TypeScriptのデコレータで関数の実行時間を計測する

作っているWebサービスの性能改善のため、 どれくらい時間がかかるかを計測したいと思ったときの備忘録。 この記事をみると、デコレータでできる感じだったのでためしてみた。 こんな感じで時間を測りたい関数に@measureLogをつけるだけでログに表示してくれ…

Vercel(ZEIT now)のServerless FunctionでTypeScriptの最小構成

前も書いたけど、ZEITからVercelになったらしく、 だいぶ楽にFaaSできるようになったので試してみた。すごく簡単だった。。(´ω`) このサンプルのソースはこちら。 使ってみる インストールとか # package.jsonの作成 $ npm init # 必要なパッケージをインス…

Nuxt/TS】vuex-module-decorators+nuxt-client-initで、nuxtClientInit内で@nuxt/axiosが取得できないときの対処法

TypeScriptでNuxtしたくて、vuex-module-decoratorsとnuxt-client-initを使ったら、 nuxtClientInit内で$axiosがnullだったときの備忘録。 Nuxt TypeScriptのストアのガイドを見ているけど、 プラグインのほうが後に呼ばれるので、自分で初期化しないといけ…

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認と…

【小ネタ】ローカルにある画像ファイルをBase64エンコードするJavaScript

画像ファイルをData URL形式に変換したいなと思ったときの備忘録。 こんな感じ 読み込み時にbase64を指定できるらしい const fs = require("fs"); // 変換するファイルパス const filePath = "./photo.png"; // 対象のファイルをbase64形式で読み込み const …

Express+TypeScriptをはじめるときにやったこと

Expressでサーバ立てたいなと思ったので、 TypeScriptではじめるときにやったことの備忘録。 TypeScriptの設定 まずは、package.jsonから。 # package.jsonの生成 $ npm init # typescriptのインストール $ npm i -D typescript @types/node # バージョン確…

TypeScriptでFirebase Admin SDKで認証ファイルを使うときは、スネークケースをキャメルケースに変換する

前の記事でも書いているけど、Firebase Adminで色々するので、 そろそろTypeScript化したくなり。。 www.memory-lovers.blog いざやってみると、すんなりできなかったのでその時の備忘録。 こんな感じ jsonファイルはスネークケースだけど、 型(admin.Servic…

ts-nodeで--max_old_space_sizeを指定するときは、-r ts-node/registerをつかう

ts-node、typescriptのまま実行できて便利。 でも、max_old_space_sizeを指定したいと思ったらめんどうだった。。 こんな感じ $ node --max_old_space_size=1024 -r ts-node/register index.ts max_old_space_sizeはnodeでしか指定できないので、 node -r ts…

Firebase Dynamic Linksで短縮URL(TwitterのURLバン対策)

もぎゃさんのCrieit記事を見て、TwitterでシェアするとURLバンされるらしい。。 crieit.net URLを短縮すると回避できるらしく、Firebase Dynamic Linksを使ってURLを短縮してみたときの備忘録 Firebaseのダイナミックリンクとは 公式ドキュメントより Fireba…

JavaScriptのobjectのCloneとPropety Delete

JavaScript/TypeScriptでobject型の値をあれこれしたいなと思ったので、 そのときの備忘録。Stack Overflowすごい。。 clone 1. Spread Properties: Yes, Methods: No, Deep Copy: No var clone = { ...customer }; 2. Object.assign Properties: Yes, Metho…

Roppongi.vueにリモートで参加してみた!

ライブビューイングできる勉強会があるようなので、初勉強会だけど参加してみた(´ω`) いつもスライドだけ見てたけど、ライブ感すごい。。次は現地にいきたい。。 roppongi-vue.connpass.com www.youtube.com Roppongi.vueのふんいき はじまってます〜 #ropp…

ISBN13からISNB10/ASINを計算する (TypeScript ver.)

書籍検索をするとISBN13だけのものもあり、 ASINと同じISBN10を計算したいなと、 いろいろ調べたので、その時の備忘録。 はじめてみたけど、チェックディジットの簡単に計算できるのはびっくり! ISBN13 → ISBN10 左3桁と右1桁目を取る 「モジュラス11 ウェ…

ZEIT/NowでTypeScriptしてみる

前回の記事でJavaScriptでNowを利用できるようになったので、 TypeScript化できるようにしてみる。 それぞれ、GitHubで公開。 変更前(JS): zeit-now-minimum-example | GitHub 変更後(TS): zeit-now-minimum-example-ts | GitHub TypeScript化するためにやっ…