📱

開発するのにPCがない!そんなあなたにGitHub Codespaces + VS Code

に公開

はじめに

こんにちは、りゅうです!
先日、会社の先輩方と一緒に開発合宿に参加したのですが、
そこで、ありえないポンコツをやらかしました。

それが、周辺機器・参考になりそうな技術書・マウス・キーボードを用意しているにも関わらずPCを忘れるという大失態を犯しました。
その中でも意外な発見があったので記事を書きます!

今回の開発合宿でやっていたことについてはこちらの記事をご覧ください!

実はスマホでもコードが書けるって知ってますか?

今回、自分はPCを持ってくることを忘れたのですが、スマホでコードを編集するということをやってみました。
最初に言っておきます、かなり不便だったのでおすすめはできません。
実際のスマホの画面
ただ、タブレットなどある程度の画面の大きさがあるデバイスであれば、
最低限の開発は可能かもしれません。

今回は、GitHub Codespaces+VSCodeのWeb版を使用しました。
この環境ではDockerも使用可能です!そのため、ターミナル上で完結する開発であればほぼ対応できます!

ただし、ターミナルがスマホでは上にスクロールできなかったことがあったのでちょっと不便でした。

GitHub Codespacesの機能について

GitHub Codespacesは、簡単に言うとクラウド上に開発環境を作ってくれるサービスです!
ブラウザさえあればどこからでもアクセスできるので、今回みたいにPCを忘れてスマホしかない状況でも開発ができちゃいます。

主な特徴

  • 環境構築が自動: .devcontainer という設定ファイルで環境をカスタマイズもできる(今回は使用していない)
  • Dockerが使える: ターミナル上で完結する開発ならだいたいできそう!
  • 好きなエディタで開ける: ブラウザ版VSCode、デスクトップ版VSCode、JetBrains IDEなど(今回はiPhone からなのでブラウザから)

マシンスペックの選択肢

スペック CPU
最小 2コア
中程度 4コア
高性能 8コア
最大 32コア

料金について

無料枠

プラン 無料枠(コンピュート時間/月) 無料枠(ストレージ)
個人用アカウント用の GitHub 120時間 15GB
GitHub Pro 180時間 20GB

追加料金(無料枠を超えた場合)

マシンの種類 Unit of measure 含まれる使用量の乗数 Price
2コア 1時間 2 $0.18
4コア 1時間 4 $0.36
8コア 1時間 8 $0.72
16コア 1時間 16 $1.44
32コア 1時間 32 $2.88
ストレージ 1GB-月 適用なし $0.07

スマホでちょっと開発するくらいなら、無料枠だけで十分いけそうですね!(本当に助かった…)

VSCode Web版について

VSCode Web版は、その名の通りブラウザだけで動くVSCodeです!
vscode.dev にアクセスするだけで使えるので、インストールも何もいりません。
スマホ、タブレット、クロームブック、どんなデバイスでもOKです。

使える機能

機能 対応状況
構文ハイライト ✅ 対応
インテリセンス ✅ 対応
デバッグ ❌非対応
ターミナル ⚠️ 部分的に対応(Codespaces使用時限定)
拡張機能 ⚠️ Web対応のもののみ
ローカルファイル ⚠️ 制限あり

デスクトップ版との違い

できること

  • GitHub/Microsoftアカウントでリポジトリに直接アクセス
  • コードの編集・構文ハイライト・インテリセンス
  • ドキュメント作成や設定ファイルの修正
  • GitHub Codespacesと組み合わせてターミナル操作(制限あり)

制限があること

  • デバッグ機能が使えない
  • すべての拡張機能は使えない(Web対応のもののみ)
  • ローカルファイルシステムへのアクセスに制限
  • ターミナルはGitHub Codespacesを使った場合のみ、かつ機能に制約がある

実際使ってみた感想

今回スマホで使ってみて、コード自体は普通に書けました!
インテリセンスも効くので、タイポとかは防げて助かりました。

ただ、ターミナルのスクロール操作がうまくいかなかったりと、スマホの画面サイズやUIの問題で不便さはありました。
それから、デバッグができないのは結構きつかったです…。
タブレットくらいの画面があれば、ちょっとした修正や軽い開発なら結構いけるかもしれないですね。
GitHub Codespacesと組み合わせれば、Dockerを使った開発やビルド・テストもできますが、デバッグ機能がないことは頭に入れておいた方がいいです!

最後に

快適な開発環境は本当に大事です!ですが、万が一のときはこういった方法もあるというのは知っておいて損はないかもしれないです!

SMARTCAMP Engineer Blog

Discussion