Mac+VSCode+Github+ClaudeCodeでZennの記事を書いてみた。
はじめに
MacBook上でZennの執筆環境を構築してみました。VSCode、GitHub、そして話題のClaude Codeを組み合わせることで、かなり快適に記事が書けるようになったので、その体験をシェアします。
同じようにMacで環境を整えたい方の参考になれば幸いです。
私の環境
- MacBook（macOS）
- インターネット接続
- GitHubアカウント
1. まずはNode.jsをインストール
Zenn CLIを動かすにはNode.jsが必要とのことで、まずはこれをインストールしました。
私の場合、Homebrewを使ってインストールしました。Homebrewが入っていない方は先にインストールが必要です。
# Homebrewのインストール（まだの人は）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Node.jsをインストール
brew install node
# ちゃんと入ったか確認
node -v
npm -v
ターミナルでバージョンが表示されればOKです。私の環境ではnodeはv25.2.1，npmは11.6.2が入りました。
2. Zenn CLIをセットアップ
Zenn CLIの導入です。作業用ディレクトリで以下のコマンドを実行しました。
# Zenn CLIをインストール
npm init --yes
npm install zenn-cli
# Zennのセットアップコマンド
npx zenn init
これでarticles/とbooks/ディレクトリが作られました。記事はこのarticles/に入れていくことになります。
記事を作ってみる
試しに新しい記事を作成してみます。
# 記事ファイルを生成
npx zenn new:article
# slug（記事のID）を指定することも可能
npx zenn new:article --slug my-first-article
するとarticles/の中にマークダウンファイルが作られます。
3. GitHubにリポジトリを作成
VSCodeから直接GitHubリポジトリを作成しました。
- VSCodeでソース管理タブを開く（サイドバーのブランチアイコン）
- 「GitHubに公開」ボタンをクリック
- リポジトリ名を入力（私の場合は
Zenn） - PublicかPrivateを選択（私はPublicに）
- 公開するファイルを選択して公開
VSCodeから直接操作できるので、コマンドラインでクローンする必要がなく、とても簡単でした。
初めてGitを使う場合は、事前に設定が必要です。
git config --global user.name "あなたの名前"
git config --global user.email "メールアドレス"
4. VSCodeに拡張機能を入れる
普段からVSCodeを使っているので、Markdown執筆を快適にする拡張機能をいくつか入れました。
入れた拡張機能
Zenn Editor
VSCode上でZennのプレビューができます。拡張機能タブで「Zenn Editor」を検索してインストール。ブラウザを立ち上げる必要がなく、VSCodeアプリ内でプレビューできるので非常に便利です。
Markdown All in One
Markdownを書くときの定番。ショートカットや目次生成が便利です。
GitLens
Git履歴を見やすくしてくれます。いつ誰が変更したか一目瞭然。
プレビュー方法
記事を書いている途中で見た目を確認する方法は2つあります。
VSCode内でプレビュー（おすすめ）
Zenn Editor拡張機能を使えば、VSCodeアプリ内でプレビューできます。マークダウンファイルを開いた状態で、右上のプレビューアイコンをクリックするだけです。ブラウザを立ち上げる必要がなく、非常に便利です。
ブラウザでプレビュー
別のターミナルでプレビューサーバーを起動することもできます。
npx zenn preview
ターミナルにhttp://localhost:8000と表示されるので、ブラウザでアクセスすると記事が確認できます。
5. Claude Code for VS Codeを導入してみた
今回一番試したかったのがこれ。Claude Code for VS CodeはAnthropicのAIアシスタント「Claude」をVSCode内で使える拡張機能です。
インストール
VSCodeの拡張機能タブから簡単にインストールできました。
- VSCodeの拡張機能タブを開く（サイドバーの四角いアイコン）
- 検索バーで「Claude Code」を検索
- 「Claude Code for VS Code」を見つけてインストール
- インストール後、サイドバーにClaudeのマークが表示されます
APIキーの設定
使うにはAnthropic APIキーが必要です。
- Anthropic Consoleにアクセス
- アカウントを作成（まだの場合）
- APIキーを生成
- VSCodeのClaudeマークをクリックして、APIキーを入力
使ってみた感想
実際に使ってみると、かなり便利でした。VSCodeのサイドバーにあるClaudeのマークをクリックするだけで起動します。チャット形式で対話しながら、コードの編集やファイル操作を任せられます。
こんな風に使っています
記事のアウトライン作成
最初に記事の構成を考えるのに使いました。「〇〇についての記事のアウトラインを作って」とお願いすると、章立てを提案してくれます。
コードサンプルの生成
技術記事なのでコード例が必要な時に「〇〇のサンプルコードを初心者向けに書いて」と依頼。コメント付きで丁寧に書いてくれるので助かります。
文章の校正
書いた文章を読みやすくするために「この段落を校正して」とお願いすることも。誤字脱字チェックにも使えます。
技術的な説明の補足
難しい概念を説明したい時に「〇〇をわかりやすく説明して」と頼むと、いい感じに噛み砕いてくれます。
特に便利だった機能
ファイル操作
プロジェクト内のファイルを直接読み書きできるので、「このファイルの誤字をチェックして」と言えば該当ファイルを開いて確認してくれます。
Git操作のサポート
「変更をコミットして」と言うだけで、適切なコミットメッセージまで考えてコミットしてくれるのは本当に楽でした。
6. 私の記事執筆フロー
実際にこんな感じで記事を書いています。
1. 記事ファイルを作る
まずターミナルで新しい記事を作成。
npx zenn new:article
VSCodeで開くと、フロントマター（記事の設定部分）が最初から入っています。
---
title: "記事のタイトル"
emoji: "📝"
type: "tech" # tech: 技術記事 / idea: アイデア
topics: ["nodejs", "zenn"]
published: false # 公開前はfalse
---
2. Claude Codeで執筆アシスト
VSCodeのサイドバーでClaudeのアイコンをクリックして、Claude Codeを起動し、記事の構成を相談します。
「〇〇についての記事を書きたいんだけど、アウトラインを考えて」と依頼すると、章立てを提案してくれるので、それをベースに書き進めます。
3. プレビューで確認
書いている途中で見た目を確認したくなったら、Zenn Editor拡張機能を使ってVSCode内でプレビュー表示します。マークダウンファイルを開いた状態で、右上のプレビューアイコンをクリックするだけです。
4. Gitで管理
ある程度書けたらGitでコミット。
Claude Codeに「変更をコミットして」とお願いすれば、コミットメッセージまで考えてくれるので、それに任せることもあります。
5. Zennと連携
最後にZennとGitHubリポジトリを連携させます。
- Zennのダッシュボードにログイン
- 「GitHubリポジトリと連携」を選択
- 先ほど作ったリポジトリを選択
- これで記事が自動的にZennに同期されます
連携後は、GitHubにpushするだけでZenn側にも反映されるのでとても楽です。
まとめ
MacでZennの執筆環境を整えた体験をシェアしました。
やったこと
- HomebrewでNode.jsをインストール
- Zenn CLIをセットアップ
- VSCodeからGitHubにリポジトリを作成
- VSCodeに便利な拡張機能を導入
- Claude Codeをインストールして執筆アシスタントに
使ってみた感想
実は2021年に一度Zenn × GitHubの連携を試みたことがあったのですが、その時はうまく連携できず挫折していました。今回再チャレンジしたところ、すんなりと連携できて驚きました。
さらに、Claude Codeとの組み合わせで文章を書いてみると、非常に相性が良いと感じました。記事の構成を考えたり、コード例を作ったり、文章を校正したりと、執筆作業のあらゆる場面で助けてくれます。
特に良かったのは、書きたいことにフォーカスできるということです。適切な表現や構成、細かい誤字脱字などをフォローしてもらえるので、アイデアや伝えたい内容を考えることに集中できます。
もちろん全部をAIに任せるわけではなく、自分で考えた内容をブラッシュアップしたり、詰まったところをサポートしてもらったりという使い方が中心です。
ローカルで書いてGitで管理、Zennに自動同期という流れも快適で、技術記事を書くモチベーションが上がりました。
同じようにMacで環境を整えたい方の参考になれば嬉しいです。
Discussion