VS CodeとIBM iの連携をイチから設定してみた

IBM iユーザーが、VSCodeでRPGⅣやFFRPGのコーディングをしていくうえで必要なVSCodeのインストール、初期設定、VSCode側のIBM iへの接続設定を紹介する記事となっています。

今までVSCodeを触った事がない方向けに説明していますので理解出来てるところは飛ばしてください。

IBM iへ接続する直前にIBM i側でSSHDサーバーを開始する必要があります。
SSHDサーバーの開始方法については[IBM iのSSH接続をイチから設定してみた](https://qiita.com/RiSING_alpha-team/items/1254437673699179580c)で説明しておりますので参考にしていただければと思います。

そもそもVSCodeって何？どうやって使うの？5250エミュレーターよりVSCodeを使うメリットあるの？については[5250ユーザーが「VSCode」を使ってみた　～VSCodeの基本知識編～](https://qiita.com/drafts/9c247feb995a3b7c36d8/edit)からご確認ください！

# 0.環境前提-2024年10月時点
<table>
  <thead>
    <tr>
      <th>環境項目</th> <th>環境名</th>
    </tr>
  </thead>
  <tr>
      <td><strong>PC</strong></td> <td><font color="Darkturquoise"><strong>Windows11</strong></font></td>
  </tr>
  <tr>
    <td>IBM iバージョン</td> <td><font color="Darkturquoise"><strong>V7.3</strong></font></td>
  </tr>
  <tr>
    <td>エミュレーター</td> <td><font color="Darkturquoise"><strong>5250</strong></font>(IBM i Access Client Solutions)</td>
  </tr>
  <tr>
    <td>QCCSID</td> <td><font color="Darkturquoise"><strong>65535</strong></font>(記事内で5035のユーザープロファイルを用意)</td>
  </tr>
  <tr>
    <td>導入済ライセンス</td> <td><font color="Darkturquoise"><strong>5733SC1</strong></font>あり</td>
  </tr>
</table>


# 1.そもそもVSCodeとは…？  
Microsoftが提供する無料の統合開発環境(正式名称:<font color="Darkturquoise"><strong>V</strong></font>isual <font color="Darkturquoise"><strong>S</strong></font>tudio <font color="Darkturquoise"><strong>Code</strong></font>)でどんなシステムエンジニアでも一度は聞いた事があるサービスだと思います。

# 1.VSCodeのダウンロード手順
[ダウンロードページ](https://azure.microsoft.com/ja-jp/products/visual-studio-code)にアクセスし、赤点線枠内の「Visual Studio Codeをダウンロードする」をクリックします。

![VSCodeダウンロードページ①_20241002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/3d0b12d0-2fad-ef26-531f-b16763c1ae5f.png)

以下の写真のようにWindows用のリンクをクリックして、インストーラーをダウンロードします。

![VSCodeダウンロードページ②_20241002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/03c7d949-422f-38e5-bfe1-a12e34612abb.png)
ダウンロードしたインストーラーを実行し、VSCodeをインストールします。

:::note info
セットアップ中に以下の画面でデスクトップ上にアイコンを作成する事が出来るのでチェック推奨です。
(筆者はタスクバーに追加してます。)

![vscode_セットアップ画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/185da812-ed17-8779-b13e-154b03276b42.jpeg)
:::

# 2.VSCode初回起動～拡張機能の導入まで
VSCodeをインストール出来たら起動します。
初回起動時の初期表示は以下の画面になります。

![VSCode初期画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/083faf21-a847-f253-cbcd-b8fcf2196244.png)

左端にメニューバーがあるので、その中のテトリスのようなアイコンをクリックすると拡張機能一覧ウィンドウが展開されます。
そのウィンドウの上部に拡張機能の検索窓があるので導入したい拡張機能を検索してインストールしていきましょう。
未導入の拡張機能が検索結果に表示された場合は、インストールボタンが表示されるのでクリックだけでインストールできます。
![拡張機能検索機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/b1997249-fb42-9322-619f-8412b98215cf.png)


# 2.IBM i関連や必須レベル、オススメの拡張機能一覧

<table>
  <thead>
    <tr>
      <th>No</th> <th>重要度</th> <th>拡張機能名</th> <th>説明</th> <th>備考</th>
    </tr>
  </thead>
  <tr>
    <th>A</th> <td><font color="crimson"><strong>必須</strong></font></td> <td><font color="Darkturquoise"><strong>Japanese Language Pack for Visual Studio Code</strong></font></td>　<td>VSCodeの言語を日本語に変更できます</td> <td></td>
  </tr>
  <tr>
    <th>B</th> <td><font color="crimson"><strong>必須</strong></font></td> <td><font color="Darkturquoise"><strong>IBM i Development Pack</strong></font></td> <td>VSCodeでRPG/CL/COBOLのソースコードの保守、コンパイルといった開発が可能になります</td> <td></td>
  </tr>
  <tr>
    <th>C</th> <td><font color="crimson"><strong>必須</strong></font></td> <td><font color="Darkturquoise"><strong>Code for IBM i</strong></font></td>  <td>IBM iのプログラム編集、コンパイル、デプロイ、デバッグ、ファイル(IFS)管理、SSH接続が可能になります</td> <td>2の拡張機能に内包</td>
  </tr>
  <tr>
    <th>D</th> <td><font color="crimson"><strong>必須</strong></font></td> <td><font color="Darkturquoise"><strong>SFTP</strong></font></td> <td>IBM iへのファイルの自動アップロード、双方向同期が可能になります</td> <td>2の拡張機能に内包</td>
  </tr>
  <tr>
    <th>E</th> <td><font color="crimson"><strong>必須</strong></font></td> <td><font color="Darkturquoise"><strong>RPGLE FREE</strong></font></td> <td>RPGLEコードの可読性の向上、コード補完機能、フリーフォーマットへのコンバージョン機能が追加されます</td> <td>2の拡張機能に内包</td>
  </tr>
  <tr>
    <th>F</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>indent-rainbow</strong></font></td> <td>インデントに色が付きコードの可読性が向上します</td> <td></td>
  </tr>
  <tr>
    <th>G</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>vscode-icons</strong></font></td> <td>ファイルの拡張子やディレクトリの区別をアイコン表示する事で視認性が向上します</td> <td></td>
  </tr>
  <tr>
    <th>H</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>IntelliCode</strong></font></td> <td>AIを活用したコード補完機能で、コードの文脈に応じた適切な補完をしてくれます</td> <td></td>
  </tr>
  <tr>
    <th>I</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>Path Intellisense</strong></font></td> <td>ファイルパスの自動補完を行い、入力ミスが軽減します</td> <td></td>
  </tr>
  <tr>
    <th>J</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>Bracket Pair Colorizer</strong></font></td> <td>対応する括弧を色分け表示し、コードの構造の視認性が向上します</td> <td></td>
  </tr>
  <tr>
    <th>K</th> <td>オススメ</td> <td><font color="Darkturquoise"><strong>Better Comments</strong></font></td> <td>コメントを色分け表示し、重要なコメントやTODOを強調表示出来る拡張機能</td> <td></td>
  </tr>
</table>

# 3.Code for IBM i(拡張機能)の初期設定方法
Code for IBM iのインストールが完了しましたら、IBM iに接続するためのConnection情報を入力をしていきます。

まずは左端のメニューバーにあるIBM i(サーバーマーク)アイコンをクリックし、メニューを展開します。
IBM iメニューの下にSERVERSというタブにカーソルを合わせて＋ボタンをクリックします。

![IBM iウィンドウ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/e7c3bf8c-6dcf-8e15-6327-465763b84d08.png)

IBM iログイン設定画面が表示されるので以下を参考に赤枠点線内を入力していきます。
<table>
  <thead>
    <tr>
      <th>No</th> <th>入力項目</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <th>1</th> <td><font color="Darkturquoise"><strong>Connection Name</strong></font></td> <td>接続名を入力</td>
  </tr>
  <tr>
    <th>2</th> <td><font color="Darkturquoise"><strong>Host or IP Address</strong></font></td> <td>接続するIBM iのHost名かIPを入力</td>
  </tr>
  <tr>
    <th>3</th> <td><font color="Darkturquoise"><strong>Port(SSH)</strong></font></td> <td>SSHDサーバーのポート番号を入力<br>(IBM iは22ポート、PUB400は2222ポート)</td>
  </tr>
  <tr>
    <th>4</th> <td><font color="Darkturquoise"><strong>Username</strong></font></td> <td>サインオン時のユーザー名を入力</td>
  </tr>
  <tr>
    <th>5</th> <td><font color="Darkturquoise"><strong>Password</strong></font></td> <td>サインオン時のパスワードを入力</td>
  </tr>
</table>

![Connection情報入力画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/833b651b-9a03-65d5-f01f-bb666718601f.png)


入力後、お好みに合わせてSave Passwordにチェックを入れて、Connectをクリックします。

:::note warn
ConnectでIBM iに接続する際、事前にSSHDサーバーの開始をする必要があります。SSH接続設定、開始方法は[IBM iのSSH接続をイチから設定してみた](https://qiita.com/RiSING_alpha-team/items/1254437673699179580c)でご確認ください。
:::

初回接続時には、以下のような確認メッセージが表示されます。

![IBM i初回接続時メッセージ②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/f5c27da5-53a6-fd76-e615-7134dd76241f.png)

IBM i デバッグ拡張機能は、この接続のパスワードへのアクセスを要求しています。と聞かれており、問題が無ければAllowをクリックします。

# 4.記事作成にあたっての所感
3のIBM iへの接続設定でどんな値を入れるのかが少し自信がなく調べながら進めていきました。
その辺りは当記事で可能な限り、不明点を排除した書き方が出来たのではないかと思います。
筆者自身、過去にVSCodeを触った経験があったのでVSCode側でつまづいたところはありませんでしたので今回、初めてインストールされた方にとって分かり辛かった部分があったかと思います。当記事で詰まってしまったポイントがあれば、コメントで教えてくださればと思います。他にも記事を投稿しておりますので閲覧、そしてアカウントのフォローよろしくお願いいたします！