異世界転生したらなぜか無料でWebアプリをブラウザだけでしっかり目に開発開始出来た件

## はじめに

お久しぶりです。

この度（2022/11頭）に**GitHub Codespaces**が個人でも無料で限定的（最大60時間のみ）に使えるようになったとのことで、少し遅れて色々調べてみましたので紹介記事になります。

### 書くこと
- GitHub Codespacesとは
- GitHub Codespacesのココが凄い！
- VisualStudioCode DevContainers
- GitHub.devとの違い

### 書かないこと
- React、Next.jsの基本的な構文
- JetBrains周り
- あとがき

## 俺はwebアプリ開発をしたいがPCにNode.jsも入れたくないしなんならディレクトリも作りたくない。どこにでもいる普通の高校生だ〜ユースケース〜

例えば、GitHub上のOSSで気になるアーキテクチャを発見し、ローカルPCにcloneするまでではないにしろ少しだけデバッグしながら挙動を確かめたい場合や、タブレットしか持っていない時にタスクを行う必要が発生した時等には、以上のようなセリフをエンジニアの皆様なら呟かれることだと思います。

今回は、相当に特異なケースだとは思いますが、コンテナ構築やディレクトリの作成が出来ない状況でWebアプリを開発・公開したいという状況を想定して記事を進めていこうと思います。

## 「簡単なことですよ、ブラウザ上で開発して、そのままリポジトリにコミットすればいいのです」〜GitHub Codespacesとは〜

GitHub Codespacesとは、数秒で起動するクラウド開発環境です。
フルビルドされたイメージを使い開発環境を立ち上げるため、非常に高速に開発を始めることが出来ます。
vscodeのremote containerの仕組みがベースとなっています。また、JetBrains Gatewayとの統合が行われています。<font color="red">**つまるところ、ブラウザ上にvscodeの作業環境を再現したり、ローカルから好きなIDEでリモート接続して作業環境を構築する事ができます。**</font>

### codespaceの立ち上げ方

1. GitHubのヘッダー中、ユーザーアイコン横の＋アイコンをクリックし、ドロップダウンを展開します
2. 「New codespace」をクリックします
![スクリーンショット 0005-01-03 17.13.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/253430ac-79d9-9f34-29b1-221429c5b4ee.png)
3. 既存のリポジトリをGitHub codespacesによって立ち上げるための画面（ https://github.com/codespaces/new ）が表示されます
![スクリーンショット 0005-01-03 17.52.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/af484571-d2f7-0989-437b-417956869870.png)
4. urlからnewを消して（ https://github.com/codespaces ）を表示することで、新規にcodespaceを作成し開発を始める事が出来る画面を表示出来ます。（お知らせを消した状態での、トップからの導線が見つかりませんでした）
5. サラの状態からプロジェクトを作成し開始することも出来るほか、各環境でのテンプレートを使用することも可能です。
![スクリーンショット 0005-01-03 17.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/64876cb2-8f99-3133-4a2b-b1207e2242a2.png)
![スクリーンショット 0005-01-03 17.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/cb441233-2ce4-e8ff-852a-e80d97f14c6b.png)
6. 今回はNext.jsのテンプレートを選択しプロジェクトを開始します。

### テンプレートを選択し、リポジトリにpushまでやってみる

Next.jsのテンプレートを選択すると、新規にタブが開かれ、数秒間設定画面が表示されます。
![スクリーンショット 0005-01-04 13.29.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/9121d9b0-724f-6fac-9dcf-b8d6b45fa05f.png)
設定が完了したタイミングでCodespaceが表示されます。
![スクリーンショット 0005-01-04 13.31.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/5330db55-35ff-302a-9a32-3987b9cba78a.png)

**もうヤベェ**ですよね。
ブラウザ上でvscode画面が表示されています。
ちなみにテンプレートを選択し、Codespaceが表示された直後のこの状態では拡張機能等は入っていません。

一旦リポジトリを作成し、mainにpushするところまでやってみたいと思います。

#### リポジトリの作成
GitHub上にリポジトリを作成します。
いつものやつですね。
適当に作ります
![スクリーンショット 0005-01-04 13.39.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/70dc9f1b-ff60-65b5-9d14-ec26c85cd77e.png)

#### GitHub Codespacesからリポジトリにpush

1. `$ git init`
2. initialコミット
3. `$ git remote set-url origin https://FAL-coffee:${Developer setting画面から入手したrepo権限のあるセキュリティトークン}@github.com/FAL-coffee/codespace-yabasugi.git`
  remoteブランチの設定の追加
