差分

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

--- javascript:pnpm [2024/08/25 14:13] – 作成ともやん
+++ javascript:pnpm [2025/04/27 08:07] (現在) – [ERROR This project is configured to use yarn が発生する...🤪] ともやん
@@ 行 1: / 行 1: @@
 ====== pnpm - 高速、かつディスク容量効率が良いパッケージマネージャー ======
-<WRAP zoomimg w300 x1_3>
+<WRAP zoomimg w200 x1_3>
 {{ :javascript:pnpm-standard.svg |pnpm logo}}
 </WRAP>
@@ 行 6: / 行 6: @@
 　　　[[https://pnpm.io/ja/|Fast, disk space efficient package manager | pnpm]] (日本語)\\
 ソースコード: [[git>pnpm/pnpm|GitHub - pnpm/pnpm: Fast, disk space efficient package manager]]\\
+ライセンス: [[wwjp>MIT_License|MIT License]]\\
+===== インストール =====
+公式: [[https://pnpm.io/ja/installation|インストール | pnpm]]\\
+スタンドアロンスクリプトを使用してインストールする😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">curl</font> <font color="#A347BA">-fsSL</font> https://get.pnpm.io/install.sh <font color="#12488B"><b>|</b></font> <font color="#26A269">sh</font> <font color="#A347BA">-</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2A7BDE"><b>==&gt;</b></font><b> Downloading pnpm binaries 10.7.0</b>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> using --force I sure hope you know what you are doing
+Copying pnpm CLI from /tmp/tmp.RRyn6TVWxM/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
+Appended new lines to /home/tomoyan/.zshrc
+Next configuration changes were made:
+export PNPM_HOME=&quot;/home/tomoyan/.local/share/pnpm&quot;
+case &quot;:$PATH:&quot; in
+  *&quot;:$PNPM_HOME:&quot;*) ;;
+  *) export PATH=&quot;$PNPM_HOME:$PATH&quot; ;;
+esac
+To start using pnpm, run:
+source /home/tomoyan/.zshrc
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">.</font> <u style="text-decoration-style:solid">~/.zshrc</u>
+</pre></html></WRAP>
+</WRAP>
+動作確認...😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.7.0
+</pre></html></WRAP>
+</WRAP>
+使い方🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-h</font>
+</pre></html></WRAP>
+<WRAP color_result_long><html><pre>
+Version 10.6.1 (compiled to binary; bundled Node.js v20.11.1)
+Usage: pnpm [command] [flags]
+       pnpm [ -h | --help | -v | --version ]
+Manage your dependencies:
+      add                  Installs a package and any packages that it depends on. By default, any new package is
+                           installed as a prod dependency
+      import               Generates a pnpm-lock.yaml from an npm package-lock.json (or npm-shrinkwrap.json) file
+   i, install              Install all dependencies for a project
+  it, install-test         Runs a pnpm install followed immediately by a pnpm test
+  ln, link                 Connect the local project to another one
+      prune                Removes extraneous packages
+  rb, rebuild              Rebuild a package
+  rm, remove               Removes packages from node_modules and from the project&apos;s package.json
+      unlink               Unlinks a package. Like yarn unlink but pnpm re-installs the dependency after removing
+                           the external link
+  up, update               Updates packages to their latest version based on the specified range
+Review your dependencies:
+      audit                Checks for known security issues with the installed packages
+      licenses             Check licenses in consumed packages
+  ls, list                 Print all the versions of packages that are installed, as well as their dependencies,
+                           in a tree-structure
+      outdated             Check for outdated packages
+Run your scripts:
+      exec                 Executes a shell command in scope of a project
+      run                  Runs a defined package script
+      start                Runs an arbitrary command specified in the package&apos;s &quot;start&quot; property of its &quot;scripts&quot;
+                           object
+   t, test                 Runs a package&apos;s &quot;test&quot; script, if one was provided
+Other:
+      cat-file             Prints the contents of a file based on the hash value stored in the index file
+      cat-index            Prints the index file of a specific package from the store
+      find-hash            Experimental! Lists the packages that include the file with the specified hash.
+      pack                 Create a tarball from a package
+      publish              Publishes a package to the registry
+      root                 Prints the effective modules directory
+Manage your store:
+      store add            Adds new packages to the pnpm store directly. Does not modify any projects or files
+                           outside the store
+      store path           Prints the path to the active store directory
+      store prune          Removes unreferenced (extraneous, orphan) packages from the store
+      store status         Checks for modified packages in the store
+Options:
+  -r, --recursive          Run the command for each project in the workspace.
+</pre></html></WRAP>
+</WRAP>
+公式: [[https://pnpm.io/ja/cli/env|pnpm env <cmd> | pnpm]]\\
+Node.js LTS をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> env add <font color="#A347BA">-g</font> lts
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Fetching Node.js 22.14.0 ...
+Node.js 22.14.0 was installed
+  /home/tomoyan/.local/share/pnpm/nodejs/22.14.0
+All specified Node.js versions were installed
+</pre></html></WRAP>
+Or
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> env use <font color="#A347BA">-g</font> lts
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Node.js 22.14.0 was installed
+  /home/tomoyan/.local/share/pnpm/nodejs/22.14.0
+Node.js 22.14.0 was activated
+/home/tomoyan/.local/share/pnpm/node -&gt; /home/tomoyan/.local/share/pnpm/nodejs/22.14.0/bin/node
+</pre></html></WRAP>
+</WRAP>
+===== 使い方 =====
+==== Rsbuild (Rspack を利用したビルドツール) + React の開始手順 ====
+公式: [[https://rsbuild.dev/|Rsbuild - Rspack based build tool]]\\
+ソースコード: [[git>web-infra-dev/rsbuild|web-infra-dev/rsbuild: The Rspack-based build tool. It's fast, out-of-the-box and extensible.]]\\
+React プロジェクトを作成する🤔\\
+公式: [[https://rsbuild.dev/guide/framework/react|React - Rsbuild]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> create rsbuild@latest
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#B8FCEF"><b>◆  </b></font><font color="#B2F9EB"><b>C</b></font><font color="#ADF6E6"><b>r</b></font><font color="#A7F3E2"><b>e</b></font><font color="#A2F0DE"><b>a</b></font><font color="#9CEEDA"><b>t</b></font><font color="#97EBD5"><b>e </b></font><font color="#91E8D1"><b>R</b></font><font color="#8CE5CD"><b>s</b></font><font color="#86E2C9"><b>b</b></font><font color="#81DFC4"><b>u</b></font><font color="#7BDCC0"><b>i</b></font><font color="#76D9BC"><b>l</b></font><font color="#70D6B8"><b>d </b></font><font color="#6BD3B3"><b>P</b></font><font color="#65D1AF"><b>r</b></font><font color="#60CEAB"><b>o</b></font><font color="#5ACBA7"><b>j</b></font><font color="#55C8A2"><b>e</b></font><font color="#4FC59E"><b>c</b></font><font color="#4AC29A"><b>t</b></font>
+<font color="#5E5C64">│</font>
+<font color="#2AA1B3">◆</font>  Project name or path
+<font color="#2AA1B3">│</font>  dq2lib-rb<span style="background-color:#BBBBBB"><font color="#101050">_</font></span>
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select framework
+<font color="#2AA1B3">│</font>  ○ Vanilla
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> React
+<font color="#2AA1B3">│</font>  ○ Vue 3
+<font color="#2AA1B3">│</font>  ○ Vue 2
+<font color="#2AA1B3">│</font>  ○ Lit
+<font color="#2AA1B3">│</font>  ○ Preact
+<font color="#2AA1B3">│</font>  ○ Svelte
+<font color="#2AA1B3">│</font>  ○ Solid
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select language
+<font color="#2AA1B3">│</font>  <font color="#26A269">●</font> TypeScript
+<font color="#2AA1B3">│</font>  ○ JavaScript
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#2AA1B3">◆</font>  Select additional tools (Use &lt;space&gt; to select, &lt;enter&gt; to continue)
+<font color="#2AA1B3">│</font>  <font color="#2AA1B3">◻</font> Add Biome for code linting and formatting
+<font color="#2AA1B3">│</font>  ◻ Add ESLint for code linting
+<font color="#2AA1B3">│</font>  ◻ Add Prettier for code formatting
+<font color="#2AA1B3">└</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">◇</font>  Next steps <font color="#5E5C64">───╮</font>
+<font color="#5E5C64">│</font>                <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  cd dq2lib-rb  <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  pnpm i        <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>  pnpm run dev  <font color="#5E5C64">│</font>
+<font color="#5E5C64">│</font>                <font color="#5E5C64">│</font>
+<font color="#5E5C64">├────────────────╯</font>
+<font color="#5E5C64">│</font>
+<font color="#5E5C64">└</font>  Done.
+</pre></html></WRAP>
+</WRAP>
+Rsbuild を開始し [[http://localhost:3000/|]] にアクセスして動作確認する😉\\
+<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">dq2lib-rb</u><font color="#FF9999"> </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#FF9999"> </font><font color="#26A269">pnpm</font> install <font color="#12488B"><b>&amp;&amp;</b></font><font color="#FF9999"> </font><font color="#26A269">pnpm</font> run dev
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+30</font>
+<font color="#26A269">++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">38</font>, reused <font color="#33C7DE">30</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">30</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @rsbuild/core <font color="#5E5C64">1.0.10</font>
+<font color="#26A269">+</font> @rsbuild/plugin-react <font color="#5E5C64">1.0.3</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> typescript <font color="#5E5C64">5.6.2</font>
+Done in 25.9s
+&gt; dq2lib-rb@1.0.0 dev /home/tomoyan/my_projects/dq2lib-rb
+&gt; rsbuild dev --open
+<font color="#BDFFF3"><b>  </b></font><font color="#B5FBED"><b>R</b></font><font color="#ADF6E6"><b>s</b></font><font color="#A4F2E0"><b>b</b></font><font color="#9CEEDA"><b>u</b></font><font color="#94E9D3"><b>i</b></font><font color="#8CE5CD"><b>l</b></font><font color="#83E0C6"><b>d </b></font><font color="#7BDCC0"><b>v</b></font><font color="#73D8BA"><b>1</b></font><font color="#6BD3B3"><b>.</b></font><font color="#63CFAD"><b>0</b></font><font color="#5ACBA7"><b>.</b></font><font color="#52C6A0"><b>1</b></font><font color="#4AC29A"><b>0</b></font>
+  ➜ Local:    <font color="#2AA1B3">http://localhost:3000/</font>
+  ➜ Network:  <font color="#2AA1B3">http://192.168.1.101:3000/</font>
+<font color="#2AA1B3"><b>start  </b></font> Compiling...
+<font color="#26A269"><b>ready  </b></font> Compiled in <b>0.86</b> s<font color="#5E5C64"> (web)</font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP zoomimg w300 x1_3>
+{{:javascript:rsbuild_with_react.png|Rsbuild with React}}
+</WRAP>
+==== Farm (Rust で書かれた超高速 Web ビルド ツール) + React の開始手順 ====
+公式: [[https://www.farmfe.org/|Farm Documentation | Farm]]\\
+ソースコード: [[git>farm-fe/farm|farm-fe/farm: Extremely fast Vite-compatible web build tool written in Rust]]\\
+=== クイックスタート ===
+React プロジェクトを作成する🤔\\
+公式: [[https://www.farmfe.org/docs/quick-start|Quick Start | Farm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> create farm@latest dq2lib-fr <font color="#A347BA">--template</font> react
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.../1926ab4424f-2e7d9                    |   <font color="#26A269">+3</font> <font color="#26A269">+</font>
+.../1926ab4424f-2e7d9                    | Progress: resolved <font color="#33C7DE">13</font>, reused <font color="#33C7DE">0</font>, downloaded <font color="#33C7DE">3</font>, added <font color="#33C7DE">3</font>, done
+<font color="#FFB6C1"> ⚡ W</font><font color="#E692B4">elcom</font><font color="#CC6DA7">e To </font><font color="#B3499A">Farm </font><font color="#99248D">! </font>
+<font color="#FFB6C1"> ✔️ Tem</font><font color="#E692B4">plate co</font><font color="#CC6DA7">pied Suc</font><font color="#B3499A">cessfull</font><font color="#99248D">y! </font>
+<font color="#FFB6C1"> &gt;  Initial</font><font color="#E692B4"> Farm Proje</font><font color="#CC6DA7">ct created </font><font color="#B3499A">successfull</font><font color="#99248D">y ✨ ✨ </font>
+<font color="#FFB6C1">    </font><font color="#E692B4">cd d</font><font color="#CC6DA7">q2l</font><font color="#B3499A">ib-f</font><font color="#99248D">r </font>
+<font color="#FFB6C1">    </font><font color="#E692B4">pnpm</font><font color="#CC6DA7"> in</font><font color="#B3499A">stal</font><font color="#99248D">l </font>
+<font color="#FFB6C1">   </font><font color="#E692B4"> pn</font><font color="#CC6DA7">pm </font><font color="#B3499A">dev</font><font color="#99248D"> </font>
+</pre></html></WRAP>
+</WRAP>
+Farm を開始し [[http://localhost:9000/|]] にアクセスして動作確認する😉\\
+<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">d</u><font color="#999999"><u style="text-decoration-style:solid">q2lib-fr</u></font><font color="#999999"> </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#999999"> </font><font color="#26A269">pnpm</font><font color="#999999"> install </font><font color="#12488B"><b>&amp;&amp;</b></font><font color="#999999"> </font><font color="#26A269">pnpm</font><font color="#999999"> run dev</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+317</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">317</font>, reused <font color="#33C7DE">317</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">317</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @farmfe/cli <font color="#5E5C64">1.0.4</font>
+<font color="#26A269">+</font> @farmfe/core <font color="#5E5C64">1.3.25</font>
+<font color="#26A269">+</font> @farmfe/plugin-react <font color="#5E5C64">1.2.2</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> core-js <font color="#5E5C64">3.38.1</font>
+<font color="#26A269">+</font> react-refresh <font color="#5E5C64">0.14.2</font>
+Done in 2.7s
+&gt; dq2lib-fr@1.0.0 dev /home/tomoyan/my_projects/dq2lib-fr
+&gt; farm start
+<font color="#711A5F"><b>[ Farm ]</b></font> Using config file at <font color="#26A269"><b>/home/tomoyan/my_projects/dq2lib-fr/farm.config.ts</b></font>
+ <font color="#711A5F"><b>ϟ  Farm  v1.3.25</b></font>
+<font color="#26A269"><b> ✓</b></font>  <b>Ready in</b> <font color="#26A269"><b>450ms</b></font> <font color="#711A5F"><b>⚡️</b></font><font color="#B06AB3"><b>FU</b></font><font color="#B266AC"><b>L</b></font><font color="#B462A5"><b>L</b></font><font color="#B75E9E"><b> E</b></font><font color="#B95A97"><b>X</b></font><font color="#BB5691"><b>T</b></font><font color="#BD528A"><b>RE</b></font><font color="#BF4E83"><b>M</b></font><font color="#C24A7C"><b>E</b></font><font color="#C44675"><b>!</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Local:   </b><font color="#2AA1B3"><b>http://localhost:9000/</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Network: </b><font color="#2AA1B3"><b>http://192.168.1.101:9000/</b></font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP zoomimg w300 x1_3>
+{{:javascript:farm_with_react.png|Farm with React}}
+</WRAP>
+=== 手動手順による詳細の理解 ===
+React プロジェクトを作成する🤔\\
+package.json は自動生成される。\\
+公式: [[https://www.farmfe.org/docs/tutorials/create|Create A Project | Farm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> dq2lib-fr <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">cd</font> dq2lib-fr <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">pnpm</font> init
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Wrote to /home/tomoyan/my_projects/dq2lib-fr/package.json
+{
+  &quot;name&quot;: &quot;dq2lib-fr&quot;,
+  &quot;version&quot;: &quot;1.0.0&quot;,
+  &quot;description&quot;: &quot;&quot;,
+  &quot;main&quot;: &quot;index.js&quot;,
+  &quot;scripts&quot;: {
+    &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
+  },
+  &quot;keywords&quot;: [],
+  &quot;author&quot;: &quot;&quot;,
+  &quot;license&quot;: &quot;ISC&quot;
+}
+</pre></html></WRAP>
+</WRAP>
+React の依存関係 react と react-dom をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> add react react-dom <font color="#12488B"><b>&amp;&amp;</b></font> <font color="#26A269">pnpm</font> add react-refresh @types/react @types/react-dom <font color="#A347BA">-D</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+5</font>
+<font color="#26A269">+++++</font>
+Progress: resolved <font color="#33C7DE">5</font>, reused <font color="#33C7DE">5</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">5</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+Done in 5.9s
+Packages: <font color="#26A269">+5</font>
+<font color="#26A269">+++++</font>
+Progress: resolved <font color="#33C7DE">10</font>, reused <font color="#33C7DE">10</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">5</font>, done
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.11</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> react-refresh <font color="#5E5C64">0.14.2</font>
+Done in 2.6s
+</pre></html></WRAP>
+</WRAP>
+Farm の依存関係 react と react-dom をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> add <font color="#A347BA">-D</font> @farmfe/cli @farmfe/core @farmfe/plugin-react
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Packages: <font color="#26A269">+307</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">339</font>, reused <font color="#33C7DE">317</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">307</font>, done
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @farmfe/cli <font color="#5E5C64">1.0.4</font>
+<font color="#26A269">+</font> @farmfe/core <font color="#5E5C64">1.3.25</font>
+<font color="#26A269">+</font> @farmfe/plugin-react <font color="#5E5C64">1.2.2</font>
+Done in 14.6s
+</pre></html></WRAP>
+</WRAP>
+farm.config.ts を作成する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> f<font color="#999999">arm.config.ts</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre class=bat>
+<font color="#F92672">import</font><font color="#F8F8F2"> { </font><font color="#FFFFFF">defineConfig</font><font color="#F8F8F2"> } </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;@farmfe/core&apos;</font><font color="#F8F8F2">;</font>
+<font color="#F92672">export</font><font color="#F8F8F2"> </font><font color="#F92672">default</font><font color="#F8F8F2"> </font><font color="#A6E22E">defineConfig</font><font color="#FFFFFF">(</font><font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  compilation: {</font>
+<font color="#F8F8F2">    input: {</font>
+<font color="#F8F8F2">      index: </font><font color="#E6DB74">&apos;./src/index.html&apos;</font>
+<font color="#F8F8F2">    },</font>
+<font color="#F8F8F2">    output: {</font>
+<font color="#F8F8F2">      path: </font><font color="#E6DB74">&apos;build&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      publicPath: </font><font color="#E6DB74">&apos;/&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      targetEnv: </font><font color="#E6DB74">&apos;browser&apos;</font>
+<font color="#F8F8F2">    }</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  plugins: [</font>
+<font color="#F8F8F2">    </font><font color="#E6DB74">&apos;@farmfe/plugin-react&apos;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  ]</font>
+<font color="#F8F8F2">}</font><font color="#FFFFFF">)</font><font color="#F8F8F2">;</font>
+</pre></html></WRAP>
+</WRAP>
+src/index.html と src/index.tsx を作成する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> src
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> src/index.html
+</pre></html></WRAP>
+<WRAP color_mincode><html><pre class=bat>
+<font color="#FFFFFF">&lt;!</font><font color="#F92672">DOCTYPE</font><font color="#F8F8F2"> </font><font color="#BE84FF">html</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">html</font><font color="#A6E22E"> lang=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">en</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">meta</font><font color="#A6E22E"> charset=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">UTF-8</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">meta</font><font color="#A6E22E"> name=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">viewport</font><font color="#FFFFFF">&quot;</font><font color="#A6E22E"> content=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">width=device-width, initial-scale=1.0</font><font color="#FFFFFF">&quot;&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font><font color="#F8F8F2">Document</font><font color="#FFFFFF">&lt;/</font><font color="#F92672">title</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">head</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">div</font><font color="#A6E22E"> id=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">root</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;</font>
+<font color="#F8F8F2">  </font><font color="#7C7865">&lt;!-- we must use script to make ./index.tsx as a dependency --&gt;</font>
+<font color="#F8F8F2">  </font><font color="#FFFFFF">&lt;</font><font color="#F92672">script</font><font color="#F8F8F2"> </font><font color="#A6E22E">src=</font><font color="#FFFFFF">&quot;</font><font color="#E6DB74">./index.tsx</font><font color="#FFFFFF">&quot;&gt;&lt;/</font><font color="#F92672">script</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">body</font><font color="#FFFFFF">&gt;</font>
+<font color="#FFFFFF">&lt;/</font><font color="#F92672">html</font><font color="#FFFFFF">&gt;</font>
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mkdir</font> src
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">nano</font> src/index.tsx
+</pre></html></WRAP>
+<WRAP color_mincode><html><pre class=bat>
+<font color="#F92672">import</font><font color="#F8F8F2"> </font><font color="#FFFFFF">React</font><font color="#F8F8F2"> </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;react&apos;</font><font color="#F8F8F2">;</font>
+<font color="#F92672">import</font><font color="#F8F8F2"> { </font><font color="#FFFFFF">createRoot</font><font color="#F8F8F2"> } </font><font color="#F92672">from</font><font color="#F8F8F2"> </font><font color="#E6DB74">&apos;react-dom/client&apos;</font><font color="#F8F8F2">;</font>
+<font color="#66D9EF">const</font><font color="#F8F8F2"> </font><font color="#FFFFFF">container</font><font color="#F8F8F2"> </font><font color="#F92672">=</font><font color="#F8F8F2"> document.</font><font color="#66D9EF">querySelector</font><font color="#FFFFFF">(</font><font color="#E6DB74">&apos;#root&apos;</font><font color="#FFFFFF">)</font><font color="#F8F8F2">;</font>
+<font color="#66D9EF">const</font><font color="#F8F8F2"> </font><font color="#FFFFFF">root</font><font color="#F8F8F2"> </font><font color="#F92672">=</font><font color="#F8F8F2"> </font><font color="#A6E22E">createRoot</font><font color="#FFFFFF">(container)</font><font color="#F8F8F2">;</font>
+<font color="#F8F8F2">root.</font><font color="#A6E22E">render</font><font color="#FFFFFF">(&lt;</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;</font><font color="#F8F8F2">A React Page compiled by Farm</font><font color="#FFFFFF">&lt;/</font><font color="#F92672">div</font><font color="#FFFFFF">&gt;)</font><font color="#F8F8F2">;</font>
+</pre></html></WRAP>
+</WRAP>
+package.json に開始スクリプトを追加する🤔\\
+<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">p</u><font color="#999999"><u style="text-decoration-style:solid">ackage.json</u></font>
+</pre></html></WRAP>
+<WRAP color_mincode_hlong><html><pre class=bat>
+<pre><font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;dq2lib-fr&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;description&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;main&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;index.js&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;test&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;echo </font><font color="#BE84FF">\&quot;</font><font color="#E6DB74">Error: no test specified</font><font color="#BE84FF">\&quot;</font><font color="#E6DB74"> &amp;&amp; exit 1&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;farm start&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;keywords&quot;</font><font color="#F8F8F2">: [],</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;author&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;license&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;ISC&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;react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.1&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;@farmfe/cli&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.0.4&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@farmfe/core&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.3.25&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@farmfe/plugin-react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^1.2.2&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.11&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.3.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-refresh&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^0.14.2&quot;</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">}</font>
+</pre></html></WRAP>
+</WRAP>
+Farm を開始し [[http://localhost:9000/|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> s<font color="#999999">tart</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#711A5F"><b>[ Farm ]</b></font> Using config file at <font color="#26A269"><b>/home/tomoyan/my_projects/dq2lib-fr/farm.config.ts</b></font>
+ <font color="#711A5F"><b>ϟ  Farm  v1.3.25</b></font>
+<font color="#26A269"><b> ✓</b></font>  <b>Ready in</b> <font color="#26A269"><b>477ms</b></font> <font color="#711A5F"><b>⚡️</b></font><font color="#B06AB3"><b>FU</b></font><font color="#B266AC"><b>L</b></font><font color="#B462A5"><b>L</b></font><font color="#B75E9E"><b> E</b></font><font color="#B95A97"><b>X</b></font><font color="#BB5691"><b>T</b></font><font color="#BD528A"><b>RE</b></font><font color="#BF4E83"><b>M</b></font><font color="#C24A7C"><b>E</b></font><font color="#C44675"><b>!</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Local:   </b><font color="#2AA1B3"><b>http://localhost:9000/</b></font>
+<font color="#711A5F"><b>[ Farm ]</b></font> <font color="#B40064"><b>&gt;</b></font> <b>Network: </b><font color="#2AA1B3"><b>http://192.168.1.101:9000/</b></font>
+</pre></html></WRAP>
+</WRAP>
+==== ふっかつのじゅもん２を動かす😅 ====
+公式: [[git>yoshi389111/dq2pswd|GitHub - yoshi389111/dq2pswd: ふっかつのじゅもんを作れます。２の方です。]]\\
+ここでは React アプリのサンプルとして、ドラクエⅡ🐉の「ふっかつのじゅもん２」を動かす😅\\
+**GitHub よりソースコードをクローン**\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">git</font> clone https://github.com/yoshi389111/dq2pswd.git
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Cloning into &apos;dq2pswd&apos;...
+remote: Enumerating objects: 204, done.
+remote: Counting objects: 100% (204/204), done.
+remote: Compressing objects: 100% (143/143), done.
+remote: Total 204 (delta 115), reused 147 (delta 58), pack-reused 0 (from 0)
+Receiving objects: 100% (204/204), 554.01 KiB | 4.86 MiB/s, done.
+Resolving deltas: 100% (115/115), done.
+</pre></html></WRAP>
+</WRAP>
+**依存パッケージをインストール**\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">cd</font><font color="#999999"> dq2pswd</font>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Lockfile is up to date, resolution step is skipped
+Packages: <font color="#26A269">+1258</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">1258</font>, reused <font color="#33C7DE">1258</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">1258</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#26A269">+</font> @testing-library/jest-dom <font color="#5E5C64">5.17.0</font>
+<font color="#26A269">+</font> @testing-library/react <font color="#5E5C64">13.4.0</font>
+<font color="#26A269">+</font> @testing-library/user-event <font color="#5E5C64">13.5.0</font>
+<font color="#26A269">+</font> @types/jest <font color="#5E5C64">27.5.2</font>
+<font color="#26A269">+</font> @types/node <font color="#5E5C64">16.18.112</font>
+<font color="#26A269">+</font> @types/react <font color="#5E5C64">18.3.10</font>
+<font color="#26A269">+</font> @types/react-dom <font color="#5E5C64">18.3.0</font>
+<font color="#26A269">+</font> react <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-dom <font color="#5E5C64">18.3.1</font>
+<font color="#26A269">+</font> react-scripts <font color="#5E5C64">5.0.1</font>
+<font color="#26A269">+</font> typescript <font color="#5E5C64">4.9.5</font>
+<font color="#26A269">+</font> web-vitals <font color="#5E5C64">2.1.4</font>
+<font color="#33C7DE">devDependencies:</font>
+<font color="#26A269">+</font> @typescript-eslint/eslint-plugin <font color="#5E5C64">5.62.0</font>
+<font color="#26A269">+</font> @typescript-eslint/parser <font color="#5E5C64">5.62.0</font>
+<font color="#26A269">+</font> eslint <font color="#5E5C64">8.57.1</font>
+<font color="#26A269">+</font> eslint-config-prettier <font color="#5E5C64">8.10.0</font>
+<font color="#26A269">+</font> prettier <font color="#5E5C64">2.8.8</font>
+Done in 7.5s
+</pre></html></WRAP>
+</WRAP>
+React アプリを開始して [[http://localhost:3000/dq2pswd|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> start
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">Compiled successfully!</font>
+You can now view <b>dq2pswd</b> in the browser.
+  <b>Local:</b>            http://localhost:<b>3000</b>/dq2pswd
+  <b>On Your Network:</b>  http://192.168.1.80:<b>3000</b>/dq2pswd
+Note that the development build is not optimized.
+To create a production build, use <font color="#2AA1B3">npm run build</font>.
+webpack compiled <font color="#26A269"><b>successfully</b></font>
+<font color="#26A269">No issues found.</font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP zoomimg w600 x1_3>
+{{:javascript:dq2pswd_001.png|dq2pswd}}
+</WRAP>
+==== TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'. エラーが発生する場合🤔 ====
+package.json を編集して @testing-library/jest-dom を最新化する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">git</font> diff
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<pre><b>diff --git a/package.json b/package.json</b>
+<b>index 53ace06..2d5556c 100644</b>
+<b>--- a/package.json</b>
+<b>+++ b/package.json</b>
+<font color="#2AA1B3">@@ -4,7 +4,7 @@</font>
+   &quot;private&quot;: true,
+   &quot;homepage&quot;: &quot;/dq2pswd/&quot;,
+   &quot;dependencies&quot;: {
+<font color="#C01C28">-    &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,</font>
+<font color="#26A269">+    &quot;@testing-library/jest-dom&quot;: &quot;^6.5.0&quot;,</font>
+     &quot;@testing-library/react&quot;: &quot;^13.4.0&quot;,
+     &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
+     &quot;@types/jest&quot;: &quot;^27.5.2&quot;,
+<font color="#A2734C"><b>(END)</b></font>
+</pre></html></WRAP>
+</WRAP>
+@testing-library/jest-dom を更新する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">21 deprecated subdependencies found:</font> @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@7.18.6, @babel/plugin-proposal-numeric-separator@7.18.6, @babel/plugin-proposal-optional-chaining@7.21.0, @babel/plugin-proposal-private-methods@7.18.6, @babel/plugin-proposal-private-property-in-object@7.21.11, @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, abab@2.0.6, domexception@2.0.1, glob@7.2.3, inflight@1.0.6, q@1.5.1, rimraf@3.0.2, rollup-plugin-terser@7.0.2, sourcemap-codec@1.4.8, stable@0.1.8, svgo@1.3.2, w3c-hr-time@1.0.2, workbox-cacheable-response@6.6.0, workbox-google-analytics@6.6.0
+Packages: <font color="#26A269">+2</font> <font color="#C01C28">-2</font>
+<font color="#26A269">++</font><font color="#C01C28">--</font>
+Progress: resolved <font color="#33C7DE">1259</font>, reused <font color="#33C7DE">1258</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">2</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#C01C28">-</font> @testing-library/jest-dom <font color="#5E5C64">5.17.0</font>
+<font color="#26A269">+</font> @testing-library/jest-dom <font color="#5E5C64">6.5.0</font>
+Done in 6.5s
+</pre></html></WRAP>
+</WRAP>
+リビルドする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <u style="text-decoration-style:solid">b</u><font color="#999999"><u style="text-decoration-style:solid">uild</u></font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+&gt; dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
+&gt; react-scripts build
+Creating an optimized production build...
+<font color="#26A269">Compiled successfully.</font>
+File sizes after gzip:
+.61 kB  build/static/js/<font color="#2AA1B3">main.5e3185dc.js</font>
+.77 kB   build/static/js/<font color="#2AA1B3">163.18b91db1.chunk.js</font>
+.14 kB   build/static/css/<font color="#2AA1B3">main.7ffe0c1c.css</font>
+The project was built assuming it is hosted at <font color="#26A269">/dq2pswd/</font>.
+You can control this with the <font color="#26A269">homepage</font> field in your <font color="#2AA1B3">package.json</font>.
+The <font color="#2AA1B3">build</font> folder is ready to be deployed.
+Find out more about deployment here:
+  <font color="#A2734C">https://cra.link/deployment</font>
+</pre></html></WRAP>
+</WRAP>
+===== トラブルシューティング =====
+==== ERR_PNPM_UNEXPECTED_STORE  Unexpected store location が発生する...🤪 ====
+参考: [[git>pnpm/pnpm/issues/3584|Can't install dependencies when one of them is linked from global · Issue #3584 · pnpm/pnpm]]\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install <font color="#A347BA">-g</font> web-ext
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421"> ERR_PNPM_UNEXPECTED_STORE </font></span> <font color="#C01C28">Unexpected store location</font>
+The dependencies at &quot;/home/tomoyan/.local/share/pnpm/global/5/node_modules&quot; are currently linked from the store at &quot;/home/tomoyan/.local/share/pnpm/store/v10&quot;.
+pnpm now wants to use the store at &quot;/home/tomoyan/.pnpm-store/v10&quot; to link dependencies.
+If you want to use the new store location, reinstall your dependencies with &quot;pnpm install&quot;.
+You may change the global store location by running &quot;pnpm config set store-dir &lt;dir&gt; --global&quot;.
+(This error may happen if the node_modules was installed with a different major version of pnpm)
+</pre></html></WRAP>
+</WRAP>
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> link <font color="#A347BA">--global</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">✔</font> <b>The modules directory at &quot;/home/tomoyan/.local/share/pnpm/global/5/node_modules&quot; will be removed and reinstalled from scratch. Proceed?</b> (Y/n) · <font color="#26A269">true</font>
+Recreating /home/tomoyan/.local/share/pnpm/global/5/node_modules
+Downloading zeromq@6.3.0: <font color="#33C7DE">6.99 MB</font>/<font color="#33C7DE">6.99 MB</font>, done
+Downloading @tslab/typescript-for-tslab@5.0.4: <font color="#33C7DE">7.05 MB</font>/<font color="#33C7DE">7.05 MB</font>, done
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">6 deprecated subdependencies found:</font> are-we-there-yet@3.0.1, gauge@4.0.4, glob@7.2.3, inflight@1.0.6, npmlog@6.0.2, sourcemap-codec@1.4.8
+Progress: resolved <font color="#33C7DE">206</font>, reused <font color="#33C7DE">96</font>, downloaded <font color="#33C7DE">109</font>, added <font color="#33C7DE">0</font>, done
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> paxmod has no binaries
+<font color="#33C7DE">/home/tomoyan/.local/share/pnpm/global/5:</font>
+<font color="#26A269">+</font> grunt-cli <font color="#666666">1.5.0</font>
+<font color="#26A269">+</font> paxmod <font color="#666666">&lt;- ../../../../../my_projects/jupyter-src/paxmod</font>
+<font color="#26A269">+</font> tslab <font color="#666666">1.0.22</font>
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install <font color="#A347BA">-g</font> web-ext
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">10 deprecated subdependencies found:</font> @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, are-we-there-yet@3.0.1, eslint@8.57.1, gauge@4.0.4, glob@7.2.3, inflight@1.0.6, npmlog@6.0.2, rimraf@3.0.2, sourcemap-codec@1.4.8
+Packages: <font color="#26A269">+309</font>
+<font color="#26A269">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</font>
+Progress: resolved <font color="#33C7DE">515</font>, reused <font color="#33C7DE">331</font>, downloaded <font color="#33C7DE">183</font>, added <font color="#33C7DE">309</font>, done
+<font color="#33C7DE">/home/tomoyan/.local/share/pnpm/global/5:</font>
+<font color="#26A269">+</font> web-ext <font color="#666666">8.6.0</font>
+<font color="#A2734C">╭ Warning ──────────────────────────────────────────────────────────────────────────────────────╮</font>
+<font color="#A2734C">│</font>                                                                                               <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Ignored build scripts: spawn-sync.                                                          <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>   Run &quot;pnpm approve-builds -g&quot; to pick which dependencies should be allowed to run scripts.   <font color="#A2734C">│</font>
+<font color="#A2734C">│</font>                                                                                               <font color="#A2734C">│</font>
+<font color="#A2734C">╰───────────────────────────────────────────────────────────────────────────────────────────────╯</font>
+Done in 2m 8.9s using pnpm v10.9.0
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> approve-builds <font color="#A347BA">-g</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+✔ Choose which packages to build (Press <font color="#2AA1B3">&lt;space&gt;</font> to select, <font color="#2AA1B3">&lt;a&gt;</font> to toggle all, <font color="#2AA1B3">&lt;i&gt;</font> to invert selection) · <font color="#A347BA">No items were selected</font>
+</pre></html></WRAP>
+</WRAP>
+==== ERROR  This project is configured to use yarn が発生する...🤪 ====
+バージョンすらわからない😅\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421">ERROR </font></span> <font color="#C01C28">This project is configured to use yarn</font>
+For help, run: pnpm help
+</pre></html></WRAP>
+</WRAP>
+ヘルプを見ようにも見られない😇\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-h</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421">ERROR </font></span> <font color="#C01C28">This project is configured to use yarn</font>
+For help, run: pnpm help help
+</pre></html></WRAP>
+</WRAP>
+ホームディレクトリのプロジェクト package.json は、yarn を使用するように構成されているので一時的に退避する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">mv</font> <u style="text-decoration-style:solid">~/package.json</u> ~/package.json.yarn
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <font color="#A347BA">-v</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+.6.1
+</pre></html></WRAP>
+</WRAP>
+または、yarn から pnpm にマイグレーションする🤔\\
+[[dt>andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04|How to migrate from yarn / npm to pnpm - DEV Community]] [[gtr>https://dev.to/andreychernykh/yarn-npm-to-pnpm-migration-guide-2n04|翻訳]]\\
+==== pnpm env add -g できない😅 ====
+[[linux:anyenv|anyenv - rbenv スタイルのオールインワン環境マネージャー]] でインストールした場合など、pnpm でNode.js の管理ができない😢\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> env add <font color="#A347BA">-g</font> lts
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421"> ERR_PNPM_CANNOT_MANAGE_NODE </font></span> <font color="#C01C28">Unable to manage Node.js because pnpm was not installed using the standalone installation script</font>
+If you want to manage Node.js with pnpm, you need to remove any Node.js that was installed by other tools, then install pnpm using one of the standalone scripts that are provided on the installation page: https://pnpm.io/installation
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#C01C28"><font color="#171421"> ERR_PNPM_CANNOT_MANAGE_NODE </font></span> <font color="#C01C28">pnpm がスタンドアロン インストール スクリプトを使用してインストールされていないため、Node.js を管理できません</font>
+pnpm を使用して Node.js を管理する場合は、他のツールによってインストールされた Node.js をすべて削除し、インストール ページで提供されるスタンドアロン スクリプトの 1 つを使用して pnpm をインストールする必要があります: https://pnpm.io/installation
+</pre></html></WRAP>
+</WRAP>
+スタンドアロンスクリプトを使用してインストールし直す😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">npm</font><font color="#999999"> uninstall </font><font color="#A347BA">-g</font><font color="#999999"> pnpm</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+removed 1 package in 680ms
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">curl</font> <font color="#A347BA">-fsSL</font> https://get.pnpm.io/install.sh <font color="#12488B"><b>|</b></font> <font color="#26A269">sh</font> <font color="#A347BA">-</font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#12488B"><b>==&gt;</b></font><b> Downloading pnpm binaries 9.8.0</b>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> using --force I sure hope you know what you are doing
+Copying pnpm CLI from /tmp/tmp.mOCIb0d59q/pnpm to /home/tomoyan/.local/share/pnpm/pnpm
+Appended new lines to /home/tomoyan/.zshrc
+Next configuration changes were made:
+export PNPM_HOME=&quot;/home/tomoyan/.local/share/pnpm&quot;
+case &quot;:$PATH:&quot; in
+  *&quot;:$PNPM_HOME:&quot;*) ;;
+  *) export PATH=&quot;$PNPM_HOME:$PATH&quot; ;;
+esac
+To start using pnpm, run:
+source /home/tomoyan/.zshrc
+</pre></html></WRAP>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">.</font> <u style="text-decoration-style:solid">~/.zshrc</u>
+</pre></html></WRAP>
+</WRAP>
+Node.js LTS をインストールする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> env add <font color="#A347BA">-g</font> lts
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+Fetching Node.js 20.17.0 ...
+Node.js 20.17.0 was installed
+  /home/tomoyan/.local/share/pnpm/nodejs/20.17.0
+All specified Node.js versions were installed
+</pre></html></WRAP>
+</WRAP>
+==== TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'. エラーが発生する🤔 ====
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <u style="text-decoration-style:solid">b</u><font color="#999999"><u style="text-decoration-style:solid">uild</u></font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+&gt; dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
+&gt; react-scripts build
+Creating an optimized production build...
+<font color="#C01C28">Failed to compile.</font>
+<font color="#5E5C64">TS2339: </font>Property &apos;toBeInTheDocument&apos; does not exist on type &apos;JestMatchers&lt;HTMLElement&gt;&apos;.
+   <font color="#5E5C64">  6 |</font>   render(<font color="#A2734C">&lt;App</font> <font color="#A2734C">/&gt;</font>)<font color="#A2734C">;</font>
+   <font color="#5E5C64">  7 |</font>   <font color="#2AA1B3">const</font> linkElement <font color="#A2734C">=</font> screen<font color="#A2734C">.</font>getByText(<font color="#A347BA">/ふっかつのじゅもん/i</font>)<font color="#A2734C">;</font>
+  <font color="#C01C28"><b>&gt;</b></font><font color="#5E5C64">  8 |</font>   expect(linkElement)<font color="#A2734C">.</font>toBeInTheDocument()<font color="#A2734C">;</font>
+   <font color="#5E5C64">    |</font>                       <font color="#C01C28"><b>^^^^^^^^^^^^^^^^^</b></font>
+   <font color="#5E5C64">  9 |</font> })<font color="#A2734C">;</font>
+   <font color="#5E5C64"> 10 |</font>
+<span style="background-color:#C01C28"><font color="#171421"> ELIFECYCLE </font></span> <font color="#C01C28">Command failed with exit code 1.</font>
+</pre></html></WRAP>
+</WRAP>
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">bat</font><font color="#999999"> </font><font color="#A347BA">-p</font><font color="#999999"> </font><font color="#A347BA">--pager=never</font><font color="#999999"> </font><font color="#999999"><u style="text-decoration-style:solid">package.json</u></font>
+</pre></html></WRAP>
+<WRAP color_mincode_hlong><html><pre class=bad>
+<font color="#F8F8F2">{</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;name&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;dq2pswd&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;0.1.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;private&quot;</font><font color="#F8F8F2">: </font><font color="#BE84FF">true</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;homepage&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;/dq2pswd/&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;@testing-library/jest-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^5.16.5&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@testing-library/react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^13.4.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@testing-library/user-event&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^13.5.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/jest&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^27.5.2&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/node&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^16.18.31&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.2.6&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@types/react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.2.4&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.2.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-dom&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^18.2.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;react-scripts&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;5.0.1&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;typescript&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^4.9.5&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;web-vitals&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^2.1.4&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;start&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;react-scripts start&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;react-scripts build&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;publish&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;react-scripts build ; ./scripts/publish.sh&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;test&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;react-scripts test&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;eject&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;react-scripts eject&quot;</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;eslintConfig&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;extends&quot;</font><font color="#F8F8F2">: [</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;react-app&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;react-app/jest&quot;</font>
+<font color="#F8F8F2">    ]</font>
+<font color="#F8F8F2">  },</font>
+<font color="#F8F8F2">  </font><font color="#FD971F">&quot;browserslist&quot;</font><font color="#F8F8F2">: {</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;production&quot;</font><font color="#F8F8F2">: [</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;&gt;0.2%&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;not dead&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;not op_mini all&quot;</font>
+<font color="#F8F8F2">    ],</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;development&quot;</font><font color="#F8F8F2">: [</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;last 1 chrome version&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;last 1 firefox version&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">      </font><font color="#E6DB74">&quot;last 1 safari version&quot;</font>
+<font color="#F8F8F2">    ]</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;@typescript-eslint/eslint-plugin&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^5.59.7&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;@typescript-eslint/parser&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^5.59.7&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;eslint&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^8.41.0&quot;</font><font color="#F8F8F2">,</font>
+<font color="#F8F8F2">    </font><font color="#FD971F">&quot;eslint-config-prettier&quot;</font><font color="#F8F8F2">: </font><font color="#E6DB74">&quot;^8.8.0&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;^2.8.8&quot;</font>
+<font color="#F8F8F2">  }</font>
+<font color="#F8F8F2">}</font>
+</pre></html></WRAP>
+</WRAP>
+package.json を編集して @testing-library/jest-dom を最新化する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">git</font> diff
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<pre><b>diff --git a/package.json b/package.json</b>
+<b>index 53ace06..2d5556c 100644</b>
+<b>--- a/package.json</b>
+<b>+++ b/package.json</b>
+<font color="#2AA1B3">@@ -4,7 +4,7 @@</font>
+   &quot;private&quot;: true,
+   &quot;homepage&quot;: &quot;/dq2pswd/&quot;,
+   &quot;dependencies&quot;: {
+<font color="#C01C28">-    &quot;@testing-library/jest-dom&quot;: &quot;^5.16.5&quot;,</font>
+<font color="#26A269">+    &quot;@testing-library/jest-dom&quot;: &quot;^6.5.0&quot;,</font>
+     &quot;@testing-library/react&quot;: &quot;^13.4.0&quot;,
+     &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
+     &quot;@types/jest&quot;: &quot;^27.5.2&quot;,
+<font color="#A2734C"><b>(END)</b></font>
+</pre></html></WRAP>
+</WRAP>
+@testing-library/jest-dom を更新する🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> install
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<span style="background-color:#A2734C"><font color="#171421"> WARN </font></span> <font color="#C01C28">21 deprecated subdependencies found:</font> @babel/plugin-proposal-class-properties@7.18.6, @babel/plugin-proposal-nullish-coalescing-operator@7.18.6, @babel/plugin-proposal-numeric-separator@7.18.6, @babel/plugin-proposal-optional-chaining@7.21.0, @babel/plugin-proposal-private-methods@7.18.6, @babel/plugin-proposal-private-property-in-object@7.21.11, @humanwhocodes/config-array@0.13.0, @humanwhocodes/object-schema@2.0.3, abab@2.0.6, domexception@2.0.1, glob@7.2.3, inflight@1.0.6, q@1.5.1, rimraf@3.0.2, rollup-plugin-terser@7.0.2, sourcemap-codec@1.4.8, stable@0.1.8, svgo@1.3.2, w3c-hr-time@1.0.2, workbox-cacheable-response@6.6.0, workbox-google-analytics@6.6.0
+Packages: <font color="#26A269">+2</font> <font color="#C01C28">-2</font>
+<font color="#26A269">++</font><font color="#C01C28">--</font>
+Progress: resolved <font color="#33C7DE">1259</font>, reused <font color="#33C7DE">1258</font>, downloaded <font color="#33C7DE">0</font>, added <font color="#33C7DE">2</font>, done
+<font color="#33C7DE">dependencies:</font>
+<font color="#C01C28">-</font> @testing-library/jest-dom <font color="#5E5C64">5.17.0</font>
+<font color="#26A269">+</font> @testing-library/jest-dom <font color="#5E5C64">6.5.0</font>
+Done in 6.5s
+</pre></html></WRAP>
+</WRAP>
+リビルドする🤔\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> <u style="text-decoration-style:solid">b</u><font color="#999999"><u style="text-decoration-style:solid">uild</u></font>
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+&gt; dq2pswd@0.1.0 build /home/tomoyan/my_projects/dq2pswd
+&gt; react-scripts build
+Creating an optimized production build...
+<font color="#26A269">Compiled successfully.</font>
+File sizes after gzip:
+.61 kB  build/static/js/<font color="#2AA1B3">main.5e3185dc.js</font>
+.77 kB   build/static/js/<font color="#2AA1B3">163.18b91db1.chunk.js</font>
+.14 kB   build/static/css/<font color="#2AA1B3">main.7ffe0c1c.css</font>
+The project was built assuming it is hosted at <font color="#26A269">/dq2pswd/</font>.
+You can control this with the <font color="#26A269">homepage</font> field in your <font color="#2AA1B3">package.json</font>.
+The <font color="#2AA1B3">build</font> folder is ready to be deployed.
+Find out more about deployment here:
+  <font color="#A2734C">https://cra.link/deployment</font>
+</pre></html></WRAP>
+</WRAP>
+React アプリを開始して [[http://localhost:3000/dq2pswd|]] にアクセスして動作確認する😉\\
+<WRAP color_term>
+<WRAP color_command><html><pre>
+<font color="#0087FF"><b>$</b></font> <font color="#26A269">pnpm</font> start
+</pre></html></WRAP>
+<WRAP color_result><html><pre>
+<font color="#26A269">Compiled successfully!</font>
+You can now view <b>dq2pswd</b> in the browser.
+  <b>Local:</b>            http://localhost:<b>3000</b>/dq2pswd
+  <b>On Your Network:</b>  http://192.168.1.80:<b>3000</b>/dq2pswd
+Note that the development build is not optimized.
+To create a production build, use <font color="#2AA1B3">npm run build</font>.
+webpack compiled <font color="#26A269"><b>successfully</b></font>
+<font color="#26A269">No issues found.</font>
+</pre></html></WRAP>
+</WRAP>
+参考: [[git>testing-library/jest-dom/issues/546|Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>' · Issue #546 · testing-library/jest-dom · GitHub]]\\
+===== 参考文献 =====
+==== 付録 ====
+[[tw>tomoyan596sp/status/1840701377099817249|わたしReactわからないあるよ😅]]\\