Panda Noir

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

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

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…