svelte

院内・寒水川 フロントエンドをsvelte、デプロイをCloud Runにしたい 小・中規模開発に向いてるというsvelteを、Cloud Runでデプロイしようとしたら四苦八苦したのでメモ 困ったこと だいたいこのあたり npm run devが実行できない 環境変数が読み込まれない cloud run deployでデプロイできない ベストプラクティスはこれ（？） 1. svletekitでプロジェクトを作成する プロジェクトのルートフォルダで下記を実行する。svelteをそのまま（chatgptとかで）野良実装するとnpm run dev・gcloud run deployが通らなかった…

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

さて、何がいいかわからないとう意見もあるのですが、 TMSWebcoreなりsvelt側のファイルだけで完結したいのですが、 htmlファイルにイベントハンドラを書かないと動かないライブラリがある 場合、bodyタグ内に書いていました。 それを書かずにsvelt側なりのファイルに書いてしまう方法を考案 してみました。 種あかしはHTMLの要素を動的に追加できるので、そこにscriptタグを 挿入することにして、内容にイベントハンドラのコードを流し込む という技です。 教科書的なHTML要素の操作じゃないでしょうか。 昔はこれしかなかったので当たり前だったと思います。 最近は触らないんで、忘れて…

Sveleteを勉強しています。 Pascal命じゃないのか？と突っ込まれそうですが、別言語もやります。 ＣとPascal覚えておけばどれもなんとかなります。 でもLISPは無理 （笑） そう勉強したいと思い、本を買いました。FIGMAと連携して解説する そうです。ということでやり始めたのですが、環境構築でもう挫折。 コマンド入れたら「古いやり方なんで非推奨。これを使え」 的な英文がでて、解説書が約に立たなくなりました（涙） う〜ん２０２４年８月の出版だったので買ったのですが、もう違うの ですね。非推奨の猶予期間がなかったのかわかりませんが。 進歩が早い世界なのでやむを得ないですか。（全部使え…

さて、Svelteを試してみようと思って解説書を買ってしまいました。 さあということでおひとり様サーバーで環境構築といきました。 初心者なので、言われたとおりにしたのですが、 node.jsは入っていました。 npmでおまじないを打ち込んでファイル生成します。 npm run dev しました。 エラー発生。原因はSyntax Error.... なんですと～～～ 初心者なんでまったく原因不明です。 いきなり出鼻をくじかれました。 そう、これで初心者はめげるよなあ～～～と思いました。 どうしよかと、一呼吸おいて、う～んよくわからんが、node.jsが古いからじゃないか ということで、nodeの…

思い立ってObsidainのプラグインを作り出す 土曜日の午前に歯医者から帰ってきて、何がきっかけだったか思い出せないけど、Obsidianでクイズが書けるプラグインを作りたくなった。 Obsidianに残っていたメモ ObsidianはElectronベースのアプリケーションなので、Webアプリを開発するようにJavaScriptでプラグインを開発することができる。Obsidianのテンプレートリポジトリから自分のリポジトリを作り、ちょろっと変更すると考えていたものができた。思ったよりも簡単だ。 Obsidianプラグインで作ったクイズ用のUI 簡単なJavaScript(TypeScrip…

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