Yappli Tech Blog

株式会社ヤプリの開発メンバーによるブログです。最新の技術情報からチーム・働き方に関するテーマまで、日々の熱い想いを持って発信していきます。

PC が壊れた・・・!のでどうしても iPad だけで開発したい!!(with GitHub Codespaces)

こんにちは。iOS エンジニアの kamimi です。🌞

いきなり個人的な話で恐縮ですが、最近 PC(Macbook)が壊れました・・・!💥

「やばい・・・仕事どうするんだ・・・」

仕事に関してはたいていまずは会社から代替機を借りるという選択肢があると思うのですが、私の場合会社との物理的距離があまりにも大きいために不可能でした。。

となると今いる場所、今持っているものでどうにかするしかない。。!ということで必須に検討した結果、手元にある iPad での開発に挑戦しました!

ということで、

はじまりはじまり。


いきなりですが結論だけ知りたい人のために先にお伝えすると、

新規かつ小規模な iOS 開発以外は、最初から最後まで iPad だけで開発し続けることは難しいと思います。

もっと詳細にいうと、

  • Web フロント開発: GitHub Codespaces を使うことでなんとかできそう(デバッグが厳しめ?)
  • サーバーサイド開発: GitHub Codespaces を使うことでなんとかできそう
  • iOS 開発: 新規開発や簡単なアプリ開発なら多分 Swift Playground でできそうだが既存アプリや大規模アプリのビルド・動作確認は多分ムリ

というのが個人的な所感になります。

Web フロントやサーバーサイドは専門というわけではないのですが、できる範囲で真剣にやってみたので参考にはなるかなと。詳細はこの後の本編をご覧ください。🙏

開発環境

参考までにデバイス情報を記載しておきます。

  • iPad Air (4th generation)
    • iPad OS 17.xx (マイナーバージョンを覚えてないですが、17代です)
  • 外部キーボード(めっちゃ大事です、、!これなしで開発するとストレスマックスな開発ができますw)
  • (有線キーボードの場合)USB-A <-> USB-C 用の変換アダプター(無線接続可能なキーボードでない場合はこれがないとキーボードが使えない。。!当たり前ですが。)

iOS 開発はどこまでできる?

iOS エンジニアであれば一番気になるところですが、まず既存の Xcode でバリバリ開発されているプロジェクトを iPad で開発するということはおそらく難しいと思います。

そもそも iPad に Xcode をダウンロード、インストールすることができません。。その代わりに Swift Playgrounds が用意されており、ある程度の開発は可能だと思います。しかし調べたところ、少なくとも Xcode で最初から開発されているプロジェクトを Swift Playgrounds に持ってきて開発ということはおそらく、、できないと思います。

なぜおそらくかというと、実際には試していないからです。会社によってはOKなところもあるかもしれませんが、iOS 開発において開発環境は比較的センシティブに響くことが多いと思います。(Xcode のバージョンをみんなで揃えて同じタイミングで一気に上げる作業があるところとか)なので、たとえ Swift Playground で開発できたとしてもビルドするなど実際に動作確認をするのは普段使用している Xcode ですべきだろうと判断しました。

では本当に全く Swift Playgrounds で開発できないのかというと、reddit で以下のような紹介がありました。ので頑張ればできるかもしれません。

Open Xcode Project On iPad Swift Playgrounds

私の場合、最終的な動作確認はできなくともコードが編集さえできれば良いと思ったので、無理に Swift Playgrounds 用にコードを変えることはせず、別の選択肢を検討することにしました。

最終的に行き着いた方法が、GitHub Codespaces を使うという方法です。(ちなみに VSCode は Xcode と同じくダウンロード、インストールが不可能でした)

github.com

これはクラウド上で VSCode を使った開発環境になります。これを iPad 上の Safari から開き、最低限コードを書くのに困らない程度にするために Swift 用の VSCode Extension をインストールしてコードを書いていました。クラウド上の VSCode というだけで、拡張機能のインストールが可能だったりなどできることはほぼローカルの VSCode と変わらないように感じました。(私の使用範囲では)

git 周りも普通にターミナルから操作できるので、コードのバージョン管理まわりで困ることはほぼありませんでした。git 周りを特定のアプリに頼って GUI から操作している場合はちょっと困ってしまうかと思いきや、VSCode に標準で備わっている git 周りの機能が使えますし、GitLens などの拡張機能もインストールすることで使えるのではと思います。

肝心のビルドや動作確認に関しては、会社側で元々用意してあった仕組みとしてリモート上でビルドしてアプリを外部・内部配信する仕組みが整っていたので、必要に応じてそちらを利用しました。(もちろん最終的にコードレビューを依頼する前には、Xcode で動作確認しました。)

Web フロント開発はどこまでできる?

個人のプロジェクトで以下の技術スタックを使ったWebアプリ開発をしていました。ビギナーチームでしたが、5人で10週間かけたプロジェクトなので中規模程度のアプリではないかと思います。(ちなみに後述のサーバーサイド開発でも同じ技術スタックを使っています)

  • Next.js
  • TypeScript

