本記事はQiita Advent Calender 2025 わたなべの10日目です！
10日目は、私渡邊が作成します！
本記事では、スマートフォンで開発する場合の開発環境について、現状の私の考えについて書いてみたいと思います！
ハッカソンを視野に入れて、大規模なアプリケーションや硬めの実装というより、素早くわかりやすく開発することを主眼においたスタックとして紹介します！
イメージとしてはハッカソンにPC持っていくの忘れた時の対処法です！
スマホしか持ってきてない・・・どうしよう
スマホでハッカソン？？
先日、こんなポストを見かけました
そう、開発ツールをスマホに限定したハッカソンの可能性です。
私はハッカソンに出ることが好きなのでそれはそれで面白そうだと思ったのですが、ふと会場にPCを持っていくのを忘れることもあるかもなと思いました。
なので、2025年12月7日時点でスマホのみで開発することを考えて、記事を執筆することにしました。
開発環境
web上で動作するコーディングエージェント一択です。
まず、ノーコードツールはおすすめしないです。スマホの小さな画面で、ノードを操作したり、設定したりする作業が非常に困難でした。
当然、コードを書くのもなし。普段書いている人ほど、スマホのUIでのタイピングにストレスを感じるとともに、後述するGitHub Codespacesの仕様上ターミナルからコマンド実行するのもままならないのでやめておいた方が良いです。
1. コーディングエージェントの選択
ManusやLovable、YouWareのような全部一括でやってくれるエージェントを利用するのも一つの手かと思いますが、あまり私がこの辺り詳しくないので本記事では言及いたしません。Manus使いましょうでは記事になりませんしね
1.1. Codex
- GPTに課金しているアカウントであれば、2日間のハッカソンに耐えられる分は十分使えます
- 本記事ではこれをメインで利用していく想定で記述しています
1.2. Claude Code on the Web
- こちらは
Pro,Maxに登録している方が利用できます - すでにClaude Code利用されている方はこちらが良さそう
1.3. Cursor Web Agents
- CursorのWeb Agentsも選択肢。
composer1使えるのは強み - また、7日間限定の1週間Pro plan trialもあります。その7日間をハッカソンに切るかは諸説
2. エージェント以外の環境
2.1. GitHubアカウントとスマホアプリ
- 上記コーディングエージェントはGitHubのリポジトリに接続して開発を行うので、GitHubアカウントは必須
- スマホアプリもあるとより快適に開発できるので、ダウンロードを推奨
2.2. ホスティング環境
スマホ上でデモをする上で、ホスティング環境にデプロイしておいた方が良いです。また、アプリによってはスマホで実装している強みを活かして、会場の方に触ってもらうことも可能です。
GitHubに連携して、pushされたらBuild, Deployされるものが良いですね。複雑な設定もスマホからは大変なので、Netlify、Cloudflare(Pages, workers)、Vercelあたりが候補。
実際の開発
上記環境で実際に実装してみます。
私が試しに作ってみたものがこちら（スマートフォンからアクセスしてください）
- せっかくスマートフォン使っているので、何らかのセンサー類を利用したい
- ハッカソンを想定しているので、見栄えがするものを実装したい
と考え、スマホを振るとカメラ映像の上に斬撃が走るアプリケーションにしてみました。電車で目の前に頭くる人が座っていた時にバラバラに切り刻んでスッキリしてください
requestPermission()を利用しているので、Android動かないかもしれません
GitHubがこちら
1. 要件定義と環境立ち上げ
1.1. 要件定義
闇雲にエージェントに指示をしてもコンテキストウィンドウがグチャグチャになってまともなものができないので、まずは何をつくかを文書化しましょう
コンテキストウィンドウについてはこちら
チームで開発しているのであればみんなで相談しながら、一人参加ハッカソンであればチャッピーと相談しつつ、最終的にはコピペ可能な要件定義書に落とします。
要件定義書
また、技術スタックも文書におこしておくと、実装がスムーズに進みます
技術要件
1.2. 開発環境立ち上げ
GitHubのリポジトリを作成します
Newから作成
Add READMEをOn、Add .gitignoreはNodeが良いですね
1.3. ドキュメントの追加
リポジトリに先ほど作成した要件定義書と技術要件を.md形式のファイルで追加します。
/docsフォルダを作成し、その下にそれぞれrequirements.md, spec.mdとして配置すると良いでしょう。
ファイル追加は直接実施すれば良いです。
失敗事例：Codespacesを使った場合
私は最初GitHub Codespacesを利用しましたが、結論Codespaceは不要でした。
- スマホのCodespaceのターミナルの仕様上、コピペや以前実行したコマンドの再選択ができない
- コードの生成、更新はCodex上でpull&requestを作成して実行するので、codespace経由でpushする機会がない
- コマンド実行が手間であり、Codexのpull&requestを都度pullしなければならない
などのデメリットが目立ち、準備したものの数回使っただけで終わりました。
参考までにCodespacesを使う場合下記画像のようになります。
ここでファイルを追加したり追加したファイルにコピペしたり
GitHubへのpushはGitLens使ってGUIで実施。ターミナルは非常に困難
1.4. Codexとリポジトリの連携
Codexのweb版にスマホのブラウザからアクセスします。
PCのマークのアイコンから環境を管理するを開きます
+ボタンからリポジトリに接続します
接続するリポジトリを選ぶと登録されます
ここまでできれば、チャット画面で✔️のついているリポジトリに対してタスクを投げて実行することができます
2. Vibe Cording
コーディングエージェントで実装していきます。
2.1. Plan作成
チャット欄の右下の+ボタンにあるメニュー、もしくはチャット欄に/planと打ち込むことでプランを立てるモードにできます。
青色の
プランのアイコンが出ていれば成功しています
プランにすることで、いきなり実装し始めるのではなく、ある程度いくつかのタスクを列挙した上で計画的に実装を進めるようなスレッドを立てることができますので、これを活用していきます。
/docs配下のrequirements.md, spec.mdを読んで必要なタスクを計画してください
というプロンプトを実行することで、先ほどリポジトリに配置した要件定義書をベースに実装タスクが作成されます。
このようにタスクリストを生成してくれますので、順次実行していきます。
タスクリストは一つずつ実行しましょう。
実装する場所ごとに分割しているわけではないので、一気に実装しにいくとコンフリクトをおこしてpushできなくなります。
スマホでコンフリクトを解消するのは非常に困難（というか無理）なので、時間を無駄にすることとなります。
必ず、一つずつ実行しましょう。
2.2. 実装とプルリク
タスクを開始ボタンを押すとCodexが実装始めるので、少し待ちましょう。
終わると次の画像のような画面になるので、PRを作成するを押します
PRを作成するを押下。少し待つと
PRを表示するに変化します
作業が終わるとPRを表示するという表示に変化するので押します。
この時、GitHubのアプリが入っているとアプリに飛びます。アプリ上の方がブラウザ上にタブが次々と開くことを防げるため、作業効率が上がります。是非とも入れておきましょう。
プルリクを表示すると、次のようなGitHubのアプリ画面に飛びます。
Pull Requestをマージボタンを押しましょう
緑色の
Pull Requestをマージボタンを押下
マージし終わると、branchを削除するというボタンが出ます。この後、継続してたくさんのbranchが作成されますので、消してしまって問題ありません。ただ、削除しなくても開発に支障をきたすことは特にありません。
3. deploy
hostingサービスにdeployします。
とは言ってもスマホからNetlifyなど選んだホスティングサービスにスマホからアクセス。GitHubリポジトリと連携するだけです。
Add new projectのImport an existing projectを選択
ここから先ほどまで作業していたリポジトリを選択
これでGitHubが更新されれば、deploy先も更新されるようになります。
継続的に、Codexを利用して開発していきましょう。
今回はNetlifyですが、Cloudflareやvercelも大きく変わりません。
スマホでハッカソンしてみましょう！
ということで、ある程度はスマホのみでも開発できます！
興味ある方は、是非試していただけると嬉しいです！