Panda Noir

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

TypeScript

型レベルでPermutationする

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

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

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

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

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

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

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

Reactのリハビリがてらアプリ作った記録

卒業研究とか部活に追われてあまりReactとか触れていなかったのでリハビリのつもりでやった。1日でガーッと書いたときの記録。コケたところとかも(どうせ後でまた同じところでコケるので)記録しておく。 どういうアプリ? graphemesplitという、Unicodeで1文…

そもそも静的型付けって?TypeScript入門以前の話

みなさんは「型」についてご存知でしょうか?「intとかcharみたいなアレでしょ?」くらいの知識はあるかと思います。今回の記事では型についての種々の疑問について解説して行きたいと思います。 そもそも型とは? 型があるとなんで嬉しいの? 静的型付け・…

JavaScriptの環境構築あれこれ

JavaScriptの環境を構築するのがつらくて辛くて仕方がないのでチートシートを作ることにしました。やや長くなったので目次をつけます。 Webpack関連 WebpackのローダーとBabelの役割分担 Webpackのインストール ts-loader ts-loaderはJSXも扱える vue-loader…

超!体系的に学ぶWebアプリケーション開発

この記事はWebサーバーを建てるところからWebアプリケーションを開発できるようになることを目標としています。 目次 目次 この記事の目標 [超!基本] Webページが表示されるまで HTMLとは? JavaScriptとは? [超!Webサーバー] Webサーバーとは? ファイア…

Reactで<dialog>いじってみたけどつらい件

みなさん<dialog>要素を知っていますか?HTML5.2で追加された要素で、モーダルウィンドウをカンタンに実装できるステキ要素です。これをReactから使おうとしてみたのですが、Flux的なやり方ができなくて辛かったです。 …というだけの記事です。 この記事の環境 この</dialog>…

TypeScriptで作ったライブラリをブラウザ対応、CommonJS対応させる

(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください) 結構試行錯誤したのでメモ。 全ての元凶(?) 最近の行儀のよい JavaScript の書き方 はじめはこの記事のやり方をTypeScriptに流用しようとしました。…