transition:flyで引っかかった話
起こった現象 あるコンポーネントを使用している時にページ間を遷移したとき、 ページ遷移前のコンテンツがうっすら消え始める ページ遷移後のコンテンツがうっすら現れ始める ページ遷移前と後のコンテンツが…
View ArticleSvelteKitでパスキーを使えるようにする
概要 この記事ではSvelteKitのアプリケーションでパスキー認証をするための最低限の手順や必要事項をまとめます。 この記事内では以下の構成を前提に、順を追ってセットアップを解説をします。 フレー…
View Articleメモ：Bunを使ってSvelte+SvelteKit環境構築
はじめに https://qiita.com/grhg/items/6234d5e225ffd948df93 に続けて、SvelteKit の環境構築をしていきます。 手順 以下に沿ってやれば簡単に…
View ArticleMapLibre GL JS を Svelte の世界で快適に使うためのライブラリを作りました
オープンソースの地図ライブラリ MapLibre GL JS を Svelte のコンポーネントとして扱えるようにする Svelte MapLibre GL というライブラリを開発しています。すでに…
View ArticleSvelteKitの画像管理：キャッシュ問題をViteで解消する
はじめに Sveltekitで画像を取り扱う際、『staticフォルダに置いた画像を変更したけどなかなかユーザーの画像が反映されない、、、』こんな経験ありませんか？ 原因は『キャッシュ』かもしれませ…
View ArticleSvelte で 3D 表示を行うライブラリ Threlte #6: カスタムシェーダーを適用する
シリーズ Svelte で 3D 表示を行うライブラリ Threlte #1: パッケージの作成とライブラリ概要 Svelte で 3D 表示を行うライブラリ Threlte #2: エクストラパッ…
View ArticleWebSpeechAPIお試しツール作ってみる
はじめに 前回はじめてWeb Speech APIを触ってみてみたが、 今回は、Web Speech APIには音量やピッチだけでなく様々な声の設定ができるようなので 自由にWeb Speech A…
View ArticleSvelte で 3D 表示を行うライブラリ Threlte Ex2: Threlte 8 が控えているのを察知した
はじめに こちらは、Threlte の Ex(エクストラ、余談的な)シリーズの記事の一つ。 先のアドベントカレンダーにて、Threlte 8 が縦鼻中であることが分かったので、ならば、その内容を見ら…
View ArticleSvelte5ではcreateEventDispatcher関数が非推奨になりました
createEventDispatcherとは createEventDispatcherは、Svelteコンポーネントからカスタムイベントをディスパッチ（発行）するための関数です。これを使うことで…
View ArticleSvelte 5 アップデートに向けて行っていること
これは CAMPFIRE Advent Calendar 2024 の 14 日目の記事です。 CAMPFIRE ではフロントエンドフレームワークに Svelte を利用しています。 参考: htt…
View ArticleSvelteKitとHonoを使って、Stripeの埋め込みチェックアウトとWebhookイベントの受け取る！
最近、決済処理が必要でStripeを使い始めました！ 受託開発多めなのであんまり決済周りの処理はやってこなかったんですが、利用する機会があったので一通り触ってみました。便利ですねー！ 弊社、地図屋な…
View Article+page.svelteの型の再利用のアイデア
前提 デザイナーはTypeScriptに詳しくない リリース後の運用（UIの変更など）をデザイナーが行う +page.svelte SvelteKitではroutesディレクトリ配下に+page.s…
View ArticleAstroでSvelteを使ってみた
はじめに 最近はフロントエンド制作環境に Astro を採用する機会が増えてきました。 特にクライアントサイドでリアクティブなコンテンツを構築する場合、 宣言型UIフレームワーク を組み合わせること…
View Articleノードベース フローチャートライブラリーのSvelte Flowを触ってみました！
これは Svelte AdventCalendar 2024 18日目の記事です。 昨日は @oekazuma さんによる なぜSvelteKitのルーティングファイルには+がついているのか？ で…
View ArticleFetchOnMountコンポーネントとsvelte:boundary
概要 マウントされた時に渡したPromiseを返す関数を実行し、以下を表示するコンポーネントを作ります。 ローディング状態を表示する Promiseの解決後の値を使って何かを表示する その表示が失敗…
View ArticleNode.jsで作成したアプリケーションをRenderを用いてデプロイする
はじめに Node.jsアプリケーションを無料でデプロイする際によく使っていた Heroku が2024年12月現在では有料プランのみになってしまいました。代わりのサービスを探していたところ、無料の…
View ArticleSvelte Online Meetup #3 で登壇しました
この記事はSvelte Advent Calendar 2024の20日目の記事です。 が…さすがに主催者である@ryoppippiさんの昨日の記事Svelte Online Meetup #3 …
View ArticleMaplibre GL JSを採用するならWebフロントエンドのフレームワークにはSvelteを採用するのも良いのではという話
これは MapLibre Advent Calendar 2024 21日目の記事です。 はじめに みなさんはWebフロントエンドのフレームワークに何を採用しておられますでしょうか？ やっぱりRe…
View ArticleSvelte5での変更点（リアクティブ構文の変更）
はじめに この度2024年10月にSvelte5がリリースされました。 従来のSvelte4までと大きく変わった部分も多かったので、特にリアクティブ構文周りを私なりにSvelte4とSvelte5に…
View ArticleSvelteのLLMs向けドキュメントを使ってSvelteGPTを作ってみた話
最近MIERUNEではフロントエンドのフレークワークとして、SvelteJSを採用することが増えていて、社内では日頃からSvelteがどれくらい便利なのかを実感しています。 しかし、Svelteは新…
View Article