SvelteKit

大在・大野川 Sevelte のローカルテスト時にポートを指定する方法？ プロジェクトのルートフォルダで下記を起動しても白画面。どうやらポートがかぶっていた模様。ポートを指定して起動したいけど方法がわからず。 npm run dev ビルドして普通に起動する場合であればポートの指定方法がわかった。 まず、package.jsonのscriptでポートを下記のように指定する。 "scripts": { "dev": "rollup -c -w", "build": "rollup -c", "start": "sirv public --single --port 3000" } あとはビルド・…

こんにちは。エイチームライフデザインでハナユメという結婚式場情報サイトの開発を行っている大江です。 ハナユメは長い間、PHP/Symfonyを用いて開発・運用されてきました。しかし、プロダクトの成長と機能の複雑化に伴い、技術的負債が蓄積してきました。そこで、数年前からこの課題を解消するために、フロントエンドをSvelte/SvelteKitで置き換えるプロジェクトを始めました。現在では、検索ページ、式場詳細ページの一部、リングページなどいくつかのページをSvelte/SvelteKitでリリースしています。 今回は、Svelte/SvelteKitを選んだ理由や、実際に導入してみて感じたことに…

以前、「実験的に作った細々としたものを雑に公開できるように」と思って倉庫ページを作っていたのですが、今日はそれをSvelte + TailwindCSS + daisyUIで書き直しました。 以前はNext.js + MUI で実装していたのですが、以下の理由からSvelteで全面的に書き直してみました: 一覧ページ生成用のコードをあまりスケールする作りに出来なかった 一覧ページ生成に使うメタデータの管理方法に不満が出てきた そこまで複雑なSPAでもないのにNext.jsは少しオーバーキルすぎる感触だった 単純にSvelteが使ってみたかった まだまだ見た目的に綺麗に出来そうな余地は多分にあり…

暗黙の世界 SvelteKit は脳みそが小さい連中が嫌う暗黙のルールで溢れ返っている なので、そう言うのが嫌いなら絶対に使うべからず 逆に暗黙が好きなら最高の使用感を得られるはずだ基本的に同一階層にファイルを作るだけで暗黙の継承がバンバン行われたりする 基本のファイル src/routes/ 以下に +page.svelte を置くだけで / でアクセス可能になる src/routes/hoge/ 以下に置けば /hoge でアクセス可能 +page.svelte こいつがキモ サンプルを下記してみる <script> console.log('TOP +page.svelte') expo…

最近 ChatGPT に聞いてばかりの日々を過ごしている とても快適だ こんなに頼りになるやつは今までいなかったGoogle は検索の質がどんどん下がり、開発時の疑問を解決しようとしても必要な情報を全く出してくれず、 一般的なクソどうでも良い浅くて薄い情報ばかりを上位に表示してきやがるもんで、何度もページャのリンクをクリックし、検索条件を入れ直し、 日本語サイトがゴミばかりなので英語で入力して結局フォーラムに行きつき、そのフォーラムの中から必要な情報を探すのにさらなる時間を使うが結局見つからず、 永遠と時間を浪費しながらネット上の情報を探す必要があったしかし、ChatGPT は瞬殺で答えを出し…

「感謝祭クイズ！」についておさらい DX事業本部の小松です。 以前投稿した「感謝祭クイズ！」アプリ【前編】の記事では、技術構成に関する簡単な説明と、どんなアプリを作ったのかについて紹介しました。 おさらいすると、「感謝祭クイズ！」はリアルタイムクイズを開催するためのアプリです。管理画面でクイズを作り、進行画面でクイズ大会を進め、参加者画面でクイズに解答することができます。 管理画面でクイズを作成 進行画面でクイズ大会を進め、参加者画面が自動で切り替わっていく 参加者画面でクイズに解答する そんな「感謝祭クイズ！」は、主にSvelteKitとFirebaseを用いて以下のような構成で開発されてい…

「感謝祭クイズ！」についておさらい DX事業本部の小松です。 以前投稿した「感謝祭クイズ！」アプリ【前編】の記事では、技術構成に関する簡単な説明と、どんなアプリを作ったのかについて紹介しました。 おさらいすると、「感謝祭クイズ！」はリアルタイムクイズを開催するためのアプリです。管理画面でクイズを作り、進行画面でクイズ大会を進め、参加者画面でクイズに解答することができます。 管理画面でクイズを作成 進行画面でクイズ大会を進め、参加者画面が自動で切り替わっていく 参加者画面でクイズに解答する そんな「感謝祭クイズ！」は、主にSvelteKitとFirebaseを用いて以下のような構成で開発されてい…