差分

このページの2つのバージョン間の差分を表示します。

--- typescript:deno:preact [2025/04/21 04:29] – 削除 - 外部編集 (不明な日付) 非ログインユーザー
+++ typescript:deno:preact [2025/04/21 04:29] (現在) – ↷ javascript:deno:preact から typescript:deno:preact へページを移動しました。ともやん
@@ 行 1: / 行 1: @@
+====== Preact アプリを構築する ======
+<html><style> #astro img { background-color: rgb(23 25 30); }</style></html>
+<WRAP group logo>
+<WRAP v-align_mid zoomimg w200 x1_2 #astro>
+{{:javascript:deno:astro-logo-light-gradient.svg?240|Astro}}
+</WRAP>
+<WRAP v-align_mid zoomimg w200 x1_2>
+{{:javascript:preact_logo.svg?240|React}}
+</WRAP>
+</WRAP>
+公式: [[https://docs.astro.build/ja/install-and-setup/|Astroのインストールとセットアップ | Docs]]\\
+　[[https://docs.astro.build/ja/guides/integrations-guide/preact/|@astrojs/preact | Docs]]\\
+===== インストール =====
+公式: [[https://docs.astro.build/ja/install-and-setup/|Astroのインストールとセットアップ | Docs]]\\
+参考: [[https://deno.com/blog/astro-on-deno|Build and Ship Astro Sites with Deno and Deno Deploy]] [[gtr>https://deno.com/blog/astro-on-deno|翻訳]]\\
+[[git>denoland/deno-astro-template|🚀 Astro + 🦕 Deno Template]] でインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:create-astro@latest <font color="#A347BA">--</font> <font color="#A347BA">--template</font> denoland/deno-astro-template
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#26A269"> </span><span style="background-color:#26A269"><font color="#171421">astro</font></span><span style="background-color:#26A269"> </span>  Launch sequence initiated.
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">dir</font></span><span style="background-color:#883AE2"> </span>  Where should we create your new project?
+         ./second-shepherd
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">dir</font></span><span style="background-color:#883AE2"> </span>  Where should we create your new project?
+         ./preact-haruo-world_astro
+      <font color="#2AA1B3">◼</font>  <font color="#2AA1B3">tmpl</font> Using minimal as project template
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">deps</font></span><span style="background-color:#883AE2"> </span>  Install dependencies? (recommended)
+         <font color="#26A269">●</font> Yes  ○ No
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">deps</font></span><span style="background-color:#883AE2"> </span>  Install dependencies?
+         Yes
+  <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">git</font></span><span style="background-color:#883AE2"> </span>  Initialize a new git repository? (optional)
+         ○ Yes  <font color="#26A269">●</font> No
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+ <span style="background-color:#883AE2"> </span><span style="background-color:#883AE2"><font color="#FFFFFF">git</font></span><span style="background-color:#883AE2"> </span>  Initialize a new git repository?
+         No
+      <font color="#2AA1B3">◼</font>  <font color="#2AA1B3">Sounds good!</font> You can always run git init manually.
+ <font color="#47DA93">██</font><font color="#3DA9A3">█</font><font color="#2387F1">█</font><font color="#3640FC">█</font><font color="#5711F8">█</font>  Project initializing...
+         ■ Template copied
+         <font color="#2AA1B3">▶ Dependencies installing with deno...</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+      <font color="#26A269">✔</font>  <font color="#26A269">Project initialized!</font>
+         ■ Template copied
+         ■ Dependencies installed
+ <span style="background-color:#2AA1B3"> </span><span style="background-color:#2AA1B3"><font color="#171421">next</font></span><span style="background-color:#2AA1B3"> </span>  <b>Liftoff confirmed. Explore your project!</b>
+         Enter your project directory using <font color="#2AA1B3">cd ./preact-haruo-world_astro </font>
+         Run <font color="#2AA1B3">npm run dev</font> to start the dev server. <font color="#2AA1B3">CTRL+C</font> to stop.
+         Add frameworks like <font color="#2AA1B3">react</font> or <font color="#2AA1B3">tailwind</font> using <font color="#2AA1B3">astro add</font>.
+         Stuck? Join us at <font color="#2AA1B3">https://astro.build/chat</font>
+╭─────╮  <font color="#33C7DE"><b>Houston:</b></font>
+│ ◠ <font color="#33C7DE">◡</font> ◠  Good luck out there, astronaut! 🚀
+╰─────╯
+</pre></html></WRAP>
+</WRAP>
+[[https://docs.astro.build/ja/guides/integrations-guide/preact/|@astrojs/preact | Docs]]\\
+deno で Astro を最新に更新し、Preact などのフレームワークを追加する...🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font> <u style="text-decoration-style:solid">p</u><font color="#999999"><u style="text-decoration-style:solid">react-haruo-world_astro</u></font>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add <font color="#A347BA">--allow-scripts</font> npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Add <font color="#26A269">npm:astro</font><font color="#8A8A8A">@</font>5.6.1
+Add <font color="#26A269">npm:@deno/astro-adapter</font><font color="#8A8A8A">@</font>0.3.0
+Add <font color="#26A269">npm:@astrojs/preact</font><font color="#8A8A8A">@</font>4.0.8
+Add <font color="#26A269">npm:preact</font><font color="#8A8A8A">@</font>10.26.5
+</pre></html></WRAP>
+</WRAP>
+''package.json'' の内容...🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">bat</font> <font color="#A347BA">-p</font> <font color="#A347BA">--pager</font> no <u style="text-decoration-style:solid">package.json</u>
+</pre></html></WRAP>
+<WRAP color_result_long><html><pre>
+<font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;preact-haruo-world-astro&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;type&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;module&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;version&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;1.0.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;dev&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno run -A --unstable-kv npm:astro dev&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;start&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno run -A --unstable-kv npm:astro dev&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;build&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;astro build&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;preview&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno run -A ./dist/server/entry.mjs&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;format&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno fmt &amp;&amp; prettier --write .&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;dependencies&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@astrojs/preact&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^4.0.8&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@deno/astro-adapter&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.3.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;astro&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^5.6.1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;preact&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^10.26.5&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;devDependencies&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;prettier&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^3.3.1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;prettier-plugin-astro&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.14.0&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;prettier&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;tabWidth&quot;</font><font color="#F8F8F2">: </font><font color="#BE84FF">2</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;plugins&quot;</font><font color="#F8F8F2">: [</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;./node_modules/prettier-plugin-astro/dist/index.js&quot;</font>
+<font color="#F8F8F2">    ],</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;overrides&quot;</font><font color="#F8F8F2">: [</font>
+<font color="#F8F8F2">      {</font>
+<font color="#F8F8F2">        </font><font color="#FD971F">&quot;files&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;*.astro&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">        </font><font color="#FD971F">&quot;options&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">          </font><font color="#FD971F">&quot;parser&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;astro&quot;</font>
+<font color="#F8F8F2">        }</font>
+<font color="#F8F8F2">      }</font>
+<font color="#F8F8F2">    ]</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">}</font>
+</pre></html></WRAP>
+</WRAP>
+===== Deno ランタイム機能を使用する設定 =====
+公式: [[https://docs.deno.com/runtime/reference/cli/unstable_flags/#--unstable-kv|Unstable feature flags - Deno Documentation]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> <u style="text-decoration-style:solid">package.json</u>
+</pre></html></WRAP>
+<WRAP color_mincode><html><pre class=BSc>
+<font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;preact-haruo-world-astro&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;type&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;module&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;version&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;1.0.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;scripts&quot;</font><font color="#F8F8F2">: {</font>
+<span style="background-color:#333333"><font color="#F8F8F2">    </font></span><span style="background-color:#333333"><font color="#FD971F">&quot;dev&quot;</font></span><span style="background-color:#333333"><font color="#F8F8F2">: </font></span><span style="background-color:#333333"><font color="#E6DB74">&quot;deno run -A --unstable-kv npm:astro dev&quot;</font></span><span style="background-color:#333333"><font color="#F8F8F2">,</font></span><span style="background-color:#333333">                                                             </span>
+<span style="background-color:#333333"><font color="#F8F8F2">    </font></span><span style="background-color:#333333"><font color="#FD971F">&quot;start&quot;</font></span><span style="background-color:#333333"><font color="#F8F8F2">: </font></span><span style="background-color:#333333"><font color="#E6DB74">&quot;deno run -A --unstable-kv npm:astro dev&quot;</font></span><span style="background-color:#333333"><font color="#F8F8F2">,</font></span><span style="background-color:#333333">                                                           </span>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;build&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;astro build&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;preview&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno run -A ./dist/server/entry.mjs&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;format&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;deno fmt &amp;&amp; prettier --write .&quot;</font>
+<font color="#F8F8F2">  },</font>
+</pre>
+</html></WRAP>
+</WRAP>
+===== プロジェクト実行 =====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> r<font color="#999999">un dev</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">Task</font> <font color="#2AA1B3">dev</font> astro dev
+<font color="#F66151"><b>09:22:49</b></font><font color="#C01C28"> [ERROR] [config]</font> The adapter @deno/astro-adapter does not currently support the feature &quot;sharp&quot;. Your project may not build correctly.
+<font color="#7D7D7D">09:22:49 </font><font color="#12488B">[types]</font> Generated 2ms
+<font color="#7D7D7D">09:22:49 </font><font color="#12488B">[content]</font> Syncing content
+<font color="#7D7D7D">09:22:49 </font><font color="#12488B">[content]</font> Synced content
+<span style="background-color:#26A269"><b> astro </b></span> <font color="#26A269">v5.6.1</font> ready in 408 ms
+<font color="#7D7D7D">┃ Local    </font><font color="#2AA1B3">http://localhost:4321/</font>
+<font color="#7D7D7D">┃ Network  use --host to expose</font>
+<font color="#7D7D7D">09:22:49 </font><font color="#26A269">watching for file changes...</font>
+</pre></html></WRAP>
+</WRAP>
+/04/08 現在 @deno/astro-adapter@0.3.0 は Astro 5 に対応中...😅\\
+[[https://docs.astro.build/ja/guides/deploy/deno/|AstroサイトをDenoにデプロイする | Docs]]\\
+[[git>denoland/deno-astro-adapter/issues/40|Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter]]\\
+<WRAP color_term>
+<WRAP color_result><html><pre><font color="#26A269">Task</font> <font color="#2AA1B3">dev</font> astro dev
+<font color="#F66151"><b>09:22:49</b></font><font color="#C01C28"> [ERROR] [config]</font> The adapter @deno/astro-adapter does not currently support the feature &quot;sharp&quot;. Your project may not build correctly.
+</pre></html></WRAP>
+</WRAP>
+動作確認🤔\\
+[[http://localhost:4321/|]]\\
+<WRAP zoomimg w400 x1_2>
+{{:javascript:deno:astro_preact_001.png|Astro Preact 001}}
+</WRAP>
+===== トラブルシューティング =====
+deno でのパッケージ追加の仕方が誤っている...😅\\
+''deno add'' でパッケージ追加するのが正しい🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:astro add preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> Resolving packages...
+  <font color="#A347BA">Astro will run the following command:</font>
+  If you skip this step, you can always run it yourself later
+ ╭──────────────────────────────────────────────────╮
+ │ <b>deno</b> add <font color="#2AA1B3">@astrojs/preact@^4.0.7 preact@^10.26.4</font>  │
+ ╰──────────────────────────────────────────────────╯
+<font color="#2AA1B3">?</font> <b>Continue?</b> <font color="#666666">›</font> <font color="#666666">(Y/n)</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> <b>Continue?</b> <font color="#666666">…</font> yes
+<font color="#C01C28">✖️</font> Installing dependencies...
+ The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1
+Astro could not update your astro.config.js file safely.
+Reason: Unable to install dependencies
+You will need to add these integration(s) manually.
+Documentation: https://docs.astro.build/en/guides/integrations-guide/
+  <b>Location:</b>
+    <u style="text-decoration-style:solid">/home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31</u>
+  <b>Stack trace:</b>
+<font color="#7D7D7D">    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)</font>
+<font color="#7D7D7D">    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)</font>
+<font color="#7D7D7D">    at eventLoopTick (ext:core/01_core.js:185:21)</font>
+<font color="#7D7D7D">    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)</font>
+</pre></html></WRAP>
+</WRAP>
+これも誤り...😢\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:add @astrojs/preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#A2734C">Warning</font> The following packages contained npm lifecycle scripts (<font color="#8A8A8A">preinstall/install/postinstall</font>) that were not executed:
+┠─ <font color="#8A8A8A">npm:sharp@0.33.5</font>
+┃
+┠─ <i>This may cause the packages to not work correctly.</i>
+┠─ <i>Lifecycle scripts are only supported when using a `node_modules` directory.</i>
+┠─ <i>Enable it in your deno config file:</i>
+┖─ <b>&quot;nodeModulesDir&quot;: &quot;auto&quot;</b>
+<font color="#F66151"><b>error</b></font>: Failed resolving binary export. &apos;/home/tomoyan/.cache/deno/npm/registry.npmjs.org/add/2.0.6/package.json&apos; did not have a bin property
+</pre></html></WRAP>
+</WRAP>
+これも誤り...😭\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cat</font> <font color="#2A7BDE"><b>&lt;&lt;</b></font> <font color="#A2734C">&apos;EOF&apos;</font> <font color="#2A7BDE"><b>&gt;</b></font> <u style="text-decoration-style:solid">deno.json</u>
+<font color="#2A7BDE"><b>{</b></font>
+  <font color="#F66151"><b>&quot;nodeModulesDir&quot;:</b></font> <font color="#A2734C">&quot;auto&quot;</font>
+<font color="#2A7BDE"><b>}</b></font>
+<font color="#F66151"><b>EOF</b></font>
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:astro add preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> Resolving packages...
+  <font color="#A347BA">Astro will run the following command:</font>
+  If you skip this step, you can always run it yourself later
+ ╭──────────────────────────────────────────────────╮
+ │ <b>deno</b> add <font color="#2AA1B3">@astrojs/preact@^4.0.7 preact@^10.26.4</font>  │
+ ╰──────────────────────────────────────────────────╯
+<font color="#2AA1B3">?</font> <b>Continue?</b> <font color="#666666">›</font> <font color="#666666">(Y/n)</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> <b>Continue?</b> <font color="#666666">…</font> yes
+<font color="#C01C28">✖️</font> Installing dependencies...
+ The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1
+Astro could not update your astro.config.js file safely.
+Reason: Unable to install dependencies
+You will need to add these integration(s) manually.
+Documentation: https://docs.astro.build/en/guides/integrations-guide/
+  <b>Location:</b>
+    <u style="text-decoration-style:solid">/home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31</u>
+  <b>Stack trace:</b>
+<font color="#7D7D7D">    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)</font>
+<font color="#7D7D7D">    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)</font>
+<font color="#7D7D7D">    at eventLoopTick (ext:core/01_core.js:185:21)</font>
+<font color="#7D7D7D">    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)</font>
+</pre></html></WRAP>
+</WRAP>
+これも誤り...😇\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:add @astrojs/preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#F66151"><b>error</b></font>: Failed resolving binary export. &apos;/home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/add@2.0.6/node_modules/add/package.json&apos; did not have a bin property
+</pre></html></WRAP>
+</WRAP>
+==== エラー： @astrojs/preact にプレフィックスがありません。 `deno add npm：@astrojs/preate`を意味しましたか？🤔 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add @astrojs/preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#F66151"><b>error</b></font>: @astrojs/preact is missing a prefix. Did you mean `<font color="#A2734C">deno add npm:@astrojs/preact</font>`?
+</pre></html></WRAP>
+</WRAP>
+''deno add %%--%%allow-scripts'' でパッケージに ''npm:'' プレフィックスを付けて実行しなおす😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add <font color="#A347BA">--allow-scripts</font> npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Add <font color="#26A269">npm:astro</font><font color="#8A8A8A">@</font>5.6.1
+Add <font color="#26A269">npm:@deno/astro-adapter</font><font color="#8A8A8A">@</font>0.3.0
+Add <font color="#26A269">npm:@astrojs/preact</font><font color="#8A8A8A">@</font>4.0.8
+Add <font color="#26A269">npm:preact</font><font color="#8A8A8A">@</font>10.26.5
+</pre></html></WRAP>
+</WRAP>
+==== 警告: 次のパッケージには、実行されなかったNPMライフサイクルスクリプトが含まれていました...🤔 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add npm:@astrojs/preact
+Add <font color="#26A269">npm:@astrojs/preact</font><font color="#8A8A8A">@</font>4.0.7
+<font color="#A2734C">Warning</font> The following packages contained npm lifecycle scripts (<font color="#8A8A8A">preinstall/install/postinstall</font>) that were not executed:
+┠─ <font color="#8A8A8A">npm:sharp@0.33.5</font>
+┃
+┠─ <i>This may cause the packages to not work correctly.</i>
+┖─ <i>To run lifecycle scripts, use the `--allow-scripts` flag with `deno install`:</i>
+   <b>deno install --allow-scripts=npm:sharp@0.33.5</b>
+</pre></html></WRAP>
+</WRAP>
+''deno add %%--%%allow-scripts'' で実行しなおす😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add <font color="#A347BA">--allow-scripts</font> npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Add <font color="#26A269">npm:astro</font><font color="#8A8A8A">@</font>5.6.1
+Add <font color="#26A269">npm:@deno/astro-adapter</font><font color="#8A8A8A">@</font>0.3.0
+Add <font color="#26A269">npm:@astrojs/preact</font><font color="#8A8A8A">@</font>4.0.8
+Add <font color="#26A269">npm:preact</font><font color="#8A8A8A">@</font>10.26.5
+</pre></html></WRAP>
+</WRAP>
+==== これにより、パッケージが正しく機能しない可能性があります。`node_modules` ディレクトリを使用する場合にのみ、ライフサイクルスクリプトはサポートされます...🤔 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> npm:@astrojs/upgrade
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#A2734C">Warning</font> The following packages contained npm lifecycle scripts (<font color="#8A8A8A">preinstall/install/postinstall</font>) that were not executed:
+┠─ <font color="#8A8A8A">npm:esbuild@0.15.18</font>
+┠─ <font color="#8A8A8A">npm:esbuild@0.17.19</font>
+┃
+┠─ <i>This may cause the packages to not work correctly.</i>
+┠─ <i>Lifecycle scripts are only supported when using a `node_modules` directory.</i>
+┠─ <i>Enable it in your deno config file:</i>
+┖─ <b>&quot;nodeModulesDir&quot;: &quot;auto&quot;</b>
+<span style="background-color:#26A269"> </span><span style="background-color:#26A269"><font color="#171421">astro</font></span><span style="background-color:#26A269"> </span>  <b>Integration upgrade in progress.</b>
+      <font color="#2AA1B3">◼</font>  @astrojs/preact is up to date on v4.0.8
+      <font color="#A2734C">▲</font>  astro will be updated <span style="background-color:#A2734C"><font color="#171421"> from v4.9.3 to v5.6.1 </font></span>
+ <span style="background-color:#A2734C"> </span><span style="background-color:#A2734C"><font color="#171421">wait</font></span><span style="background-color:#A2734C"> </span>  One package has breaking changes. Continue?
+         Yes
+</pre></html></WRAP>
+</WRAP>
+''%%--%%node-modules-dir'' オプションを付けて実行する、または、''deno.json'' を設定する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> <font color="#A347BA">--node-modules-dir</font> npm:@astrojs/upgrade
+</pre></html></WRAP>
+Or
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cat</font> <font color="#2A7BDE"><b>&lt;&lt;</b></font> <font color="#A2734C">&apos;EOF&apos;</font> <font color="#2A7BDE"><b>&gt;</b></font> <u style="text-decoration-style:solid">deno.json</u>
+<font color="#2A7BDE"><b>{</b></font>
+  <font color="#F66151"><b>&quot;nodeModulesDir&quot;:</b></font> <font color="#A2734C">&quot;auto&quot;</font>
+<font color="#2A7BDE"><b>}</b></font>
+<font color="#F66151"><b>EOF</b></font>
+</pre></html></WRAP>
+</WRAP>
+==== エラーの依存関係がインストールに失敗しました。次のコマンドを手動で実行してください。deno astro@5.6.1 を追加します...🤔 ====
+deno では ''@astrojs/upgrade'' ができない😢\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> run <font color="#A347BA">-A</font> <font color="#A347BA">--node-modules-dir</font> npm:@astrojs/upgrade
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#26A269"> </span><span style="background-color:#26A269"><font color="#171421">astro</font></span><span style="background-color:#26A269"> </span>  <b>Integration upgrade in progress.</b>
+      <font color="#2AA1B3">◼</font>  @astrojs/preact is up to date on v4.0.8
+      <font color="#A2734C">▲</font>  astro will be updated <span style="background-color:#A2734C"><font color="#171421"> from v4.9.3 to v5.6.1 </font></span>
+ <span style="background-color:#A2734C"> </span><span style="background-color:#A2734C"><font color="#171421">wait</font></span><span style="background-color:#A2734C"> </span>  One package has breaking changes. Continue?
+         Yes
+<span style="background-color:#2AA1B3"> </span><span style="background-color:#2AA1B3"><font color="#171421">check</font></span><span style="background-color:#2AA1B3"> </span>  Be sure to follow the CHANGELOG.
+         astro <font color="#2AA1B3"><u style="text-decoration-style:solid">Upgrade to Astro v5</u></font>
+ <font color="#3640FC">█</font><font color="#5711F8">█</font><font color="#6B22EF">█</font><font color="#7B30E7">█</font><font color="#883AE3">██</font>  Installing dependencies with deno...
+      <font color="#C01C28">▲</font>  <font color="#C01C28">error</font> Dependencies failed to install, please run the following command manually:
+<font color="#7D7D7D"><b>deno add astro@5.6.1</b></font>
+</pre></html></WRAP>
+</WRAP>
+''deno add %%--%%allow-scripts npm:astro'' で追加すれば更新できる😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">deno</font> add <font color="#A347BA">--allow-scripts</font> npm:astro
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Add <font color="#26A269">npm:astro</font><font color="#8A8A8A">@</font>5.6.1
+</pre></html></WRAP>
+</WRAP>
+===== 参考文献 =====
+[[https://deno.com/blog/build-astro-with-deno|Build an Astro site with Deno]]\\
+[[https://deno.com/blog/astro-on-deno|Build and Ship Astro Sites with Deno and Deno Deploy]]\\
+[[https://docs.astro.build/en/guides/deploy/deno/|Deploy your Astro Site with Deno | Docs]]\\
+[[git>denoland/deno-astro-adapter|denoland/deno-astro-adapter: A Deno adapter for running Astro applications on the Deno runtime.]]\\
+[[git>denoland/deno-astro-adapter/issues/40|Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter]]\\