VSCode for the Web について学ぶ
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
このスクラップについて
今週の金曜日に VSCode for the Web に関連するディスカッションがあり、その準備のために VSCode for the Web について学んだことをこのスクラップに記録していく。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
やりたいこと
ソースコードの同期機能を開発しているので VSCode for the Web のエディタで変更を検知して API リクエストを送信できたらやりたいことができるのだが、そんな都合の良い機能はないよね?
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
まずは使ってみる
適当に使ってみて気づいたことを書いていこう。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
Ctrl + W
VSCode ではなくブラウザのタブを閉じようとするのが仕方ないとは思うけど何か対策しないとだな。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
保存できる
ダウンロードではなくファイルを保存できる、すごいな。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
自動保存はいただけない
すごいけど勝手に保存されるのはちょっと嫌だな、無効にできるのかなこれは。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
リモートトンネル
なんか面白そうな機能だ。
リモートの VSCode Server に接続できるらしい。
もしかしてこれで CLI 実行ができてしまう?
まずは普通の VSCode で試してみよう。
code tunnel
GitHub で認証したら https://vscode.dev/tunnel/xxxx のようなアドレスが表示された。
アクセスするとシェルが実行できるではないか!すごいぞ!
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
Codespaces とはなんだろう?
なんとなくだが VSCode Server のホストを用意してくれるサービスのようだ。
料金体系はどのようになっているのだろう。
GitHub でのコンソールは下記のようだ。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
Codespaces の料金体系
1 カ月に 120 コア時間までは無料のようなので 4 コアなら 30 時間までは無料になる。
課金単位は秒なのだろうか?
1 時間 15 分アクティブなら 1.25 とあるので昔の AWS みたいに 1 時間ではなさそうだ。
ストレージは 32 GB が上限のようだが、これは多分上限の方ではなくて実際の使用料の方で請求されるのだろう。
15 GB 月までは無料で使用できる。
オーバーした場合は 1 コア時間あたり 0.09 米ドル、1 GB 月あたり0.07 米ドルのコストが発生する。
1 米ドル 157 円の場合は日本円だとそれぞれ 14 円と 11 円になる。
もし 20 GB で 平日 6 時間 4 コアのマシンで作業したら 220 円 + 6,720 円になる計算になる。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
寄り道
Git LFS が少し気になった。
![薄田達哉 / tatsuyasusukida](https://res.cloudinary.com/zenn/image/fetch/s--h04js5hX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/02d3bdd44b.jpeg)
どうやら目的は達成できそうだ
GitHub Codespaces を使う前提であれば VSCode for the Web でもターミナルが実行できる状態で開発ができる。
そうすると iPad や Meta Quest のような環境でも開発ができる。
GitHub Codespaces は色々な使い方ができそうなので今度ゆっくり調べてみたい。