はじめに
みなさんこんにちは。インプルの岩崎です。
今日はclaude codeのweb版が出て$250の無料クレジットをもらったので、早速使ってみようと思います！
web版 claude code
web版 claude code は、これまでCLI上で動いていたclaude codeが、web上から指示が出せるようになったツールです。
ブラウザからすぐに使える
Web版のclaude codeは、その名の通り、ブラウザを開くだけで利用可能です。
ローカルの開発環境が不要で、PC、スマートフォン（iOS）からそのまま作業できます。
スマホからも操作できるのが非常に大きなメリットで、「ちょっとしたバグ修正を外出先で…」といった場面でも対応可能です。まるで、DevinにSlackで指示を投げるような・・・。そんな感覚ですね！
安全なサンドボックス環境
Web版 Claude Code は、クラウドに構築された隔離環境（サンドボックス）でコードを実行します。
これにより：
- 自分のPCや企業ネットワークへの影響を防ぐ
- 不正なコードの外部呼び出しをブロック
- Git 操作（clone / push / pull）は安全なプロキシ経由
といったメリットがあります。
後ほど、設定をする場面でも、このことについては詳しく解説しますが、このセキュリティ設定は、自分で選ぶこともできるので、柔軟に対応することができます。
GitHubリポジトリに直接アクセスできる
Web版ではリポジトリを接続し、
- コードの読み込み
- 修正
- テスト生成
- プルリクエストの作成
までを Claude に任せられます。
ローカルにクローンする必要がないため、セットアップ時間を短くして開発に着手できます。
並列タスクの実行
Web版は「タスクベース」で動くのも特徴です。複数の修正依頼や調査タスクを並列で走らせ、進捗を個別に追跡できます。
例えば・・・：
- A：ログイン周りのバグ修正
- B：APIレスポンスの最適化
- C：単体テスト生成
などを同時進行で依頼し、クラウド上で実行できます。
準備しよう
web版 claude code は、簡単なセットアップをすることで、開始することができます。
GitHubへ接続する
まずはGitHubに接続します。CLI上で操作するものではないので、GitHubへの接続は必須です！
アカウントと連携したり、リポジトリーの読み込み許可の範囲を設定したりする程度なので、ここはさほど難しい設定はないと思います。
クラウド環境の作成
ここでは、Claude Code が作る「クラウドの開発環境」をどのレベルでインターネットに接続させるか を選びます。
なしの場合は、パッケージのインストール（pip や npm）ができません。代わりに、最高のセキュリティ環境の中で実行できます。
信頼済みの場合は、特定の安全とされるソースからのみネットワークアクセスを許可します。（例: PyPI, npm registry、OSパッケージなど）一般的な開発（pip install, npm install）は可能で、セキュリティと利便性のバランスが良いので 最初はこれでOKです。
満席の場合は、インターネット全開放なので、あらゆる URL へアクセス可能です。もっとも柔軟ですが、最もリスクが大きいです。
ホーム画面
GitHubとクラウド環境を作成することで実際に指示をする画面へ飛ぶことができます。ここでリポジトリーを選択し、プロンプトを入力することで作業をしてくれます。
使ってみる
それでは、準備ができたら早速使ってみましょう！
今回は現在開発を進めているスライド生成AIのver2のフロント側を実装させてみたいと思います。CLIでは動作できるようになっているものの、フロント側はまだ未実装ですので、これを機に実装させてみましょう。
スライド生成AIの記事はこちら↓
ドキュメント生成
Claudeというと、個人的は文章読解力や生成力に優れている気がしてます。（気のせいでしょうか汗）
そこで今回は、まずclaude code上で設計書的なドキュメントを作ってもらい、それをもとにコードを生成してもらうことにしましょう。
まずは、簡単に現状のプログラムについて解説してもらうことにします。
slidemaker2 の構造を簡単にまとめてくださいすると、コマンドを使いながらファイルの構造について分析を始めました。
この辺りは、claude code の CLI版でも同様の動作をするのであまり驚きを感じませんが、実際にweb上で動いているのはすごいですね。動作の感覚としてはDevinに近いものを感じます。
しばらくすると、slidemaker2の概要について以下の項目をまとめてきてくれました！
- ディレクトリ構成
- 主要コンポーネント
- 動作フロー
- 技術スタック
続けて、これをアプリ化した際の構造や骨組みについても考えてもらいました。
今回はElectronを使用して3ページ構成のスライド生成AIを作れるよう、構成を考えてもらいました。
すると、UIの構成なども含め、かなり詳しく作ってくれました。さすが文章化が得意なclaudeですね。安定感があります。
- 1. Electron アプリ全体ディレクトリ構成
- 2. GUI 3ページ構成の説明
– ページ名
– 目的
– UI構成要素
– 主な機能 - 3. 各Electronプロセスの役割概要
その後、全体データフロー図の作成も指示し、データの流れについてもまとめてくれました。長くなってしまうので、詳しくは解説しませんが、全体のデータフロー図や、IPC通信の詳細設計、今回使用するLLMへのデータ形式やその処理など、非常に詳細にまとめてくれました。
安定したドキュメント生成能力を持っているclaude、さすがです！
コード生成
続けて、作ってもらったドキュメントをもとにコードを生成してもらいました。
コード生成は、基本的にDevinと似たような感じで作業を進めており、Todos（プラン）を立ててその流れに沿って実装を進めています。
冒頭に要件を固めているのでそれに従ってコードを生成してくれています。出来上がったものには線が入り、徐々に完成へ近づいています！
最終的に下記のような画面のUIを設計してくれました。いい感じです！
その後、バックエンド側の処理もやってもらい、細かい修正を進めていると動作が突然止まってしまいました。どうやらアクセスが集中したのか、処理が重く止まってしまったようです。
調子はどうか聞いても、ずっとStarting Claude code…で止まってしまっています。接続を再試行してみても、うまくいかなかったので、結局別セクションで新たに作業を開始することにしました。
まだ若干の不安定さがあるようで、今回のようにセクション内で完璧に止まってしまったり、はたまた動いていないように見えて、リロードしてみると処理が終わってたり、と動作が不安定なようです。
このような画面になたときは、一度リロードしてみて、何も変化がなければ新たなセクションで再実行してみるといいかと思います！
使ってみての感想
やはり文章力のclaude
冒頭のドキュメント生成で感じた方もいるかと思いますが、やはりclaudeは文章生成力に長けています。
少しのプロンプトから、システム構成の提案やデータフローの作成など、上流工程で非常に活躍しそうな印象を得ました。CLIでは何かしらのファイルに書き出してもらわないといけないので、ブラウザで直で眺められるのは、web版の良さでもあります。
その後、コード生成もスムーズにできるようになると、claudeで上流から下流までを一気にできそうだなと感じました。
まだちょっと不安定
コード生成の際にも解説しましたが、まだ動作には若干の不安定さがあります。
やはり、多くの人がコード生成をしたり、claude codeに依頼を出したりすると、安定して動作するこができず、作業が途中で止まってしまったり、ずっと思考中のまま止まってしまいます。
まだリサーチプレビュー版ということで、正式リリースの前段階だと思いますが、この辺りは改善して欲しいなと思っています。もう少し動作が安定すれば、本格的に活用してみるのもいいかもしれません！
AIエージェント的な使い心地
今回のweb版のclaude codeでしたが、感覚としては他のAIエージェントのような使い心地で使うことができました。特に、claudeのアプリから指示も出せるようで（iOS限定）、SlackからDevinに指示を送るような感覚でコードを生成できるのは、AIエージェントのようです。
近年各AIツールが、AIエージェントの流れに乗っていますから、claudeもその流れに乗ったのだなという感じを受けました。
個人的にはDevinのようにSlackという別ツールから指示をだすよりも、同一ツールのアプリから指示を出せた方がスッキリしていいなと感じているので、claude codeがますますよくなってくれるといいですね。
（一方で、チームメンバーのようにチャットにいるDevinも好きですけどね！！）
おわりに
さて、いかがだったでしょうか。
文章生成力の良いClaudeがwebにいることで、上流工程を練ってからコーディングに取り掛かれる点が非常にいいなと感じました。個人的には、上流工程部分ではClaude推しで、そのままDevinのコード生成力がついて欲しいです笑
今後も各社さまざまなAIツール（エージェント）が出てくると思いますので、注目してみたいと思います。
ご覧いただきありがとうございました。