VSCode, Remote-ContainerでHelloWorldを10言語やってみる

# はじめに
- VSCodeのremote-containersが開発環境構築時にすごく便利だと感じたので、適当な10のプログラミング言語でHelloWorldやってみます
    - Rust, Go, Python, C++, C#, Ruby, TypeScript, Java, Dart, プロデル！
- なるべくシンプルに、汎用的に
- まだ全てにおいてはデバッグ実行できるところまで記述していません（手抜き。。）

# 準備
- 前提：VSCode 1.51.1
- 前提：Windows10 home(Insider Previewバージョン)の環境で試していますが、Macでもほぼ変わらないと思います
- VSCodeをインストールする（方法は割愛）
    - Extension：Remote-Containerをインストールする
- Docker環境を用意する
    - Windowsなら、Docker Desktop for Windowsを使えるようにします。
        - 最近ではWindows10 homeでもDocker for Windowsが使えます、Insider Previewも不要
        - 参考：https://qiita.com/poramal/items/11912b5533ec8e7dbaac
            - こちらの記事はWindows10 proでやっていますが、homeでもできるはずです
    - Macなら、Docker Desktop for Macのインストールは簡単です。

# ①Rust
- １．まず適当なworkディレクトリを作ってVSCodeで開きます
    - この時点でディレクトリ内は空でいいです
- ２．「Command Palette」を開いて、`Remote-Containers:Add Development Container Configuration Files...`を実行
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/86284e35-719a-eefc-769a-520af43f9e91.png)
    - `Show All Definition...`を選択すると全て表示されます
    - `Rust`を選択します
    - `.devcontainer`ディレクトリ、その配下に`devcontainer.json`と`Dockerfile`が生成されます
- ３．コンテナを生成して、VSCodeをコンテナ接続に切り替えます
    - ポップアップでも促されると思いますが、「Command Palette」を開いて、`Remote-Containers:Add Development Container Configuration Files...`を実行
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/bc1d2a06-8b82-e7cc-a0ea-657ab0b94392.png)
    - Dockerデーモンが起動していることが前提です、初回はdocker imageのダウンロードやビルドもあるので少々時間がかかります。
    - コンテナが起動すると、VSCodeも新しく起動されます
- ４．`helloworld.rs`を作成して、コーディングします。

```rust

fn main(){
    println!("hello world!");
}
```

- ５．vscode内のterminalでビルドします、バイナリが生成されます

```shell
$ rustc helloworld.rs
```

- ６．実行します
    - まずlaunch.jsonを作成
        - 「Command Pallete」を開いて、`Open launch.json`を選択、`LLDB`を選択
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/2e8e7811-0f63-cd68-cdde-b2f484b6b88e.png)
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/885b6cb0-9d1e-6164-09f1-adcf9cc04bc6.png)
    - 中身を少し書き換えます、`"program": "${workspaceFolde}/helloworld"`とします。

```json
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "lldb",
            "request": "launch",
            "name": "Debug",
            "program": "${workspaceFolder}/helloworld",
            "args": [],
            "cwd": "${workspaceFolder}"
        }
    ]
}
```

- 
    - `F5`で実行します
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/b3a9495c-74fa-e327-cc33-b4a7ee93ca03.png)

- ７．最終的な構成です

```
│  helloworld
│  helloworld.rs
│
├─.devcontainer
│      devcontainer.json
│      Dockerfile
│
└─.vscode
        launch.json
```

- ８．実務的には、
    - さすがにビルド・実行を一発でやりたいです
    - こちらをDLしてきてベースにするのが実用的です、詳細は割愛、他の言語も同様にgithubから雛形ひっぱってくるのが賢明
        - https://github.com/microsoft/vscode-dev-containers/tree/master/containers/rust

# ②Go
- １．前項参照
- ２．ほぼ前項と同じ
    - `Go` → `1.15`、選択していく
- ３．前項参照
- ４．`helloworld.go`を作成して、コーディングします。

```golang

package main

import "fmt"

func main() {
	fmt.Printf("hello world!\n")
}

```

- ５．vscode内のterminalで実行します

```shell
$ go run helloworld.go
```

- ６．とりあえずここまでですが、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。


# ③Python
- １．前項参照
- ２．ほぼ前項と同じ
    - `Python 3` → `3.9`、選択していく
- ３．前項参照
- ４．`helloworld.py`を作成して、コーディングします。

```python
print("hello world!")
```

- ５．vscode内のterminalで実行します

```shell
$ python helloworld.py
```

- ６．こちらも、とりあえずここまでですが、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。

# ④C++
- １．前項参照
- ２．ほぼ前項と同じ
    - `C++` → `Ubuntu20.04`、選択していく
- ３．前項参照
- ４．`helloworld.cpp`を作成して、コーディングします。

```c++

#include <stdio.h>
int main() {
    printf("hello world");
    return 0;
}
```

- ５．ビルド＆実行します
    - 最初だけ次のように`launch.json`, `tasks.json`を作成
    - 「Command Pallete」を開いて、`Open launch.json` →　`C++(GDB/LLDB)`　→ `g++ Build and debug active file compiler:/usr/bin/g++`を選択
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/2a1ca466-2da3-1c22-699b-2e4345e970b1.png)
    - あとは`F5`で実行できます

