March 3, 2022
iOS シミュレータ # シミュレータを起動する # open -a Simulator または open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app シミュレータからアクセスする # シミュレータ上で Safari を開く。 例えば localhost:5500 で起動しているサーバ
...
March 2, 2022
本格的なアプリを作成する場合は Sentry などのサービスを使うことが多いと思います。 そこまでは必要ないけれど、エラーログの仕組みをマニュアルで簡易的に
...
March 1, 2022
こんな配列があるとして、 const items = ['hello', null, 'world']; こうしても、残念ながら型はうまくフィルタリングされません。 const filtered = items.filter((item) => item !== null); // filtered: (string | null)[] ですので、Type Guard
...
February 28, 2022
なんとなく MDN で JavaScript の式と演算子の一覧を眺めていたら目に入ったのが「カンマ演算子(,)」です。恥ずかしながら今回初めて知りました。 カンマ演算子 (,)
...
February 27, 2022
例えば Window.alert() のように、ユーザがボタンをクリックするまでの間、処理を止めたい場面があったとします。 このとき、パッと思いつくのは、 ビジーウェイトする
...
February 26, 2022
Redux はもう使っていないが、ソースコード配置の考え方はどのプロジェクトでも役に立っているのでここにメモ。 Since Redux is just a data store library, it has no direct opinion on how your project should be structured.
...
February 25, 2022
本記事では React コンポーネントを用いて説明していますが、本記事の内容は通常の HTML / CSS だけで実現可能です。 text-overflow: ellipsis; を機能させるためには以下の CSS をすべて指
...
February 24, 2022
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
...
February 23, 2022
ジェネリック型を引数にとる関数の戻り値の型を取得すると、結果は以下のようになります。 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>;
...
February 22, 2022
こんな型があるとします。 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;
...
February 21, 2022
試行その1 # 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 <></>; } 結果その1 # コンソールには以下の順番で出力されます。 undefined 2 初回レ
...
February 20, 2022
関数の実行結果として別の関数が return されるようなケースがあります。 例えばイベントリスナーに処理を登録して、その結果としてリスナーを解除するための
...
February 19, 2022
コールバック Ref パターンがあまり使われていない(知られていない?)ように思われたので布教も兼ねて。 1. DOM のアタッチ時だけ処理が必要な場合 # 1-1. useRef +
...
February 18, 2022
useEffect の return など、コンポーネントのアンマウント時に実行される処理ですが、これはページを再読み込みした時には実行されません。 リロード(だったり、アド
...
February 17, 2022
Parent コンポーネントが ChildA および ChildB をインポートとしているとして、それぞれのコンポーネントで以下のように console.log() しているとどの順番に出力されるのか。 Parent.jsx import {
...
February 16, 2022
挨拶文言を定義する型があったとします。 type Greet = 'hello' | 'goodbye'; const greet: Greet = 'hello'; 文言には hello と goodbye がよく使われるものの、これだけに固定される必要はなく、話者が好きな
...
February 15, 2022
例えばスタイリングされたパーツのコンポーネントを作るとして、ある HTML 属性をプロップスで受け取るようにする場合、これまでは MDN のドキュメントを見て
...
February 13, 2022
ハマった経緯 # 最初に # これまで example.com でサイトを運営していた。 そして # これまで運営していた example.com は other.example.com としてドメインを変更して引き続きサイトを運営しつつ
...
February 12, 2022
事の発端(蛇足) # 少し前の話にはなりますが、AWS の Lightsail で運用していたワードプレスサイトがある日突然 SSL 証明書のエラーで開けなくなってしまいまし
...
February 4, 2022
タイトルでうまいこと表現できませんでしたがつまりこういう状況です。 状況 # GitHub Packages(や npmjs)に作った組織内のプライベートなパッ
...
February 3, 2022
import の from にある /(スラッシュ) の意味 # npm のパッケージを import する時に from の中でスラッシュを記述するものがある。例えば Firebase SDK はこのパターン。 import { initializeApp } from 'firebase/app';
...
February 2, 2022
例えばフロントエンドとバックエンドの両方を TypeScript で開発している場合、型定義を共有したい場面があるはず。 両方に同じコードをコピペすることで当座は解
...
February 1, 2022
SPA の優位性(ポエム) # Angular や React をはじめとした CSR ライブラリが登場して以来、SSR が登場し、SSG が登場し、ISR が登場しました。 技術の登場順に従
...
January 31, 2022
Web アプリとマジックリンクの組み合わせはなかなか難しいと思った話。 (Firebase 使用中に遭遇したのでそれをベースに書いていますが Firebase に限った
...
January 30, 2022
「難しい」というのは実装が難しいということではなく、UX の観点から本当に採用すべきか考えた方が良いケースもあるという意味です。 なおこれは Web ア
...
January 29, 2022
Google Chrome のシークレットモード(インコグニトモード)では Firebase の signInWithRedirect と signInWithPopup が機能しません。 最も遭遇しやすいであろう環境を想定して Google Chrome と記載しましたが、他の
...
January 28, 2022
Firebase で Google や Facebook といった外部認証を利用したログインを実施する場合 signInWithPopup または signInWithRedirect のメソッドを利用します。 参考:https://firebase.goog
...
January 26, 2022
日付を表す文字列があるとして、可能ならばこれを Date オブジェクトに変換したい、というような時に使える関数です。 JavaScript 版 # /** 引数を Date オブジェクトへ変換
...
January 25, 2022
こんな感じで文字列を検索したい時に使える関数をご紹介します。 const names = [ 'ほしの ユタカ', 'つきもと マコト', &
...
January 24, 2022
Android の Chrome ブラウザに存在する機能の「タップして検索(Touch to Search)」が出て欲しくない時は、 user-select: none; しましょう。 user-select - CSS: カスケーディングスタ
...