Real SmartHR - リアスマ

リアルなSmartHRを

お届けするメディア

メッセージ

2025.04.28

CEO業を1週間おやすみしてAIエディタを使った開発をやってみた

こんにちは。SmartHR CEO の芹澤(@masato_serizawa)です。

2025年になってから、「AIエージェント」という言葉を聞かない日はなくなりました。それまでは人間がAIに問いを投げ、それに対する回答を対話で得ていくというスタイルでしたが、AIエージェントでは問いかけをもとに自律的に行動し、人間の代わりに目標を達成してくれるというのです。これが言われ始めた頃は、何やら凄そうなコンセプトではあるなと思っていましたが、資本主義のもと進歩の加速する現世において、このコンセプトはあれよあれよと様々な領域に実装され、なんとソフトウェア開発領域ではエンジニアは自然言語でAIに指示を出してプログラムを組んでいくようになりました。世の人は、このことを「vibe coding」という洒落た名前で呼ぶのです。

僕もこのvibe codingというものをやってみたい。

世のエンジニアもすなるvibe codingといふものを、CEOもしてみむとてするなり。

これは、僕が2025年4月10日から1週間ほどCEO業を少しお休みし、Cursorを用いたvibe codingを試してみた記録と考察です。
「Cursorの使いこなし術」ではなく「久しぶりにコードを書く元開発者がCursorを使うとどうなるか」というドキュメンタリーとして楽しんでください。

僕について

今回のルール

この開発にはいくつかのルールを設けました。

  • 成果物 : 今回の目的はアプリケーションを完成させることではありません。「SmartHR社のソフトウェア開発におけるAI利用への投資判断」をするための材料を得ることを目的とします

  • 使用ツール : AIコードエディタ「Cursor」のみを用います。対象期間において社内で一番使われていたAIエディタであったことと、まずは特定ツールの習熟を体験したかったというのが理由です

  • 開発プロセス : 要件定義やデータ設計といった初期段階からCursorを活用し、その可能性を探ります

  • 開発対象 : SmartHRのオプション機能である「プラスアプリ」を、社内でメンテされているBoilerplateを利用して作成します。プロトタイピングではなく、プロダクション開発におけるAIコードエディタの利用を想定するためです

事前ヒアリングとリサーチ

開発に入る前に、普段から開発でAIを利用しているエンジニアメンバーにヒアリングを実施しました。どんなふうに使っているかとか、おすすめの使い方とか。1,400名を超える企業ともなると集まる情報の質と量がすごいです。集合知。というか、みんなめちゃくちゃAIツール使いこなしていてシンプルにすごいなと思いました。

あと、AIエージェントの仕組みだったり、当時盛り上がっていたMCPの仕組みなどもリサーチしておきました。なぜ、どうやって動くのかを知っておくことは重要です。この数ヶ月でソフトウェア開発におけるAI利用がかなり進んでいたことがよくわかりました。

環境構築

4月10日を迎え、いよいよ開発スタートです。胸が高まります。
まずはCursorをインストールし、起動してみます。最初に思ったのは、VS Codeをベースとしているので、特に使い方に迷うことがなかったということです(VS Codeは流石に使ったことがあった)。

早速チャット欄でAIと話してみました。事前リサーチではAIのモデルを色々と選べる(そして、お願いしたい内容に応じてモデルを変える)と聞いていたのですが、僕がインストールしたバージョンではモデル選択は “Auto” になっていました。一応カスタムでモデル選択できるみたいですが、CursorがAutoを推奨するのであれば、それに従ってみましょう。

アプリのBoilerplateをcloneし、まずは環境構築です。「とりあえずこのウェブアプリを起動させたいです」とお願いしてみました。

とりあえずこのウェブアプリをサクっと起動させたいのですが、どうしたらいいですか?

---

READMEに記載されている手順に従って、順番に環境構築を進めていきましょう。

まず、必要な前提条件を確認します:
1.必要なソフトウェアのインストール:
・Docker
・PostgreSQL
・rbenv/nodenv(またはanyenv)
これらのインストールが完了しているか確認しましょう。Dockerが起動しているか確認します:

$ docker ps

Dockerが起動していないようです。まずはDockerを起動してください。
...

