<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="1" class="code-line">こんにちは、りゅうです！<br>
先日、会社の先輩方と一緒に開発合宿に参加したのですが、<br>
そこで、ありえないポンコツをやらかしました。</p>
<p data-line="5" class="code-line">それが、周辺機器・参考になりそうな技術書・マウス・キーボードを用意しているにも関わらずPCを忘れるという大失態を犯しました。<br>
その中でも意外な発見があったので記事を書きます！</p>
<p data-line="8" class="code-line">今回の開発合宿でやっていたことについてはこちらの記事をご覧ください！</p>
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__827607dd0c21c" src="https://embed.zenn.studio/card#zenn-embedded__827607dd0c21c" data-content="https%3A%2F%2Fzenn.dev%2Fsmartcamp%2Farticles%2F5eaa23dc0fd92f" frameborder="0" scrolling="no" loading="lazy"></iframe></span>
<h2 id="%E5%AE%9F%E3%81%AF%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E3%82%82%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E6%9B%B8%E3%81%91%E3%82%8B%E3%81%A3%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E3%81%AF%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%A7%E3%82%82%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E6%9B%B8%E3%81%91%E3%82%8B%E3%81%A3%E3%81%A6%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%BE%E3%81%99%E3%81%8B%EF%BC%9F" aria-hidden="true"></a> 実はスマホでもコードが書けるって知ってますか？</h2>
<p data-line="13" class="code-line">今回、自分はPCを持ってくることを忘れたのですが、スマホでコードを編集するということをやってみました。<br>
最初に言っておきます、かなり不便だったのでおすすめはできません。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/36d43da64843-20251122.png" alt="実際のスマホの画面" width="250" class="md-img" loading="lazy"><br>
ただ、タブレットなどある程度の画面の大きさがあるデバイスであれば、<br>
最低限の開発は可能かもしれません。</p>
<p data-line="19" class="code-line">今回は、GitHub Codespaces＋VSCodeのWeb版を使用しました。<br>
この環境ではDockerも使用可能です！そのため、ターミナル上で完結する開発であればほぼ対応できます！</p>
<p data-line="22" class="code-line">ただし、ターミナルがスマホでは上にスクロールできなかったことがあったのでちょっと不便でした。</p>
<h2 id="github-codespaces%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="24" class="code-line">
<a class="header-anchor-link" href="#github-codespaces%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> GitHub Codespacesの機能について</h2>
<p data-line="26" class="code-line">GitHub Codespacesは、簡単に言うとクラウド上に開発環境を作ってくれるサービスです！<br>
ブラウザさえあればどこからでもアクセスできるので、今回みたいにPCを忘れてスマホしかない状況でも開発ができちゃいます。</p>
<h3 id="%E4%B8%BB%E3%81%AA%E7%89%B9%E5%BE%B4" data-line="29" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 主な特徴</h3>
<ul data-line="30" class="code-line">
<li data-line="30" class="code-line">
<strong>環境構築が自動</strong>: <code>.devcontainer</code> という設定ファイルで環境をカスタマイズもできる（今回は使用していない）</li>
<li data-line="31" class="code-line">
<strong>Dockerが使える</strong>: ターミナル上で完結する開発ならだいたいできそう！</li>
<li data-line="32" class="code-line">
<strong>好きなエディタで開ける</strong>: ブラウザ版VSCode、デスクトップ版VSCode、JetBrains IDEなど（今回はiPhone からなのでブラウザから）</li>
</ul>
<h3 id="%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%B9%E3%83%9A%E3%83%83%E3%82%AF%E3%81%AE%E9%81%B8%E6%8A%9E%E8%82%A2" data-line="34" class="code-line">
<a class="header-anchor-link" href="#%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%B9%E3%83%9A%E3%83%83%E3%82%AF%E3%81%AE%E9%81%B8%E6%8A%9E%E8%82%A2" aria-hidden="true"></a> マシンスペックの選択肢</h3>
<table data-line="36" class="code-line">
<thead data-line="36" class="code-line">
<tr data-line="36" class="code-line">
<th>スペック</th>
<th>CPU</th>
</tr>
</thead>
<tbody data-line="38" class="code-line">
<tr data-line="38" class="code-line">
<td>最小</td>
<td>2コア</td>
</tr>
<tr data-line="39" class="code-line">
<td>中程度</td>
<td>4コア</td>
</tr>
<tr data-line="40" class="code-line">
<td>高性能</td>
<td>8コア</td>
</tr>
<tr data-line="41" class="code-line">
<td>最大</td>
<td>32コア</td>
</tr>
</tbody>
</table>
<h3 id="%E6%96%99%E9%87%91%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="43" class="code-line">
<a class="header-anchor-link" href="#%E6%96%99%E9%87%91%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 料金について</h3>
<p data-line="45" class="code-line"><strong>無料枠</strong></p>
<table data-line="47" class="code-line">
<thead data-line="47" class="code-line">
<tr data-line="47" class="code-line">
<th>プラン</th>
<th>無料枠（コンピュート時間/月）</th>
<th>無料枠（ストレージ）</th>
</tr>
</thead>
<tbody data-line="49" class="code-line">
<tr data-line="49" class="code-line">
<td>個人用アカウント用の GitHub</td>
<td>120時間</td>
<td>15GB</td>
</tr>
<tr data-line="50" class="code-line">
<td>GitHub Pro</td>
<td>180時間</td>
<td>20GB</td>
</tr>
</tbody>
</table>
<p data-line="52" class="code-line"><strong>追加料金（無料枠を超えた場合）</strong></p>
<table data-line="54" class="code-line">
<thead data-line="54" class="code-line">
<tr data-line="54" class="code-line">
<th>マシンの種類</th>
<th>Unit of measure</th>
<th>含まれる使用量の乗数</th>
<th>Price</th>
</tr>
</thead>
<tbody data-line="56" class="code-line">
<tr data-line="56" class="code-line">
<td>2コア</td>
<td>1時間</td>
<td>2</td>
<td>$0.18</td>
</tr>
<tr data-line="57" class="code-line">
<td>4コア</td>
<td>1時間</td>
<td>4</td>
<td>$0.36</td>
</tr>
<tr data-line="58" class="code-line">
<td>8コア</td>
<td>1時間</td>
<td>8</td>
<td>$0.72</td>
</tr>
<tr data-line="59" class="code-line">
<td>16コア</td>
<td>1時間</td>
<td>16</td>
<td>$1.44</td>
</tr>
<tr data-line="60" class="code-line">
<td>32コア</td>
<td>1時間</td>
<td>32</td>
<td>$2.88</td>
</tr>
<tr data-line="61" class="code-line">
<td>ストレージ</td>
<td>1GB-月</td>
<td>適用なし</td>
<td>$0.07</td>
</tr>
</tbody>
</table>
<p data-line="63" class="code-line">スマホでちょっと開発するくらいなら、無料枠だけで十分いけそうですね！（本当に助かった…）</p>
<h2 id="vscode-web%E7%89%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="65" class="code-line">
<a class="header-anchor-link" href="#vscode-web%E7%89%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> VSCode Web版について</h2>
<p data-line="67" class="code-line">VSCode Web版は、その名の通りブラウザだけで動くVSCodeです！<br>
<code>vscode.dev</code> にアクセスするだけで使えるので、インストールも何もいりません。<br>
スマホ、タブレット、クロームブック、どんなデバイスでもOKです。</p>
<h3 id="%E4%BD%BF%E3%81%88%E3%82%8B%E6%A9%9F%E8%83%BD" data-line="71" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%88%E3%82%8B%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 使える機能</h3>
<table data-line="73" class="code-line">
<thead data-line="73" class="code-line">
<tr data-line="73" class="code-line">
<th>機能</th>
<th>対応状況</th>
</tr>
</thead>
<tbody data-line="75" class="code-line">
<tr data-line="75" class="code-line">
<td>構文ハイライト</td>
<td>✅ 対応</td>
</tr>
<tr data-line="76" class="code-line">
<td>インテリセンス</td>
<td>✅ 対応</td>
</tr>
<tr data-line="77" class="code-line">
<td>デバッグ</td>
<td>❌非対応</td>
</tr>
<tr data-line="78" class="code-line">
<td>ターミナル</td>
<td>⚠️  部分的に対応（Codespaces使用時限定）</td>
</tr>
<tr data-line="79" class="code-line">
<td>拡張機能</td>
<td>⚠️ Web対応のもののみ</td>
</tr>
<tr data-line="80" class="code-line">
<td>ローカルファイル</td>
<td>⚠️ 制限あり</td>
</tr>
</tbody>
</table>
<h3 id="%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" data-line="82" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E7%89%88%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> デスクトップ版との違い</h3>
<p data-line="84" class="code-line"><strong>できること</strong></p>
<ul data-line="85" class="code-line">
<li data-line="85" class="code-line">GitHub/Microsoftアカウントでリポジトリに直接アクセス</li>
<li data-line="86" class="code-line">コードの編集・構文ハイライト・インテリセンス</li>
<li data-line="87" class="code-line">ドキュメント作成や設定ファイルの修正</li>
<li data-line="88" class="code-line">GitHub Codespacesと組み合わせてターミナル操作（制限あり）</li>
</ul>
<p data-line="90" class="code-line"><strong>制限があること</strong></p>
<ul data-line="91" class="code-line">
<li data-line="91" class="code-line">デバッグ機能が使えない</li>
<li data-line="92" class="code-line">すべての拡張機能は使えない（Web対応のもののみ）</li>
<li data-line="93" class="code-line">ローカルファイルシステムへのアクセスに制限</li>
<li data-line="94" class="code-line">ターミナルはGitHub Codespacesを使った場合のみ、かつ機能に制約がある</li>
</ul>
<h3 id="%E5%AE%9F%E9%9A%9B%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E6%84%9F%E6%83%B3" data-line="96" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 実際使ってみた感想</h3>
<p data-line="98" class="code-line">今回スマホで使ってみて、コード自体は普通に書けました！<br>
インテリセンスも効くので、タイポとかは防げて助かりました。</p>
<p data-line="101" class="code-line">ただ、ターミナルのスクロール操作がうまくいかなかったりと、スマホの画面サイズやUIの問題で不便さはありました。<br>
それから、デバッグができないのは結構きつかったです…。<br>
タブレットくらいの画面があれば、ちょっとした修正や軽い開発なら結構いけるかもしれないですね。<br>
GitHub Codespacesと組み合わせれば、Dockerを使った開発やビルド・テストもできますが、デバッグ機能がないことは頭に入れておいた方がいいです！</p>
<h2 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="106" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h2>
<p data-line="108" class="code-line">快適な開発環境は本当に大事です！ですが、万が一のときはこういった方法もあるというのは知っておいて損はないかもしれないです！</p>


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

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

Discussion