TypeScript
JavaScript / TypeScript の高速な Rust 実装コンパイラーである SWC ですが、特定バージョン以前だとデコレーター・クラス周りの処理があるらしく、 デコレーター・クラス周りの処理をバリバリ使っている class-transformer を使用していると、以下のような…
みなさん Git LFS を使用していますか？ わたしは VRChat のアバタープロジェクトをまるまる GitHub へあげているついでに、 Git LFS で 3D モデルやテクスチャーも状態を保存しています。 そこで困るのが、 GitHub のストレージ課金です。 50GB で 60USD/ye…
クラスやらオブジェクトのメンバーがすべて undefined かどうか調べたいときは以下のコードで出来る。 const obj = { a: undefined, b: undefined, c: undefined, }; const obj1 = { ...obj }; const obj2 = { ...obj, d: null }; const checkAllMembersAreU…
Git LFS のプロキシサーバーを Vercel に投げつけたんですが、そのとき req.body が undefined だったので、その対処法としての方法を紹介します。 Express (Vercel) を使ってる場合、 app.use(express.json()) で JSON に対応できるようになっています。 し…
ここ最近は Unity の記事ばかりでしたが、今回は Node.js のお話と言うことで、最近お気に入りのライブラリー、 contentlayer について紹介します。 contentlayer は名前の通り、 Next.js などのコンテンツ周りを良い感じに取得してくれたり、コンパイルして…
このブログは互換性重視なので、極力通常の Markdown を書いているのですが、例えばドキュメントサイトとかだと、 React Component を扱えると便利なケースがあります。 よくあるパターンだと、タブとかそういうものですね。 ということで、 Next.js で MDX …
このブログでは react-syntax-highlighter を使っているのですが、下のような形式の場合 ```javascript:next.config.js module.exports = { } ``` つまりは、言語名の後に :filename という形で指定された場合、ファイル名として表示する実装をしています。 …
下のような型をもつ変数 obj が提供されていて、 これが number なのか number[] なのかを区別したいとき。 type Value<T> = T | readonly T[] | undefined | null; declare const obj: Value<number>; こういう文法が使えるのを必要がなかったので知らなかったのだけど</number></t>…
TypeScript の tsconfig.json に paths という機能があります。 簡単に言うと、以下のようなことが出来る機能です。 // paths を使わない import SomeModule from "../../Baz"; // paths を使う import SomeModule from "@/components/Baz" ただし、この機能…
例えば下のようなコンポーネントがあって、 import colors from "colors.css"; import styled from "styled-components"; type Props = { primary?: boolean; }; const Button = styled.button<Props>` border: 1px solid ${(props) => (props.primary ? colors.blu</props>…
どういうことかと言われると、こんな感じ。 ある関数 A はパラメータに指定された文字列によって返すクラスが異なる 上記関数 A を良い感じに型付けしたい 自分にはこんな感じの型定義しか思いつかなかった。 class ClassA { ... } class ClassB { ... } typ…
ブログネタ何か欲しいとつぶやいたら、「AWS CDK で何か書いて」とネタをもらったので、 AWS CDK でのデプロイを自動化しました。 自動化は正義です。 前提 : AWS CDK 0.18.1 (TypeScript) CircleCI GitHub に push したら、良い感じに cdk deploy が走るよ…
aws-cdk の更新をそこそこウォッチしているのですが、 最近のアップデートでファイルを投げることに対応していたので、やってみようと思います。 AWS CDK 自体の説明については、こちらの記事が詳しいです。 【awslabs 探訪】AWS Cloud Development Kit (AWS…
Vuex で Firebase を良い感じに扱えるようにしてくれる VuexFire と、 TypeScript で Vuex モジュールを良い感じにかけるようにしてくれる Vue Type Helper 、 それぞれを同時に使って、型チェックや保管が効く状態で扱いたかった。 通常通り書くならこんな…
Firestore には RDB の外部キー制約的な雰囲気の参照型 (reference) が使えます。 Node.js (firebase-admin) から、参照型のデータを追加するには、以下のようにします。 import { firestore } from "firebase-admin"; import { v4 as uuid } from "uuid"; c…
Electron + React で開発してて、 WebView を使いたいってことがあったけど、 普通に追加するだけだったら駄目だったので、やり方のメモ。 結論としては、 React.createElement で埋め込むんじゃなく、 DOM 操作で追加しました。 ネット上の過去の記事をみる…
TypeScript + Node.js でアプリを作っているのですが、テストのカバレッジを取得して、 GitHub にて、そのバッジを README.md に表示してみようという試み。 TypeScript + Node.js だけじゃなく、 JavaScript でもいけます。 前提条件としては、下の通り。 T…
ぐぐったら、すでにあったけど、私はこの方法で解決したぜ！というメモで。 TypeScript で redux-thunk を使おうとすると、エラーが出ます。 具体的には、こんな時にエラーが出ます。 /// <reference path="../typings/tsd.d.ts" /> import { createStore, applyMiddleware } from 'redux'; import th</reference>…
１週間でモバイルアプリを作る必要性が出てきてしまったので、 さくっと作れそうな React Native でやってみます。 React Native は、 React.js を使って、 iOS, Android のネイティブなアプリが作れてしまう 正直意味分からないフレームワーク。 いつぞやに…
どうやら、 TypeScript には async/await があるらしいので、早速使ってみる async/await の構文は、だいたい C# と同じ。 async waitAsync(waitTime: number) { await wait(waitTime); } wait(waitTime: number) { return new Promise((resolve) => setTime…
Electron + TypeScript で開発しているのですが、 いちいちコンパイルし直すのがめんどくさいので、 gulp で自動化してみます。 まず、ディレクトリ構成としては、こんな感じを想定しています。 / ............... ルートディレクトリ |- app .......... 出…