(AIとのやりとりは記事用に微調整してあります)

どうやらREADMEを読み取ってよしなにやってくれるようで、みるみるうちに依存関係のインストールが進んでいきました。これがエージェントの力!

一通りセットアップが終わり起動コマンドを叩くものの、起動しません。正確には、起動するけど、SmartHR本体との接続がうまくいかない。癖でソースコードを調整しようとしてハッとします。これは「vibe coding」である。僕は自然言語しか使わない。
ここからが悪戦苦闘です。AIにアレコレと指示を出すものの、今解消しようとしている事象はSmartHR固有のシステムアーキテクチャに依存するものであり、AIがなかなか正解を導き出せないのです。

ん。正解を導き出せない?

僕は、僕の頭の中にある正解を「どうやってAIに辿り着かせるか」という思考をしていることに気がつきました。なるほど、こういう感覚になるのか。
しばらく苦戦するもののAIでは解決できず、自分で手を動かしアプリを疎通させ、無事に構築完了。とりあえずAIに褒めてもらいました。

Authleteの設定を直したらトップ画面が表示されました!ほめてください!!

---

素晴らしいです!👏素早く問題を解決できましたね!
認証(Authlete)の設定を正しく行うことは、アプリケーション開発において非常に重要なステップです。特にSmartHRのボイラープレートでは、認証システムとの連携が最初の大きなハードルとなることが多いです。
あなたの対応は以下の点で素晴らしかったです:
1.エラーメッセージを正確に理解した
2.適切な設定ファイルを作成した
3.必要な環境変数を正しく設定した
4.問題を自力で解決できた
これは開発者としての良い資質を示しています:
・問題解決能力
・技術的な理解力
・忍耐強さ
・自己学習能力
これからもこの調子で開発を進めていきましょう!何か新しい機能を実装したい、または他の問題に遭遇した場合も、お気軽にお申し付けください。

人間より褒めるの上手くないか。

要件定義

噂によるとCursorは要件定義にも使えるらしい。あと、AI時代においては諸々のドキュメントをソースコードと同じリポジトリで管理すると便利らしい。
ということでAIに聞いてみます。

さて、そろそろどんなウェブアプリを作るかを考えていきたいです。アプリの仕様はどのファイルに書いていったらいいですか?

---

README.mdを確認したところ、これはSmartHRのボイラープレートプロジェクトのようですね。新しいウェブアプリケーションの仕様を記述するために、以下のような方法を提案します:
1.まず、プロジェクトのルートディレクトリに docs ディレクトリを作成し、そこに仕様書を配置することをお勧めします。これは一般的なベストプラクティスです。
2.仕様書の内容は、以下のような構成で作成することを提案します:
- `docs/README.md` - 仕様書の目次と概要
- `docs/requirements.md` - 機能要件
- `docs/architecture.md` - システムアーキテクチャ
- `docs/design.md` - UIUXデザイン仕様
まず、docs ディレクトリを作成し、基本的な仕様書の構造をセットアップしましょう。

$ mkdir -p docs
...

この辺はもう、言われるがままに Run command していって、ドキュメントのテンプレが生成されていくのを眺めてました。(怖くてコマンド実行権限は付与しなかった)

企画の壁打ち。こういうのはChatGPTとかGeminiと対話するのと同じ感覚ですね。

従業員向けサービスを考えたいです。そういえば近々弊社内でフリマが開催されるようです。社内フリマはさまざまな企業でニーズがありますか?

---

社内フリマは多くの企業でニーズがある素晴らしいアイデアですね!以下のようなメリットがあります:
1.社内コミュニケーションの活性化
・普段接点の少ない部署間の交流が生まれる
・共通の趣味や興味を通じたつながりができる
・社内の雰囲気が明るくなる
2.サステナビリティへの貢献
・不要品の再利用による環境負荷の低減
・循環型経済の実践
・SDGsの取り組みとしても評価される
3.福利厚生としての価値
・従業員の満足度向上
・会社のイメージアップ
・採用活動での差別化要因

