ウェブサイトをリニューアルしました（SSG から RSC へ）
ウェブサイトのアーキテクチャを見直し、SSG から React Server Components を前提とした構成へ移行しました。あわせてランタイムを Node.js から Deno に変更し、コンテンツ管理方法も刷新しています。
ブログ
プログラミング、Web開発、クラウドなどの最新IT情報や技術記事など現役エンジニアが実務で役立つ知識を提供します。
AWS LambdaのカスタムランタイムでDenoを動かす
AWS Lambda を Deno ランタイムで動かす方法を紹介します。デプロイには AWS CDK を用い、マルチランタイムなプロジェクト構成で解説しています。また、コールドスタートを抑制するため、JavaScript へバンドルする方法を紹介しています。
文字列を JavaScript モジュールとしてインポートする
文字列からランタイムで利用できる Module を取り出す方法を紹介します。Editor と共に利用することで、ブラウザ上で新たな体験を提供できるかもしれません。
import assertionsとJSON modulesまとめ
import assertions について Deno での使用法を中心としてまとめています。Deno 1.17 からサポートされたこの構文を使用し、JSON modules を安全に扱えるようになりました。Chrome でいち早く実装された CSS Module Scripts についても解説します。
dntでDeno-firstなデュアルモジュールを作る
dnt は Deno ベースのコードから Node.js 用のコードを生成するビルドツールです。dnt の使い方と、Deno および Node.js のモジュールを開発するデュアルモジュール開発について紹介します。
TypeScriptで特定の文字列または全ての文字列を定義する
TypeScriptで 'string' | string を定義する方法を紹介します。通常はstring型にアップキャストされてしまいますが、ハッキーな方法でこれを解決します。
viteとtailwindcssでフロントエンドライブラリを開発する
vite と tailwindcss を使ってライブラリ開発を行う方法を紹介します。型定義ファイルの生成やCSS Modules の組み込みなど、ライブラリ開発に必要なビルド環境を構築します。
Intersection Observer と React.lazy でパフォーマンス改善
React で Intersection Observer を使ったパフォーマンス改善方法を紹介します。React.lazy 関数と併用することで、コンポーネントのレンダリングをオンデマンドで行います。
Firebase Cloud Messaging でウェブプッシュ通知する
Firebase Cloud Messaging(FCM) でウェブプッシュ通知の送受信をします。プッシュサービスを含むプッシュ通知を取り巻く全体像を広く浅く解説します。通知メッセージのクリック処理や、ユーザートークンの削除についても触れています。
Service Workerで Firebase Authenticationの匿名認証する
Firebase Authentication を Service Worker で使う方法を紹介します。また、Service Worker とのメッセージングについて解説し、Service Worker とユーザーIDを共有する方法を紹介します。
Cloud Functions for Firebase でオンラインテストする
Cloud Functions for Firebaseでオンラインモードのテスト方法を紹介します。例としてサインアップされた時に、そのユーザー情報をデータベースに保存するテストを挙げ、Firebase のリソースをまたいだテストを行います。
Bitlyで動的に短縮 URLを作成してツイートする
Bitlyで短縮URLを動的に生成する方法を紹介します。また、ツイートは短縮URLの有効な利用先なため、動的なツイートの方法も合わせて解説します。
Firebase のモジュラーSDKでバンドルサイズ比較
新しい Firebase モジュールによって、どのくらいバンドルサイズが削減できるか解説します。Firebase モジュールの中でも、特に利用頻度の高い Cloud Firestore と Authentication のバンドルサイズを中心に解説しています。
TypeScriptで型安全にツイートする
プログラムからツイッターのAPIを使ってツイートする方法を紹介します。TypeScript-firstな Twitter クライアントとして twitter-api-v2 を用いて実際にツイートを行い、エラー処理についても解説しています。
Gatsby で config ファイルを TypeScript化する
Gatsby で configファイルの完全 TypeScript化について解説します。Config ファイルのそれぞれの実行環境やモジュールシステムの違いについて触れ、gatsby-ssrの特殊性についても解説しています。
StorybookでバンドラーにViteを使う
StorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。
TypeScriptで排他的なプロパティを定義する
TypeScriptで排他的なプロパティを定義する方法を紹介します。排他的なプロパティが必要な背景や、それを支えるDiscriminated Unionについて説明しています。また、reactで排他的なpropsを使って、UIフレームワークがどう型安全になるのかを示します。
技術ブログのコメントシステムはutterancesがいい感じ
技術ブログのコメントシステムにおすすめなutterancesというプロジェクトを紹介します。またutterancesを コンポーネントとして扱える utterances-componentというプロジェクトの紹介もします。
TypeScriptで型安全に配列の要素を取得する
TypeScriptで型安全にリスト構造の先頭要素を取得する方法を紹介します。また、Conditional Typesやinferシグネチャ、データ構造のパターンマッチング、オーバーロードといったTypeScriptの型システムの力を引き出すこれらの要素についても解説しています。
fetchによるHTTPリクエストをAbortControllerで中断する
fetchを使ったHTTPリクエストを中断する方法を紹介します。中断後の処理や、複数のHTTPリクエストの一括中断の方法など、実践的なケースにも触れ、正しいエラーハンドリングについて説明します。
JestでTable Driven Testsをする
JestでTable Driven Testsをする方法を紹介します。Jestでは配列形式と、タグ付きテンプレートリテラル形式でテストを書けるので、2つの記述法を解説します。また、TypeScriptで書いた場合の型推論と、アサーションの方法についても紹介します。
JestでTypeScriptを高速化する
Jestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。
ViteでVue3のTypescript環境を構築する
No bundleツールのViteを使って、TypescriptでのVue3環境を構築します。ESLintやPrettierの設定もあわせて行い、DXの高い環境を構築します。
ViteとVue3にTailwind CSSを導入する
ViteプロジェクトでCSSフレームワークのTailwind CSSを導入する方法を紹介します。ついでに、Tailwind CSS用のStylelintのルールやVSCodeの設定をします。
ViteでPreactのTypescript環境を構築する
No bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。
最小構成でTypescriptパッケージを公開する
TypescriptプロジェクトをパッケージとしてNPMレジストリへ公開する方法を説明します。パッケージマネジャーにNPM、Yarnを使っている場合を想定しています。
TypescriptのConditional Typesで関数の戻り値の型を確約する
Typescriptでアロー関数の戻り値の型をより正確に推論する方法を紹介します。ジェネリクスやConditional Types、Union Distributionについて解説します。
VitePressでドキュメントを作ろう
VitePress の基本的な使い方から、ドキュメントにはまだ記載のない多言語対応、ホームページレイアウト、メタタグのインジェクション、カスタムコンポーネント、カスタム CSS の適応方法ついて紹介します。
どこからでもファイルダイアログを呼び出したい
プログラムからファイルダイアログを呼び出し、FileListを受け取る方法を解説する