<h2 id="tl%3Bdr">
<a class="header-anchor-link" href="#tl%3Bdr" aria-hidden="true"></a> tl;dr</h2>
<ul>
<li>
<code>VS Code</code>に<code>Code Runner</code>をインストール</li>
<li>
<code>Code Runner</code>で Racket/Scheme/LISP プログラムを Racket で動くように設定</li>
<li>Racketプログラムを<code>VS Code</code>上で実行</li>
</ul>
<p><code>Code Runner</code>のおかげで、<code>Visual Studio Code</code>から<code>Racket</code>プログラムを実行できます。<br>
Enjoy!</p>
<h2 id="1.-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#1.-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> 1. はじめに</h2>
<p>この記事では、<code>Code Runner</code>のインストールと、<code>Racket</code>プログラムを実行するための設定について詳しく説明します。</p>
<h3 id="1.1.-code-runner%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#1.1.-code-runner%E3%81%A8%E3%81%AF" aria-hidden="true"></a> 1.1. Code Runnerとは</h3>
<p><code>Code Runner</code>は、<code>Visual Studio Code</code>内でさまざまなプログラムのコードを実行する拡張機能です。<br>
対応言語は Python、JavaScript、Java、C#、PHP、Ruby など多数にのぼり、Racket もその 1つです。</p>
<p><code>Code Runner</code>を実行すると、指定したコマンドを実行して実行結果を出力 Window に出力します。<br>
たとえば、プログラムが<code>Racket</code>のプログラムなら<code>racket &lt;ソースファイル&gt;</code>となります。</p>
<h2 id="2.-code-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#2.-code-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 2. Code Runnerのインストール</h2>
<p><code>VS Code</code>に<code>Code Runner</code>をインストールする方法は<code>VS Code</code>上で[拡張機能]メニューを使う方法と、コマンドラインから行なう方法の 2つがあります。<br>
ここでは、それぞれの方法について説明します。</p>
<h3 id="2.1.-vs-code%E4%B8%8A%E3%81%A7%E3%81%AEcode-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#2.1.-vs-code%E4%B8%8A%E3%81%A7%E3%81%AEcode-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 2.1. VS Code上でのCode Runnerのインストール</h3>
<p>まず、<code>VS Code</code>上で<code>Code Runner</code>をインストールする手順を説明します。</p>
<ol>
<li>
<p>拡張機能の選択:<br>
左側のメニューから[<code>拡張機能</code>]アイコンをクリックする (または、<code>Ctrl+Shift+X</code>を押す)<br>
<img src="https://i.imgur.com/4JIrBTs.png" alt="拡張機能" loading="lazy" class="md-img"></p>
</li>
<li>
<p><code>Code Runner</code>の検索:<br>
検索バーに<code>Code Runner</code>を入力し、検索結果から該当の拡張機能を選択する<br>
<img src="https://i.imgur.com/bdYaeL0.png" alt="Code Runner" loading="lazy" class="md-img"></p>
</li>
<li>
<p><code>Code Runner</code>のインストール:<br>
[<code>インストール</code>]をクリックして、<code>Code Runner</code>をインストールする<br>
<img src="https://i.imgur.com/uWyBHCe.png" alt="インストール" loading="lazy" class="md-img"></p>
</li>
</ol>
<p>以上で、<code>VS Code</code>上での<code>Code Runner</code>のインストールは完了です。</p>
<h3 id="2.2.-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%8B%E3%82%89%E3%81%AEcode-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#2.2.-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%8B%E3%82%89%E3%81%AEcode-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 2.2. コマンドラインからのCode Runnerのインストール</h3>
<p><code>VS Code</code>では、コマンドラインから拡張機能をインストールできます。<br>
次の手順で、コマンドラインから<code>Code Runner</code>をインストールします。</p>
<ol>
<li>
<p><code>PowerShell</code>を開く:<br>
<img src="https://i.imgur.com/2YbB7lj.png" alt="PowerShell" loading="lazy" class="md-img"></p>
</li>
<li>
<p>以下のコマンドを実行:</p>
<div class="code-block-container"><pre class="language-powershell"><code class="language-powershell">code <span class="token operator">--</span><span class="token function">install-extension</span> formulahendry<span class="token punctuation">.</span>code-runner
</code></pre></div>
</li>
</ol>
<p>以上で、コマンドラインでの<code>Code Runner</code>のインストールは完了です。</p>
<h2 id="3.-code-runner%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#3.-code-runner%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 3. Code Runnerの設定</h2>
<p><code>Code Runner</code>は言語ごとに実行するコマンドを設定できます。<br>
そのためには、"VS Code"の設定ファイル"<code>settings.json</code>"に"Executor Map"を追加する必要があります。</p>
<h3 id="3.1.-executor-map%E3%81%AE%E8%BF%BD%E5%8A%A0">
<a class="header-anchor-link" href="#3.1.-executor-map%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> 3.1. Executor Mapの追加</h3>
<p>次の手順で、<code>Racket</code>プログラムを動作させるための<code>Executor Map</code>を追加します。</p>
<ol>
<li>
<p>ユーザー設定を開く:<br>
<code>Ctrl+Shift+P</code>を押し、コマンドパレットで[ユーザー設定を開く]を選ぶ<br>
<img src="https://i.imgur.com/y94dSHr.png" alt="ユーザー設定" loading="lazy" class="md-img"></p>
</li>
<li>
<p>設定を追加:<br>
"settings.json"に以下の設定を追加する。これにより、Racket で Racket/Scheme/LISPプログラムが実行できる</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> settings.json</span></div>
<pre class="language-json"><code class="language-json"><span class="token property">"code-runner.customCommand"</span><span class="token operator">:</span> <span class="token string">"echo hello"</span><span class="token punctuation">,</span>
<span class="token property">"code-runner.executorMap"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
   <span class="token property">"racket"</span><span class="token operator">:</span> <span class="token string">"racket $fullFileName"</span><span class="token punctuation">,</span>
   <span class="token property">"scheme"</span><span class="token operator">:</span> <span class="token string">"racket $fullFileName"</span><span class="token punctuation">,</span>
   <span class="token property">"lisp"</span><span class="token operator">:</span> <span class="token string">"racket $fullFileName"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre>