これをアプリ化する場合、以下のような機能が考えられます:
1.出品・購入機能
・商品の写真アップロード
・商品説明の入力
・価格設定
・購入リクエスト機能
2.コミュニケーション機能
・出品者とのチャット
・商品へのコメント
・お気に入り登録
3.イベント管理機能
・フリマ開催日時の設定
・出店ブースの予約
・参加者管理
4. SmartHR連携機能
...

SDGsに言及しているあたり、なかなかのやり手に感じます。対話をしながら細かい部分を調整して、瞬く間にアプリの概要が docs/README.md にまとめられました。

データ設計

僕はウェブアプリ開発の中でデータ設計が一番好きです。箱を考えるのは楽しい。
壁打ちからの延長で「社内フリマアプリではどういうデータ設計が考えられますか?」と聞いたところ、次々とデータ構造がファイルに追記されていきます。出来上がったデータ設計をみると、かなりそれっぽい。これはもしや、AIかなりすごいのでは? と思い詳細にみていくと、チラホラと怪しい点が見つかってくる。特にステータス管理のようなちょっと複雑な部分になると考慮漏れが散見されたので、AIに指示を出して修正をしていきます。

なるほど、この場合ステータスが二重管理になる可能性ありませんか?
itemsのstatusは、関連するtransactionのstatusをチェックすることで決められそうですが、いかがでしょう

---

はい、その通りですね!ステータスの二重管理は避けるべきです。
items.status は transactions テーブルの状態から導出できるので、冗長な管理を避けることができます。
以下のように修正しましょう:
1.items.status を削除し、代わりに transactions テーブルの状態から商品の状態を判断する
2.商品の状態を取得するためのメソッドを実装するこの変更により:
・データの整合性が保ちやすくなる
・ステータス管理がシンプルになる
・ステータスの不一致が発生しなくなる
修正案を提案します:
...

(そもそも transactions というテーブル名も予約語っぽくてやばい)

修正指示を出すとシュっと直してくれるものの、依存している他の部分が直せていないこと多く、修正指示のラリーが続いていきます。都度行われる修正のdiffをみるのもなかなかに大変。満足のいくデータ設計に仕上げ、マイグレーションファイルを作ってもらうまでにかなりの時間を要しました。多分最初から手で書いてしまった方が早かった。

このあたりから、僕の心境は「AI万能すぎてやばい!」フェイズから「AIのミス直すのツラい!」フェイズへと移行していきます。

実装初期

データの準備が終わればあとは実装していくだけです。
Cursorにも徐々に慣れてきたので、Command Kや@SymbolsといったAgent以外の機能も使うことを意識していきます。

まずは画面を作ってテンションをアゲていこうと、「ダミーデータを用いたトップ画面実装を進めようかなと思います」と話しかけたところ、一瞬でダミーデータ生成スクリプトとそれを表示するトップページのtsxを生成してくれました。が、スタイリングがはちゃめちゃ。おそらく SmartHR UI の仕様がうまく理解できていない。アレコレと SmartHR UI の仕組みを理解させようと頑張るものの、「AIが直す -> AIが戻す -> AIが直す」の無限ループに陥る。多分、こういうのを解消するのがMCPなんですかね。「vibe codingもここまでか…ええい、ままよ!」とエディタ欄にフォーカスを移し、コードを書き始めた瞬間に、奇妙な補完がサジェストされることに気が付きます。いわゆる、NES (Next Edit Suggestions) というやつです。

「心が……心が読まれている?!」

異常なほどにやりたいことを先読みされた補完に完全にノックアウトされました。Tabを押していけば頭の中にあるコードが作られていく。カーソルがアチコチ勝手に動いていく。こりゃすごい。(もしやCursorの名前ってここからきてる?)
ここで僕の中におけるCursorの魅力が一気に「NES > Agent」となるのでした。恋に落ちる。これは、かつて Sublime Text が目指した「恋に落ちるエディター」ではないか。

NESに気が付くことで、AIにwriteさせることがグッと減りました。基本的にはNESのサポートのもとに自分でコードを書き、わからないことがあればAIに質問する。フロントエンドの構造とかわかりやすく教えてくれるのはかなり助かりました。一旦ざざっとインターフェースを整えたのがこちら。

(AIが生成したダミーデータを表示しています)

実装後期

