🔔

Polyglot NotebooksでC#とJavaScriptをVS Code上で手軽に動かす

2024/12/18に公開

はじめに

C#やJavaScriptなどでプログラムを書いていて、コードの断片をちょっと動かしてみたいと思ったことありませんか?

そんな時に便利なのが、VS Codeの拡張機能である「Polyglot Notebooks」です。

弊社のkotaprojさんが書いた記事「Semantic KernelのGetting Started」でもPolyglot Notebooksを利用しています。

https://zenn.dev/zead/articles/semantic_kernel_getting_started

この記事では、Polyglot Notebooksの環境構築と簡単な使い方について説明しています。

Polyglot Notebooksとは?

Polyglot Notebooksは、簡単に言えば、Jupyter Notebookの.NET版といったところでしょうか。

複数のプログラミング言語を1つのノートブック内でシームレスに使用できるツールで、.NET Interactiveを活用することでC#、F#、PowerShellなどを切り替えて利用可能です。Python、JavaScript、SQLなどにも対応しています。

Visual Studio Codeと統合されており、データ解析やスクリプト作成、マルチプラットフォーム開発に適しています。

Polyglot Notebooksでは、各プログラミング言語ごとにセルを分けて記述でき、異なる言語で書かれたコードを同じノートブック内で実行し、データを共有することができます。

また、データ共有機能(#!valueコマンド)を使うことで、セル間やノートブック間でデータを連携することも可能です(この記事では触れていません)。

準備

  1. .NET SDKをインストールしていない場合は、.NET SDK をインストールします。

    https://dotnet.microsoft.com/ja-jp/download/dotnet

    .NET9, .NET8どちらでもお好みの方をインストールしてください。

  2. .NET interactiveをインストール

    dotnet tool install -g Microsoft.dotnet-interactive
    
  3. Visual Studio Codeを起動し、Polyglot Notebooks をインストール

Polyglot Notebooksを使ってみる

C#を実行する

  1. フォルダを作成し、そのフォルダをVS Codeで開く。

  2. Ctrl+Alt+Window+Nをタイプ([File]-[New File...]メニューでも可)

  3. Polyglot Notebook を選択

  4. .dibを選択します。

  5. 言語を選択します。ここではC#を選びます。

  6. ファイルが作成されます。適当な名前で保存しておきます。

  7. コードを入力する欄(セル)がありますので、ここにC#のコードを入力します。

    ここでは以下のコードを入力。

    var a = 10;
    var b = 20;
    Console.WriteLine($"Sum: {a + b}");
    
  8. コード入力欄(セル)の左にある▷マークをクリックするとコードを実行できます。
    以下、実行した結果です。

  9. 別のコードを実行したい場合は、上部の 「+Code」をクリックします。
    先ほどの下に新たなコード入力欄(セル)が現れます。

  10. ここにコードを入れて、同様に左にある▷マークをクリックするとコードを実行できます。

  11. 全てのコードを実行したい場合は、上部の「Run All」をクリックします。

markdownを記入する

  1. コード欄(セル)の外側にカーソルを移動すると、Markdownを追加するボタンが現れます。

  2. このボタンをクリックするとMarkdownを記入できる欄(セル)が追加されますので、ここで、コードの説明文などを記入します。

C#の動作をちょっと確認したい時とか、教育用に利用できそうですね。

同じノートブック内でC#とJavaScriptを一緒に使う

Polyglot Notebooksは、複数のプログラミング言語を統合し、1つのノートブック内で異なる言語のコードを実行できる環境を提供します。各セルごとに使用する言語を指定できるため、C#やJavaScriptなどを組み合わせて利用できます。

手順を以下に示します。

  1. 前述同様、上部の 「+Code」をクリックします。コードを入力する欄(セル)が追加されます。

  2. 次に、セルの右下の「csharp - C# Script」をクリックします。ここでJavaScriptを選択すれば、JavaScriptを実行できるセルに切り替わります。

  3. 以下のコードを入れてみます。

    const numbers = [
      [ 1,2,3 ],
      [ 4,5,6]
    ];
    const results = numbers.flatMap(n => n);
    console.log(results);
    
  4. 左にある▷マークをクリックするとコードを実行できます。

  5. 以下のような結果が表示されます。

    [1,2,3,4,5,6]
    

.dibファイルと.ipynbファイルの違い

1. .dib(.NET Interactive Notebook)

  • Polyglot Notebooks独自のファイル形式です。
  • 軽量なMarkdown形式に基づいており、セルごとにコードやテキストを記述します。
  • 言語ごとに異なるカーネル(例: C#、Python、F#など)を使用できます。
  • Gitに保存する場合に適しています。.dibファイルは、通常のMarkdown形式に近いため、差分管理が容易です。

2. .ipynb(Jupyter Notebook)

  • Jupyter Notebookの標準形式です。
  • JSON形式でデータを保存します。.dibよりも若干ファイルサイズがやや大きくなるかも。
  • Jupyterカーネルで動作しますが、Polyglot Notebooksもこの形式をサポートします。
  • Jupyter Notebook、JupyterLab、Google Colabなど、他のツールでも開くことができます。

最後に

.NET InteractiveやPolyglot Notebooksはまだ知名度が高くないかもしれませんが、簡単に環境を構築でき、C#やJavaScriptなどのコードを手軽に実行できるため、コードスニペットを試したり共有したりするのに最適なツールだと思います。また、実行結果とともにコードをドキュメントとして保存できる点も大きな利点ですね。

GitHubで編集を提案
株式会社ジード テックブログ

Discussion