メインコンテンツへスキップ
見出し画像

Claude CodeをUbuntuで試してみたけどどうなん?

    VSCodeをCusorに変えて以来、ずーとCursorで頑張ってきた私だが、噂によると、ClaudeCode+Sonnet 4がヤバイという情報をキャッチしたので今回試してみることとしました。

    画像

    1.導入

    システム要件

    • OS: Ubuntu 20.04+ または Debian 10+

    • メモリ: 4GB RAM 以上

    導入環境
    - Ubuntu Ubuntu 24.04.2 LTS

    普段はWindowsを開発マシンにしていますが、Claude Code Windows導入にはWSLによる導入となるため、環境が複雑になることを毛嫌いして、今回はサブPCであるUbuntu PCに導入しました。

    (1). NodeJSの導入

    # NodeSourceの公式リポジトリを追加
    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
    
    # Node.jsをインストール
    sudo apt-get install -y nodejs
    
    # バージョン確認
    node --version
    npm --version

    (2). Claude Codeのインストール

    重要: sudoを使用しないでください。権限エラーやセキュリティリスクの原因となります。

    # Claude Codeをグローバルにインストール
    npm install -g @anthropic-ai/claude-code
    画像

    ※インストール時に書き込み権限エラーが発生した場合。

    画像

    上記のように、node_modulesに書き込み権限がないエラーが発生した場合、npmグローバルディレクトリの変更・作成が必要となります。以下のコマンドでグローバルディレクトリを作成します。

    # 1. ユーザー専用のnpmグローバルディレクトリを作成(隠しファイル)
    mkdir /home/your-user-name/.npm-global
    
    # 2. npmの設定を変更
    npm config set prefix '/home/your-user-name/.npm-global'
    
    # 3. PATHにディレクトリを追加
    echo 'export PATH=/home/your-user-name/.npm-global/bin:$PATH' >> ~/.bashrc
    
    # 4. 設定を反映
    source ~/.bashrc
    
    # 5. Claude Codeをインストール
    npm install -g @anthropic-ai/claude-code

    「いいか、絶対にSUDOコマンドでClaude Codeをインストールするんじゃないぞ。。」

    (3).認証の設定

    Claude Codeは2つの認証方法を提供しています:

    方法1: Anthropic Console(デフォルト)

    方法2: Claude App(Maxプラン)

    Claude Clodeはエージェント系であり1度の問い合わせについて複数回LLMに問い合わせを行う方式であるため、おそらくMaxプランの100ドルに簡単に達する可能性が高いです。そのため今回は、Maxプランの定額制で認証を行います。

    https://claude.ai/upgrade

    上記リンクをクリックし、血涙を流しながら、月額100ドルのMaxプランを契約します。

    画像

    (4).プロジェクトの初期設定

    プロジェクトディレクトリに移動

    cd /path/to/your/project

    Claude Codeを起動

    claude

    起動すると以下の画面が起動します
    好きなモードを選択してエンター

    画像

    Select Loginにて、「2」を選択

    画像

    ブラウザで権限確認が表示されるので認証を行います

    画像

    セキュリティリスクについての警告が表示されるのでエンター

    画像

    作業ディレクトリーを信頼してよいかと表示されるのでYesを選択

    画像

    以上でセットアップは完了です。作業画面が表示されます。

    画像

    2.使ってみる

    セットアップが完了したので、早速使ってみます。
    今回は、作業プロジェクトとして、現在私が作成中のNextJSプロジェクトを読み込み、いくつかの実装を試してみることとします。

    (1).プロジェクトについて説明してもらう

    まずは簡単なタスクとしてレポジトリの説明を依頼してみます。

    画像

    処理が始まりました。どうやら、まずタスクを生成してから、タスクベースで情報の収集を行うようです

    画像

    処理が完了すると以下のデータが表示されます。概要情報としては正しい情報が出力されていました。

    画像

    (2). VSCodeと連携する

    画像

    次に、コードの編集を依頼しますが、現状の環境だと、LLMにて提案されたコードレビューが難しいため、Claude Code とVSCodeを連携させます。(Cursorと連携させようとしたもののうまく動作せず。)

    方法は非常に簡単で,

    1. VSCodeを起動する

    2. ターミナルにて「claude」と入力しエンター

    3. Claude Code Extentionがインストールされる

    4. Ctrl+ESCにてサイドバーでClaude Codeが起動する

    なおVSCodeへのExtentionインストール時は以下のようなメッセージが表示されます。

    画像

    (3). ログインページを実装してみる

    画像

    Claude Codeを用いて、NextJSで作成したページに、
    「ログインページの追加」を依頼してみます。

    本タスクでClaudeは以下の機能を最低限実装する必要があります

    • ログインページの作成

    • Auth0のエンドポイントと通信するためのAPI

    • Authを用いたユーザー認証プロセスの実装

    それでは、実装してもらいましょう。

    エージェントが動作すると、画像のようにファイル編集時および、新規作成時に許可を求めてくるので「Yes」等を選択します。

    画像

    問い合わせ完了後、Devサーバーを起動させましたが、残念ながらエラーが発生したため修正を依頼しました。

    画像

    修正を実施たところ、Auth0のドキュメント情報からを検索し、修正を行っているようです。

    画像

    Claude Codeでは、修正コードを提案するだけでなく、修正→実行→修正→実行のプロセスを繰り返すため、コード修正後、再度エラーが発生し修正を依頼する等の手間がありません。

    画像

    処理が完了したので再度Devサーバーを起動しましたが、残念ながら再度エラーが発生したため、修正依頼を出しています。
    (環境設定および、モジュールに問題があった)

    画像

    修正完了後、ログインURLにアクセスすると、
    ログイン画面が表示されました。

    画像

    しかしAuth0でログインをクリックすると、Auth0認証のところでエラーが発生しているため、再度修正を複数回依頼しています。(どうやらAuth0の実装が2025年2月に更新されたらしく、過去の実装方法と混同してエラーが発生している)

    画像

    複数回エラーを共有し修正を促したところ無事、Authへの問い合わせまで実装ができました。

    ※以下の画面ではエラーになっているがこれはローカルサーバーにて動作させているため、起きている環境固有の問題。

    画像

    ※Claude Code入力豆知識

    • 入力時、改行を行いたい場合は「\」+Enterで改行ができる。

    • 実行中の問い合わせを中止する場合は「ESC」キー

    • 過去の問い合わせ文章は、矢印キー上下で表示できる

    3.Claude Codeを使ってみて

    利点

    • Claude Codeには強い権限と、長いコンテキスト長および、Agentプロセス試行回数が与えられているため、入力されたプロンプトから、タスクを生成し、そのタスクに基づいてデバッグ+実装+確認までを一貫して行うことができます。→これにより、今までのLLMでの実装と異なり、LLMとキャッチボールをせずに、短いやり取りで実装までたどり着くことができます。

    • 使いやすいユーザーインターフェイス、Claude Codeはターミナル動作ですが、ターミナル動作にしては、使いやすいUIが実装されています。ショートカットキーなども実装されているため、比較的ストレスフリーで開発が可能です(Cursorなどと比較するとUIは弱いが)

    欠点

    • タスクを作成し、目標達成をする都合上、「人間に頼る能力が弱い」ように感じています。
      例えば、LLMがアクセスできない一部のファイル(パスワードが保存されたファイルや環境ファイル)に問題がある場合、エラーの原因が特定できず、トンチンカンな修正を行う問題が発生しました。
      Cursorであれば、ユーザーに該当ファイルの確認を依頼してきますが、Claude Codeでは解決できない問題についてユーザーに問い合わせをせず、独自にデバッグを続ける傾向があるのではないかと感じました。

    • Cursorと比べるとどうしてもユーザビリティが弱い。これは、Claude Codeがターミナル実行の関係上仕方ないことではありますが、Cursorに比べるとUIやユーザビリティが弱いです。
      修正箇所について、1つづつ確認し修正を行うことや(修正箇所の表示は可能)、少し前のバージョンに戻すこともできません(こちら十分に確認できてない。方法あるかも)。

    結論として、Claude Codeは、良くも悪くも、ユーザーとキャッチボールをせずに、機能の実装やデバッグを実施してくれます。

    今後しばらく使ってみて、再度感想を書き込もうと考えていますが、今の所の直感ではClaude Codeで大まか実装→細かい点はCursorで修正、のプロセスになりそうな予感がしています。

    以上


     
     
    科学系YouTuber+ハードウェアエンジニアなゴリラのお話。

    あなたへのおすすめ