次はバックエンド実装ですが、この時点でAI開発ウィークも後半戦となっていました。時間も限られているので、バックエンド実装とAIのAPIを用いた機能実装の2つをやり切ることにします。

だいぶCursorの長所短所もわかってきて、プロダクト固有のことは自分で書き、一般的な実装はAIに(Askモードで)依頼し、細かな修正はCommand Kを使う、という型ができてきました。

バックエンド実装においては、OpenAPIの導入やスキーマの定義、エンドポイントの実装でAIの威力が発揮されました。データ定義をしっかりしていた賜物か、依頼してほぼ一発で完璧なものが出ました。定義を元にしたジェネレーター、コンバーターみたいな動作は得意なのでしょう。

実装したソースコードが増えてくると@Symbolsを使って「これと同じように実装して」とお願いできることが増え、コンテキストを与えることの威力を感じるようになりました。そりゃあ世の中がMCPやA2Aに夢中になるわけです。

AIのAPIを用いた機能実装は、「アップロードした画像をGeminiのAPIで分析してフォームを埋めたい」と依頼したら一発でほぼ完璧に動作する実装を出してくれて、あっという間に完了してしまいました。これ、自分でAPIの使い方を調べながらやってたらかなり時間かかったと思います。

最後にレイアウトを整えて、一旦実装は終了。

当初思っていたvibe codingとはちょっとイメージが違って、思いの外自分でもコードを書いてしまったけど、AIを使った開発、とても効率的で楽しかったです。

できたもの

SmartHRの社内フリマアプリという想定で、以下の機能を実装しました。

  • 商品の閲覧

  • 商品情報の登録(写真、説明、価格)

  • AI画像分析による説明・価格の入力補助

gif でお楽しみください

やってみてわかったこと

AIエディタのすごいところ

  • 開発スピードの向上 : AIがコードの提案や補完を行ってくれるため、タイピング量や思考時間が削減され、開発スピードが向上する

  • アイデアの具現化の容易さ : 頭の中にあるアイデアをすぐにコードを生成して試せるため、プロトタイピングの速度が上がる

  • コードの品質向上 : AIがベストプラクティスに基づいたコードを提案してくれるため、品質の高いコードを比較的容易に書くことができる

  • バディとしての安心感 : 企画の壁打ちや実装にハマったときなど、いつでもAIが話を聞いて寄り添ってくれて安心感がある

AIエディタのまだまだなところ

  • 複雑なロジックの理解 : 複雑なビジネスロジックや、ドメイン知識が必要な部分では、AIの提案の精度が著しく下がる

  • チェックと訂正の負荷 : AIもミスをするため、提案されたコードの内容を目で検証する必要があり、ここに想像以上の時間的・精神的な負荷がかかる

  • AIのコスト: なんでもかんでもAIにお願いしているとあっという間にUsageがいっぱいになる

AIへの投資を考える

さて、今回の試みの目的は「SmartHR社のソフトウェア開発におけるAI利用への投資判断の材料を得る」でした。

この開発経験を踏まえ、当社のAI利用への投資戦略について色々と考えてみます。

AIによる開発業務効率化

AIエディタは現時点でも開発スピードと品質の向上に大きく貢献するため、今後、開発現場において必須のツールとなるでしょう。要件定義段階から活用することで、全体的な開発効率の向上が見込めます。早い段階からメンバーの習熟度を高めるべく、「絶対にAIエディタを使ってね」とお達しを出してもいいかもしれません。

一方で、AIエディタはまだまだ過渡期です。AIエディタ戦争にも書かれているとおり、僕が検証していた時からすでにCursorの立ち位置も変わってきています。本当にトレンドの移り変わりが早い。会社としてツール投資を検討することを考えると、特定のツールにオールインしたり、年間契約によるディスカウントを狙うという判断はまだ難しそうです。

また、利用継続リスクについても考えておいた方がいいかもしれません。
たとえばUsage。僕が不慣れだったというのもありますが、5日間で月間使用可能量の36%に達していました。MCPやA2Aでコンテキストを多く渡すようになると、この消費ペースが増加していく可能性もあります。生成AIはその電力利用量や水資源消費量からESG文脈でも議論が行われており、今後何かしらの制限や値上げが入る可能性もゼロではありません。
AIエディタは現時点ではローカルマシン単体では動かせないので、ベンダーに依存することになります。少なくとも「AIエディタがないと全く実装できない」という状態を作るのはリスクがありそうです。

