見出し画像

Zed AI が来た！Anthropic x Zed のコラボで実現した超高速・高性能エディタ

komz

2024年8月20日、Zed エディタに AI を搭載した「Zed AI」がリリースされた。

その前に Zed とは？：
Atom エディタの開発者により新しく開発された、超軽量・超高速 Rust 製コードエディタである。

現在、開発者の間では、Cursor + Claude 3.5 Sonnet の組み合わせが最強であると言われているが、それに待ったをかけるように颯爽と登場したのがこの Zed AI だ。

Zed AI の最大の強みは、なんといっても Anthropic と協力して開発されたことだろう。Anthropic が Zed の最適化と AI の実装に直接関わっているとのことで、ワクワクせずにはいられない。

なので、Claude 3.5 Sonnet は標準搭載であり、ログインするだけでアクセス可能になっている。

さらには、今月中旬に Anthropic が発表したばかりの新機能「Prompt Caching (beta)」もすでに実装されている。これにより、コンテキストウィンドウに何千行ものコードが含まれていても、コストを削減しながら超高速の応答を実現できるというわけだ。

今回は、その Zed AI の機能と使い方を、Next.js + shadcn/ui でのダークモードの実装を例に紹介する。（shadcn のドキュメントに従えば簡単に実装できるのだが、それは置いといて、Zed AI がどのように機能するかに注目してご覧いただきたい）


2 つのコア機能

アシスタントパネル

アシスタントパネルは、AI モデルとやり取りする場所であるが、一般的なチャットインターフェースと少し異なる。この部分もエディタなのである。要するに、出力された会話やコードなども自由に編集・調整できるのだ。これは面白い。

アシスタントパネルを開くには、下段バーの「キラキラ」アイコンをクリックする：

アシスタントパネルを開く

パネルを開くと、最初は「No model selected」になっているかもしれない。その場合は、「Claude 3.5 Sonnet (Zed)」を選択しよう。「初期リリース期間中は無料で使用できる」とのことだ。「Configure」から各社 AI モデルの API キーを設定できるので、もちろんそちらを利用しても構わない。

Models in Zed

アシスタントパネルでは、以下のようなスラッシュコマンドが使えるようになっている：

  • /tab: 開いているタブの内容を挿入

  • /file: 特定のファイル、ファイルツリーの内容を挿入

  • /terminal: ターミナルの内容を挿入

  • /fetch: 任意の URL からの応答を挿入する

上記は一部のコマンドだが、よく使うのはこの辺りだろう。

では、コマンドを活用してダークモードの実装について尋ねてみよう：

このように、一瞬で実装の手順とコードが出力される。コマンドの使い方で出力の精度が変わるので、これは使って慣れるしかない。

ここまででは、ただドキュメントの内容をコピーしただけのように見えるだろう。しかし、ここからがまた面白い。次の機能に行こう。

/perplexity コマンドも使ってみたかったのだが、そもそも Perplexity 拡張機能のインストールの方法がわからない。Zed 内の拡張機能リストにも見当たらない。これについてはまた追って書こうと思う。どなたかわかる人いたら教えてください。

インライン変換

インライン変換では、アシスタントパネルで生成されたコンテキストが使用される。パネルに生成されたコードをターミナルやコードエリアにコピペするのではなく、インライン変換を使用してテキストで指示できる。

まずはターミナルを開いてみよう。ターミナルは、下段バーのキラキラ（アシスタントパネル）の左隣のアイコンから開くことができる。

このターミナルは、もちろん通常のターミナルとしても機能する。インライン変換を使用する場合は、ターミナルエリア右上の「キラキラ」アイコンから実行する：

「theme provider コンポーネントを作成して」と入力しただけで、ディレクトリとファイルを作成するためのコマンドが出力された。アシスタントパネルにある情報が使われるので、ファイル名等を指定する必要はない。簡単な指示で良いのだ。インライン変換エリアの「実行」ボタンを押すと、コマンドが実行される。

次は、コードエリアでインライン変換を使用する。作成されたファイルを開いてから、コードエリア右上の「キラキラ」アイコンをクリックして、「theme provider tsx を埋めて」のように簡単に指示するだけで良い：

