Claude Codeの「すぐルール忘れる問題」を解決する超効果的な方法を見つけた気がする
どうもこんにちは Claude Codeを使っている人ならみんな感じてると思いますが、CLAUDE.mdでどれだけ緻密なルールを組んでも3ラリーくらいするとすっかり忘れてどんどん適当に動き出すというどうしようもない現象があります そのたびに「ルールを守ってください」と500000000回は打ち込みましたし、指摘し疲れて「/a」で「ルールを再確認してください」というカスタムコマンドまで組んで対処しているような状況でした この問題で難しいのが、「語尾を◯◯にして」だったりそういうしょうもないロールプレイはずっと守るわりに、「事前に確認を取って」とか「このルールで報告して」とかそういう挙動系のルールをすぐ忘れるという点です これをどうにか解決できないかなーと考えていたのですが、そもそもなぜ語尾ルールは守れるのか？という部分から答えを見つけるべきだと思い調査を開始しました なぜ語尾ルールだけは守ら
Claude Codeにコマンド一発でMCPサーバを簡単設定
デフォルトはlocalです。スコープによって、設定ファイルに書き込まれる場所が変わったり、設定ファイル自体が変わるのがなかなかトリッキーですね（最初ずっと混乱してました）。.mcp.jsonは、プロジェクトで複数人でMCPサーバの設定を使うときに便利かもしれませんね（APIキー設定とかは困りそうですが）。 設定ファイルを直接編集してClaude Codeを起動することでも、MCPサーバを設定することができます。具体的にはプロジェクトのルートディレクトリに.mcp.jsonをおいて、そこでClaude Codeを起動すれば設定が自動で反映されます。 ~/.claude.jsonの場合は、書く場所で影響範囲が変わる形になっています。ただ、~/.claude.jsonはすべてのプロジェクトのMCP以外も含めた設定ファイルが保存された大きいファイルなので、直接編集が難しいです（一回派手にぶっ壊しま
技術選定の審美眼 2025年版
本記事では、2025年5月14日に開催されたオンラインイベント「【技術選定を突き詰める】Online Conference 2025」内のセッション「技術選定の審美眼 2025年版」の内容をお届けします。同セッションでは、タワーズ・クエスト株式会社の和田卓人（@t_wada）さんに、1990年代前半から現在にかけての技術の変化の歴史についてお話いただきました。ぜひ本編のアーカイブ動画とあわせてご覧ください。 和田： 和田卓人（t-wada）と申します。インターネット上ではt-wadaさんと呼ばれています。技術顧問としてコンサルティング業を多く手掛ける傍ら、技術書の出版や翻訳にも関わっています。SQLアンチパターンという本の第2版が7月上旬に発売されますので、是非よろしくお願いいたします。 本日の講演は、「技術選定の審美眼2025年版」です。2018年頃にDevelopers Summi
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
Claude Codeを使い倒す方法｜すてぃお
僕は食べ放題だとついつい食べ過ぎちゃうし、Netflixなども見放題だと永遠と見ちゃいます。 なんだか◯◯放題って使わないと損って思っちゃう派です。 Claude MAXも同様で、定額課金（しかも20xだと月200ドル）だと使わないと損って思ってしまいます。 使い倒した結果がこちらです Claude Codeを使い倒したいときに下記2つの問題があります。 Claude Codeに渡すタスクを作るのが大変でなかなかClaude Codeに渡せない Claude Codeが実装してくれた内容をレビューするのが遅れて、次のタスクが渡せない つまり、下記のような作業フローになっており、自分自身がボトルネックになってしまうのです。 これでは本当はもっとClaude Codeを使い倒したいのに使い倒せないのです。 できれば常にClaude Codeを立ち上げてなにかをやらせておきたいところです。 なの
個人的CLAUDE.mdのすゝめ
配置する場所によって優先度や効果範囲が異なりますのでご注意ください。 また、CLAUDE.mdは自分で作成するほかに/initコマンドを使用してAIに作成してもらうことができます。 自分は今回紹介するようなCLAUDE.mdをさまざまなプロジェクトで使いまわしています。 Claude Codeのおすすめ CLAUDE.mdを紹介する前に自分が普段使用していてClaude Codeの精度が上がったと実感した操作をご共有させていただきます。 作業ごとに/clearコマンドを使用してコンテキストを切る Claude Codeは一定数コンテキストが溜まってくるとcontext compactといって自動的にコンテキストを要約し、リフレッシュします。 しかし、この機能にて行われる要約が個人的には精度が低いように思えるのでコンテキストを引き継がなくて良い場合には必ず/clearコマンドを使用してコンテ
Claude Code の .claude/commands/**.md は設定した方がいい - じゃあ、おうちで学べる
はじめに Claude Code でよく同じコメントを打ってませんか？ 「毎回『テスト実行して、lint チェックして、問題なければコミットして』って言うの面倒だな」とか「プロジェクトごとに決まった手順があるんだけど、毎回説明するのダルい」とか思ったことないですか？ そんなあなたに朗報です。 Claude Code にはカスタムスラッシュコマンドという機能があって、よく使うプロンプトをコマンド化できるんです。しかも設定は超簡単。Markdownファイルを置くだけ。手順書やMakefileが自然言語で書ける時代ですね⋯。 docs.anthropic.com 正直なところ、この機能を知ったときは「え、こんな便利な機能あったの？」って感じでした。公式ドキュメントをちゃんと読んでない自分を殴りたくなりました。というか書くって言って書いてはいてかなり前なのにいろいろやることがあって公開は遅れました
Claude Code に壊されないための denyルール完全ガイド - izanami
結論：Claude Codeのdenyは、ガッツリ書いておけ ワイは、Claude Code と Supabase MCP で、Supabase のDB全部削除させてしまったことがある。目の前でテーブルが「ッポン」といった感じで消えてトラウマになった 思い返せば permissions.deny に書いておけばよかったのかもしれない permissions.deny とはなんぞや？ Claude Codeのpermissions.denyは、AIが危険な操作や機密情報へのアクセスを行わないよう制限する設定やね。これがあるおかげで、AIに任せても「壊さない・漏らさない・暴走しない」が実現される AIに対してのガードレール設計ですね この記事では、Claude Code の deny リストを読み解きながら、「なぜその操作が禁止されているのか」「自分の環境でも取り入れるべきか？」を考えてみる
Claude Code 逆引きコマンド事典
これは何？ 「Claude CodeのXXXで困った時どうする？」という逆引き一問一答形式でまとめたClaude Codeのコマンド集です。 僕は普段から説明書を読まないタイプ(爆)で、Claude CodeもBest Practiceを斜め読みした程度で使ってたのですが、ある時 claude -r コマンドを知って「そんな便利なコマンドあるのか！」と驚愕しました笑。 ちゃんと説明書読まないとなぁと反省し、メモをとりながらClaude公式ドキュメント(+多少の入門記事)を読み直したので、メモをまとめて公開してみます。とはいえ、単なるコマンド一覧では「過去の僕」は読まないかなと思ったので笑、逆引き一問一答形式にしています。 内容は2025年6月23日現在では正しいはずですが、界隈の速さを考えると一瞬で陳腐化すると思います。動かない場合は公式ドキュメントを参照していただけると幸いです。また、明
社内専用オンラインミーティングツールを Claude Code で作ってる
自社製品の WebRTC SFU を利用した社内専用のプライベートオンラインミーティングツールを Claude Code で作ってる。プロダクト名は Misora (み空色) 。 全くコードは書いていないし、見てない。CLAUDE.md をしっかり書いて、指示は複雑なタスクになりそうな場合は、かなり詳細に指示してる。 モチベーションもともと自社専用のオンラインミーティングツールが欲しかったが、開発ツールを利用で困っていたわけではなかった。 またコストかけて作るメリットがあまり見えなかった。ただ Claude Code であれば、かなりコストを抑えて作れると判断してチャレンジしてみた。実際 1 日で最低限の機能を搭載したミーティングツールが出来た。 前提VS Code の Claude Code 拡張を利用Claude Opus 4 (/model opus) を利用WebRTC SFU S
個人開発でもRDB系が使いたくて、いろんなサービスを調べてみた(Turso/TiDB etc.) - くらげになりたい。
普段、Cloud Firestoreを使っているけど、 リレーションが多くなってくると、やっぱりつらくなる。。。 RDBをつかいたいなと思い、いろいろ調べてみた備忘録(*´ω｀*) ドキュメントや関連記事ベースのみで、価格メインの調査 まとめ: Turso/TiDBがよさそう Turso(SQLite) 無料プラン: Total 9GiB storage / Point-In-Time Restore 1days / 3 Locations Hobby $8.25 Free + No Cold Starts / Point-In-Time Restore 10days / Audit Logs 3days / Databases Never Archived Scaler $24.92 Hobby + Support for Teams / Total 24GiB storage / Po
個人開発でデザインに悩むエンジニアへ。工数を抑えていい感じのUIを作る方法【Meraki UI】
この記事は「RUNTEQ Advent Calendar 2024」23日目の記事になります。 はじめに プログラミングスクールRUNTEQでエンジニア兼講師をしているいっぺい（@ippei_111）と申します。 いきなりですが個人開発を行う時にアプリケーションのUIを考えるのに悩んだ経験はありませんか？ エンジニアあるあるかもしれませんが、個人開発をする際に機能の実装はできるが、デザインの部分でどうしたら良いのか迷ってしまい、手が止まってしまうことがあると思います。 本来機能開発に時間をかけたいが、デザインに凝りすぎてしまい、余計な工数と時間がかかってしまうことも多々あると思います。 また、デザインに関する知識と経験がないエンジニアがデザインを考えると、「なんかダサいデザイン」「使いづらいUI」になってしまうのもエンジニアあるあるかと思います。 本記事では、デザインに不慣れなエンジニアで
個人開発のDBをFirebaseからSupabaseに移行した話
こんにちは。はじめまして。れとるときゃりー(@retoruto_carry)と申します。 最近、個人開発しているサービスのDBをFirebase FirestoreからSupabaseに移行しました。 移行には２週間程かかりましたが、Firestoreでつらみを感じていてた部分が解消されて満足しています。 FirestoreはNoSQLなので、設計が難しく、画面のUI構成やユースケースを熟考したうえでデータ設計を考える必要があり、ガンガン仕様変更したり、複雑なクエリをしたりするには向いていない傾向があると感じていました。 Supabaseは、Firebaseの便利な部分を受け継ぎつつ、バックエンドがRDB(PostgreSQL)なので、上記の欠点が解消されています。 また、Firebaseがクエリごと料金が掛かるのと比較して、Supabaseはインスタンスごとの課金であり、セルフホストも可
初期コストゼロの個人開発の技術スタック - izanami
Cloudflare Images, Pages, D1, Next.js, Clerkで揃えれば、初期コストゼロで実用的な MVP が組めます。おまけにカード不要 コスパ最強な技術スタック 凄いところ すべてに無料枠がある（カード不要） 画像・デプロイ・DB・認証の面倒な部分が自動化／省略可能 フロントエンドに集中できる MVP の検証スピードを最大化できる Cloudflare Images（画像最適化） Cloudflare が提供する画像最適化サービス。アップロード（保存・配信は有料）するだけで、自動的にリサイズや圧縮が行われ、CDN を通じて高速に配信できます。URL パラメータでの制御も簡単で、容量課金ではなく画像数による課金体系も魅力。 2025年4月19日現在 料金表 あまり話題になることもなく、まだ認知されてないイメージですが、構築簡単でコスパ最強です。 自動リサイズ、最
できるだけ無料で作る個人開発のための技術スタックと注意点
最近思いつきで身内向けにTwitterクローンを開発していて、そこでの知見をゆるく共有したいと思います。技術選定の段階で以下の記事を参考にさせていただいたのですが、この記事の内容を前提として代替案としてこれもいいんじゃない？という話をしたいと思います。 フロントエンド 元々私は個人的にずっとNuxtを使っていたのですが、やはり現状はNext.js (+ Tailwind CSS)が一番良い気がします。一度勉強してみたら全然アリだな、と思いました。 バックエンド こちらもNext.jsでフロントエンドと同時に開発できます。Next.jsのServer Actionsはサーバーコンポーネントとクライアントコンポーネントどちらからでも呼び出すことができ、DBにアクセスしたりといったことができます。 Server Actionsの注意点 便利なServer Actionsですが、セキュリティの観点
基本無料縛りの個人開発技術スタック
こんにちは、初投稿です。 最近Zenn上で無料縛りの個人開発技術スタックの記事がいくつか挙がっており、個人的にこの辺には一家言あるので便乗します。3パターン紹介します。 前提 以下の思想を採用しています。 特にこだわりがなければフロントエンドはReact/TypeScriptを使うべき AIが得意なので ランタイム上の制約がない限り、フルスタックなフレームワークを使うべき フロントエンドはReact/TypeScriptを使うので、Next.jsを使うのが良い FreshやReact Routerもあるが、認証系ライブラリのサポートにがっつり乗れるNext.jsの方が、個人開発の場合は良さげ 案1: Cloudflare にがっつり寄せる フレームワーク 以下の理由で Next.js がお勧めです。 レスポンスの遅さを誤魔化す機能が豊富 後で紹介するレイテンシの大きいDBが採用しやすい サ
個人的 Vibe Coding のやりかた
こんにちは、よしこです。 最近、個人的に欲しいツールをVibe Codingで作ることが増えてきたので、私の中で定着してきた進め方をまとめてみようかなと思いました。 ちなみに "Vibe Coding"（雰囲気コーディング）というのは、「人間が音声やテキストで指示を出し、AIが主体となってコードを書くコーディングスタイル」を指すワードです。 私もこのやりかたをするときはほとんどコード書いてません。 要件定義 まずは「何を作るのか」「ターゲットは誰か」「どんな機能が必要か」「画面構成はどうするか」などを決めます。好きなAIとチャットベースで喋りながらまとめていきます。 こっちが全然考えきってなくても、「◯◯なアプリ作りたいんだけど要件定義手伝ってー」から会話を始めれば必要な情報は向こうがヒアリングしてくれます。 ここはChatGPT 4oを使うことが多いです。トーンやノリが個人的な好みと合っ
1円も使いたくない個人開発のための技術スタック
対象 一般的なWebアプリケーション 特に、学生などはクレジットカードが使えずそもそも支払いができないという状況もあるので無料のものをまとめてみました。 結論として Supabase Next.js Drizzle Cloudflare Pages Cloudflare D1 / KV どんな要素が必要か Webアプリの開発に必要なのはフロントエンドと、バックエンドです。 バックエンドといっても、その中身は実際の処理に加え、DB、またログイン認証機構が必要になります。 フロントエンド フロントエンドとしては、Next.js一強です。 すでにコミュニティも成熟しているので使いやすく、いろんなところに統合できます。 バックエンド処理 バックエンド処理は、Next.jsの"use server";を使えば簡単に行えるので、別にAPIを作ったりする必要はなさそうです。 フロント・バックエンドのデプ
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供 Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebアプリケーションのユーザーインターフェイスを自動生成してくれるサービス「v0」のベータ公開を発表しました。 v0を使うと、人間のWebデザイナーに「こんな画面を作って」「ここの色は青にして」「ここのフォントは大きく」などと言葉で指定するの同じような感じで生成AIに指示をして、HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能です。 Introducing v0: generate UI from simple text prompts. 5,000 waitlist invites were sent today—with over 25
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gemini CLI: your open-source AI agent
