CyberAgent AI Lab研修 / IDEで効率的な研究開発_VS Code編

1. IDEで効率的な研究開発 VS Code編 株式会社サイバーエージェント AI Lab Graphics チーム コウ　 ゲンテン 黄　源天 / Huang Yuantian
2. 2 自己紹介： 黄　源天 / Huang Yuantian 所属：　CyberAgent AI Lab Graphics チーム 研究トピック：動画像編集と生成、Digital Human 経歴：　2018~2024年　研究生 → 修士 → 博士 　（筑波大学コンピュタービジョン研究室） 2024年4月1日　CyberAgent AI Labに入社 　　 （Research Engineerとして） 趣味：　ゲーム（特にシミュレーション）、旅行 コウ　ゲンテン
3. 3 IDEで効率的な研究開発 VS Code編 1. VS Codeとは？なぜ使う？ 2. 初期設定と便利な拡張機能 3. リモート開発：GCEとの連携
4. 4 VS Codeとは？なぜ使う？ 1.
5. 5 1.1 VS Codeとは？ Visual Studio Code（以下、VS Code）は、Microsoft社が開発しているソース コードエディタです。 この資料ではVS Codeの基礎的な使い方から応用、設定の仕方、複雑なカ スタマイズまで幅広く紹介します。 • IDEとソースコードエディタの違い IDE（Integrated Development Environment／統合開発環境）はソフトウェア開発のための 統合的なプログラミング環境であり、様々なツールの集合からなります。 厳密に言えば、VS CodeはIDEではなくソースコードエディタです。 VS Codeはダウンロードしただけでは 基本的なコード編集の機能しかありません。 • しかし、適切に設定することで PyCharmなどのIDEに劣らないカスタマイズを行えます。
6. 6 1.2 なぜVS Code? • 軽量で便利 研究活動で大規模なプロジェクトを管理しない場合は特に、 VS Codeのような軽量でカスタマイズできる ツールが適しています。 • 無料ながらリモート開発が強い もう一つの大きな理由として、サーバー側での計算が必要な分野においてリモート開発が重要 となり、これもVS Codeの強みです。第3章では実際の使い方を説明します。 以上のことから、VS Codeは研究者におすすめでき、実際に研究者の間でも非常に人気が高い ※です。 ※: 2025年3月時点では、GitHub上で168K以上の⭐を獲得している。
7. 7 1.3 ダウンロードとインストール • まだ使ったことのない方は、以下のページから自分の OS（Windows、Linux、MacOS）とアーキテク チャ（x64, ARM）に対応するVS Codeのバージョンをダウンロード できます： ◦ https://code.visualstudio.com/download • インストールマニュアル： ◦ MacOS ◦ Windows ◦ Linux
8. 8 初期設定と便利な拡張機能 2.
9. 9 2. 初期設定と便利な拡張機能 • まず最初に、以下の手順で GitHubのアカウントでログインしましょう。 これにより、各デバイス間の設定が同期され、 MicrosoftやGitHubに関連する認証が 簡単になるなど、さまざまな利便性が向上されます。
10. 10 2. 初期設定と便利な拡張機能 • プラグイン (Extensions)のインストール方法について説明します。 左にある「Extensions、拡張機能」に入って、プラグインの閲覧、検索ができます。 そこで「Install」を押したらインストールできます。
11. 11 2.1 UI, Color Themes • 左側のアイコンや各ウィンドウは、自由に移動させることができます。
12. 12 2.1 UI, Color Themes • 左側のアイコンや各ウィンドウは、自由に移動させることができます。
13. 13 2.1 UI, Color Themes • 次はテーマを変えてみましょう、以下のショットカットで選択できます。 MacOS Windows ⌘ + K → ⌘ + T Ctrl + K → Ctrl + T
14. 14 2.1 UI, Color Themes • 表示言語を日本語にしたい方は以下のショートカットから、 [Configure Display Language]を入力し て選択したら、UIの表示言語を日本語に変えることができます。 MacOS Windows ⇧ + ⌘ + P Shift + Ctrl + P
15. 15 2.2 ソースコード編集 • Formatter, Linter機能 Python Coding Best Practice → Formatter and Linter にも説明されているRuff, flake8, autopep8, Blackなどが使えます。これらのツールを使用することで、自動的にコーディング規則に違反している部分 の提示や修正を行うことができます。プラグインをインストールした後、 Linterは自動で動作し、Formatter は以下のショートカットで実行されます。保存時の自動化も 設定できます。 MacOS Windows ⇧ + ⌥ + F Shift + Alt + F
16. 16 2.2 ソースコード編集 • Python仮想環境をGUIから作成、管理、切り替えができます。 「Python Environment Manager」のプラグインをインストールすれば左側に出てきます。 pyenvや condaなどをサポートしています。
17. 17 2.2 ソースコード編集 • Debugging VS Codeは以下のようにbreakpointを設定して、少しずつ Debugすることもできます。 ◦ 公式資料
18. 18 2.2 ソースコード編集 • 検索、置き換え機能 ◦ 今開いてるファイル中で検索、置き換え。 MacOS Windows ⌘ + F Ctrl + F
19. 19 2.2 ソースコード編集 • 検索、置き換え機能 ◦ ワークスペースにある全てのファイルを検索、置き換える機能（ grepコマンドのように） MacOS Windows ⇧ + ⌘ + F Shift + Ctrl + F
20. 20 2.2 ソースコード編集 • Multiple selections (multi-cursor) ◦ 複数行を同時に編集するショットカット ◦ クリックするだけで、好きな場所を同時に編集 できるショットカット： MacOS Windows ⌥⌘↓ or ↑ Alt + Ctrl + ↓ or ↑ MacOS Windows ⌥+Click Alt + Click
21. 21 2.2 ソースコード編集 • ターミナル • ウィンド右上の「＋」ボタンで複数のターミナルを開けます。 ◦ ターミナルの詳しい設定については、気になる方だけご覧ください。 MacOS Windows ⌃ + ` Ctrl + `
22. 22 2.3 ソースコード管理（Git） • ソースコードに変動がある部分の可視化
23. 23 2.3 ソースコード管理（Git） • pull, commit, pushなどの可視化操作
24. 24 2.3 ソースコード管理（Git） • conflicts, mergeの可視化操作
25. 25 ここでは簡単に説明するだけにとどめます。気になる方はプラグインの名前を検索して インストールしてみてください。 • GitHub Copilot, 多くの方がすでに使用しているかと思いますが、 AIがコーディングをサ ポートしてくれるツールです。 ◦ 公式サイト 2.4 おすすめプラグイン • PythonとPylance, 公式のPython向けプラグインです。基本的にはインストールをおすすめしま す。 ◦ 詳しい説明
26. 26 • indent-rainbow, 色でインデント構造を分 かりやすくする、Pythonにピッタリ。 2.4 おすすめプラグイン • Better Comments, 以下のようにコメントの ハイライトができます。
27. 27 • GitLens, コミット履歴の詳細表示や、グラフで見ることができます。一部の機能が有料。 2.4 おすすめプラグイン
28. 28 • audio-preview, VS Codeから直接音声ファイルの詳細情報、 wavファイルやメルスペクトログラム などの特徴を確認することができます。例： 2.4 おすすめプラグイン
29. 29 2.4 おすすめプラグイン • Jupyter, VS Code内でJupyter Notebookが使えるようになります。
30. 30 2.4 おすすめプラグイン • Live Share, リアルタイムのリモートペアプログラミング、 公式説明。
31. 31 リモート開発： Google Compute Engine（GCE）との連携 03
32. 32 3. リモート開発：GCEとの連携 • VS Codeから、リモートサーバー（ GCE、WSL、Containerなどを含む）に接続する方法に ついて説明します。まずは「 Remote Development」 というプラグインをインストールしたら、必要な 拡張機能は全てインストールされます。 • VS Codeからリモートサーバーに接続したら、ローカルとほぼ変わらないさまざまな拡張機能が使え るようになります。 • GCEのウェブSSHなどでも繋がりますが、やはり制限が多くて効率的ではないと思われます。
33. 33 3.1 SSH経由の方法（メイン） • 一番安定の方法として、直接 SSH経由でリモート接続することができます。 • SSHとは何なのか？ SSHはSecure Shell略称で、暗号や認証技術を利用して、安全にリモートコンピュータと通信するた めのプロトコル。SSHでは、「公開鍵認証」と「パスワード認証」の二種類認証方式がありますが、セ キュリティのために、 パスワードではなく公開鍵認証で接続します。 • そのため、まずは（秘密鍵と公開鍵）を用意する必要があります。 既に存在する公開鍵を利用することも可能ですが、使い回しすぎないようにご注意ください。新しい 鍵ペアは、各OSでも同じく以下のコマンドで簡単に作成できます： ssh-keygen ~/.ssh/id_rsa（秘密鍵）と~/.ssh/id_rsa.pub（公開鍵）のペアが作れます。 その後、公開鍵をサーバー側に登録し、秘密鍵を用いて認証を行います。
34. 34 3.1 SSH経由の方法（メイン）→ GCE との連携　 • 実際にやってみましょう。 ◦ 新しいインスタンスを作成 (公式資料)して、名前を「test-ssh-*」にする。 ◦ area任意、4vCPU、OS：Ubuntu22.04、ディスクサイズ64Gで、作成を押してください。
35. 35 3.1 SSH経由の方法（メイン）→ GCE との連携　 • 作成したインスタンスを編集して公開鍵の内容を入力すれば設定できます。 usernameは自由に設定できます。 ssh-xxxx xxxxxxxxxxxx username@hostname • GCEは既に事前にGoogle側でさまざまな設定が行われているため、これだけで完了です。
36. 36 3.1 SSH経由の方法（メイン）→ GCE との連携　 • クライアント側（ Macbookやノート PC）の設定： VS Code側でSSH Config Fileを開いて、以下のように設定します。 Userは先設定したusernameと同じ にします。 • これで設定が完了します、インスタンスが消されてない限り再設定は要らないです。 以下のようにクリックするだけで接続できます！
37. 37 3.2 VS Code Tunnel • VS Code TunnelはVS Code独自の接続方法で、 GitHubアカウントと紐付けています。 ただし、Azure経由で接続しているため、安定性には欠ける場合があります。そのため、 SSH接続 ができない場合にのみご利用をお勧めします。 ◦ 接続先はGUIが存在する場合は、使い方は非常に簡単です： I. 以下のところからTunnelが作れます。 II. Tunnelが作成されると、Remoteのセクショ ンにTunnelsが表示されます。SSHと似たよう な形で接続できます。
38. 38 3.2 VS Code Tunnel • GUIが存在しない場合（GCEなど）は、Command Lineでも出来ます: 任意のパスで以下のコマンドを実行すると、 GitHubアカウントの認証が要求されます。認証が完了 すると、GUIと同様なTunnelが作成されます。 • Container内で実行するときに、以下のエラーが出るかもしれません： • その際は、代わりに以下のコマンドを実行することで同じことができます： （{NAME}は自由に設定してください。） curl -Lk 'https://code.visualstudio.com/sha/download?build=stable&os=cli-alpine-x64' --output vscode_cli.tar.gz tar -xf vscode_cli.tar.gz ./code tunnel service install nohup ./code tunnel --name {NAME} --no-sleep --accept-server-license-terms >> tunnel.log & tail -f tunnel.log error Error creating dbus session. This command uses systemd for managing services, you should check that systemd is installed and under your user. ★ どうしてもこのエラーを解消して、serviceとして使いたい方：外部資料
39. 39 3.2 VS Code Tunnel • VS Code Tunnelはウェブからアクセスすることもできます。なので、理論的には iPadなどからでも 利用できます。極論スマホからでも PCと同じくらいに使えます。
40. 40 3.3 WSL内に接続 • ローカルでWSLに接続する： Windows PCから、ローカルのWSLに接続するには、以下のようにできます。 複数のOSを維持して、それぞれに接続することもできます。
41. 41 3.3 WSL内に接続 • リモートで接続：VS Code Tunnel + WSL 以下のように、WSLがインストールされた Windows PCとVS Code Tunnelで接続すること により、リモートデスクトップを使わなくても、リモートで WSLにアクセスできるようになります。
42. 42 3. リモート開発：GCEとの連携 • 他の接続方式もありますが、気になる方は見てください： ◦ VS Code Server (特に理由がなければ、普通に Tunnelの方を使った方が良い ) ◦ Dev Container (Dockerが慣れてる人にお薦め ) ◦ GitHub Codespaces (CPUのみに対応しますが、同じ MS社のため相性が良い。無 料利用枠を超えると有料になります。） • 注意点として、一部のプラグインはサーバー側にインストールされる必要があります。 自動的 に設定しなかった場合、GCEで新しいインスタンスを作成して、初回のアクセス後に以下のよ うにプラグインをインストールしなければなりません。
43. 43 ご清聴ありがとうございました。