このように、アシスタントパネルにあるコードが、そのままファイルに適用される。空のファイルの場合はこんな感じで良い。非常にシンプルだ。

既存のファイルに変更を加える場合は、コードの変更に使用する部分を指定する必要がある。今回の例では、layout.tsx に ThemeProvider をインポートして、<html> タグ内でそれを使用するので、次のようにやる：

  1. import エリアに新しい行を作成して、そこにカーソルを置く（もしくは、既存の import コードを全て選択してしまってもいい）

  2. Option キーを押したまま、<html> 要素全体を指定する

  3. インライン変換を開く

このようにすると、複数の選択範囲に対応した 2 つのインライン変換が開く。一方（基本的に最後に選択した方）にテキストを入力すると、もう一方にも同じテキストが入力される。これを実行するとこのようになる：

複数の選択範囲に対応した 2 つのインライン変換

適用前に差分を確認できるようになっているのはありがたい。問題なければ、インライン変換エリアの「チェック」ボタンでそれぞれ適用する。ファイルのセーブもお忘れなく。

本来はこれが正しい使い方になるが、今回のようにファイル内のコードが少ない場合は、面倒なので全てのコードを選択して、1 つのインライン変換で実行してしまえば良いだろう。

あとは、theme toggle コンポーネントの作成と、それをページファイルに設置するだけだが、やり方は同じなので省略する。

仕上がりをブラウザで確認するとこの通り。完璧に動作している：

実装したダークモードの動作確認

ここでは、shadcn/ui の初期設定を省略しているが、実際は npx shadcn-ui@latest init を実行してセットアップを行う必要がある。

アシスタントパネル内の情報をもとにインライン変換を使用する方法を紹介してきたが、そこに情報がなければ機能しないというわけではない。ターミナルではあらゆるコマンドの出力を求めることができるし、コードエリアではコードの修正やスタイルの調整など指示通りやってくれる。

なので、直接的な指示はインライン変換からで良い。ファイルや URL を挿入したい場合、AI と会話しながら機能の実装を進めたい場合などは、アシスタントパネルを使用すると良いだろう。

Zed AI の今後

Zed AI が開発に取り組んでいる新しい機能を紹介する（公式ブログより）

workflow コマンド

インライン変換によってアシスタントパネルからコンテキストを取得して適用できることはここまでの解説でわかったと思う。新しい /workflow コマンドを使用すると、この機能が拡張され、アシスタントパネルとプロジェクト ファイル間の双方向のやり取りが可能になるとのことだ。

すでに試せるので使ってみたが、まだ不安的でエラーになることが多い。改善を期待して待とう。

project と auto コマンド

  • /project: 関連するプロジェクト情報をすばやく見つけてアシスタントパネルに挿入する

  • /auto: 現在のタスクに基づいてコンテキストを自動的に挿入する

どちらも使ってみないとなんとも言えないが、面白そうな機能だ。これらはまだ試せないので実装を待とう。

最後に

先日、Cursor が 6,000万ドルを調達したとの発表があった。Cursor の進化はさらに加速するだろう。現時点では Cursor が一歩リードだが、Zed が全てにおいて遅れをとっているというわけではない。

Zed はとにかく軽くて速い。UI もシンプルで使いやすく、何よりデフォルトのダークテーマの目に優しい色合いが好き。拡張機能は少ないが、必要最低限の機能は最初から備わっているので、そのまま使っても全く問題ない。というかもう AI がコードを書いてくれるので、細かい設定とかどうでもいい気がする。

Claude を使用した独自のコード補完機能は実装されていないので、補完は GitHub Copilot を使用するしかない。ここが最大の課題か。まあすぐに実装されるだろう。

今後の Zed AI に注目したい。

記事の内容に誤りがある場合は、ご指摘いただけると幸いです。また、他にもこんな便利な使い方があるよ！といった情報をいただけると嬉しいです。

この記事が役に立った場合は、「🩷」をいただけると嬉しいです。アカウントをお持ちでない方もできます。フォローも大歓迎です！ご質問やご意見がございましたら、X/Twitter (@komzweb) に気軽にメッセージをください。DM はオープンにしていないので、フォローしていただければフォローバックします（不審なアカウント以外）。

この記事が気に入ったらサポートをしてみませんか？