数週間使った感じ、npm を使った環境構築などは問題なくできましたし、ある程度のコンポーネントの開発も問題ありませんでした。よくある localhost を使って開発していても、GitHub Codespaces 側で勝手に forward してくれます。

勝手に forward してくれる

こんな感じに

この URL を Safari ブラウザで開き、問題なく開発できました。

デバッグでよく使用する Developer Console については、サードパーティの Web Inspector というアプリをダウンロードして使用できそうです。("できそうです" というのも実際ガッツリ開発している時はこのアプリがあることを知らず、不便だなあと思っていたからですw)

PC版のブラウザについている Developer Console と比べて少し制限があるのではと思っているのですが、ぱっと見はコンソールもありそれなりに使えるのかなあと想像しています。

Web Inspector を開いてみたところ

サーバーサイド開発はどこまでできる?

Web フロントエンド開発と同じく、Next.js と TypeScript を使って開発していました。具体的には、RESTful API の開発をしていました。

環境構築以外は基本的には問題なく開発できていたように思います。

環境構築まわりだと、 API への接続の工夫が必要でした。前述したように GitHub Codespaces が勝手に forward してくれるのですがデフォルトでは Visibility が Private になっているので、ブラウザ上の POSTMAN を使って動作確認したいときなどは Private のままだと API を呼ぶことができません。そのため、「Make public」のボタンを押して Visibility を変更する必要があります。

もし GitHub Codespaces 上の統合ターミナル上でやる場合は必要ありませんでしたが、レスポンスが長くて複雑な場合などはフォーマットしてくれた方が圧倒的に見やすいですよね。なので私は homebrew で jq をインストールして使っていました。(ちなみにそもそも homebrew が入っていないので、そのインストールから行う必要がありました。。orz)

Tips

細かい Tips になりますが、今後仕事やプライベートで使用するときの参考になるかと思います。

GitHub Codespaces について

これを使う上で注意したのは、以下の2点です。

  • コスト(公式ドキュメントはこちら
  • セキュリティ(公式ドキュメントはこちら

仕事なのかプライベートなのかによっても対応が変わってきます。

コストに関しては、仕事で会社の organization に紐づいたリポジトリを使用する場合、会社側の設定によって誰にコストがかかってくるのかが変わってきます。個人に紐づけることも会社に紐づけることも可能ですが、使用頻度がそこまで高くない一時的な使用の場合(私のように新しい PC が手に入るまでの期間のみなど)、個人アカウントに紐づけるという方法でも良いのではないかと思っています。 (※もちろん使用頻度は人によって異なるので、会社と相談してからですが)

というのも、個人アカウントにはある程度の無料枠が毎月付与されます。ただし会社の方にはその無料枠は存在していません。そのため、無料枠の範囲で開発できるのであれば、個人アカウントの方に紐づけた方が良いかもしれません。

コスト計算は単なる使用時間だけで計算されるわけではなく、以下のスクリーンショットのように使用時間とストレージ消費量で計算されます。また見てわかるようにコア数によって金額が異なります。

ちなみにこのスクショは、計10時間ほど VSCode を使っていた時の記録だと思います。

kamimi の billing 状況

また以下の記事もコスト計算をするときの参考にさせていただきました。🙏

zenn.dev

セキュリティに関しては、

独自の新しく構築された仮想マシン (VM) でホストされます。 2 つの codespace が同じ VM に併置されることはありません。

という記述があったり、前述したポートフォワーディングに関しても organization 側が機能制限をかけることができるということなので、きちんと考えられているように思いました。

ですが、必要に応じて会社のセキュリティチームに確認を依頼すると良いと思います。

iPad の設定について

普段 iPad を PC のように使っていない場合、あまり設定しないかと思うのですが、以下の細かい設定が開発時のストレスを減らしてくれました。

  • 外部キーボードの準備(必要であればアダプターも)
  • Auto Capitalize をオフに(コーディングの時すごく煩わしい)
  • Key repeat を最大に(これは PC でも同じですが)

まとめ

iPad で開発をするというレアな状況に(意図せず)なってしまったのですが、この記事を書く良いきっかけにはなりました。

全体を通して何が一番大変だったかというと、開発ができるように諸々の設定を一からせねばならないことと、その設定が PC で行うより iPad 用にもう一工夫必要であることです。しかも iPad で開発している人はそこまで多くないので、環境構築に関しての情報を探すのも大変でした。。

個人的には GitHub Codespaces が思ったより使えることがわかったので、そういう意味では満足しています。

ちなみに今回試してはいないですが、AWS の Mac Instance を使用するという方法もとれたかもしれません。

ということで、もし PC が壊れて iPad しか使えない!となった時、またはGitHub Codespaces について知りたいと思った時にこの記事が参考になれば幸いです!