Claude Codeを使うなら知っておきたい「Webアプリ」の話
Claude Codeに「サイトを作って」と頼むと出てくるファイルが、どこに何を置いているのか。実際に作らせたコーヒー屋のサイト1つを、いいねボタンを足す→フォルダを2つに割る→Next.jsへ引っ越す、と育てながら、フロントエンド・バックエンド・データベース・フレームワークの位置関係を地図にします。コードは1行も書きません。
「claude code」タグが付いた記事の一覧。
Claude Codeに「サイトを作って」と頼むと出てくるファイルが、どこに何を置いているのか。実際に作らせたコーヒー屋のサイト1つを、いいねボタンを足す→フォルダを2つに割る→Next.jsへ引っ越す、と育てながら、フロントエンド・バックエンド・データベース・フレームワークの位置関係を地図にします。コードは1行も書きません。
Claude Codeが、自分のパソコンの外にあるGoogleドライブまで読めるのはなぜか。その仕組みはAPIとMCPの2つで説明できます。同じ中身が人間向けの画面とプログラム向けのデータの2つの形で出てくることをブラウザで確かめ、そのうえでGoogleドライブをコマンド1行も打たずにClaude Codeへつなぎます。つないだあとに確認すべき3つのことまで。
2026年8月7日に入ったばかりのクロスセッションメッセージング。別のターミナルで動いているClaude Codeに伝言を送れる機能です。渡るのはテキストだけという仕様、同じPC内ならAnthropicのサーバーを経由しないこと、そして実際の使い方——チャットに来た依頼を人間が担当セッションに貼り付けていた作業が、窓口セッションを立てることで丸ごと消えた話まで書きました。
Claude Codeを入れてみたものの、出てきた黒い画面の前で止まってしまった方へ。覚えるコマンドはpwd・ls・cdの3つだけです。ターミナルの開き方から、Claude Codeが「起動した場所しか見ていない」という最重要ポイント、Ctrl+Cでの止め方、つまずきやすい3つのケースまで一通り押さえます。
Claude Codeが出力する文章に使われているMarkdown記法の基本7つを解説します。見出し・箇条書き・リンク・コードブロックなど、今日から使える記法を一通り押さえたうえで、マークダウンと相性のよいマインドマップ表示についても触れています。
タスクの整理をほとんど自分でやらなくなった、という以前の記事の続きです。frontmatterでの状態管理、statusを「担当」ではなく「今動けるか」で決めている理由など、ObsidianやClaudeを使っている人がそのまま今日から始められる形で仕組みを公開します。
今つくっているMartenというノートアプリの紹介です。GitHubをデータの置き場にする、マルチデバイス対応のMarkdownノートアプリで、AIエージェントがそのまま触れる場所にノートを置いておけます。
Notionからの乗り換えを経て、今はタスクの整理・優先順位づけをほとんどClaudeに任せています。「ローカルのMarkdownファイルであること」が、AIエージェントとの相性を大きく左右するという実感を書きました。
OpenCodeを使い始めたのは、Claude Codeへの依存が少し気になり始めたからです。
Claude Code、OpenCode、Gemini CLIと、複数のAIコーディングツールを使い分けるようになってから、「自分は何をどれくらい使っているのか」がまったく見えなくなりました。ツールごとに管理画面もバラバラで、全体を把握する手段がない。そこでローカルで動く可視化ツールを自作しました。
Gemini CLIの設定・スキル・指示ファイルの基本をまとめ、Claude Codeと設定を統一しようとしてハマった落とし穴と解決策を実録でお伝えします。
MCP・サブエージェント・hooksの入り口を紹介し、シリーズ全体を振り返ります。ここから先の中級者向け応用機能への道標となる最終回です。
議事録から週報を自動生成する定型プロンプトをカスタムスラッシュコマンドに昇格させる手順を解説します。「いつもの作業」を「使い回せる仕組み」に変える第5回。
対話だけでブラウザで動くToDoアプリを完成させます。要件の伝え方からPlan modeでの段取り確認・不具合の直し方まで、アプリ開発の一通りを体験します。シリーズ第4回。
雑な会議メモを構造化された議事録に整形するハンズオンで、プロンプトの基本・@メンション・Plan mode・スラッシュコマンドを体験します。シリーズ第3回。
ターミナル・Node.jsのインストールから初回起動・最初の対話まで、非エンジニアでも迷わない手順でClaude Codeを動かすまでを解説します。シリーズ第2回。
Claude Codeとは何か、なぜ今触るべきかを整理します。「誰でも雇えるスーパーエンジニア」という視点から、その全体像と可能性を解説するシリーズ第1回です。
コスト削減=コンテキスト削減。サブエージェントによるコンテキスト分離とMANAGEMENT.mdによるセッション使い捨て戦略で、Claude Codeの上限問題に向き合う実践的な方法を紹介します。
Claude Codeの処理中に流れるingメッセージの正体を調査。ツール操作・フレーバー・完了通知の3種類の違いと、187語ランダム選出の仕組みを解説します。
claude --helpを読んで驚いた実用的なフラグをカテゴリ別に整理。--name、--worktree、--effortなど、知ると作業テンポが上がるオプションを紹介します。
Claude Codeが実行するgitコマンドが何をしているのか「読める」ようになるための基礎解説。リポジトリ、コミット、ブランチなど6つのコマンドを中心に説明します。
CLAUDE.mdは「Claudeへの申し送り書」。たった数行書くだけで応答の質が変わる、非エンジニア向けの最小テンプレートと育て方のコツを紹介します。
ナレッジ・タスク・ブログを1つのvaultに集約し、Claude Codeで一括メンテ・プラグイン自作・共同執筆まで行う実際の運用ワークフローを公開します。
プロンプトを変えた3パターンで架空カフェのWebサイトをClaude Codeに作らせた実験。伝える情報の粒度で仕上がりが大きく変わる結果になりました。
Skillsによるコマンド化、非対話モード、コンテキスト圧縮など、Claude Codeの意外と知られていない便利な機能を5つ厳選して紹介します。
NotionからObsidianに乗り換えた経緯と、ローカルファイル×Claude Codeの組み合わせが最強だと感じる理由を紹介します。
Claude CodeにGoogle Drive用のMCPサーバーを追加して、ドキュメント作成・管理を自動化する導入手順をまとめました。
CLIベースのAIコーディングエージェント「Claude Code」の魅力と、普段の開発での具体的な活用方法を紹介します。