【Sveltekit】ssr時にself is not definedが出る
はじめに jsonを編集するためのライブラリであるJSONEditorをsveltekitで使おうとするとエラーが出たのでその対処法を載せておく。 動作環境 svelte 4.2.7 sveltek…
View ArticleSvelteKit SPA Apacheサブディレクトリーに配置する
メモ 対象とするサブディレクトリーsveltekit-example https://localhost/sveltekit-example 基本的にドキュメントの通りSPAアプリケーションを構築する…
View ArticleSvelte Tutorial を Svelte5 でやっていく
はじめに フロントエンドはAndroidとFlutterをひとかじりくらい Svelte自体も初学者 そろそろSvelte5リリースされるっぽいしチュートリアルもそっちでやってみよう まだSvelt…
View ArticleSvelte チュートリアル学習ノート その1
本記事は公式チュートリアルを短くまとめただけのものです。 入門者向けの解説というわけではなく、別段役に立つわけでもありません。 動機 現在、日本語学習者向けの漢字学習アプリを開発しています。 バッ…
View ArticleHelix Editor のカスタマイズ
はじめに Rust や Python などを Vim や NeoVim で書けるようにセットアップしようと思ったが、思ったより理想に近づけるには道のりが長い…。。色々言語対応するとなると余計に…。 …
View ArticleMarkuplintのおすすめ設定 for Svelte
Markuplintとは 間違っているマークアップがあったら怒ってくれるLinterです。 HTMLがよくわからない人たちにとっても、詳しい人にとっても、常に正しいマークアップに縛ってくれるかなり嬉…
View ArticleGo + Svelteでアプリを作成してみた【Todo List】
Goモジュールを初期化 mkdir myproject cd myproject go mod init github.com/username/projectname Router Setup a…
View ArticleSvelte Tutorial を Svelte5 でやっていく
はじめに フロントエンドはAndroidとFlutterをひとかじりくらい Svelte自体も初学者 そろそろSvelte5リリースされるっぽいしチュートリアルもそっちでやってみよう まだSvelt…
View ArticleTauri+Svelteで設定情報をリアルタイムで反映させるのに躓いた話
今回やりたかったこと 学習目的の個人開発にてタイマーアプリを作成しておりまして、その設定ファイルをリアルタイムで反映させるために躓いた点と解消した方法をまとめました。 躓いた点 Svelteにsto…
View ArticleSveltekitのAPI routesでHonoを利用する
はじめに SveltekitはSvelteをベースとしたフロントエンドフレームワークです。Svelte自体の書き味などは言及するまでもなく、kitについて述べると、これはよくできたフレームワークで、…
View Article要素をホバーした時に情報を表示したい
はじめに 動作確認した環境 svelte やりたいこと Webページの要素をホバーした時に情報を表示したい。 画像イメージ 方法 imgタグにtitle属性を付与してあげるだけ。 imgタグに限らず…
View Article使用していないSvelteファイルを見つけて削除する方法
はじめに 僕は普段、Svelte, SvelteKitを使って開発をしています。開発規模は大きくなっていくとどのSvelteファイルが使っていないのか見つけるのは困難です。不要なファイルなら削除すべ…
View ArticleSvelteKitのそれぞれのload関数で値を返したときの挙動まとめ
はじめに SvelteKitでは、+layout.ts、+layout.server.ts、+page.ts、+page.server.tsファイル内でそれぞれload関数を呼び出して値を返すことが…
View Article自家製WebアプリInterpreterを作る
はじめに ClaudeのArtifactsを見て、Webページを作成してくれるシナリオにビビっと来まして、以前はCode Interpreterを自家製で再現しましたが、今回はgpt-4oを用いてW…
View Article@antfu/eslint-configを使ってSvelteのフォーマッター＆リンターを簡単に設定する方法
はじめに SvelteやSvelteKitで開発を行う際に、ESLintやPrettierを使ってフォーマッターやリンターの環境を設定することが多いです。公式のプロジェクト作成コマンドでも自動的に設…
View ArticleSvelteKitでContentfulのデータを取得・表示する
今流行りのSvelteKitを使ってみたい、そしてContentfulも活かしたい、でもContentful公式のスターターはなんか古い！ ので、下記はSvelteKitでContentfulのデー…
View ArticleSvelteでコンポーネントを非同期読み込みする
Svelteコンポーネントの非同期読み込み 特に説明することがないので答えを書きます！ {#await import('$lib/Counter.svelte') then { default: C…
View ArticleJavaScript無効化時のSvelte
概要 この記事はJavaScriptが無効な状態でもサイトやアプリケーションを使えるようにしたい人のためのTips記事です。 JavaScriptが無効化されている時に操作できないようなサイトやアプ…
View Articleスケルトンコンポーネントの作り方 part2
この記事は2部構成です。 part1はこちら 前回のpart1でほぼ終わっているのですが、stateを管理するcreateLoading関数とSkeletonコンポーネントを作成していないので作成…
View Articlesvelte:elementのthisを安全にする
概要 見たらわかるのでコードを書きます。 Element.svelte <script lang="ts"> import type { SvelteHTMLElements } from 'sve…
View Article