個人開発しているお薬管理アプリ「MedTimer」、ずっとWebアプリとして作ってきたのですが、通知機能をつけたくてアプリにすることにしました！
理由はシンプルで、Webブラウザだと画面を閉じた瞬間に通知が届かなくなってしまうから。
お薬の飲み忘れ防止アプリなのに、肝心の「通知」が使えないのは本末転倒だなと。
（開発ブログ👇）
今回はWebアプリ（Reactで書いたもの）からどうやってアプリ化するのか、「Capacitor」→Xcodeの環境構築の話をしたいと思います。
React Nativeじゃない書き方をする
実は少し前にReact NativeとExpo Goを使って別のアプリを作ったことがあって、「じゃあ今回もReact Nativeで書き直すのかな」と思っていました。
React Nativeについては下記記事をご参照ください。
でも今回はやり方が違いました。
React Nativeは、画面の部品を専用の書き方(ViewやTextなど)で書き直して、それがiPhoneの本物のネイティブ部品に変換される仕組みです。
Expo Goというアプリを使うと、書き直したコードをすぐ実機に映して確認できる、あの便利な開発体験でした。
今回使うのは「Capacitor」
一方、今回のMedTimerで使うのは「Capacitor」という別の仕組み。
これは今まで書いてきたReactのコードを一切書き直さず、Webアプリをそのまま「WebViewという入れ物」に包んでiPhoneアプリにしてしまうという方法です。
画面の中身は普段ブラウザで見ているのとほぼ同じもの。
通知のようなネイティブ機能だけ、Capacitorが用意している「プラグイン」経由でiPhone側の機能を呼び出す、というイメージです。
実際、通知まわりのコードはすでに「アプリとして動いているときだけ本物の通知を予約し、ブラウザで見ているときは何もしない」という分岐がすでに仕込んであって、これから書くコードはほぼゼロでした。
「Capacitor」→ Xcode の環境構築
ここからがXcode初挑戦です。
私はReact NativeのアプリでExpo Goを使っていたので、今回は新しいXcodeを使うことになりました。
インストール（容量と時間に注意）
まず、Xcodeのおサイズがかなり大きいです。
十数GB以上あって、回線や時間帯によっては1〜2時間かかることがあります。
MacBookの空き容量は事前に確認しておいたほうがいいと思います。合計で40GBくらい余裕をみておくと詰まりにくいです。
Apple Store を開いて、「Xcode」と検索してインストールします。
私の場合はインストール時間は15〜20分ほどでした。早めだったと思います（うろ覚え）。
インストール後環境構築①Xcodeの本体を有効にする
いざ動かそうとしたら
「xcodebuildにはXcodeが必要だけど、今指しているのはコマンドラインツールだよ」
というエラー。
Xcode.app自体はインストールされているのに、ターミナルからの参照先がまだ簡易版のツールを向いたままだったみたいです。初心者あるあるの罠だとのこと。コマンドで向き先をXcode.appに切り替えます。
（１）ターミナルで下記コマンドを実行
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer→ パスワードを聞かれるので入力してEnter（画面に文字は出ませんが打てています）
（２）次に確認
xcode-select -p→ /Applications/Xcode.app/Contents/Developer と表示されればOK
インストール後環境構築②プロジェクト作成
（１）Xcodeを起動すると、まず「Create a New Project」などが並ぶウェルカム画面が出てきますが、ここでは何も新規作成しません。どこも押しません。
（２）ターミナルで下記コマンド実行
xcode-select -p下記が表示されればOK
/Applications/Xcode.app/Contents/Developer（３）私はAIに頼んでいたので、この後のコマンドはAIがやってくれました。
npx cap sync ios → npx cap open ios
Capacitorがすでにios/Appというプロジェクト一式を自動生成してくれているので、それをターミナルからnpx cap open iosというコマンドで開くだけでOKでした。
インストール後環境構築③GitHub認証
（１）プロジェクトの画面が勝手に立ち上がる
（２）左側にAppというプロジェクトが表示されているか確認
この時、「Xcodeがキーチェーン内の”github.com”に保存されている機密情報を使用しようとしています。」と聞いてきました。
恐ろしいことを言っているような感じですが、Xcodeには「Source Control」というGit連携機能があり、このプロジェクトがGitHubのリポジトリと紐づいているのを検知して、リモートの状態を確認しようとしているだけです。
ご自身のMac内のキーチェーンに保存された、ご自身のGitHub認証情報へのアクセス許可を求めています。
GitHubのパスワードではなく、Macにログインするときのパスワード（Macのユーザーアカウントのパスワード、Macを開く時に入力するもの）を入力します。
私は入力して「許可」を押してもしつこくポップアップが出てきたので「常に許可」にしました。（問題ないとのこと。）
コードは1行も書いていないのに、ここまでで詰まりポイントがいくつもあって、iPhoneアプリ開発の最初の壁は「環境構築」なんだなと実感しています。
インストール後環境構築④シミュレータランタイムのダウンロード
Xcode本体はインストールされていますが、シミュレータを動かすためのiOS用データ（シミュレータランタイム）がまだダウンロードされていません。これは別途ダウンロードが必要なものです。
（１）右上に出ている「iOS 26.5 Not Installed」の右にある青い「Get」ボタンをクリック（画面上部中央、”App” の右側にあります）
（２）iOSシミュレータ用のデータのダウンロードが始まります（数GBあるので、回線速度によっては10〜30分程度かかることがあります）
（３）ダウンロードが終わると、そこの表示が「iOS 26.5 Not Installed」から実際のシミュレータ名に変わります
（４）デバイスを選択して、左上の▶（再生）ボタンを押せばシミュレータが起動してアプリが表示されます
デバイスを設定していないとアラートが出ます。
デバイスは基本的にはどれを選んでも大丈夫です。
今回のアプリはmax-w-md(スマホ幅想定)でデザインしていたので、iPadよりもiPhoneのシミュレータを選びました。
迷ったら「iPhone 16」や「iPhone 15」など、標準サイズの新しめの機種を選べば問題ありません。「iPhone SE」のような画面が小さい機種は避けた方が、レイアウト崩れがあっても気づきやすいです。
（５）少し時間がかかるがデバイスが出てくる
作業してコードを変更した際
JS/CSS/Reactのコードを直しても、シミュレータ側は前回ビルドした「静止画のスナップショット」を表示しているだけなので、必ず下の3つを通さないと変更が反映されません。
コードを変更するたびに、この3ステップが必要です。
npm run buildnpx cap sync ios- Xcodeで▶を押し直す（すでに実行中なら一度■で止めてから）
上3つやっても変わらない時のキャッシュクリア
ファイル変更しても反映されない場合は、下記を実行してみましょう。
- Xcodeのシュミレータで下から上にカーソルをドラッグ
- ホーム画面でアイコンを長押し
- 改めて▶で入れ直す
普段のコード修正では「削除→入れ直し」までは基本的に不要です。
アイコンのような、iOS側が別途キャッシュしている画像系だけ、まれに必要になります。
まとめ
この記事ではXcodeで画面を確認するところまで書きました。
これからもMedTimer おくすりタイマーをアプリ化する話をしていきますので、みてくださると嬉しいです！
ここまでご参照いただきありがとうございました。
この記事のカテゴリー
開発ブログ の記事をもっと見る →