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