</div>
<p>上記のように<code>$fullFileName</code>を使うと、ソースファイルをフルパスで指定できます。<br>
そのため、ソースファイルがどのディレクトリにあるかに関係なく実行できます。</p>
</li>
<li>
<p>設定の保存<br>
<code>Ctrl+S</code>とし設定ファイルを保存し、<code>Ctrl+W</code>で閉じる</p>
</li>
</ol>
<p>以上で、<code>Executor Map</code>の設定は完了です。</p>
<h2 id="4.-code-runner%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#4.-code-runner%E3%81%AE%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 4. Code Runnerの動作確認</h2>
<h3 id="4.1-%22hello-world%22%E3%81%A7%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#4.1-%22hello-world%22%E3%81%A7%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 4.1 "Hello World"で動作確認</h3>
<p><a href="#31-executor-map%E3%81%AE%E8%BF%BD%E5%8A%A0">3.1</a>で<code>Racket</code>プログラムを動作させる設定を追加しました。<br>
この設定が正しく行われていることを確認するために、"Hello World"プログラムを作成して実行します。<br>
次の手順で、行います。</p>
<ol>
<li>
<p><code>Hello World</code>の作成:<br>
<code>VS Code</code>で次のプログラムを作成する</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename"> hello.rkt</span></div>
<pre class="language-racket"><code class="language-racket"><span class="token lang keyword">#lang racket</span>

<span class="token punctuation">(</span><span class="token function">display</span> <span class="token string">"Hello, my first racket!"</span><span class="token punctuation">)</span>
</code></pre>
</div>
</li>
<li>
<p>プログラムの実行:<br>
作成したソースファイル上で<code>Ctrl+Alt+N</code>を押す、または右クリック+[Run Code]として、作成した"<code>hello.rkt</code>"プログラムを実行する</p>
</li>
<li>
<p>出力の確認:<br>
[出力]ウィンドウで以下のメッセージが表示されていることを確認する</p>
<div class="code-block-container"><pre class="language-output"><code class="language-output">Hello, my first racket!
</code></pre></div>
</li>
</ol>
<p>上記のように、作成したメッセージが出力されていれば、<code>Code Runner</code>は正常に動作しています。</p>
<h2 id="%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB" aria-hidden="true"></a> さいごに</h2>
<p>この記事では、<code>Visual Studio Code</code>に<code>Code Runner</code>をインストールして、Racketプログラムを実行させる方法を紹介しました。<br>
これにより、Racketプログラムの動作確認がより簡単になります。<br>
この新たな知識を活用して、Racket プログラミングの世界をお楽しみください。</p>
<p>それでは、Happy Hacking!</p>
<h2 id="%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99" aria-hidden="true"></a> 参考資料</h2>
<h3 id="web%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#web%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> Webサイト</h3>
<ul>
<li>
<a href="https://code.visualstudio.com/docs/editor/command-line" target="_blank" rel="nofollow noopener noreferrer"><code>VS Code CLI</code></a>: <code>VS Code</code>のコマンドラインについての公式ドキュメント</li>
<li>
<a href="https://github.com/formulahendry/vscode-code-runner" target="_blank" rel="nofollow noopener noreferrer"><code>Code Runner</code></a>: <code>Code Runner</code>の公式 GitHub リポジトリ</li>
</ul>


Racket: Racketプログラミング用にCode Runnerをインストール・設定する方法

2.1. VS Code上でのCode Runnerのインストール

2.2. コマンドラインからのCode Runnerのインストール

zenn-dev

vscode

Discussion