Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

軽量な summary/details を作りたい

detailsを閉じているときに DOM を消しておきたいので作りました(作成時間5分) const Details: VFC<{ summary: ReactNode; detail: () => ReactNode }> = ({ summary, detail, }) => { const [showsDetail, setShowsDetail] = useState(false); return ( <details open={showsDetail} onToggle={() => se</details>…

LINE のコーディングテストを Rust で解いてみた

Rust の練習としてLINEのコーディングをやってみました。以前からずっとやりたかったのですが、問題も長くて面倒でやってなかったんですよね(実際めんどうだった)… 今回解いた問題 以下解説していきます (注: 入出力の例が一切なく、ジャッジシステムも見当…

document.readyState と load, DOMContentLoaded のタイミングについて

結論 complete になると同時に load が発火する(仕様) interactive になったあとかつ complete になる前に DOMContentLoaded が発火する(仕様) 厳密には complete になったあとに load が発火するという仕様です。この前後関係があるため、 readystatechange…

React 18からマウント時にuseEffectが2回呼ばれる訳じゃないよ

「 で囲まれてて」「開発ビルドのときだけ」マウント時にsetup→cleanup→setupと呼び出されるようになります。 あくまで検証用途 一見、マウント時にcleanupが走るのは無駄に思えますよね?その通りです。これは合理的な理由があってこうなるわけではありませ…

React の lazy をちょっといい感じに書きたい

名前付きエクスポートされているコンポーネントを React で 動的インポートをするには、以下のように書く必要があります。 const MyComponent = lazy(() => import('./Component').then(({ MyComponent }) => ({ default: MyComponent })) ); ただ、ちょっと…

React で touchstart で preventDefault したいとき

touch イベントと mouse イベントの両方に対応したいとき、touchstart 内で preventDefault を呼び出すというテクニックがあります。こうすると、touchstart、touchend のみが発火してそのあとのmousedown、mouseup、click が発火しなくなり、touch イベント…

ここがすごいよMoonlander

Moonlander という分割キーボードを買ったのでレビュー。 ここがすごいよ Moonlander 分割であることはどうでも良くて、Moonlanderはカスタマイズ性がとんでもなく高い。これが最高。しかもカスタマイズの選択肢も豊富。おおよそキーボードに欲しい機能が全…

String Enum に重複がないことを静的型検査で保証する

数値の Enum であればかんたんに重複なく生成できます。 // 0始まりの連番を生成 const [ITEM1, ITEM2, ITEM3] = Array(10).keys(); (この例では ITEM1 などが number になってしまっています。最後にいい感じに型付けする方法をおまけで紹介しています。) …

Puppeteer の await 書きすぎ問題を多少マシにする

immer っぽい API だとうれしいなと思って書いてみました。 元となるコード (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.emulate(iPhone); await page.goto('https://example.com'); await…

E2Eテストに対して思うところ

E2Eテストを本格的にやったことがないのでしてみたいのだが、そもそもいくつか疑問があるのでここでぶちまけておく。 この記事ではwebサイトのE2Eテストを想定しています。他のケースはわかりません 結論 ユーザーの挙動をシミュレートするのは、コストが大…

React v17 からイベントリスナーの張り方変わるけど、breaking changes は抑え気味だよ

touchmove について調べてて気になったので。 React v16 まで React v16 までは、React コンポーネントに張られたイベントリスナーは ドキュメントのルート要素にすべて集約して貼られていました。そのため、React v16 までは、onTouchStart や onTouchMove …

Timers Promises API が最高

名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています!最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです!素晴らしくないですか?? top-level a…

Vite所感

ここ最近 Vite で軽くアプリ作ってたので感想。 Vite とは? 4行で書くと webアプリ開発に特化したビルドツール バンドラではない(バンドル"も"できる) 超高速 dev server & HMR もちろんプロダクションビルドもできる こんな感じ。ビルドツールなので、webp…

【Docker】 fallback 機能付きで静的コンテンツを手軽に配信する

goStatic がオススメ goStaticの特徴はこちらです。 設定ファイル不要 Go言語で書かれている 軽量コンテナ たとえば、以下のコマンド一発で fallback 機能を使いつつ静的コンテンツを配信できます。 docker run -d -p 80:8043 -v $PWD/dist:/srv/http pierre…

git branch を fzf で簡単に選択する in zsh

setopt no_flow_control __fbr() { local item git branch | fzf +s +m -e --ansi --reverse --height 40% | sed -e 's/^ *//' -e 's/^\* //' | while read item; do echo -n "${(q)item} " done local ret=$? echo return $ret } fzf-branch-widget() { LBU…

eslint-plugin-import を使ってディレクトリ単位でアクセス制限を敷く

TypeScript を使っていて、「この関数、他のディレクトリからはアクセスして欲しくないんだけどテストのために export しなきゃ行けないな…」みたいなケースありませんか?実は、ESLint でうまく設定してやると解決できます!今回はその方法を紹介します。 お…

物理キーボードに対するムカつき

最初に書いておきますがただのポエムです。 物理キーボードは Bad UX 物理キーボードは入力はしやすい。が、ctrlキーやaltキーなどを押しても、アルファベットキーたちにインタラクションが何もない。これはBad UX。 逆にソフトウェアキーボードはユーザーア…

オブジェクトのキーの型は PropertyKey 型

Mapped typesを扱う時、よくstring | number | symbolが出てきますよね?実はこれと同じ型が PropertyKeyというビルトイン型であります。 type keys = PropertyKey; // string | number | symbol 実は、これと同じものは keyof any から導出できます。ただ、…

頑張らない正規表現まとめ

はじめに 今回の記事は正規表現についてざっくりとまとめたものです。次のようなことがわかります。 正規表現とはどういったものなのか いつ使うのか 読むにはどうしたらいいのか 逆に、以下については書いていません。 アンカー、先読み、後読み 細かい文法…

1年間まいにち10コミット達成しました!

(本記事はネタ記事です) いやー2020年も終わりですね。みなさんいかがお過ごしでしょうか? 僕は今年1月に「毎日10コミットをする」という抱負を立てていました。そしてなんとこのたび、毎日10コミットを達成しました!! 実際のアカウント 仕事がある日もお…

プロパティが一つもないオブジェクト型

ちょっとした小ネタ。 type Empty1 = {}; // これはLinterに怒られる type Empty2 = {[key in string | number | symbol]: never}; // こっちはOK 使用例 APIレスポンスの返り値の型など、JSON周りでの使用パターンが多そうです。 const json = fetch('https…

esbuild だと新しいJSXトランスフォームに対応できなそう

新しいJSXトランスフォームは若干引数が異なっています。 ReactDOM.render(<App/>, document.querySelector('#main')); // ReactDOM.render(React.createElement(App, null), document.querySelector('#main')); これが下のようになります。 ReactDOM.render(<App/>, doc</app/></app/>…

デフォルト引数を悪用して変数宣言を減らす

const state = reactive({ count: 42, flag: true, str: 'hello world', computed: computed(() => { const {count, flag, str} = state; return flag ? count : str; }), }); このような Vue3 のコードがあったとします。このとき、わざわざconst文を使わず…

型レベルでPermutationする

こんな感じの型です type Fuyu = Permutation<'あんたは' | 'ここで' | 'ふゆと' | '死ぬのよ'>; // ['あんたは', 'ここで', 'ふゆと', '死ぬのよ'] | ['あんたは', 'ここで', '死ぬのよ', 'ふゆと'] | ['あんたは', 'ふゆと', 'ここで', '死ぬのよ'] | ... …

ドラッグカメラぐるぐるをCSSでする

名前がよくわかりませんが、動作を見てもらえれば一発でわかると思います。 youtu.be ドラッグによるカメラコントロールというのでしょうか? やり方 方針 ドラッグ開始地点からの差分にもとづいてX軸、Y軸の回転を計算します。 このような感じです。asin(移…

Let's Encrypt の発行方法まとめ

未だに迷うのでまとめる。 どのオプションを使うべきか? 既存のウェブサーバーをそのまま使う やり方 /.well-known/acme-challenge へのアクセスを設定する 特徴 やり方 standalone なウェブサーバーを建てる 特徴 DNS で TXT レコードを貼る方法 特徴 やり…

ルービックキューブ用ライブラリを作りました

github.com 概要 TypeScript で書かれています d.tsファイルを同梱しています テストカバレッジは99%です ルービックキューブの回転をシミュレートできます 回転記号の表記ゆれにも対応しています インストール npmで公開しています。 $ npm install @pandan…

npm publishの練習をするならverdaccio + docker

みなさん、npm publish、怖くないですか??? npmでライブラリ公開したときに踏みつけた地雷7つ - Panda Noir npmでアップデートするときに踏みがちな3つの落とし穴 - Panda Noir 僕はもうトラウマだらけです。怖いです。しかし、いつかは克服しなければい…

esbuild なら React の playground が5秒で出来る!!!!!

esbuild はプラグインなしで JSX・TSXをコンパイルできるから、React のプレイグラウンドがすぐ作れる!! $ npm init --yes $ npm i esbuild react react-dom $ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=ou…

React.forwardRef でジェネリクスを使いたい

たとえば、以下のようなコンポーネントを考えます。 <Hoge callback={callback} argument={argument} ref={ref}/> Hogeコンポーネントは、argumentの型とcallbackの引数の型が一致してほしいです。 ref がない場合の実装 refさえなければ簡単に実装できます。 type FunctionType = (...args: any) => any; type Props<T extends FunctionType> =</t></hoge>…