JavaScript でスタイルシートを構築する CSSStyleSheet
CSSStyleSheet インターフェースは、JavaScript でスタイルシートを構築し、操作するための API です。CSSStyleSheet() コンストラクターで新しいスタイルシートを作成し、.replaceSync() メソッドでスタイルを適用できます。
#JavaScript
IndexedDB と React・Dexie.js でタスク管理アプリを作ってみる
IndexedDB は、構造化されたデータをブラウザへ保存できる非同期・トランザクション型のデータベースです。この記事では素の IndexedDB API で基本的な仕組みを確認した後、React と Dexie.js でタスク管理アプリを実装します。
すぐに使える！JavaScriptの華麗な配列操作
JavaScriptで配列操作をする際には、まずはJavascriptが持つ配列のメソッドを眺めて見るとよいでしょう。JavaScriptはライブラリに頼らなくとも自前で高度な操作を可能にしてくれます。 組み込みの配列メソッドはたくさんありますが、その中で私がよく使うメソッドを紹介します。
URL が有効かどうかを判定する `URL.canParse()` メソッド
`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `try...catch` 文による判定よりも簡潔に記述できます。
streamAppendHTML() で AI の回答を HTML のままストリーミング描画する
LLM の回答を逐次描画するとき、届いた文字列全体を毎回パースして DOM を置き換える実装では、要素が作り直され続けてテキストの選択状態が失われたりします。streamAppendHTML() は WritableStream を返し、届いた HTML を要素の末尾へ順にパースします。この記事では streamAppendHTML() の使い方とサニタイズの挙動について紹介します。
イマドキのJavaScriptの書き方
JavaScriptはES2015以降から言語自体が大きく変化しました。 ES2015以降も、毎年JavaScriptはアップデートが行われており、最新の使用はES2020となっています。 このように、JavaScriptという言語は日々進化を遂げています。ES2015より前の書き方の多くが非推奨となっており、過去のWebや本の情報は現在ではあまり役に立たなくなっています。 そんなJavaScriptのイマドキの書き方を見ていきましょう。
君は return と await return の違いを理解して使っているか
`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。
Fetch API の textStream() でレスポンスをテキストとしてストリーミングする
Fetch API に textStream() メソッドが追加されました。レスポンスボディを UTF-8 のテキストとして読み出すストリームを返すメソッドで、これまで TextDecoderStream を自分で繋いでいた処理を 1 つの呼び出しに置き換えられます。この記事では従来の書き方との違いを紹介します。
Firebase③ Cloud Storage
Firebase3週目の記事です。 今回は、主に画像などのデータを保存するストレージ機能を提供するCloud Storageを取り扱います。 Vue.jsを利用したブログにサムネイル画像を設定する機能をもとに説明していきます。
Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな
Vitest は Vite ベースの JavaScript のテスティングフレームワークです。
【Svelte + TypeScript + tailwindcss】本検索サイト チュートリアル
この記事でははSvelte + TypeScript + tailwindcssで本検索サイトを作成します。 Svelteを使ってアプリケーションを作成1から作成することができます。 以下のことが学べます。 - Svelteの基礎文法 - Svelteのルーティング - Svelteのストア HTML・CSS・JavaScriptの基礎的な理解がある人が対象です。
await は Promise 以外のオブジェクトでも値を取り出せる
await キーワードは `then()` という名前のメソッドを持つオブジェクトに対して使用できます。このようなオブジェクトを thenable object と呼びます。await キーワードが Promise オブジェクトではなく thenable オブジェクトを対象としているのは、ライブラリの相互運用のためです。