クリエイターラボ

【入門編】今話題のClaude Codeを触ってみる

良かったら”♥”を押してね!

Claude Codeとは

私が今生活していて使わない日なんてないと言えるくらいに使っているAIがClaudeです。

最近Opusというとても賢いモデルが4.7にアップデートされてからはもう大事なパートナーのような存在です。話しすぎだろというくらいに自分のプライベートな話もしています。

私はpro版に課金しているのですが、まだClaude codeを使ったことがありませんでした。

Claude Codeとはターミナル上でエンジニアの代わりにいろんな作業をしてくれるアシスタントみたいな存在です。

GeminiやChat GPT,Claudeなどのような生成AIだとチャットをすれば答えはくれるかと思いますが、その後の作業まではやってくれません。しかし、Claude codeならば指示を出せば実際に仕事をしてくれます。例えば、デスクトップの整理をしてほしい・htmlファイルの編集・アプリを作ってほしい等色んなことを自分の代わりにやってくれます。

(※↓過去にCursorを紹介しましたが、こちらも自分の代わりに作業してくれる最強のAIエディタですね。)

ホームページ制作のワークフローが劇的に変わるAIの使い方

ホームページ制作のワークフローが劇的に変わるAIの使い方

多くのエンジニアの方がClaude Code凄いと言っているので使ってみたくなりました。

今回は入門編です。実際にインストールするのと簡単に触ってみるところまでやってみます。

Claude Codeをインストール

難しいことはありません。ターミナルを立ち上げて下記の通り、入力してインストールするのみです。

macOS / Linux / WSL

curl -fsSL https://claude.ai/install.sh | bash


Windows(PowerShell)

irm https://claude.ai/install.ps1 | iex

私はCursorのターミナルから入力しました。

claude --version

と入力して、バージョンが表示されればOK!

claude

と入力して、

Cursor内でClaude Codeを立ち上げた時の画像

こんな楽しげな絵が出てきてくれたOKです!!(ちなみにこのオレンジ色のキャラクターはカニらしいです。エイリアン的なものかと思っていました。)

その後にエディターをダークモードにするかとかいろいろ聞かれると思いますが、基本すべてエンターキーを押していれば進みます。

セットアップが思っていた以上にとても簡単でした。

Claude Codeに作業をお願いしてみる

早速作業をお願いしてみましょう!

私は現在proプランに加入しています。その一個上のプランのMaxや企業向けのプランとは違い、たくさん重い作業をお願いしてしまうすぐに利用制限がかかってしまうので今回はとても簡単な作業をお願いしてみます。

今回お願いする作業はこちら↓

Cursor内のフォルダの中身

現在私はCursorで『claude』というフォルダを開いています。

その中に入っているpngの画像すべてをリネームしてもらいます。

プロンプトの書き方はこんな感じ↓

Claude Codeに指示するためのプロンプト

さあ実際に作業してもらえるのか試してみましょう。

Claude CodeにCursor内で質問されているときの画像

↑みたいな感じでよく色んなことを聞かれますが、基本ずっとYESでOK。

私はCursorと話していても、Noという選択肢を取ったことが一度もありません。

Claude Codeが作業をしてくれた後の写真

↑やってくれました凄い!

今回は数が少ないですが、これが大量になってくると真価を発揮してくれそうな気がしますね!!

まとめ

まず思ったことなのですが、周りが脅すほど難しくなかったことです。

ターミナル上だからもっと堅苦しくコードも書かないといけないのかと思っていたのですが全然そんなことはないです。Claude Codeはエンジニア向け、とよく聞きますが全然そんなことはなく慣れてしまえばエンジニアでない人も使いこなすことは可能かと思いました!

今回は簡単なことしかやっていないですが、次はアプリを作ってもらったりサイトの編集を行ってみたりともっと高度な事をやってもらいたいと思います!(私のClaudeの容量が許す限りですが。)

良かったら””を押してね!
person_editこの記事を書いた人
コーダー いとう いなり
プロフィール写真

株式会社WWG所属のマークアップエンジニア。2022年入社、実務3年半以上。HTML / CSS / JavaScript・jQuery・SCSS・WordPressを中心に、クライアントサイトのフロントエンド実装を幅広く担当。「AIに正確に解釈されるサイト」を意識したセマンティックなマークアップと、SEO・構造化データの実装まで一貫して手がけている。新技術の導入に積極的で、社内へのAI搭載エディタの導入を主導したほか、業務に必要と判断した言語やツールを自ら学び、積極的に現場へ取り込んできた。

この人が書いた記事をもっと見る

目次へ戻る