- ６．ディレクトリ構造です、余裕があればcmake対応についても今後記述しておきます

```
│  helloworld
│  helloworld.cpp
│
├─.devcontainer
│      devcontainer.json
│      Dockerfile
│
└─.vscode
        launch.json
        tasks.json
```

# ⑤C#'
- １．前項参照
- ２．ほぼ前項と同じ
    - `C＃(.NET Core)` → `3.1(default)`、選択していく
- ３．前項参照
- ４．Terminalからプロジェクトを生成します。

```shell
$ dotnet new console
```

- ５．ビルド＆実行します
    - `F5`実行で下記のダウンロードが始まります（数分かかる）
            - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143120/c9417bd4-ce17-f90c-f46d-49417c6a89b5.png)
    - `.NET Core`を選択すると、`launch.json`と`task.json`が生成されます

- ６．ディレクトリ構造です

```
│  Program.cs
│  test-devcontainer-csharp-helloworld.csproj
│
├─.devcontainer
│  │  devcontainer.json
│  │  Dockerfile
│  │
│  └─library-scripts
│          azcli-debian.sh
│
├─.vscode
│      launch.json
│      tasks.json
```


# ⑥Ruby
- １．前項参照
- ２．ほぼ前項と同じ
    - `Ruby` → `2.7`、選択していく
- ３．前項参照
- ４．`helloworld.rb`を作成して、コーディングします。

```ruby
print "hello world!\n"
```

- ５．vscode内のterminalで実行します

```shell
$ ruby helloworld.rb
```
- ６．ディレクトリ構造です、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。

```
│  helloworld.rb
│
└─.devcontainer
        devcontainer.json
        Dockerfile
```


# ⑦TypeScript
- １．前項参照
- ２．ほぼ前項と同じ
    - `Node.js & TypeScript` → `14`、選択していく
- ３．前項参照
- ４．`helloworld.rb`を作成して、コーディングします。

```typescript
console.log("hello world!");
```

- ５．vscode内のterminalで実行します

```shell
$ tsc helloworld.cs
$ node helloworld.js
```

- ６．ディレクトリ構造です、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。

```
│  helloworld.js
│  helloworld.ts
│
└─.devcontainer
        devcontainer.json
        Dockerfile
```


# ⑧Java
- １．前項参照
- ２．ほぼ前項と同じ
    - `Java` → `15`、選択していく
- ３．前項参照
- ４．`helloworld.java`を作成して、コーディングします。

```java
public class helloworld{
   public static void main(String[] args){
     System.out.println("hello world!!");
   }
}
```

- ５．vscode内のterminalで実行します

```shell
$ javac helloworld.java
$ java helloworld
```

- ６．ディレクトリ構造です、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。

```
│  helloworld.class
│  helloworld.java
│
└─.devcontainer
        devcontainer.json
        Dockerfile
```


# ⑨Dart
- １．前項参照
- ２．ほぼ前項と同じ
    - `Dart`を選択していく
- ３．前項参照
- ４．`helloworld.dart`を作成して、コーディングします。

```dart
void main() {
  print('hello world!');
}
```

- ５．vscode内のterminalで実行します

```shell
$ dart helloworld.dart
```

- ６．ディレクトリ構造です、余裕があればvscode内から実行＆デバッグできるところまで、何れは記述しておきます。

```
│  helloworld.dart
│
└─.devcontainer
    │  devcontainer.json
    │  Dockerfile
    │
    └─library-scripts
            common-debian.sh
```


# ⑩プロデル（笑）
- １．前項参照
- ２．下記のディレクトリ、ファイルを手動で作成

```
└─.devcontainer
        devcontainer.json
        Dockerfile
```

```json:devconainer.json
{
	"name": "Produire",
	"build": {
		"dockerfile": "Dockerfile",
		"context": "..",
	},

	"settings": { 
		"terminal.integrated.shell.linux": "/bin/bash",
	},

	"extensions": [
		"utopiat.produirelang"
	],
}

```

```dockerfile:Dockerfile
FROM mono

RUN \
apt-get update && \
apt-get install unzip wget -y && \
rm -rf /var/lib/apt/lists/*

RUN wget -O produire.zip https://rdr.utopiat.net/files/mono//produire-mono-1.6.965.zip \
&& unzip 'produire.zip' -d /usr/bin

```

- ３．前項参照
- ４．`helloworld.rdr`を作成して、コーディングします。

```
「hello world!」を表示する
```

- ５．vscode内のterminalで実行します

```shell
$ mono /usr/bin/produire-mono/pconsole.exe  helloworld.rdr
```

- ６．ディレクトリ構造です、業務用に使うことはなさそうですが教育用にいかがでしょうか、ただ、これに関してはパッケージマネージャとかもなく、ローカル環境にいろいろ入れ込むわけではないので、コンテナ上に構築する意味は薄そうです。

```
│  helloworld.rdr
│
└─.devcontainer
        devcontainer.json
        Dockerfile
```