VS Code でテストコードをビルド対象から除外しつつエディタ上でエラーを出す

他の人がどうしてるのか気になって調べたんですが、それっぽい記事が見つからなかったので解決策を簡単に書いておきます。 目的 VS Code は TypeScript のコンパイラオプションを ./tsconfig.json から読み込んでおり、そのパスを指定するための設定もありません。テストコードを書くプロジェクトでは /tests//* などを ./tsconfig.json の exclude に指定してビルド対象から除外すると思いますが、そうすると VS Code 上でも検出対象から外れてしまい、エディタ上でエラーなどが表示されなくなってしまいます。この記事ではこれを解決します。 方法 ....

undefined と null、どちらに寄せるべきか

JavaScript / TypeScript で nullish な値を表現する場合、undefined または null を使うことになると思いますが、どちらに寄せるべきなのかを考えてみます。 結論 可能な限り undefined も null も発生させない設計にし、どうしても nullish な値を扱いたい場合は null を使うのが最善だと思っています。 undefined が発生するケース undefined が発生するケースの例をいくつか挙げてみます。 変数が初期化されていない場合 let foo; foo; // undefined オブジェクトで optional なプロパテ...

ニコニコ風にテキストを表示する React Hooks

ニコニコ動画・ニコニコ生放送のように、テキストをオーバーレイして流す React Hooks ライブラリ react-niconico を作ったので紹介します。 デモ: https://react-niconico.vercel.app/ 使い方 useNiconico という Hooks を提供しています。useNiconico は [MutableRefObject, (text: string) => void] なタプルを返します。ref を任意の要素に設定し、emitText に任意のテキストを渡すことでその要素上にテキストを流すことができます。 この例では video 要素に re...

画像から点字 AA を生成するツールを作った話

画像から点字 AA を生成する Node.js のライブラリ tenjify と、それの Web アプリ tenjify-web を作ったので紹介します。 目的 Twitch でたまに流れてくる、点字を使った AA を画像から自動で生成したい。 ↓ こんな感じのやつ ⣿⣿⣿⣿⣿⣿⣿⣿⠿⠛⠛⢛⣉⣩⣤⣬⣉⣉⣉⠛⠛⠿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⠿⠋⣀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣈⠻⢿⣿⣿⣿⣿⣿ ⣿⣿⣿⠟⢁⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⡙⠿⣿⣿⣿ ⣿⣿⠏⢠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠙⢻⣷⡆⠹⣿⣿ ⣿⡇⢠⣿⣿⣿⣿⣿⣿⡟⠋⠛⢻⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⣀⣴⣿⣿⡄⢹⣿ ⡟⢀⣿⣿⣿⣿⣿⣿⣿⣧⣀...

最近作った型パズルの作品

最近作った TypeScript で作った型パズルの作品を紹介します。Template Literal Types を使ってみたくて作っただけなので、特に目的や用途は無いです。 calc-ts 前回の記事で紹介した型レベル電卓です。次のような簡単な四則演算ができます。詳しくは記事を参照。 import type { Calculate } from "calc-ts"; type Result = Calculate; // 14 bfts 型レベル Brainfuck インタプリタです。Brainfuck に明確な言語仕様はありませんが、Wikipedia によると配列(メモリ)の大きさは ...

TypeScript で実装する型レベル電卓

これは TypeScript Advent Calendar 2020 の 13 日目の記事です。 何番煎じかわかりませんが、TypeScript 4.1 が正式にリリースされ Template Literal Types と Recursive Conditional Types が使えるようになったことでより複雑な型を表現できるようになったので実装してみます。 この記事の目標は、次のような型を実装することです。 type Result1 = Calculate; // 3 type Result2 = Calculate; // 8 type Result3 = Calculate; //...

TypeScript で書かれたパッケージを GitHub で公開する方法を考える

npm コマンド、yarn コマンドでは、次のようにして GitHub 上のリポジトリからパッケージをインストールできます。 $ npm install githubname/reponame $ npm install githubname/reponame#branchname $ yarn add githubname/reponame $ yarn add githubname/reponame#branchname npm には公開したくない(するほどでもない)ような自作パッケージは GitHub でのみ公開したいということもあるかと思います。しかし、TypeScript で書かれた...

役に立つかもしれない TypeScript の Extract の使い方

TypeScript で、特定の型であることが明確なのに推論されないことがあります。 type Foo = { value: number; }; type TopFooValueType = A extends [infer F, ...infer _] ? F["value"] : never; // Type '"value"' cannot be used to index type 'F'.ts(2536) // F は Foo 型のはずなのにエラーになる。 このようなケースでは、 次のようにして F が Foo を満たすことを確認することでエラーはなくなります。 type TopF...

RSS フィードに対応した

このサイトの記事が RSS フィードで購読できるようになりました。次の URL をフィードリーダーに追加することで購読できます。 https://dqn.fish/feed.xml 実装の話など Nuxt.js には feed-module、Gatsby には gatsby-plugin-feed などのライブラリがあり比較的簡単に RSS フィードを導入できるようですが、Next.js にそのようなものは見当たらず、自前で XML を作成し public ディレクトリに吐くスクリプトを用意しました。Gatsby の存在があるので Next.js ではこのあたりはあまり充実していないのでしょう...

Brainfuck にコンパイル可能な高水準言語を作った話

少し前に Bigbrain という自作言語を作ったので紹介します。この言語は Brainfuck にコンパイルされます。ソースコードは GitHub で公開されています。 https://github.com/dqn/bigbrain Bigbrain という名前は、知的であることを意味する「Big brain」というスラングが由来です。 例 次のような Bigbrain のコードをコンパイルすると、 x = 30; for (i = 1; i >>+++++-]>[>>+[-]+>[+>-]+>+>[>-]>>+>+>>>[>>>-]>+>+>>[>>-]+>>-[>-]-[+>>+>>[>...

HTTP クライアントを実装した話

簡単な HTTP クライアントを実装してみたので、紹介します。この記事での目標は、次のことができるようになることです。 基本的な HTTP メソッドでのリクエスト GET、POST、PUT、DELETE 分割されたレスポンスの読み取り Chunk 化されたレスポンスの読み取り JSON、 FormData を使ったリクエスト リダイレクトの対応 HTTPS のサポート ソースコードを概観したい方は、自分のリポジトリを見ることができます。Node.js + TypeScript で書かれています。 dqn/rqn HTTP の書式 はじめに、HTTP についていくつか知っておく必要があります。H...

このサイトについて

このサイトでは技術についての記事を投稿していく予定です。いままで別のプラットフォームで記事は何件か投稿していましたが、以下の理由で個人の技術ブログを始めてみることにしました。 はてなブログ、Qiita、Zenn、Scrapbox など投稿先が分散していたので、統一したい 「いいね」の数を気にせず、気軽にアウトプットしたい 慣れているエディタで、textlint を走らせながら快適に執筆したい Web エンジニアとして、個人サイトを持っておきたい 他のプラットフォームで投稿されている記事は、内容を改め少しずつこのブログにも投稿していこうと思います。また、他のプラットフォームでの投稿を完全に止める...