4. `git push --set-upstream origin main`

というか、動くのは当たり前なんですがターミナルが普通に操作出来るのに自分は少し感動しました。

![スクリーンショット 0005-01-04 14.02.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/364d5c60-398b-4d98-8af9-44b5bb74e51a.png)

## GitHub Codespaces「キンキンキンキンキンキン」〜作業実践〜
こちらではGitHub Codespacesを実際に開発環境として運用するための過程を書いてみようかと思います。
**GitHub Codesacesの実態はクラウド環境上に立ち上げられたインスタンス上で動くDockerコンテナです。**
[⇨ 開発コンテナーの概要](https://docs.github.com/ja/codespaces/setting-up-your-project-for-codespaces/introduction-to-dev-containers)

そういった前提の上で、やりたい事 -> やる事　の順に色々書き殴っていこうかと思います。

### codespacesで立ち上がったvscodeの拡張機能の設定

codespacesで立ち上がるvscodeには、デフォルトでは拡張機能は一切インストールされていません。
しかし、codespacesを実作業において活用するためにはvscode拡張機能は必須です。
今回Next.jsプロジェクトの開発のために便利なアドオンは以下のようなものがあります。
- Prettier
  Prettier+でも◎
- ESLint
- gitlens
- AutoCloseTag 
  HTMLタグを書くと、勝手に閉じタグを書いてくれるやつです。あると便利です。任意です。
- react snippet
  React用のスニペットです。要ると思います。好きなの選んでください。任意です。
- next.js snippet 
  next.js用のスニペットです。あると良いと思います。好きなの選んでください。任意です。

しかし毎回MarketPlaceからそれらをインストールし、設定を行なっていてはキリがありません。
最早旨みが何かすらわからなくなります。

当然codespacesを立ち上げた際には、アドオンまで含めて環境を構築したいと思います。

そういった場合は、`.devcontainer/.devcontainer.json`に注目する必要があります。
.devcontainer.jsonは[Visual Studio Code Dev Containers拡張機能](https://code.visualstudio.com/docs/devcontainers/containers#_getting-started)のためのファイルで、記述した設定に従ってDocker上にvscodeの作業環境を構築しています。
例えば、Next.jsテンプレートを選択し、codespacesを立ち上げた際の初期状態では以下のようなコードとなっています。
```json
{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "hostRequirements": {
    "cpus": 4
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "npm install && npm run build",
  "postCreateCommand": "",
  "postAttachCommand": {
    "server": "npm run dev"
  },
  "customizations": {
    "codespaces": {
      "openFiles": [
        "pages/index.js"
      ]
    }
  },
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000]
}
```

特に感覚的に分かりやすいのは`"customizations"`の項目で、各環境で表示された時用に固有の設定を行うことが出来ます。
今回では`"codespaces"`で開かれたとき、`"openFiles"`（最初に表示するファイル）が`pages/index.js`となっているため、初期状態では`pages/index.js`が編集可能な状態で表示されました。

GitHub Codespacesでは.devcontainer.jsonに設定を加えることで、vscodeに予め設定を行った状態で表示させることが可能です。

最低限、フォーマッタ、リンターくらいは必要なのでcodespacesを開いたときに既にそれらのアドオンがインストールされている状態になるように設定を加えようと思います。

```json
+  "extensions": [
+    "svipas.prettier-plus",
+    "dbaeumer.vscode-eslint",
+  ],
```

[公式ドキュメント --Create a devcontainer.json file](https://code.visualstudio.com/docs/devcontainers/containers#_create-a-devcontainerjson-file)を読むと、コンテナ作成時に追加したい拡張機能のidを設定することが出来るとの記述があるのが分かります。
とりあえずPrettier+とESLintだけ入れてみました。

また、保存時にフォーマッタを走らせたり、ファイル名変えたらimportして呼び出しているファイルの方でもimport文変えてくれたりして欲しいです。
[公式ドキュメント --Container specific settings](https://code.visualstudio.com/docs/devcontainers/containers#_container-specific-settings)は環境別の設定のことが書いてあるものですが、settingsで色々設定のプロパティを指定出来ることがわかると思います。
よって、保存時のオートフォーマットやらを諸々書いてみます。

出来上がりが以下です。

```json
{
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "extensions": [
    "svipas.prettier-plus",
    "dbaeumer.vscode-eslint",
  ],
+  "settings": {
+    "files.trimTrailingWhitespace": true,
+    "editor.formatOnSave": true,
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "prettier.tabWidth": 2,
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "svipas.prettier-plus"
+    },
+  },
  "hostRequirements": {
    "cpus": 4
  },
  "waitFor": "onCreateCommand",
  "updateContentCommand": "npm install && npm run build",
  "postCreateCommand": "",
  "postAttachCommand": {
    "server": "npm run dev"
  },
  "customizations": {
    "codespaces": {
      "openFiles": [
        "pages/index.js"
      ]
    }
  },
  "portsAttributes": {
    "3000": {
      "label": "Application",
      "onAutoForward": "openPreview"
    }
  },
  "forwardPorts": [3000]
}
```

.devcontainer.jsonがこの状態の時、GitHub Codespacesを立ち上げると以下のような状態になります。
拡張機能がきちんと入っており、自動フォーマッタが有効となっています。
いい感じですね。

![スクリーンショット 0005-01-04 21.20.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/53bc14dd-b7bc-435f-dd5d-a54bfc2796e3.png)


### イメージを上書きしたい

GitHub Codesacesの実態はクラウド環境上に立ち上げられたインスタンス上devcontainerによって立ち上げられたDockerコンテナである事をこれまで記述してきましたが、**立ち上がるDockerコンテナのイメージを変更したりカスタマイズしたい**場合があると思います。
その場合は、以下を参照します。

[公式ドキュメント --Create a devcontainer.json file](https://code.visualstudio.com/docs/devcontainers/containers#_create-a-devcontainerjson-file)

> Create a devcontainer.json file
VS Code's container configuration is stored in a devcontainer.json file. This file is similar to the launch.json file for debugging configurations, but is used for launching (or attaching to) your development container instead. You can also specify any extensions to install once the container is running or post-create commands to prepare the environment. The dev container configuration is either located under .devcontainer/devcontainer.json or stored as a .devcontainer.json file (note the dot-prefix) in the root of your project.
You can use any image, Dockerfile, or set of Docker Compose files as a starting point. Here is a simple example that uses one of the pre-built Development Container images:
```jsonc
{
  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-12",
  "forwardPorts": [3000],
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      // Add the IDs of extensions you want installed when the container is created.
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  }
}
```

以上は公式ドキュメントからの引用ですが、日本語訳すると`Dockerコンテナイメージを指定することも出来る。これらは事前にビルドされた開発コンテナイメージを使用した簡単な例`であると書いてあります。
`"image"`がどう考えても関係ありそうなので調べてみます。

devcontainer.json > image
[公式ドキュメント --vscode-dev-containers/container-templates/image/.devcontainer/devcontainer.json](https://github.com/microsoft/vscode-dev-containers/blob/main/container-templates/image/.devcontainer/devcontainer.json)
> // Update the 'image' property with your Docker image name.
	"image": "mcr.microsoft.com/vscode/devcontainers/base:debian-11",

> image プロパティを Docker イメージ名で更新します。

と書かれています。
これですね。

imageのプロパティとして扱えるDocker imageは[これら](https://hub.docker.com/_/microsoft-vscode-devcontainers)のようなものがあります。
javaにphp、pythonやruby、Rust、Goなど様々な作業環境に適応可能なイメージが用意されています。

またそれらのimageからではなく、自作のDockerイメージを扱いたいときは以下のようにします。
```json-doc
{
  // "image": "mcr.microsoft.com/devcontainers/typescript-node:0-12",
  // Dockerfile を指定
  "dockerFile": "./Dockerfile",
  ...
}
```

ここからはいつものDockerfileとdocker-composeです。
このように、imageプロパティやdockerFileプロパティによってcodespacesを立ち上げる際のコンテナイメージを変更可能です。

## って、なんでGitHub.devくんが！？〜GitHub CodespacesとGitHub.devの違い〜

ちなみにGitHub上で、リポジトリやPRを眺めているときに`.`をキーボード上で入力することでGitHub.devを表示することが出来ます。
![スクリーンショット 0005-01-04 21.47.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/fd4899bd-58c8-22ca-0363-79b4660af806.png)
見た目は非常によく似た機能ではありますが、GitHub Codespacesとは少し違い、こちらはあくまで**簡易エディタ**です。
あくまでマシンインスタンスの無い、エディタだけのものなのでターミナルやコンテナは付いてきません。（gitlensがデフォで生えてるくらい)
拡張もメモリ上でjsだけで処理出来る程度のものにのみ対応します。

ただブランチ切って変更してコミットしてpushしてPR作ってマージ、とかはこれ上だけで出来ます。
全然えげついです。

## 「GitHub Codespacesが個人でも限定的に無料化ってどういう事ですか！？聞いた事ないですわ！」〜2022/11にプラン改訂された内容〜

https://twitter.com/github/status/1590403103014420481?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1590403103014420481%7Ctwgr%5Edd8bb75b7a5cb07db1df9debc6fd7d7f334a277a%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F22%2Fgithub_codespaces60jetbrainsjupyterlabide.html

本来有料プランのGitHub TeamとGitHub Enterpriseのユーザーに対して提供していた「GitHub Codespaces」ですが、2022/11に全ユーザーが毎月最大60時間まで無料で使えるようになりました。

https://www.publickey1.jp/blog/22/github_codespaces60jetbrainsjupyterlabide.html

LiveShareとかの拡張機能も使えて無料です。
自分は丸2ヶ月ほど遅れて知ったんですが、これやばくないですか？

## 最大CPU32コア、最大メモリー64GB、...atc〜使用可能インスタンスのスペック〜

ここいらでGitHub Codespacesが提供するマシンインスタンスのスペックについて触れます。

<font color="red"><strong>「ステータス、オープン！</strong></font>

クラウドVMではこんな感じ。
![スクリーンショット 0005-01-04 22.03.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/99921435-0b8b-d7bf-adab-f5a717e58a54.png)

最大32コア、64GBまで拡張可能です。
[スピンアップ](https://ja.theastrologypage.com/spin-up)は10秒以内。

GitHub上ではこんな感じです。
![スクリーンショット 0005-01-04 22.07.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/42a27b9d-de9c-0518-55c4-3bd8333c062a.png)

もちろんブラウザ上で作業するのでローカル環境に比べて多少のラグが出ることはありますが、自分は大きなストレスを感じるほどではありませんでした。

## それって使用可能枠が弱すぎ......って意味だよな？〜無料ユーザーの使用可能枠についての詳細〜

![スクリーンショット 0005-01-04 22.11.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/6314908d-6f4b-edb3-ce0d-f5b1bfb814d3.png)

8コア16GBのやつだと月15時間まで無料で使えます。
ストレージは15GBまで無料。

こんなん無料で使えちゃっていいんですね......

[=> 改訂版ページ](https://github.com/features/codespaces)

## 参考サイト
### Qiitaから
勝手に参考にさせていただきました......
解釈違い等してしまっていれば申し訳ございません。

https://qiita.com/uikou/items/1feb83865f9d638807ad

https://qiita.com/ku_suke/items/07deb49dba04bdc36216

https://qiita.com/ippey_s/items/616213e1b2c98a68bbb7

https://qiita.com/kojiohta/items/378f7a9310c411fa41fb

### GitHubの開発チームBlog
[GitHub開発チームでのCodespacesの利用 --2021.8.30](https://github.blog/jp/2021-08-30-githubs-engineering-team-moved-codespaces/)
[GitHubの新たなフェーズへ！ --2021.11.1](https://github.blog/jp/2021-11-11-building-the-next-phase-of-github-together/)
[GitHub Codespacesのプレビルド機能がリリースされました --2022.6.27](https://github.blog/jp/2022-06-27-prebuilding-codespaces-is-generally-available/)

### 公式ドキュメント
https://docs.github.com/ja/codespaces

### Visual Studio Code Dev Containersの公式ドキュメント
https://code.visualstudio.com/docs/devcontainers/containers#_getting-started


## くぅ～疲れましたw〜あとがき〜

くぅ～疲れましたw これにて完結です！
実は、ネタレスしたら代行の話を持ちかけられたのが始まりでした
本当は話のネタなかったのですが←
ご厚意を無駄にするわけには行かないので流行りのネタで挑んでみた所存ですw

以下、GitHub Codespaces達からの一言をどぞ

GitHub Codespaces「みんな、見てくれてありがとう
ちょっと腹黒なところも見えちゃったけど・・・気にしないでね！」

GitHub.dev「いやーありがと！
私のかわいさは二十分に伝わったかな？」

VisualStudioCode DevContainers「見てくれたのは嬉しいけどちょっと恥ずかしいわね・・・」

Next.js「見てくれありがとな！
正直、作中で言った私の気持ちは本当だよ！」

Docker「・・・ありがと」ﾌｧｻ

では、

GitHub Codespaces、GitHub.dev、VisualStudioCode DevContainers、Next.js、Docker、俺「皆さんありがとうございました！」

終

GitHub Codespaces、GitHub.dev、VisualStudioCode DevContainers、Next.js、Docker「って、なんで俺くんが！？
改めまして、ありがとうございました！」

本当の本当に終わり