this を返すようにするとメソッドチェーンで書けるので便利 # class Calculator { #number; constructor(initial = 0) { this.#number = initial; } print() { console.log(this.#number); } add(num) { this.#number += num; return this; } subtract(num) { this.#number -= num; return this; } multiply(num) { this.#number *= num; return this; } divide(num) { this.#number ...
ジェネリック型を引数にとる関数の戻り値の型を取得すると、結果は以下のようになります。 function foo<T>(arg: T) { return arg; } function bar<T extends object>(arg: T) { return arg; } type FooReturn = ReturnType<typeof foo>; // unknown type BarReturn = ReturnType<typeof bar>; ...
こんな型があるとします。 type Person = { name: string; age: number; isAdult: boolean; siblings: string[]; birthplace?: string; height?: number; hasPartner?: boolean; friends?: string[]; }; こうすれば Optional なプロパティのみを抽出できます。 type OptionalPropertyKeys<T> = { [K in keyof T]-?: undefined extends T[K] ? K : never; ...
試行その１ # import { useState, useEffect } from 'react'; export default function Component() { const [int, setInt] = useState<number>(); useEffect(() => setInt(1), []); useEffect(() => setInt(3), []); useEffect(() => setInt(2), []); console.log(int); return <></>; } 結果その１ # コンソールには以下の順番で出力されます。 undefined 2 初回レ ...
関数の実行結果として別の関数が return されるようなケースがあります。 例えばイベントリスナーに処理を登録して、その結果としてリスナーを解除するための ...
コールバック Ref パターンがあまり使われていない（知られていない？）ように思われたので布教も兼ねて。 1. DOM のアタッチ時だけ処理が必要な場合 # 1-1. useRef + ...
useEffect の return など、コンポーネントのアンマウント時に実行される処理ですが、これはページを再読み込みした時には実行されません。 リロード（だったり、アド ...
Parent コンポーネントが ChildA および ChildB をインポートとしているとして、それぞれのコンポーネントで以下のように console.log() しているとどの順番に出力されるのか。 Parent.jsx import { ...
挨拶文言を定義する型があったとします。 type Greet = 'hello' | 'goodbye'; const greet: Greet = 'hello'; 文言には hello と goodbye がよく使われるものの、これだけに固定される必要はなく、話者が好きな ...
例えばスタイリングされたパーツのコンポーネントを作るとして、ある HTML 属性をプロップスで受け取るようにする場合、これまでは MDN のドキュメントを見て ...
ハマった経緯 # 最初に # これまで example.com でサイトを運営していた。 そして # これまで運営していた example.com は other.example.com としてドメインを変更して引き続きサイトを運営しつつ ...
事の発端（蛇足） # 少し前の話にはなりますが、AWS の Lightsail で運用していたワードプレスサイトがある日突然 SSL 証明書のエラーで開けなくなってしまいまし ...
タイトルでうまいこと表現できませんでしたがつまりこういう状況です。 状況 # GitHub Packages（や npmjs）に作った組織内のプライベートなパッ ...
import の from にある /（スラッシュ） の意味 # npm のパッケージを import する時に from の中でスラッシュを記述するものがある。例えば Firebase SDK はこのパターン。 import { initializeApp } from 'firebase/app'; ...
例えばフロントエンドとバックエンドの両方を TypeScript で開発している場合、型定義を共有したい場面があるはず。 両方に同じコードをコピペすることで当座は解 ...
SPA の優位性（ポエム） # Angular や React をはじめとした CSR ライブラリが登場して以来、SSR が登場し、SSG が登場し、ISR が登場しました。 技術の登場順に従 ...
Web アプリとマジックリンクの組み合わせはなかなか難しいと思った話。 （Firebase 使用中に遭遇したのでそれをベースに書いていますが Firebase に限った ...
「難しい」というのは実装が難しいということではなく、UX の観点から本当に採用すべきか考えた方が良いケースもあるという意味です。 なおこれは Web ア ...
Google Chrome のシークレットモード（インコグニトモード）では Firebase の signInWithRedirect と signInWithPopup が機能しません。 最も遭遇しやすいであろう環境を想定して Google Chrome と記載しましたが、他の ...
Firebase で Google や Facebook といった外部認証を利用したログインを実施する場合 signInWithPopup または signInWithRedirect のメソッドを利用します。 参考：https://firebase.goog ...
日付を表す文字列があるとして、可能ならばこれを Date オブジェクトに変換したい、というような時に使える関数です。 JavaScript 版 # /** 引数を Date オブジェクトへ変換 ...
こんな感じで文字列を検索したい時に使える関数をご紹介します。 const names = [ 'ほしの ユタカ', 'つきもと マコト', & ...
Android の Chrome ブラウザに存在する機能の「タップして検索（Touch to Search）」が出て欲しくない時は、 user-select: none; しましょう。 user-select - CSS: カスケーディングスタ ...
Sentry には Next.js 用のパッケージがありますが、ここでは React.js 版のパッケージを導入します。 Next.js 用パッケージの説明にもありますが、Next.js 版は @sentry/react と @sentry/node をラッ ...
（実施した時のメモ） Java をインストールする # Homebrew で openjdk をインストールする。 openjdk — Homebrew Formulae https://formulae.brew.sh/formula/openjdk brew install openjdk インストール中に以下のメッセージが表示される。 For the system Java wrappers ...
（公式ドキュメントを見るのが早いです。） クロスオリジン リソース シェアリング（CORS）の構成 | Cloud Storage | Google Cloud ウェブでファイルをダウンロードする | ...
あるとき、Cloud Storage に動画がアップロードされことを起点に Cloud Functions のトリガーを動かし、そのトリガーで FFmpeg を利用してサムネイルを作りつつ、GCP の Transcoder ...
例えば MP4 形式の動画を HLS 形式に変換する場合、AWS ならば Elemental MediaConvert があります。 では、GCP 上にサービスを構築している場合はどうしましょう？ GCP では 2020 年 ...
（正直、公式ドキュメント見れば済む話です。） https://firebase.google.com/docs/analytics/get-started 有効化する # 以下の手順で有効化します。 Firebase コンソール > プロジェクト設定 > 統合 > Google Analytics > 有効にする 紐 ...
例えばあなたの Firebase プロジェクトに、画像を格納するバケットと、動画を格納するバケットがあるとした場合、各設定ファイルは以下のようになるはずです。 ...