5250ユーザーが「VSCode」を使ってみた　～VSCodeの基本知識編～

# 5250ユーザーが、VSCodeを使ってみました
VSCodeを使ったことなく知識もほとんどない5250ユーザーが、VSCodeを使ってみました。
VSCodeとは何かというところの勉強からダウンロード・RPGプログラムのコンパイルまで実施した手順をまとめます。まずこの記事ではVSCodeでIBM iを触るための基本知識・操作とVSCodeを使うとどんなことができるのか（VSCodeを使うメリット）を**5250ユーザーの目線**からまとめます。（筆者もまだまだ勉強中ですが…:disappointed_relieved:）
#### この記事を読んで、5250しか使ったことないけど、VSCodeを使ってみようかな！と思ってもらえたらうれしいです！


# 具体的なダウンロード～コンパイル手順は別記事で！
#### 具体的なダウンロード～コンパイル手順は別で記事を作成しているのでそちらをご確認ください
・VSCodeのダウンロード、拡張機能のインストール、SSH接続
https://qiita.com/RiSING_alpha-team/items/7b5c910c6df111a53ace
https://qiita.com/RiSING_alpha-team/items/1254437673699179580c
・コンパイル手順、IFS接続
https://qiita.com/RiSING_alpha-team/items/3ad4e5e7f01998b5c5d0

# そもそもVSCodeとは？
VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタのことです。
コード保管やスニぺットによる自動入力、デバッガやリファクタリングツールのサポート、Gitによるバージョン管理システムの統合など様々な機能を備えています。

# VSCodeでIBM iを触るとは？
VSCodeで無償の拡張機能である「Code for IBM i」 をインストールすることで、VSCodeでIBM iのプログラム開発を行えるようになります。
ソースファイルの編集やコンパイル、IFSに配置したソースの直接編集ができます。
また、ローカルのソースコードをIBM iのIFSにプッシュすることが可能です。

※ただし、RPG ⅢおよびIVについてはCode for IBM iでプロンプト機能が提供されていないため、不向き。FFRPGの開発する際に使うのがよさそうです！

# 基本知識（画面の構成）
VSCodeの画面構成は以下のようになっています

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/f33a4d5b-76a2-c4a9-8330-b38a8a9ab276.png)


| 名称 | 説明 |
|:-|:-|
|エディター|ファイルなどを表示・編集するエリア |
|エディターグループ|   タブで複数のエディターをまとめたエリア|
|アクティビティバー|  サイドバーのアイコンメニューを表示するエリア　<br>詳細は下記参照 |
|サイドバー   |   選択したアクティビティの詳細情報や操作を表示するエリア|
|パネル   |ターミナル、デバッグコンソール、出力、問題などの情報を<br>表示するエリア   |
|ステータスバー   | ファイルに関連する情報などを表示するエリア　<br>詳細は下記参照  |

### アクティビティバーの詳細
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/51f9847b-a4b3-474b-631f-41a4b0d0e25f.png)


### ステータスバーの詳細
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/34b1f8c6-9a6f-5cc9-aec9-502fb4b959ed.png)

| 名称 | 説明 |
|:-|:-|
|問題|エラー数と警告数を表示する |
|行・列番号| エディター上のカーソル位置の行番号、列番号を表示する|
|インデント|インデントの種類（スペース／タブ）とサイズを表示する |
|文字コード|  ファイルの文字コード（UTF-8、Shift JISなど）を表示する|
|改行コード|ファイルの改行コード（CRLFなど）を表示する   |
|言語モード   | ファイルの言語モードを表示する  |
|通知  |	拡張機能やVSCode自体からの通知を表示する  |




# 基本操作（ソースの編集~保存手順）
基本操作として、VSCodeではどのようにソースの編集を行うのかを説明します。
5250と比較するとSTRPDMコマンドで毎回目的のソースを探さなくてよいのが便利です。
IFSファイルの編集やローカルで編集したものをIFSへアップロードもできます。