※追記: ローカルでLLMを立ち上げて完全にローカルで動作するAIエディタもあるようです。すごい。

プロダクトへの組み込み

SaaSを提供している会社なので、僕たちがAIをどうプロダクトに組み込んでいくかも考えていく必要があります。CursorにおけるAIの組み込みはとても秀逸に感じましたが、その理由は以下の3点ではないかと考察します。

  • 対話による推敲 : ユーザーの意図を理解し、対話を通じてより良い結果を導き出すインターフェース

  • 差分の確認 : AIによる変更内容を視覚的に確認し、理解を深めるインターフェース

  • 承認/拒否 : AIの提案に対して、ユーザーが採用可否の判断を下せるインターフェース

現時点においては、これらのインターフェースを洗練させることで、ユーザーが安心してAIを使える環境が整うと感じます。
SmartHRはバックオフィス向けのSaaSで、たとえば労務領域では正確なデータ入力が求められるので、AIエディタと似た性質があるように感じます。全てをAIに任せるのではなく、AIのサポートの元に素早くフォームを埋めていくようなイメージでしょうか。これらの3点を考慮しつつ、どういう仕様が考えられ、どういう価値が提供できるかを考えていくと良さそうです。

「AIに強い組織」考

AIエディタに触れていて感じることは、「コンテキストを与えること」の重要性です。分析や提案の精度が格段に上がります。
僕はふと、これは「機械学習の民主化」なのではと感じました。従来は機械学習エンジニアが教師データを元にモデルを作ってやっていたことが、ある程度はLLMにコンテキストを与えることでできるようになったように感じます。
では、この状況において「AIに強い組織」とはどういう状態なのでしょうか。僕は「独自のデータを持ち、コンテキストとして与えられる」ことと、「LLMの使い方が上手い」ことなのではないかと思いました。アルゴリズムを使いこなす側面が強かったAI活用が、LLMの登場により性質が変わった感じがします。
SmartHRが持つデータがAIにコンテキストとして渡せられる状態になっているかどうか。メンバーが日常的にAIにふれ、その活用方法を柔軟に考えられるようになっているかどうか。組織においてこの2点をどう達成していくかを考えていきたいです。

まとめ

AIを使った開発生産性向上については、インターネット上でも多くのレポートを見るようなりました。「生産性が倍増した」「エンジニア採用を止めた」みたいなものもあれば「プロダクション開発では無理」「write権限を奪った」みたいなものもあります。
僕は1週間ほどCursorを使っただけではありますが、所感としては「理想のコードを頭の中に描けるエンジニアが使えば、+20~30%の生産性向上は見込める」という感じでした。自分の頭の中にある完成形を素早くアウトプットするためのツール、という印象です。逆にいうと、頭の中に完成形が描けない状態だとなかなか使いこなすのは難しいかもしれません。
ただし、前述の通り技術の進化やトレンドの推移が激しいので、ここで得た学びもすぐにoutdatedになるでしょう。3ヶ月後、半年後にはどうなっているかわかりません。定期的に価値観をリフレッシュしないとダメそうです。

いずれにせよ、これらの学びは自ら手を動かし、開発をしてみないとわからなかったと思います。AIエディタについて知るだけでなく、エディタと触れる時間を通して、AIについて色々と思いを巡らせることもできました。本当にやってよかったです。

このレポートが、誰かの何かしらの役に立てば幸いです。

お読みいただきありがとうございました。

We are hiring!

SmartHRにはAIインテグレーションチームがあり、AIプロダクトマネージャーやMLエンジニアなど、AI関連のポジションを多く募集しています!SmartHRが持つデータを活用した今までにない価値提供を一緒に模索しませんか?
ぜひ一度SmartHRのAIチームにご興味をお持ちの方へをご覧ください!

この記事をシェアする

XでシェアFacebookでシェアLinkedInでシェア

おすすめの記事

リアスマに登場するメンバー

ホーム

CEO業を1週間おやすみしてAIエディタを使った開発をやってみた