<h1 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<p>n 番煎じですが、自分用に anyenv、nodenv から React(TypeScript)環境を作るコマンドのまとめです。<br>
新しい PC とか EC2 とかで、Docker すら入っていない状態のときに使うことが多かったので記事を書きました。<br>
macOS、Linux 向けに、記事を読まなくても上からコピー&amp;ペーストするだけで環境構築できるようになっています。</p>
<h1 id="%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86">
<a class="header-anchor-link" href="#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E6%89%8B%E9%A0%86" aria-hidden="true"></a> インストール手順</h1>
<p>使用するシェルは zsh を想定しています。</p>
<h2 id="anyenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#anyenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> anyenv をインストール</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/anyenv/anyenv ~/.anyenv
<span class="token builtin class-name">echo</span> <span class="token string">'export PATH="$HOME/.anyenv/bin:$PATH"'</span> <span class="token operator">&gt;&gt;</span> ~/.zshrc
<span class="token builtin class-name">echo</span> <span class="token string">'eval "$(anyenv init -)"'</span> <span class="token operator">&gt;&gt;</span> ~/.zshrc
<span class="token builtin class-name">exec</span> <span class="token environment constant">$SHELL</span> <span class="token parameter variable">-l</span>
anyenv <span class="token function">install</span> <span class="token parameter variable">--init</span>
</code></pre></div><h2 id="nodenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#nodenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> nodenv をインストール</h2>
<div class="code-block-container"><pre><code>anyenv install nodenv
exec $SHELL -l
</code></pre></div><h2 id="anyenv-update-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#anyenv-update-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> anyenv-update インストール</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">mkdir</span> <span class="token parameter variable">-p</span> <span class="token variable"><span class="token variable">$(</span>anyenv root<span class="token variable">)</span></span>/plugins
<span class="token function">git</span> clone https://github.com/znz/anyenv-update.git <span class="token variable"><span class="token variable">$(</span>anyenv root<span class="token variable">)</span></span>/plugins/anyenv-update
<span class="token function">mkdir</span> <span class="token parameter variable">-p</span> <span class="token string">"<span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>"</span>/plugins
</code></pre></div><h2 id="nodenv-default-package-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E7%B7%A8%E9%9B%86">
<a class="header-anchor-link" href="#nodenv-default-package-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E7%B7%A8%E9%9B%86" aria-hidden="true"></a> nodenv default-package をインストールして編集</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/nodenv/nodenv-default-packages.git <span class="token string">"<span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/plugins/nodenv-default-packages"</span>
<span class="token function">touch</span> <span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/default-packages
<span class="token builtin class-name">echo</span> <span class="token string">"yarn<span class="token entity" title="\n">\n</span>typescript<span class="token entity" title="\n">\n</span>ts-node<span class="token entity" title="\n">\n</span>typesync"</span> <span class="token operator">&gt;&gt;</span> <span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/default-packages
</code></pre></div><h3 id="node.js-18.12.1-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#node.js-18.12.1-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Node.js 18.12.1 をインストール</h3>
<p>執筆時点(2023 年 3 月 16 日)で LTS である 18.12.1 をインストールします。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">nodenv <span class="token function">install</span> <span class="token number">18.12</span>.1
nodenv global <span class="token number">18.12</span>.1
</code></pre></div><h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h1>
<h2 id="react-%E3%82%92%E8%B5%B7%E5%8B%95">
<a class="header-anchor-link" href="#react-%E3%82%92%E8%B5%B7%E5%8B%95" aria-hidden="true"></a> React を起動</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">npx create-react-app react-example <span class="token parameter variable">--template</span> typescript
<span class="token builtin class-name">cd</span> react-example
<span class="token function">yarn</span> start
</code></pre></div><p>ブラウザが起動して以下の画面が出てきたら完了です。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--nVprNcVB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3f37cc579206b697c1f5f8c3.png%3Fsha%3D00dcb0a69fb40ee4485d31056caa5465bb7f4307" alt="localhost:3000" loading="lazy" class="md-img"></p>
<h1 id="%E8%A7%A3%E8%AA%AC">
<a class="header-anchor-link" href="#%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> 解説</h1>
<h2 id="anyenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1">
<a class="header-anchor-link" href="#anyenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1" aria-hidden="true"></a> anyenv をインストール</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/anyenv/anyenv ~/.anyenv
<span class="token builtin class-name">echo</span> <span class="token string">'export PATH="$HOME/.anyenv/bin:$PATH"'</span> <span class="token operator">&gt;&gt;</span> ~/.zshrc
<span class="token builtin class-name">echo</span> <span class="token string">'eval "$(anyenv init -)"'</span> <span class="token operator">&gt;&gt;</span> ~/.zshrc
<span class="token builtin class-name">exec</span> <span class="token environment constant">$SHELL</span> <span class="token parameter variable">-l</span>
anyenv <span class="token function">install</span> <span class="token parameter variable">--init</span>
</code></pre></div><h2 id="nodenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1">
<a class="header-anchor-link" href="#nodenv-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1" aria-hidden="true"></a> nodenv をインストール</h2>
<div class="code-block-container"><pre><code>anyenv install nodenv
exec $SHELL -l
</code></pre></div><h2 id="anyenv-update-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1">
<a class="header-anchor-link" href="#anyenv-update-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1" aria-hidden="true"></a> anyenv-update インストール</h2>
<p>anyenv-update を anyenv の plugins に install しています。<br>
anyenv-update を使うと、install する env たちも update されるので便利です。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">mkdir</span> <span class="token parameter variable">-p</span> <span class="token variable"><span class="token variable">$(</span>anyenv root<span class="token variable">)</span></span>/plugins
<span class="token function">git</span> clone https://github.com/znz/anyenv-update.git <span class="token variable"><span class="token variable">$(</span>anyenv root<span class="token variable">)</span></span>/plugins/anyenv-update
<span class="token function">mkdir</span> <span class="token parameter variable">-p</span> <span class="token string">"<span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>"</span>/plugins
<span class="token function">git</span> clone https://github.com/nodenv/nodenv-default-packages.git <span class="token string">"<span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/plugins/nodenv-default-packages"</span>
<span class="token function">touch</span> <span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/default-packages
</code></pre></div><h2 id="nodenv-default-packages-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E7%B7%A8%E9%9B%86">
<a class="header-anchor-link" href="#nodenv-default-packages-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E7%B7%A8%E9%9B%86" aria-hidden="true"></a> nodenv default-packages をインストールして編集</h2>
<p>nodenv default-packages について解説します。nodenv default-packages とは nodenv の plugin です。nodenv で Node.js をインストールした際に、<code>$(nodenv root)/default-packages</code>に記述されたパッケージを自動的にインストールされます。</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">git</span> clone https://github.com/nodenv/nodenv-default-packages.git <span class="token string">"<span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/plugins/nodenv-default-packages"</span>
<span class="token function">touch</span> <span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/default-packages
<span class="token builtin class-name">echo</span> <span class="token string">"yarn<span class="token entity" title="\n">\n</span>typescript<span class="token entity" title="\n">\n</span>ts-node<span class="token entity" title="\n">\n</span>typesync"</span> <span class="token operator">&gt;&gt;</span> <span class="token variable"><span class="token variable">$(</span>nodenv root<span class="token variable">)</span></span>/default-packages
</code></pre></div><p>以下のコマンドで package を指定していました。</p>
<div class="code-block-container"><pre><code>echo "yarn\ntypescript\nts-note\ntypesync" &gt;&gt; $(nodenv root)/default-packages
</code></pre></div><p>中身は以下、詳しくは解説しませんが、必須なもの（TypeScript、ts-node）と、あると便利なもの（typesync、yarn）を記述しています。</p>
<div class="code-block-container"><pre class="language-text"><code class="language-text">yarn
typescript
ts-node
typesync
</code></pre></div><h2 id="node.js-18.12.1-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1">
<a class="header-anchor-link" href="#node.js-18.12.1-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1" aria-hidden="true"></a> Node.js 18.12.1 をインストール</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">nodenv <span class="token function">install</span> <span class="token number">18.12</span>.1
nodenv global <span class="token number">18.12</span>.1
</code></pre></div><p><code>nodenv install 18.12.1</code>コマンドで、指定した Node.js のバージョンをインストールしています。<br>
<code>nodenv global 18.12.1</code>コマンドで、指定した Node.js のバージョンをデフォルトにします。</p>
<p><code>nodenv global</code>で現在設定している Node.js のバージョンを確認できます。</p>
<h2 id="react-%E3%82%92%E8%B5%B7%E5%8B%95-1">
<a class="header-anchor-link" href="#react-%E3%82%92%E8%B5%B7%E5%8B%95-1" aria-hidden="true"></a> React を起動</h2>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">npx create-react-app react-example <span class="token parameter variable">--template</span> typescript
<span class="token builtin class-name">cd</span> react-example
<span class="token function">yarn</span> start
</code></pre></div><p><code>npx コマンド</code>は<strong>global install されていないコマンドを実行時にインストール、完了後に削除</strong>するコマンドです。<br>
この例では、コマンドに<code>create-react-app</code>が該当します。<br>
<code>create-react-app プロジェクト名 --template typescript</code>は、<code>プロジェクト名</code>で React アプリケーションを起動するコマンドです。<br>
<code>--template typescript</code>で TypeScript を使用することを指定しています。<br>
指定しなければ JavaScript で作成されます。</p>


コピペできるanyenv、nodenvでReact（TypeScript）環境構築

nodenv default-package をインストールして編集

nodenv default-packages をインストールして編集

Discussion