### 【5250でのソース編集手順】
1.コマンドラインでSTRPDM
2.編集したいライブラリとソースファイルを指定
3.表示されたソースファイルのリストから編集したいファイルを選択し、オプション 2=Edit を入力してソースエディタ（SEU）で編集
4.F3で保存

### 【VSCodeでのソース編集手順】

#### ライブラリーソースの操作（STRPDMで見ているソース）
IBM iに接続した後、サイドバーに表示される「USER LIBRARY LIST」または「OBJECT BROWSER」から編集したいライブラリを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/ed02f57e-09ee-8389-57d1-5a75a43e2692.png)

ライブラリ内のソースファイルを探し、編集したいソースメンバーをダブルクリックします。
通常のテキストエディタと同様に、コードを編集します。
編集が完了したら、Ctrl + S（またはCmd + S）で保存します。
保存すると、IBM i上のソースメンバーも自動的に更新されます。

下記のように「OBJECT BROWSER」ではフィルターを作成できるので、よく使うファイルをすぐに開けるの便利です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/00b1b772-665f-a4b9-bbda-ccc7147cbfe1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/2606073a-79a0-7f9a-2e81-44e7a7b7ea3c.png)

#### IFSファイルの操作
VSCodeの左側のサイドバーにある「IBM i」アイコンをクリックします。
「IFSブラウザ」を選択すると、IFSのディレクトリが表示されます。
IFSブラウザで目的のディレクトリを展開し、ファイルをダブルクリックして開きます。
編集が完了したら、Ctrl + S（またはCmd + S）で保存します。
保存すると、IFS上のソースメンバーも自動的に更新されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/c9fb70ac-fdd5-bd38-c5bc-545aaf8b2c7b.png)

#### ローカルファイルの操作
VSCodeで「ファイル」メニューから「フォルダーを開く」を選択し、編集したいローカルフォルダーを開きます。
ファイルを編集し、保存します。
SFTP（Secure File Transfer Protocol）を使用して、ローカルファイルをIFSにアップロードできます。



# 5250ユーザーがVSCodeを使うメリット
### 5250で不便・やりづらいと思っていることがVSCodeならできます！
#### 具体例をいくつかご紹介します

##### ・画面サイズに制約がない
　5250画面だと２０行程度しか一度に見ながら作業できませんが、VSCodeなら十分な行数を確認しながら作業できます！

##### ・複数画面を並行してみながら作業できる
　5250だと１画面で２ファイルまでしか見ることができず、一度に修正できるのは１ファイルのみですが、VSCodeなら並行していくつかのファイルを確認でき、また並行して修正できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/4623d6bf-5480-bb80-6e83-5a4d3b5a8c1e.png)

##### ・一斉置換できる
　定義名を変更したいとなったとき、5250だと一つずつ検索して修正するの地味に（結構）面倒です・・
  が、VSCodeなら選択して「Shift＋Ctrl＋L」で一斉置換できます！

:::note warn 
追記です！5250でも一斉置換できることがわかりました！
例）すべてのABCをXYZに置換する場合　
①下記のようにコマンドに入力する
Ｃ ＡＢＣ ＸＹＺ Ａ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/c3769f93-1db3-bc4c-0b1b-1bfff4da731a.png)

②Shift+F2を押し、入力する。Shift+F5で実行
※処理する対象を「２＝すべて」にしてください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3844144/f7ecb811-bdb9-6613-a3de-f5fa487bcaf5.png)

:::

# まとめ
この記事を読んで、5250ユーザーがVSCode使ってみようかな！と少しでも思ってもらえていたら嬉しいです！
このアカウントではほかにもVSCodeに関する記事を投稿しているので、ほかの記事もぜひみていってください！

# 参考サイト
https://www.imagazine.co.jp/code-for-ibm-i-j-part1/