{"id":73,"date":"2026-02-14T22:06:29","date_gmt":"2026-02-14T13:06:29","guid":{"rendered":"https:\/\/www.ohe-lab.jp\/?p=73"},"modified":"2026-02-14T23:43:53","modified_gmt":"2026-02-14T14:43:53","slug":"svelte%e3%83%bbsveltekit%e3%81%a7%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0","status":"publish","type":"post","link":"https:\/\/www.ohe-lab.jp\/?p=73","title":{"rendered":"Svelte\u30fbSvelteKit\u3067\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\uff081\uff09"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Svelte \u306f<em>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/em>\u3067\u3001SvelteKit \u306f\u672c\u756a\u74b0\u5883\u3067\u4f7f\u7528\u3067\u304d\u308b\u3082\u306e\u3092\u69cb\u7bc9\u3059\u308b\u969b\u306e\u96e3\u3057\u3044\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b<em>\u30a2\u30d7\u30ea \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002<\/em><a href=\"https:\/\/svelte.dev\/tutorial\/kit\/introducing-sveltekit\">https:\/\/svelte.dev\/tutorial\/kit\/introducing-sveltekit<\/a><\/h4>\n\n\n\n<h2 class=\"wp-block-heading u-mb-ctrl u-mb-0 has-swl-main-color has-white-background-color has-text-color has-background has-link-color wp-elements-a0d12b5b296e14505c6f8083a242ef45\" style=\"line-height:0.1\">node.js\u306e\u6e96\u5099<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6700\u521d\u306b\u6e96\u5099\u3068\u3057\u3066\u3001node.js\u306eLTS\uff08Long Term Support\u30d0\u30fc\u30b8\u30e7\u30f3\uff09\u3092\u8abf\u3079\u3066\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3001\u305d\u308c\u3092\u4f7f\u3046\u8a2d\u5b9a\u306b\u3059\u308b\u3002<\/li>\n\n\n\n<li>svelteProject\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\uff08\u597d\u304d\u306a\u540d\u524d\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u3088\u3044\uff09\u3000\u3092\u4f5c\u6210\u3057\u3001\u305d\u3053\u306b\u79fb\u52d5\u3002<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-swl-main-background-color has-background\"><code>% <strong><em><span class=\"swl-marker mark_blue\">nvm ls-remote<\/span><\/em><\/strong>\n        v0.1.14\n        v0.1.15\n        v0.1.16\n  :\n  :\n       v24.13.0   (LTS: Krypton)\n       <strong><em>v24.13.1   (Latest LTS: Krypton)<\/em><\/strong>\n        v25.0.0\n        v25.1.0\n        v25.2.0\n        v25.2.1\n        v25.3.0\n        v25.4.0\n        v25.5.0\n        v25.6.0\n        v25.6.1\n\n % <strong><em><span class=\"swl-marker mark_blue\">nvm use v24.13.1<\/span><\/em><\/strong>\nN\/A: version \"v24.13.1\" is not yet installed.\nYou need to run `nvm install v24.13.1` to install and use it.\n\n 8 ~ % <strong><em><span class=\"swl-marker mark_blue\">nvm install v24.13.1<\/span><\/em><\/strong>\nDownloading and installing node v24.13.1...\n :\n :\nNow using node v24.13.1 (npm v11.8.0)\n\n% <strong><em><span class=\"swl-marker mark_blue\">nvm use v24.13.1<\/span><\/em><\/strong>\nNow using node v24.13.1 (npm v11.8.0)\n :\n\n% <strong><em><span class=\"swl-marker mark_blue\">mkdir svelteProject<\/span><\/em><\/strong>\n% <strong><em><span class=\"swl-marker mark_blue\">cd svelteProject<\/span><\/em><\/strong><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-swl-main-color has-white-background-color has-text-color has-background has-link-color wp-elements-ac47ed6462eda64f08791396cba6d895\">svelte\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u65b0\u898f\u4f5c\u6210<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>npm create svelte@latest <strong><em>my-test-app<\/em><\/strong> \u30b3\u30de\u30f3\u30c9\u3067my-test-app\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u65b0\u898f\u4f5c\u6210\u3059\u308b\u3002\n<ul class=\"wp-block-list\">\n<li>&#8216;npm create svelte&#8217; has been replaced with &#8216;npx sv create&#8217;\u3000\u3068\u8868\u793a\u3055\u308c\u3001npx sv create\u3000\u30b3\u30de\u30f3\u30c9\u306b\u5909\u66f4\u306b\u306a\u3063\u305f\u3068\u306e\u3053\u3068\u3002<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>npx sv create my-test-app\u3000\u3092\u518d\u5ea6\u5b9f\u884c\uff08\u305d\u306e\u524d\u306b\u6307\u793a\u306b\u5f93\u3044\u3001\u3000npm install -g npm@11.10.0\u3000\u306b\u3088\u308anpm\u3092\u30a2\u30d7\u30c7\u30fc\u30c8\u3057\u3066\u3044\u308b\uff09\u3002<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-swl-main-background-color has-background has-medium-font-size\"><code>svelteProject % <strong><span class=\"swl-marker mark_blue\">npm <em>create svelte@latest my-test-app<\/em><\/span><\/strong>\nNeed to install the following packages:\ncreate-svelte@7.0.1\nOk to proceed? (y)<strong><em> <span class=\"swl-marker mark_blue\">y<\/span><\/em><\/strong>\n\nnpm warn deprecated create-svelte@7.0.1: create-svelte has been deprecated - please use https:\/\/www.npmjs.com\/package\/sv instead\n\n&gt; npx\n&gt; \"create-svelte\" my-test-app\n\n'npm create svelte' has been replaced with 'npx sv create'\nnpm notice\nnpm notice New minor version of npm available! 11.8.0 -&gt; 11.10.0\nnpm notice Changelog: https:\/\/github.com\/npm\/cli\/releases\/tag\/v11.10.0\nnpm notice To update run: npm install -g npm@11.10.0\nnpm notice\n\nsvelteProject % <strong><em><span class=\"swl-marker mark_blue\">npm install -g npm@11.10.<\/span><\/em><\/strong>\nnpm error code ETARGET\nnpm error notarget No matching version found for npm@11.10..\nnpm error notarget In most cases you or one of your dependencies are requesting\nnpm error notarget a package version that doesn't exist.\nnpm error A complete log of this run can be found in: \/Users\/kohe\/.npm\/_logs\/2026-02-14T12_10_04_653Z-debug-0.log\n\nsvelteProject % <strong><em><span class=\"swl-marker mark_blue\">npx sv create my-test-app<\/span><\/em><\/strong>\nNeed to install the following packages:\nsv@0.12.1\nOk to proceed? (y) <strong><em><span class=\"swl-marker mark_blue\">y<\/span><\/em><\/strong>\n\n\u250c  Welcome to the Svelte CLI! (v0.12.1)\n\u2502\n\u25c7  Which template would you like?\n\u2502  <strong><em><span class=\"swl-marker mark_blue\">SvelteKit demo<\/span><\/em><\/strong>\n\u2502\n\u25c7  Add type checking with TypeScript?\n\u2502  <strong><em><span class=\"swl-marker mark_blue\">Yes, using TypeScript syntax<\/span><\/em><\/strong>\n\u2502\n\u25c7  What would you like to add to your project? (use arrow keys \/ space bar)\n\u2502  <strong><em><span class=\"swl-marker mark_blue\">none<\/span><\/em><\/strong>\n\u2502\n\u25c6  Project created\n\u2502\n\u25c7  Which package manager do you want to install dependencies with?\n\u2502  <strong><em><span class=\"swl-marker mark_blue\">npm<\/span><\/em><\/strong>\n\u2502\n\u2502  To skip prompts next time, run:\n\u25cf  npx sv create --template demo --types ts --install npm my-test-app\n\u2502\n\u25c6  Successfully installed dependencies with npm\n\u2502\n\u25c7  What's next? \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256e\n\u2502  \ud83d\udcc1 Project steps                            \u2502\n\u2502    1: cd my-test-app                         \u2502\n\u2502    2: npm run dev -- --open                  \u2502\n\u2502  To close the dev server, hit Ctrl-C         \u2502\n\u2502  Stuck? Visit us at https:\/\/svelte.dev\/chat  \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u256f\n\u2514  You're all set!\n\nsvelteProject %  <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading has-swl-main-color has-white-background-color has-text-color has-background has-link-color wp-elements-4d13028aedeb7cd03cf6eb8d70dbb90e\">\u30c7\u30e2\u306e\u5b9f\u884c<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>npm run dev -- --open<\/code>&nbsp;\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code has-swl-main-background-color has-background\"><code>% cd my-test-app \n% npm run dev -- --open  \n\n&gt; my-test-app@0.0.1 dev\n&gt; vite dev --open\n\n21:29:58 &#91;vite] (client) Forced re-optimization of dependencies\n\n  VITE v7.3.1  ready in 398 ms\n\n  \u279c  Local:   http:\/\/localhost:5173\/\n  \u279c  Network: use --host to expose\n  \u279c  press h + enter to show help<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d6\u30e9\u30a6\u30b6\u304c\u81ea\u52d5\u7684\u306b\u8d77\u52d5\u3057\u3001<code>http:\/\/localhost:5173\/<\/code>&nbsp;\u304c\u958b\u304f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30da\u30fc\u30b8\u304c\u8868\u793a\u3055\u308c\u308b\u3002<br>\u30fc\u30dc\u30bf\u30f3\u3001\uff0b\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u3066\u6570\u5b57\u304c\u5897\u6e1b\u3059\u308b\u306e\u304c\u78ba\u8a8d\u3067\u304d\u308b\u3002<br>\u30bf\u30fc\u30df\u30ca\u30eb\u3067<code>q [enter]<\/code>\u3068\u30bf\u30a4\u30d7\u3059\u308c\u3070\u3001\u7d42\u4e86\u3067\u304d\u308b\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"660\" src=\"https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-1024x660.jpg\" alt=\"\" class=\"wp-image-77\" srcset=\"https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-1024x660.jpg 1024w, https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-300x193.jpg 300w, https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-768x495.jpg 768w, https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-1536x990.jpg 1536w, https:\/\/www.ohe-lab.jp\/wp-content\/uploads\/2026\/02\/openingSvelte-2048x1321.jpg 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Screenshot<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Svelte \u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8 \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3001SvelteKit \u306f\u672c\u756a\u74b0\u5883\u3067\u4f7f\u7528\u3067\u304d\u308b\u3082\u306e\u3092\u69cb\u7bc9\u3059\u308b\u969b\u306e\u96e3\u3057\u3044\u554f\u984c\u3092\u89e3\u6c7a\u3059\u308b\u30a2\u30d7\u30ea \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3059\u3002https:\/\/svelte.dev\/tutorial\/kit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[5],"tags":[22,20,21,23],"class_list":["post-73","post","type-post","status-publish","format-standard","hentry","category-it-ai","tag-programing","tag-svelte","tag-sveltekit","tag-web"],"_links":{"self":[{"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/posts\/73","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=73"}],"version-history":[{"count":8,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions"}],"predecessor-version":[{"id":91,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=\/wp\/v2\/posts\/73\/revisions\/91"}],"wp:attachment":[{"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=73"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=73"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ohe-lab.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=73"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}