くらげになりたい。

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

javascript

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 使い方 …

カラーコードから明暗を判定する(コントラスト計算)

背景色を自由に設定できるようにしたとき、 文字の色を白か黒に自動で判定したいなと思い、 いろいろ調べたときの備忘録。 W3Cでアルゴリズムが公開されているので、それを利用。 function getInvertedColor(hexColor:string) { // 指定した色からR/G/Bをそ…

Vue/NuxtでQRコード生成

ブラウザ上でQRコードを生成したいなと探していたら、 よさげなVueコンポーネントを見つけたので、試してみたときの備忘録。 使ったのは、fengyuanchen/vue-qrcode。 soldair/node-qrcodeを使ったVueコンポーネントライブラリ。 インストール まずは、インス…

JavaScript/Node.jsでUILDを生成する

UUIDを使ってたけど、ソートできるULIDを使いたくなったので、 探していたら、ulidを見つけたので試してみた。 インストール $ npm install --save ulid 使い方 import { ulid } from 'ulid' ulid() // 01ARZ3NDEKTSV4RRFFQ69G5FAV // seed timeを指定する場…

NexeでNode.jsアプリから実行可能ファイルを作成する

Node.jsで作ったアプリを他の環境で実行したくて、 いろいろ見てたらnexeで実行可能ファイルを作成できるよう。 ちょっと試してみたときの備忘録。 まずはインストール $ npm i nexe -g 実行したいファイル // my-app.js console.log("Hello Nexe!!"); 実行…

Express.js(Node.js)で認証(ハッシュ化/JWT)

Expressで認証周りについて調べたときの備忘録。 Passport.jsという便利なのもあるけど、 パスワードのハッシュ化やJWTトークン周りは自前で用意する必要がある感じ。 (ソーシャルは不要なので、使わない形の例) パスワードのハッシュ化はBcrypt or Crypto J…

AWS SDK for JavaScriptでS3にファイルをアップロードする

AWS SDK for JavaScriptを使って、S3のファイルをあれこれする方法を調べたので、その時の備忘録 以下のGitHubリポジトリに全部まとまってるので、 S3以外が必要なときはここを見るといい感じ。 ・aws-sdk-js-v3/clients/client-s3 使い方 まずはインストー…

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

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

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

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

Day.jsで相対時間を表示する(n日前/n秒前とか)

開発してるWebアプリでコメント機能をつけてみた。 コメントされた時間を何日前とか相対的な時間で表示したいと思ったときの備忘録。 Day.jsにプラグインが用意されているので、簡単だった(´ω`) 使い方 こちらの記事を参考にした。 import dayjs from "dayj…

xlsx-populateを使ってテンプレートからExcelファイルを生成する(Nuxt+JavaScript)

以前、SheetJS(xlsx)でExcelファイルの生成を試してみたけど、 スタイルのコピーや設定ができない課題の解決のため、調べたときの備忘録。 xlsx-populateだと、スタイルの操作もできるっぽい。 インストール $ npm i xlsx-populate xlsx-populateの使い方 外…

Webでクリップボードにコピーする(zenorocha/clipboard.js)

以前の記事で、Clipboard APIやclipboard-polyfillを調べたけど、iOSのSafariで使えないなど制限が。。 clipboard.jsのほうがサポートが広かったので、調べてみたときの備忘録。 インストール $ npm install clipboard --save 使い方 基本的には、data属性を…

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

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

DotEnv+Nuxt.jsでsrcDirを設定するとうまくうごかないときは、dotenv.pathを設定する

Nuxt.jsで環境変数の設定にdotenvを使ってたときの備忘録。 起こった現象 ソースディレクトリの場所を変えようと、 nuxt.config.tsにsrcDirを設定したら、うまく動かず。。 ディレクトリはこんな感じ。 / app/ .env nuxt.config.ts nuxt.config.ts内では、pr…

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

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

Node.jsで画像/動画つきツイートをTwitterに投稿すると大変だった...

JavaScriotでツイートしたいなと思って、いろいろ試していたら、 30秒以上動画つきツイートが結構めんどくさかったので、その時の備忘録。 Node.jsでTwitter APIを使う Node.jsでTwitter APIを使うときは、desmondmorris/node-twitterを使うのが良さそう イ…

Twitterでツイートできる文字数を正確に数える(絵文字もURLも)

Nuxt.jsでツイートするアプリを作りたいなと思い、 文字数ってどうやって計算するんだろ?って思ったら、 公式でライブラリ(twitter-text)が用意されているらしいので、使ってみたときの備忘録 Java版/Ruby版/JavaScript版/Objective-C版などいろいろあるら…

<input type="file" />で選択した画像を<img>に表示する

雑だけど、こんな感じ(´ω`) <html> <body> <input type="file" id="myImage" accept="image/*" onchange="setImage(this);" onclick="this.value = '';"> <img id="preview"> <script> function setImage(target) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById("preview").setAttribute(…</body></html>

ネストされたJavaScriptのオブジェクトをフラットにするhughsk/flatというライブラリ

ネストされたObjectをフラットにしたいなと思ってたら、いいライブラリが。 hughsk/flatを使ったらすぐできたので、その備忘録。 サンプルは、GitHubあるREADME.mdの抜粋です。 インストール $ npm install flat 使い方2: ネスト→フラット const flatten = r…

ローカルPCからfirebase-adminを使ってFirestoreを操作する(管理ツール)

Firestore、便利だけど一括取得とか一括実行をGUIでやるのがつらい。。 スクリプトでできないかなと思っていたら、できるっぽいので調べてみたときの備忘録。 テストデータ生成とか不要データの削除とかいろいろ使えそう(´ω`) ディレクトリ構成 my-admin/ -…

JSでランダムな文字列を生成する3つのライブラリ(Nano ID/uuid4/shortid)

ユニークIDなどのためにランダムな文字を生成したいなと思ったら、 いろいろライブラリがあったので、調べたときの備忘録 調べたのは、以下の3つ Nano ID uuid4 shortid Nano ID セキュエアでURLフレンドリーな文字でユニークIDを生成してくれるライブラリ v…

bitly APIで短縮URL(TwitterのURLバン対策 パート2)

前の記事でFirebase Dynamic Linksを使ったURL短縮を書いたけど、 ドメインを自分で設定するのでURLバンされる気してbitly APIも試してみた。 その時の備忘録。 TwitterのURLバンについては、もぎゃさんのCrieit記事を参照 crieit.net 準備 bitly アカウント…

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…

調べたアニメーションライブラリのちょっとしたまとめ

Webサービスの画面にアニメーションをつけたいなと思ったときに、いろいろ調べたときの備忘録。 いろいろあって悩ましい。。 アニメーションライブラリ AOS - Animate on scroll library スクロールアニメーションのライブラリ。簡単に導入できる Delighters…

NuxtをTypeScript化するときのやりかた

Vue.jsとNuxt.jsでいろいろ作っているけれど、TypeScriptが素敵すぎる。。 create-nuxt-appだとTypeScriptがないので、TypeScript化するときにやることを整理したときのメモ TypeScriptが使えるように設定する 0. ディレクトリ構成 ディレクトリ構成はこんな…

Vue.jsでの配列・オブジェクト操作のお作法

Vue.jsでは、配列やオブジェクトの代入を、うまく検知できないらしい。。 お作法があるので、調べてみたとこの備忘録。 配列 // 追加: pushを使う let addItem = ... this.items.push(addItem); // 変更: spliceを使う let modifyIndex = 1; let modifyItem …

【小ネタ】JavaScriptでクリップボードにコピーする(Async Clipboard API)

クリップボードにコピーするほう法を調べたので、その備忘録。 2020/03/20追記 2020/03/20現在、Can I useをみると、Safariが未対応。。 clipboard-polyfill.jsを利用するのが良さそう。 www.memory-lovers.blog こんな感じ // Copy navigator.clipboard.wri…