🍉

WebStormで開発したコードをXcodeで使用

に公開
Ruby
Xcode
WebStorm
tech

WebStormとXcodeとは？

JetBrainsのWebStormは主にJavaScript/TypeScript/React/VueなどのWeb系言語の開発に特化したIDEです。一方、XcodeはAppleの公式IDEで、SwiftやObjective-Cを用いたiOS/macOS開発に使用されます。

1.Xcodeを使用しようとするとエラー発生

以前Xcodeを使用していたので、ターミナルに下記を入力

%npm run build

なんと、エラー発生！

npm error Missing script: "build"
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: /Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_24_47_849Z-debug-0.log

package.json に "build" というスクリプトが定義されていないというエラー。
npm run build を実行しようとしたけど、そのコマンドが登録されていない状態と出ました。
なんで？！

2."build"を探す旅

package.jsonから"build"を確認

WebStorm でプロジェクトのルートにある package.json を開いて、以下のような "scripts" セクションがあるか確認

package.json
"scripts": {
  "build": "ng build" // または "react-scripts build", "next build" など
}

使用しているのがAngularだったので"ng build"と出て来ました。

失敗（長いので、見たい人だけ見てください）

Angular CLIの確認

ターミナルに下記を入力

%npm install @angular/cli --save-dev

こちらもエラー

The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: /Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_26_36_031Z-debug-0.log

npm run build や npm install などを実行した際に、ユーザーにファイルアクセスの権限がないと出ました。

管理者権限で実行するためにターミナルで以下のように sudo を使って実行

% sudo npm run build

エラー

Missing script: "build"
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: /Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_27_26_548Z-debug-0.log

package.json に "build" スクリプトがまだ正しく定義されていないことが原因とのこと。

Angular CLI がインストールされているかを確認するために下記を入力。
→ パスワードを求められたら Mac のログインパスワードを入力。

% npx ng version

エラー出る。。
動かないー！

Angular CLI がインストールされているかを確認

% npx ng version

入ってたので動きました。
``js
% npm install @angular/cli --save-dev

エラー出たのでsudoつける。
```js
% sudo npm install @angular/cli --save-dev

npm install や npm audit を実行したときに表示されるセキュリティアラートが表示された。

To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run npm audit for details.

安全な修正のみを自動で行う（壊れる可能性が低い）下記を入力。

% npm audit fix

エラー表示

Your cache folder contains root-owned files, due to a bug in
npm error previous versions of npm which has since been addressed.
npm error
npm error To permanently fix this problem, please run:
npm error sudo chown -R 501:20 "/Users/sakakibaramasumi/.npm"
npm error A complete log of this run can be found in: > /Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_33_56_119Z-debug-0.log

「.npm フォルダに root 所有のファイルがある」
これは以前 sudo npm install などを実行した際に .npm キャッシュフォルダ内のファイルが「root」所有になってしまい、現在のユーザーがアクセスできない状態になっていることを意味します。

エラー内容通りに入力

% sudo chown -R 501:20 "/Users/sakakibaramasumi/.npm"

このコマンドは、.npm フォルダ以下のファイルすべての所有者を現在のユーザーに変更します。

% npm audit fix

再度入力するとまたしてもエラー

The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in:
/Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_36_03_449Z-debug-0.log

.npm キャッシュディレクトリ、もしくはプロジェクトの中の一部のファイルが 「root」ユーザーによって所有されているため、現在のユーザーがアクセスできないという状態です。

% sudo chown -R sakakibaramasumi /Users/sakakibaramasumi/.npm
% npm run build

入力すると下記のエラー

npm error Missing script: "build"
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: /Users/sakakibaramasumi/.npm/_logs/2025-07-02T06_40_13_442Z-debug-0.log

package.json ファイルの中に "build" スクリプトが定義されていない
エラーがスタートに戻った？！

スクリプト一覧を確認

確認コマンド実行して、定義されているスクリプト一覧を確認

% npm run

build スクリプト自体は存在しておらず、代わりにカスタムスクリプトとして次の2つが登録

build:ionic
    cd api && npm run build && cd ../app && npm run production
  build:ci
    npm run build:ionic

実行コマンド

% npm run build:ionic

入力するとスムーズに進みましたが、なんか違う。

package.jsonを再確認

Angularだけでなく、Angular×Capacitorだと判明！

"cap": "ng build mobile --configuration production && npx cap copy",
  • ng build mobile --configuration production
    → Angular プロジェクトの mobile アプリを本番用にビルド
  • npx cap copy
    → Capacitor を使って、ビルドした www/ ファイルをネイティブプロジェクト（iOS/Android）にコピー

npm run capを実行

"cap" というスクリプトは package.json の中に 開発者が手動で定義したカスタムコマンドです。

% npm run cap

odss-mobile-app@1.0.0 cap
ng build mobile --configuration production && npx cap copy

エラーもなく成功！
成功するとdist/mobile/以下のビルドファイルが生成され、CapacitorのiOS/Androidプロジェクトへコピーされます。

ビルドしたAngularアプリをiOSシミュレータで実行するために下記を入力してXcodeを開きます。

% npx cap open ios

無事成功！

ネイティブ環境（Xcode/Android Studio）とWebコードの「同期」を行うために入力

% npx cap sync

3.Xcodeが開いた!

Xcode内でエラー発生

エラー①


up deateされてないからだなと思って下記を入力しましたが、エラーの表示が消えない。

% npx cap update

よく見るとXcodeでApple開発アカウントが設定されていないため、プロビジョニング（署名）ができないというエラーでした。

エラー②

/Users/masumi/dev/odss-mobile/app/ios/App/App.xcodeproj:1:1 Unable to open base configuration reference file '/Users/masumi/dev/odss-mobile/app/ios/App/Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig'.

Angular × Capacitor + Xcodeになるので、XcodeがCocoaPods関連の設定ファイル（.xcconfig）を読み込もうとして、存在しないか壊れているため失敗しているというエラー。

CocoaPodsのインストール（失敗）

CocoaPodsがないと表示されたので、インストール。

% sudo gem install cocoapods

うまく進んでいましたが、エラーが出てしまいました。

ERROR: Error installing cocoapods:
The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with gem install drb -v 2.0.6 and then running the current command again
drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

エラー: cocoapods のインストール中にエラーが発生しました:
Ruby および RubyGems をサポートする drb (>= 0) の最新バージョンは 2.0.6 でした。「gem install drb -v 2.0.6」でインストールしてから、現在のコマンドを再度実行してください。
drb には Ruby バージョン 2.7.0 以上が必要です。現在の Ruby バージョンは 2.6.10.210 です。

RubyGems.org上に公開されているdrb（分散Ruby）関連のgem一覧を表示するために下記を入力。

% gem list -r drb

一覧が出て来たので、内容を更に知るために、Rubyの対話型実行環境（Interactive Ruby：IRB）を起動するコマンドを入力。

% irb

を入力すると注意文が表示されました。

WARNING: This version of ruby is included in macOS for compatibility with legacy software.
In future versions of macOS the ruby runtime will not be available by
default, and may require you to install an additional package.

警告: このバージョンのRubyは、旧バージョンのソフトウェアとの互換性のためにmacOSに含まれています。
macOSの将来のバージョンでは、Rubyランタイムはデフォルトで使用できなくなり、追加のパッケージのインストールが必要になる可能性があります。

使用してたターミナルが「irb(main):001:0>」とirb（Rubyの対話実行環境）になってるので、新しいターミナルを開いて操作を行います。

4.xcodeインストール

%xcode-select --install

xcode-select: note: Command line tools are already installed. Use "Software Update" in System Settings or the softwareupdate command line interface to install updates

Xcode Command Line Tools（開発用ツール群）はすでにインストールされている状態です。なので xcode-select --install を再実行する必要はありませんというエラー。

5.Ruby

Rubyバージョン確認

% ruby -v
ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23]

バージョンが2025年7月なのに2022年4月のままでした。
そりゃ古い。

gemとruby現状の確認

gemやrubyがどのパスを指しているのか、現状の確認。

% which gem
/usr/bin/gem

% which ruby
/usr/bin/ruby

gemのアップデート（失敗）

% gem update --system

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

macOSにプリインストールされたシステムRuby（2.6.0）には、管理者権限がないとgemがインストールできないために発生します。ですが、この方法で続けるのは推奨されません。
代わりにrbenvを使ってユーザー権限で新しいRubyを使うのが安全です

rbenvとruby-buildをインストール(失敗)

エラーコードにしたがって「rbenv」を使用しました。
macOS上でRubyのバージョンを柔軟に切り替えるために必要な、rbenvとruby-buildをインストールしようと下記を入力。

% brew install rbenv ruby-build
zsh: command not found: brew

macOSの開発環境に必須レベルのパッケージ管理ツールのHomebrewがまだインストールされてませんでした。

Homebrewのインストール

①Homebrewのインストール

macOSにHomebrew（開発用パッケージ管理ツール）をインストールするための公式なソースコードを入力。

% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストールが進んで行き、終わったので、Homebrewのバージョンを確認

masumi.s@MacBookPro %brew --version
zsh: command not found: brew

出てこない！！！

よく見ると次の手順が書いてました。

==> Next steps:

  • Run these commands in your terminal to add Homebrew to your PATH:
    echo >> /Users/sakakibaramasumi/.zprofile
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/sakakibaramasumi/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
  • Run brew help to get started
  • Further documentation:
    https://docs.brew.sh」

Homebrewのインストールは成功してますが、brewコマンドが有効化（PATHに追加）されていない状態でした。

②brewコマンドを有効

% echo >> /Users/sakakibaramasumi/.zprofile
% echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/sakakibaramasumi/.zprofile
% eval "$(/opt/homebrew/bin/brew shellenv)"

指示通り入力し、brewコマンドが使用できるのかバージョン確認。

% brew --version
Homebrew 4.5.9

brewコマンドを有効化、成功！

rbenvとruby-buildをインストール、再チャレンジ

①rbenvとruby-buildのインストール

Homebrewが使えるようになったら、下記を実行してrbenvとruby-buildの導入。

% brew install rbenv ruby-build

Downloadingと順番に進んで行き、終わったのでRubyのバージョン確認すると出ない

% rbenv versions
* system

②Rubyのインストールリスト確認

インストールできるRubyのバージョン確認を行います

% rbenv install -l
3.2.8
3.3.8
3.4.4
jruby-10.0.0.1
mruby-3.4.0
picoruby-3.0.0
truffleruby-24.2.1
truffleruby+graalvm-24.2.1

Only latest stable releases for each Ruby implementation are shown.
Use `rbenv install --list-all' to show all local versions.

③最新のRuby安定版のインストール

https://www.ruby-lang.org/ja/
安定版の最新が「3.4.4」だったので入力。

% rbenv install 3.4.4

Rubyのバージョン確認

% rbenv versions
* system
  3.4.4

無事、Rubyの有効化ができました！！

利用するRubyのバージョン変更

システム全体でデフォルトとして使うRubyのバージョンを「3.4.4」に設定するために以下を入力。

% rbenv global 3.4.4

インストール済みのRuby一覧を確認

%rbenv versions
  system
* 3.4.4 (set by /Users/sakakibaramasumi/.rbenv/version)

成功！！！

6.CocoaPodsのインストール、再チャレンジ

iOS/macOSアプリの開発における依存ライブラリ管理ツールのCocoaPods(ココアポッズ)をやっとインストールできます。
CocoaPodsをRubyのパッケージ管理（gem）を使ってインストールする以下のコマンドを入力。

% gem install cocoapods

うまく進んで終わったので、バージョン確認

% pod --version
1.16.2

完了！と思いきや、最新版がありました。

A new release of RubyGems is available: 3.6.7 → 3.6.9!
Run gem update --system 3.6.9 to update your installation.

指示通り、アップデートを行います。

% gem update --system 3.6.9
Fetching rubygems-update-3.6.9.gem

大丈夫！！！

７.Xcodeを使用しようとするとエラー発生

Xcodeを更新するとエラー

Showing Recent Errors Only
Build target App
/Users/masumi/dev/odss-mobile/app/ios/App/App.xcodeproj:1:1: Unable to open base configuration reference file '/Users/masumi/dev/odss-mobile/app/ios/App/Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig'.

CocoaPodsの依存ファイルが存在しない、または壊れている？！
原因は２つ考えられるらしく、

  • Podsディレクトリ内の *.xcconfig ファイルが欠落している
  • pod installをまだ実行していない、または.xcodeprojで開いてしまっている

pod installをまだ実行していない方だと思い、以下を入力しCapacitorのiOSプロジェクトディレクトリに移動。

% cd /Users/masumi/dev/odss-mobile/app/ios/App

以下を入力し、CocoaPodsで依存ライブラリをインストール

% pod install

更新するとエラーでない！！！

８.Xcodeを.xcworkspaceで開く

Xcodeを.xcworkspaceで開く為の呪文

%open App.xcworkspace

・・・開いたぁー！！！
無事できました🥳

参考記事

https://qiita.com/ryamate/items/e51c77fbabc2aec185fc
https://rooter.jp/infra-ops/update-ruby-version/
https://zenn.dev/yamato_snow/articles/8bf04ca843abce

Discussion