
ウェブサイトをリニューアルしました(SSG から RSC へ)
ウェブサイトのアーキテクチャを見直し、SSG から React Server Components を前提とした構成へ移行しました。あわせてランタイムを Node.js から Deno に変更し、コンテンツ管理方法も刷新しています。
プログラミング、Web開発、クラウドなどの最新IT情報や技術記事など現役エンジニアが実務で役立つ知識を提供します。

ウェブサイトのアーキテクチャを見直し、SSG から React Server Components を前提とした構成へ移行しました。あわせてランタイムを Node.js から Deno に変更し、コンテンツ管理方法も刷新しています。

AWS Lambda を Deno ランタイムで動かす方法を紹介します。デプロイには AWS CDK を用い、マルチランタイムなプロジェクト構成で解説しています。また、コールドスタートを抑制するため、JavaScript へバンドルする方法を紹介しています。

文字列からランタイムで利用できる Module を取り出す方法を紹介します。Editor と共に利用することで、ブラウザ上で新たな体験を提供できるかもしれません。

import assertions について Deno での使用法を中心としてまとめています。Deno 1.17 からサポートされたこの構文を使用し、JSON modules を安全に扱えるようになりました。Chrome でいち早く実装された CSS Module Scripts についても解説します。

dnt は Deno ベースのコードから Node.js 用のコードを生成するビルドツールです。dnt の使い方と、Deno および Node.js のモジュールを開発するデュアルモジュール開発について紹介します。

TypeScriptで 'string' | string を定義する方法を紹介します。通常はstring型にアップキャストされてしまいますが、ハッキーな方法でこれを解決します。

vite と tailwindcss を使ってライブラリ開発を行う方法を紹介します。型定義ファイルの生成やCSS Modules の組み込みなど、ライブラリ開発に必要なビルド環境を構築します。

React で Intersection Observer を使ったパフォーマンス改善方法を紹介します。React.lazy 関数と併用することで、コンポーネントのレンダリングをオンデマンドで行います。

Firebase Cloud Messaging(FCM) でウェブプッシュ通知の送受信をします。プッシュサービスを含むプッシュ通知を取り巻く全体像を広く浅く解説します。通知メッセージのクリック処理や、ユーザートークンの削除についても触れています。

Firebase Authentication を Service Worker で使う方法を紹介します。また、Service Worker とのメッセージングについて解説し、Service Worker とユーザーIDを共有する方法を紹介します。

Cloud Functions for Firebaseでオンラインモードのテスト方法を紹介します。例としてサインアップされた時に、そのユーザー情報をデータベースに保存するテストを挙げ、Firebase のリソースをまたいだテストを行います。

Bitlyで短縮URLを動的に生成する方法を紹介します。また、ツイートは短縮URLの有効な利用先なため、動的なツイートの方法も合わせて解説します。

新しい Firebase モジュールによって、どのくらいバンドルサイズが削減できるか解説します。Firebase モジュールの中でも、特に利用頻度の高い Cloud Firestore と Authentication のバンドルサイズを中心に解説しています。

プログラムからツイッターのAPIを使ってツイートする方法を紹介します。TypeScript-firstな Twitter クライアントとして twitter-api-v2 を用いて実際にツイートを行い、エラー処理についても解説しています。

Gatsby で configファイルの完全 TypeScript化について解説します。Config ファイルのそれぞれの実行環境やモジュールシステムの違いについて触れ、gatsby-ssrの特殊性についても解説しています。

StorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。

TypeScriptで排他的なプロパティを定義する方法を紹介します。排他的なプロパティが必要な背景や、それを支えるDiscriminated Unionについて説明しています。また、reactで排他的なpropsを使って、UIフレームワークがどう型安全になるのかを示します。

技術ブログのコメントシステムにおすすめなutterancesというプロジェクトを紹介します。またutterancesを コンポーネントとして扱える utterances-componentというプロジェクトの紹介もします。

TypeScriptで型安全にリスト構造の先頭要素を取得する方法を紹介します。また、Conditional Typesやinferシグネチャ、データ構造のパターンマッチング、オーバーロードといったTypeScriptの型システムの力を引き出すこれらの要素についても解説しています。

fetchを使ったHTTPリクエストを中断する方法を紹介します。中断後の処理や、複数のHTTPリクエストの一括中断の方法など、実践的なケースにも触れ、正しいエラーハンドリングについて説明します。

JestでTable Driven Testsをする方法を紹介します。Jestでは配列形式と、タグ付きテンプレートリテラル形式でテストを書けるので、2つの記述法を解説します。また、TypeScriptで書いた場合の型推論と、アサーションの方法についても紹介します。

Jestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。

No bundleツールのViteを使って、TypescriptでのVue3環境を構築します。ESLintやPrettierの設定もあわせて行い、DXの高い環境を構築します。

ViteプロジェクトでCSSフレームワークのTailwind CSSを導入する方法を紹介します。ついでに、Tailwind CSS用のStylelintのルールやVSCodeの設定をします。

No bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。

TypescriptプロジェクトをパッケージとしてNPMレジストリへ公開する方法を説明します。パッケージマネジャーにNPM、Yarnを使っている場合を想定しています。

Typescriptでアロー関数の戻り値の型をより正確に推論する方法を紹介します。ジェネリクスやConditional Types、Union Distributionについて解説します。

VitePress の基本的な使い方から、ドキュメントにはまだ記載のない多言語対応、ホームページレイアウト、メタタグのインジェクション、カスタムコンポーネント、カスタム CSS の適応方法ついて紹介します。

プログラムからファイルダイアログを呼び出し、FileListを受け取る方法を解説する