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

新しい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文を使わず…

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

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

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

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

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

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…

たとえば、以下のようなジェネリクスを使ったコンポーネントを考えます。 <Component<string> prop1="string" prop2="string" ref={ref} /> Component の prop1 と prop2 は同じ T 型とします(上の例では T は string)。 ref がなければカンタンに実装できる ref さえなければ</component<string>…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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