検索
連載

Visual Studio Codeから「Hello Python」してみようVisual Studio Codeで快適Pythonライフ(2/3 ページ)

快適なPythonライフを現実のものとする第一歩として、Visual Studio CodeにPython拡張機能をインストールして「Hello Python」してみよう。

PC用表示 関連情報
Share
Tweet
LINE
Hatena

VS Codeの画面構成

 VS Codeの画面は次のようなパーツで構成されています。

VS Codeの画面構成
VS Codeの画面構成

 それぞれについて簡単にまとめます。

  • アクティビティーバー:サイドバーに表示される「ビュー」の切り替えに使用する。拡張機能をインストールすることで、ここに表示されるアイコン(と対応するビュー)が増えることもある。上の画像では[エクスプローラー]アイコンが強調表示されていて、サイドバーにも[エクスプローラー]ビューが表示されている。この状態で[エクスプローラー]アイコンをクリックすると、サイドバーが非表示となる(ソースコードの編集領域を増やしたいときに便利)
  • サイドバー:アクティビティーバーでクリックされたアイコンに応じて、ファイル操作を行う[エクスプローラー]ビュー、検索を行う[検索]ビュー、ソースコード管理を行う[ソース管理]ビュー、デバッグ時に使用する[実行とデバッグ]ビュー、拡張機能の管理を行う[拡張機能]ビューなどが表示される。上の画像では、[エクスプローラー]ビューが表示されていて、sample_folderフォルダにあるファイルが一覧されている
  • エディタ(エディタグループ):プログラムコードやテキストファイルの編集に使用する領域。個々のファイルはタブ形式で表示される。この領域を分割して、複数のファイルを同時に表示することも可能。上の画像では、2つのエディタグループがあり、一方にはmylib.pyファイルの内容が、もう一方にはmain.pyファイルの内容が表示されている
  • パネル:ソースコードにある問題点の表示、デバッグ情報の表示など、VS Codeからユーザーに何かを知らせたり、ターミナル(またはPowerShellやコマンドプロンプト)を開いて、対話的に何らかのコマンドを実行したりするのに使われる。上の画像では、pyコマンドでmain.pyファイルを実行した結果が表示されている
  • ステータスバー:補助的な情報を表示するのに使われる。上の画像では、エディタグループでmain.pyファイルがアクティブなので、そのファイルの編集に関する情報が表示されている(カーソル位置など)

 ここでは表示されていませんが、VS Codeで頻繁に使用するパーツがあります。それが「コマンドパレット」と呼ばれるものです。コマンドパレットは、VS Codeが提供するさまざまなコマンドを実行するために使用します。

 コマンドパレットを表示するには[表示]メニューから[コマンド パレット]を選択します。

[表示]メニューから[コマンド パレット]を選択
[表示]メニューから[コマンド パレット]を選択
コマンドパレットが表示された
コマンドパレットが表示された

[表示]メニューから[コマンド パレット]を選択


 しかし、コマンドパレットは頻繁にお世話になるので、ショートカットキーを覚えておくのがよいでしょう。Windows/Linuxでは[Ctrl]+[Shift]+[P]キーで、macOSでは[Shift]+[Command]+[P]キーでコマンドパレットを表示できます([ESC]キーを押せば、コマンドパレットを消せます)。

 コードを編集する際には、サイドバーに[エクスプローラー]ビューを表示して、そこからファイルをクリックしたりダブルクリックしたりして、エディタにそのファイルの内容を表示/編集した後に、コマンドパレットやターミナルからそのファイルを実行するといったことがよく行われます。

 なお、[エクスプローラー]ビューでのファイル操作や、エディタ(エディタグループ)の詳細については次回以降に見ていく予定ですが、ほんの少しだけ見ておきましょう。

[エクスプローラー]ビューでのファイル操作

 Windowsなら[スタート]メニューやタスクバーから、macOSなら[アプリケーション]フォルダからVS Codeを初めて起動すると、多くの場合、次のように何のフォルダもファイルも開かれていない状態となります。以下の画像では[エクスプローラー]ビューがサイドバーに表示されていますが、これが表示されていない場合もあります。そのときには画面左端のアクティビティーバーで[エクスプローラー]アイコンをクリックすると表示されます(トグル式なので、もう一度クリックすると非表示になります)。

