SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeをプログラミングエディタとして強化しよう! 便利な設定や拡張機能を紹介

開発用エディタのド定番「VSCode」を使いこなそう 第6回

  • X ポスト
  • このエントリーをはてなブックマークに追加

多言語対応の対話型実行環境「Polyglot Notebooks」を試す

 最後に、3月に公式リリースされた比較的新しい拡張機能を紹介します。Polyglot Notebooksは、対話型のコード実行環境を提供するMicrosoftによる拡張機能です。対話型であるので、思いついたコードをその場で入力、実行でき、結果を確認しながらコードを改変するなど、プログラミングの学習に役立ちます。

Polyglot Notebooksとは

 Polyglot Notebooksを一言で言うと、Jupyter Notebookをベースに、.NET Interactiveによって多言語対応させた対話型のコード実行環境です。Jupyter Notebookとは、Pythonをメインとした対話型のコード実行環境です。Pythonのコードを入力してその場で実行し、結果をテキストやグラフなどで表示、共有できることから、データサイエンティストなどに重宝されています。実行したコードとその結果はノートブックとして丸ごと保存できます。Webブラウザで動作しますが、VSCodeでもJupyter Notebookの利用をサポートする拡張機能が提供されています。

 .NET Interactiveとは、.NETの機能を対話型で利用できるようにするツールです。C#といったコンパイラ型言語を、REPLのように逐次コーディングし、実行できます。.NET Interactiveで実行可能な言語は、C#、F#、PowerShell、JavaScript、SQL、KQL(Kusto Query Language)、HTML、Mermaid、Python、Rです。このうちHTMLとMermaidを除いた言語間では、後述する変数の共有が可能です。もちろん、VSCodeの言語サーバの機能により、言語ごとのシンタックスハイライト表示、コード補完も活用できます。

 Polyglot Notebooksによって、Jupyter Notebookで行っていたような、C#やF#などを使ったコードの作成と実行と結果の表示、ノートブックとしての保存を、VSCode上で実行できます(図9)。

図9:ノートブックの例
図9:ノートブックの例

拡張機能をインストールする

 拡張機能「Polyglot Notebooks」(ms-dotnettools.dotnet-interactive-vscode)をVSCodeにインストールします。なお、この拡張機能の利用には.NET 7がインストールされている必要があります。.NETのインストールについては、CodeZineの連載「最新.NETでASP.NET Core」などを参照してください。

ノートブックでの作業を開始する

 ノートブックでの作業は、既存のノートブックファイル(.ipynb)を開くか、新規作成後に拡張子を.ipynbにして保存すると始まります(この拡張子は、Jupyter Notebookの前身であるiPython Notebookの名称に由来します)。表示される画面(図10)は、Jupyter Notebookを触ったことのある方ならば、なじみのあるものでしょう。ここでは、なじみのない方のために、各所の役割を紹介します。

図10:ノートブックの構成
図10:ノートブックの構成

 ノートブックで中心的な役割を果たすのが「セル」です。ノートブックで実行の単位を指し、ここにコードやマークダウンを書いていきます。一つのセルに複数のコードやマークダウンを書いていくことはできますが、コードとマークダウンの混在はできません。また複数の言語によるコードの混在もできません。セルがどのような言語になっているかは、セルの右下(図10ではPython)に表示されています。

 セルの上部には、セルの追加や実行などを行うアイコンが表示されています。コードのセルを追加、マークダウンのセルを追加、コードの実行などがここから可能です。セルの右には、セル単位の操作を行うアイコンが表示されています。セル内のコードの行単位での実行、直前のセルまであるいは以降のセルの実行、その他削除や結合、分割などの操作をここから行えます。マークダウンのセルの場合は、入力結果の確定などの操作になります。

 「カーネルの選択」と書かれている箇所については、次で説明します。

カーネルを選択する

 カーネルとは、Polyglot Notebooks(Jupyter Notebook)におけるコード実行のためのモジュールです。カーネルが提供するプログラミング言語を利用することになるので、目的の言語を含んだカーネルを[カーネルの選択]から選択しておきます。[カーネルの選択]をクリックすると利用するカーネルをコマンドパレットで尋ねてきますので、ここでは「.NET Interactive」を選択します(図11)。「別のカーネルを選択...」を選択すると、「Python環境...」と「他のJupyterサーバー...」という選択肢が出ますが、今回は必要ありません。なお、「Python環境...」を選択すると、Jupyter Notebookと同等の言語環境になります。カーネルの選択結果はファイルにひも付けて記憶されますので、再度開いたときなどにカーネルを選択する必要はありません。

図11:カーネルの選択
図11:カーネルの選択

 「.NET Interactive」を選択すると、使用中カーネルの表示欄が変わり、またセルの言語表示が自動判定されて、ここも変わります。ここで、コードを改めて実行してみます。しばらく待った後に(ここでは3秒)、コードによる出力がきちんと行われていることが分かります(図12)。

図12:カーネルの選択とコードの実行後
図12:カーネルの選択とコードの実行後

言語間で変数を共有する

 Polyglot Notebooksの大きな特長である、言語間での変数共有を見てみます。図13で、セルの上のアイコンに[Variables]という項目が増えています。これは、変数の共有を管理するための機能です。セル内のコードを変数を使うように少し変更して実行し、[Variables]をクリックします。すると、パネルに「POLYGLOT NOTEBOOK:VARIABLES」というタブが現れ、そこにコード中で宣言した変数が現れます(図13)。

図13:変数の使用とVARIABLESタブ
図13:変数の使用とVARIABLESタブ

 右端にある[Actions]をクリックすると、コマンドパレットに変数の共有先(言語)の候補が出てきますので、共有したい言語を選択します。ここでは、JavaScriptで共有してみることにしました。するとセルが追加され、そこに以下のコードが記述されています。

#!set --value @csharp:message --name message

 「#」で始まる文はマジックコマンドと呼ばれ、言語の構文ではなく、Notebooksに指示を与えるためのものです。この場合のsetコマンドは、C#の変数messageを同じmessageで使います、という意味になります。ここまでの実行結果が、以下の図14です。

図14:変数をC#とJavaScriptで共有
図14:変数をC#とJavaScriptで共有

今回登場のショートカットキー

今回登場のショートカットキー
機能 macOS Windows
設定を開く [Command]+[,] [Ctrl]+[,]
Code Runnerの実行 [Control]+[Option]+[N] [Ctrl]+[Alt]+[N]
Code Runnerの中断 [Control]+[Option]+[M] [Ctrl]+[Alt]+[M]
コードのフォーマット [Commamd]+[K]、[Commamd]+[F] [Ctrl]+[K]、[Ctrl]+[F]

まとめ

 今回は、プログラミング(コーディング)に役立つ設定と拡張機能の基本的な拡張機能、それにPolyglot Notebooksという注目の拡張機能を紹介しました。自身に役立ちそうな拡張機能をインストールし、設定も変更してコーディングを楽しく効率の良いものにしてください。

 次回は、VSCodeとGitHubの連携について紹介します。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18224 2023/09/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング