こんにちは！開発現場の最前線で、日々コードと向き合ってお疲れ様です。
今回は、PHP開発の最高峰IDEである「PhpStorm」に標準搭載されている、世界中のエンジニアと瞬時に画面とコードを共有できる強力な機能『Code With Me（コード・ウィズ・ミー）』についてお話しします。
「物理的に離れたメンバーにコードの不具合を見てもらいたい」
「新しいメンバーのオンボーディングで、隣に座っているかのようにペアプログラミングをしたい」
そんなとき、画面共有ツールの重い映像越しに「あ、そこの3行上の…」なんて指を差すもどかしさ、もう終わりにしませんか？
Code With Meを使いこなせば、あたかも2人が同じPCの前に座っているかのような、滑らかでストレスフリーな共同編集とライブプレビューが手に入ります。これをマスターすれば、チームの開発スピードとコード品質は劇的に向上しますよ。
今回は、初めてCode With Meに触れる方でも迷わないよう、基礎のセットアップから動作確認、そして実務で役立つノウハウまで、優しく丁寧に解説していきますね。
—
1. Code With Meの役割と、なぜ今これが求められるのか
従来の画面共有ツール（ZoomやTeamsなど）を使ったペアプログラミングには、致命的な弱点がありました。それは「ホスト側のPCしか操作できない（あるいは操作権限の譲渡がモタつく）」こと、そして「文字が潰れて読みにくい」ことです。
PhpStormのCode With Meは、IDEのエンジンそのものをネットワーク越しに共有する仕組みです。
- 完全なリアルタイム共同編集: ホストと同じファイルを開き、それぞれが別の場所を同時にタイピングできます。
- 個別設定可能な権限管理: 「コードの書き換えを許可する」「読み取り専用にする」「ターミナル操作を許可する」などを参加者ごとにコントロールできます。
- 軽量な専用クライアント: 参加者は重いPhpStorm本体をインストールしていなくても、軽量な「Code With Me専用クライアント（またはブラウザ）」で参加可能です。
つまり、「ちょっとここ手伝って！」の一言で、世界中のどこにいても一瞬で同じエディタ空間に飛び込める。これが、現代の分散開発においてこの機能が神ツールと呼ばれる理由です。
—
2. 基礎セットアップ：ホストとゲストの準備
それでは、実際にCode With Meを使えるように準備をしていきましょう。セットアップといっても、PhpStormの最新版であれば特別なプラグインの追加は不要です（標準でバンドルされています）。
ステップ1：ホスト側（コードを共有する人）の確認
まずは、PhpStormの画面右上（またはツールバー）を見てみてください。人型のアイコンや、以下のようなアイコンがあります。
[ 👤+ ] ← このような「Code With Me」のアイコンを探します
もし見当たらない場合は、メインメニューの `Tools` > `Code With Me…` から起動できます。
ステップ2：招待リンクの生成と権限の選択
アイコンをクリックすると、セッション設定パネルがポップアップします。ここでセキュリティと権限のバランスを調整するのが実務での重要なポイントです。
{
“セッション設定の推奨例”: {
“Code access”: “Full access（フルアクセス：記述・編集を許可）”,
“Terminal access”: “Read-only（セキュリティのため、初期は読み取り専用が安全）”,
“Run configurations”: “Enabled（デバッグやテスト実行を許可する場合）”
}
}
設定が完了したら、「Enable Access and Copy Invitation Link（アクセスを有効にして招待リンクをコピー）」をクリックします。これで、クリップボードに秘密のURLがコピーされます。このURLをSlackやChatworkなどでペアプロ相手に共有します。
ステップ3：ゲスト側（参加する人）の参加
ゲスト側は、送られてきたURLをブラウザに貼り付けるだけです。
ブラウザ版（PhpStorm Guest）でそのまま参加することもできますし、軽量な専用クライアントアプリをダウンロードして参加することも可能です。コードのシンタックスハイライトや補完が完全に効いた状態で、数秒後にはホストのプロジェクト空間にテレポート完了です。
—
3. 精度高い「HelloWorld」的動作確認：ふたりで同時にコードを書く
接続が確立したら、正しく同期できているか簡単な動作確認（HelloWorld）を行いましょう。ふたつの画面がリアルタイムで連動する感動を味わう瞬間です。
1. テスト用PHPファイルの作成
ホスト側で、プロジェクト内に適当なPHPファイル（例: `hello_pair.php`）を作成し、以下のように記述してみてください。
2. カーソルの色と追従の確認
ゲスト側でこのファイルを開くと、リアルタイムでコードが表示されます。画面上には、お互いのカーソルが異なる色（ホストは青、ゲストは赤など）で表示され、今どこを見ているのかが一目でわかります。
ここで、ゲスト側に「最後の行の `”開発者”` を `”アーキテクト”` に書き換えてみてください」と伝えてみてください。
タイムラグなしで、文字がリアルタイムにタイピングされていく様子が見えるはずです。これがCode With Meの真骨頂です。
—
4. 現場で役立つ実践的ノウハウ：音声通話とデバッグの極意
基本操作ができるようになったところで、現場のペアプロをさらに円滑にするための実践的なテクニックをいくつか伝授します。
① 音声・ビデオ通話の統合を使う
Code With Meには、標準で音声通話機能（およびビデオ・画面共有）が内蔵されています。
別のツール（ZoomやDiscordなど）を別途立ち上げる必要はありません。セッションパネルにあるマイクやヘッドホンのアイコンをONにするだけで、高音質な通話がブラウザ/IDE間で直接つながります。これにより、コードを見ながらの会話が驚くほどスムーズになります。
② リモート環境でのデバッグ手順の共有
「動かないコード」を一緒にデバッグする際、ホスト側だけでなくゲスト側もブレークポイント（Breakpoint）を設置することができます。
1. ホストが怪しい行（例: `return` の行）の左側をクリックしてブレークポイントを設置する。
2. ホストがデバッグセッション（Xdebugなど）を起動する。
3. 処理がストップした際、変数の値（Variable Watch）をゲスト側からも確認できる。
「あ、この変数が `null` になってるからバグってるんですね」という発見を、ゲスト側が自らコードを辿りながら指摘できるようになります。これは教育やコードレビューにおいて、何倍もの学習効果を生み出します。
—
5. おわりに：ペアプロを日常の文化に
今回は、PhpStormの『Code With Me』を使ったリモートペアプログラミングの基礎から実践までを解説しました。
- 面倒なプラグイン不要で、URLを送るだけで即座に共同編集が始まる手軽さ
- リアルタイムのカーソル追従と、安全性を担保するきめ細やかな権限設定
- 音声通話やデバッグの統合による、圧倒的な一体感
「一人で悩んで2時間溶かすより、Code With Meで5分相談するほうが早い」
現場でこの文化が定着すると、チームの生産性は文字通り爆発的に跳ね上がります。
ぜひ、今日の業務から同僚やメンティーを誘って、この快適な共同編集の世界を体験してみてください。毎日のコーディングが、もっと楽しく、もっとドラマチックになりますよ！