何も開かれていない状態のVS Code
何も開かれていない状態のVS Code

 この状態で[フォルダーを開く]ボタンをクリックすれば、OSごとに固有のダイアログが表示されて、「VS Codeで作業を行うフォルダ」が開かれます(上の画像を見ればお分かりの通り、GitHubなどからリポジトリの内容をローカルに複製して、作業を始めることも可能です)。多くのエディタでは「ファイル」を開くのが一般的ですが、VS Codeではフォルダを作業の主体として考えることには注意してください(複数のフォルダをひとまとめにして「ワークスペース」として扱うことも可能ですが、これについてはここでは触れません)。

 フォルダを開くと、[エクスプローラー]ビューにはそのフォルダにあるファイルが一覧表示されるので、そこでファイルを作成したり、ファイルを選択したりするのが、[エクスプローラー]ビューでの基本です。例えば、Windows版のVS Codeを例として、c:\tmpフォルダにあるtestフォルダを作業フォルダとしてオープンしたものとしましょう。すると、[エクスプローラー]ビューは次のようになります。

VS Codeでc:\tmp\testフォルダを開いたところ
VS Codeでc:\tmp\testフォルダを開いたところ

 [エクスプローラー]ビューには[TEST]と表示されますが、ファイルが何もないので、その下には何も表示されていません。ファイルを新規に作成するには、[エクスプローラー]ビューにマウスカーソルを移動すると[TEST]の右側に表示される[新しいファイル]ボタンをクリックします(その右側にはフォルダを新規作成するボタン、表示を更新するボタン、エクスプローラーの階層表示を折りたたむボタンがあります)。すると、[エクスプローラー]ビューにファイル名を入力するテキストボックスが表示されるので、何かファイル名を入力します(ここでは「hello.py」としました)。

[新しいファイル]ボタンをクリック
[新しいファイル]ボタンをクリック
ファイル名を入力
ファイル名を入力

VS Codeでファイルを新規に作成する


 新規にファイルを作成すると、エディタにそのファイル名(ここでは「hello.py」)でタブが新規に表示されます。

新規に作成したファイルがエディタに表示されたところ
新規に作成したファイルがエディタに表示されたところ

 ファイルを閉じるには、タブの右端にある[×]をクリックします。なお、右下に表示されている[Pythonにお勧めの拡張機能をインストールしますか]というメッセージについては、この後で説明をします。

 同様にしてgoodbye.pyファイルを作成し(てから閉じ)たものとしましょう。すると、[エクスプローラー]ビューの表示は次のようになります。

hello.pyファイルとgoodbye.pyファイルが作られたところ
hello.pyファイルとgoodbye.pyファイルが作られたところ

 これらのファイルをエディタに開くには、もちろんファイルをクリックします。このとき、シングルクリックとダブルクリックでその振る舞いが異なる点は覚えておいてください。

  • シングルクリック:プレビューモードでファイルを開く
  • ダブルクリック:編集用にファイルを開く

 プレビューモードというのは、ファイルが多数あるときに、その内容を確認する目的で開くことを意味します。プレビューモード用のタブは1つだけ、エディタに表示され、ファイルをシングルクリックするたびにプレビュー用のタブにそのファイルの内容が表示されます。目的のファイルが見つかったので編集を使用として、何かキー入力をすると、その瞬間にそれはプレビュー用のタブではなく、編集用のタブとなります(この辺については次回に見ていきましょう)。

 プレビュー用のタブはファイル名がイタリック体で表示され、編集用のタブではファイル名が通常書体で表示されます。

プレビュー用のタブと編集用のタブ
プレビュー用のタブと編集用のタブ

 何気なく使っている分には、あまり気が付かないかもしれませんが、タブにはこのような違いがあるので、「あのタブ、さっき開いたはずなのにないなー」というときにはプレビューモードで開いた可能性があることは覚えておいてください。

 ファイル名やフォルダ名を変更したり、ファイルを削除したりといった操作は、[エクスプローラー]ビューでファイルを右クリックすると表示されるメニューから可能です。

ファイルの操作
ファイルの操作

 ここまで、[エクスプローラー]ビューでの基本的なファイル操作を見てきました。次に先ほどの「Pythonにお勧めの拡張機能をインストールしますか」というメッセージについて見てみましょう。

Copyright© Digital Advantage Corp. All Rights Reserved.

[an error occurred while processing this directive]
ページトップに戻る