Panda Noir

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

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>…

Record & Tuple Proposal がすごい話

github.com このプロポーザルの話です(2020年8月現在Stage2) どういうプロポーザルか? Record と Tuple は、簡単にいうとプリミティブ的なオブジェクトと配列です。どういうことかというと、次のようなことができるようになります。 [1, 2, 3] !== [1, 2, 3…

めんどうくさがりのためのコンマ演算子を使ったデバッグ術

,演算子(コンマ演算子)を利用したデバッグ方法を紹介します。 返り値をすり替える たとえば、ある関数の返り値を固定したくなる場面はよくあります。そういうとき、下のように書いてしまうとLinterに怒られがちです。 const isABTarget = () => { return tru…

Docker でデプロイをする方法

いくつかあるのですが、「これだ!」みたいな方法が意外と見当たらなかったので書きます。 Docker を使ったデプロイにはいくつか方法があります。 リモートへログインして Docker Hub 経由でイメージを取得してデプロイ ローカルからリモートの docker daemo…

正規表現の|のとき、周りは囲わなくて良い

一発ネタですが、意外と直感的じゃないので。 /(a|b|c)/ 上の正規表現は、キャプチャをあとで使わない場合、以下と同じです /a|b|c/ /(?:a|b|c)/ ただし、前後になにかくっついている場合はもちろん異なります。 /(a|b|c)x/ /a|b|cx/ // これとは同じでない

Docker で最速で nginxサーバーを立てる

サンプルリポジトリ 記事で紹介した内容をリポジトリにあげてあります。よろしければ参考にしてください。 github.com nginx イメージを使う たったこれだけでカレントディレクトリのpublicフォルダを公開するウェブサーバーを建てられます。 $ docker run -…

auth_requestをするときは変数に注意

3 時間くらいハマったのでメモしておきます。 ハマった状況 以下のようなコードを書いたら、変数が上書きされてうまくいきませんでした。 location /private { auth_request /auth/is_logged_in; resolver 127.0.0.11; set $upstream_server private; proxy_…

dependencies と devDependencies の使い分け

混乱しがちだったのでまとめました。 なぜ使い分けたいのか? ウェブアプリケーション開発においては、本番環境で不要なパッケージをインストールせずに済むからです。npm には dependencies に書かれたパッケージのみインストールする機能があるので、これ…

Defx.nvim でプレビューウィンドウを自動的に閉じる

Defx.nvim には floating window を使ったイカしたプレビュー機能があります。しかし、何も設定をしていないと、defx を閉じたあともプレビューウィンドウは残ります。この記事は autocmd を活用してプレビューをうまく消そうという記事です。 Defx を閉じた…

.eslintrcを別フォルダに移す

ルートディレクトリにコンフィグファイルがちらばっていると気になりませんか?僕はとても気になります。そこで、設定ファイルを別ディレクトリへ移す方法をご紹介します。 package.jsonに追記するだけで良い たとえば.config/eslintrc.jsへ移動させたとしま…

Vue3に書き直してみる

Vue2からVue3へ書き直す際に情報が不足していて困ったのでまとめておきます。 公式ドキュメント まだversion3の公式ドキュメントは揃っていません。マージされたPRかRFCを見るしかない状況です。 migrate from v2 to v3 ※「これだけ押さえれば7割くらいは移…

TypeScriptで配列からnullを取り除く

結論 const a = [1, 2, 3, null]; // nullとundefinedをはじく const filtered = a.filter(<T>(n: T): n is NonNullable<T> => n != null); // nullだけはじく const filtered2 = a.filter(<T>(n: T): n is Exclude<T, null> => n !== null); nullを除いた配列の型 nullを許容</t,></t></t></t>…

lower_bound、upper_boundで個数を数える

条件 コード xより大きい v.end() - upper_bound(v.begin(), v.end(), x) x以上 v.end() - lower_bound(v.begin(), v.end(), x) xである upper_bound(v.begin(), v.end(), x) - lower_bound(v.begin(), v.end(), x) x以下 upper_bound(v.begin(), v.end(), x…

{}は簡易Symbolにできる

Symbolの使い方として、たとえば独自の特殊値を持ちたいと言うものがあります。 // myFind: 配列と関数を受け取り、 // 関数を満たす要素が見つかればその要素、 // 見つからなければnullを返す const myFind = (arr, f) => { for (let i = 0; i < arr.lengt…

差分リスト(Difference List)について

Difference Listとは? その名の通り、差分(difference)リストです。差分リストはListのappendのパフォーマンスが結合に依存する問題を解消します。 Listのappendは結合順によって計算量が異なる appendは結合順を変えても意味としては同じです。しかし、con…

MapとObjectの違い

ES2015でMapが追加されました。パッと見Objectっぽいですよね。本記事ではどこが違い、どういう用途で使うのか解説したいと思います。

React ref解説

refとは? refとはReference(参照)のことです。ミュータブルな値を管理するときに使います。 refの使いみちの最たるものはDOMへのアクセスです。たとえばinput要素が持つfocusメソッドを呼びたいときにrefを使います。 const App = () => { const ref = useR…

イトーキF レビュー

中古でイトーキのFというオフィスチェアを購入したのでレビューです。 感想 すごくいいです。座椅子でずっと作業してたのですが、苦労が全てなくなりました。 ヘッドレストがないモデルですが、あまり気になりません。ディスプレイを買ったので下を向いて作…

10文字ごとに文字列を区切って配列にする

※改行については特に規定していません '01234567890123456789012345'.match(/.{1,10}|^/ug); // ['0123456789', '0123456789', '012345'] 解説 まず始めのところが1文字以上10文字以下の部分にマッチしてくれます。うしろの|^の部分で空文字を渡されたときに…

HHKB所感

HHKB HYBRID Type-Sを買ったのでレビューします。 所感 ノートのキーボードより打ちやすい Bluetooth接続でも遅延をほとんど感じない Fnキーは気にならないが、チルダキーの位置がとんでもないのでつらい Ctrl + Shift + Spaceで入力切り替えというのはやっ…

TypeScriptのExcludeはなぜT extends K ? never : Tで実装できるのか?

直感に反しているExclude型についてconditional typeの話をしつつ解説します。 Exclude型とは? Union型から特定の要素を取り除く型です。ある型から特定のプロパティを取り除きたいときに使えます。 interface Person { name: string; age: number; country…

JavaScriptでPriorityQueue

優先度付きキューを実装する必要に駆られたので書きました。 実装 TypeScript class PriorityQueue<T> { private container: T[] = []; private size = 0; private comp: (a: T, b: T) => boolean; constructor(comp = (a: T, b: T) => a < b) { this.comp = co</t>…