GitHubとZennで始めるAI時代の技術ブログ：効率的な執筆環境構築ガイド

はじめに

エンジニアの皆さん、技術ブログを書きたいと思いつつも、なかなか始められていない方、継続できていない方も多いのではないでしょうか？

この記事では、GitHubとZennを連携させ、さらにAIコードエディターのCursorを活用して、効率的に技術ブログを執筆する方法をご紹介します。

なぜGitHubとZennの連携がオススメなのか？

GitHubとZennの連携により、以下のような利点が得られます。

• バージョン管理による安心感：記事の変更履歴が残るため、試行錯誤が容易
• プレビュー機能による即時確認：画面を切り替える必要なく、随時確認可能
• AIによる執筆支援：記事の執筆にCursorを活用することで、より質の高い記事作成が可能

これらの機能により、技術ブログの執筆がより効率的で楽しいものになります。

セットアップ手順

あらかじめ、ZennとGitHubの連携と記事の執筆をスムーズに行うことを目的としたGitHubリポジトリ（zenn-contents）を用意しました。以下手順で進めてみてください。

1. リポジトリの準備

1. zenn-contentsリポジトリをフォーク
2. フォークしたリポジトリをローカルにクローン
3. （下書き記事を公開したくない場合）リポジトリをプライベートに設定

2. ZennとGitHubの連携

1. Zennのダッシュボードにアクセス
2. GitHubとの連携設定を行う
3. フォークしたリポジトリを連携リポジトリとして選択

https://zenn.dev/zenn/articles/connect-to-github

3. 執筆環境の整備

推奨するコードエディター

Cursorをエディターとして推奨します。以下の特徴により、ブログ執筆の効率が向上します。

• AIによる文章支援：AIによる文章の推敲や改善がシームレスに行える
• 自動校正による品質向上：日本語の文章チェックにより、読みやすい記事が作成できる

Cursorについては、以下の記事も参考にしてみてください👦🏻

https://zenn.dev/lclco/articles/2a15cf7694ac1e

推奨する拡張機能

1. Zenn Preview for github.dev
   • 記事一覧確認・新規作成が可能
   • 記事のプレビュー表示が可能（npm run devでローカルサーバーを起動する方法でも可）

https://marketplace.visualstudio.com/items?itemName=zenn.zenn-preview

2. テキスト校正くん
   • 日本語文章の自動チェック
   • クイックフィックスによる自動修正機能

https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading

記事の作成と執筆

1. npm installコマンドで必要なパッケージをインストール（初回のみ）
2. npm run newコマンドで新規記事を作成
3. マークダウン形式で記事を執筆
4. npm run devコマンドでプレビューを確認しながら内容を調整
5. 必要に応じてCursorのAI連携機能を活用

npm run newコマンドについて

hygenを利用して、記事のテンプレートを容易に作成できるようにしています。hygenは、コードジェネレーターツールで、定義したテンプレートに基づいて必要なファイルを自動生成します。

このリポジトリでは、以下の項目を含む記事テンプレートを生成できます。

• スラッグ（記事のURL）
• アイコン（記事のアイコン）
• タイプ（記事のタイプ：tech/idea）
• タイトル（記事のタイトル）
• publicationとの紐付け設定

※ Zenn CLIでも記事ファイルを作成できますが、hygenを使用することで、より柔軟なテンプレート生成を実現しています。

Zenn Publicationの活用

Publication機能を使うことで、以下が可能になります。一部はPublication Proでの機能ですが、今は無料で限定的に利用できるようです。

• チーム内での記事共有
  • 下書き状態でのレビュー依頼も可能
  • 該当箇所を指定したコメント機能（Pro機能）

https://info.zenn.dev/2024-08-05-publication-free-review

• 統計データ表示
  • 各記事の閲覧数確認、CSV出力可能（Pro機能）

https://info.zenn.dev/publication-free-stats

効率的な執筆のワークフロー

技術ブログの執筆を今より効率的に進めたい方に、以下のようなワークフローをオススメします。

1. 記事の基盤作り

• テーマ選定のポイント
  • 自分が最近解決した技術的課題
  • チーム内でよく聞かれる質問事項
  • 公式ドキュメントを補完する実践的な知見
• ターゲット読者の明確化
  • 「1年目のフロントエンドエンジニア」のように具体的に設定
  • 読者の予備知識レベルを想定

2. 記事構造の設計

読者が自然に理解できる流れを意識して、以下の順序で構成することをオススメします。記事のテーマによってはすべて必要ではなく、流れだけ意識できればOKです。

1. 背景（なぜこの記事を書くのか）
2. 結論（読者が得られる価値）
3. 理由（なぜその解決方法が有効か）
4. 実装（具体的な手順や方法）
5. 応用（他のケースへの展開方法）
6. まとめ（重要ポイントの整理）

3. 下書き作成のコツ（ラフ執筆）

まずは完璧を求めず、以下の手順で進めていきましょう。メモをリスト形式で整理することで、後のAIによる文章化がスムーズになります。

1. 各見出しに対して、思いついた内容をメモ書き
2. メモを階層構造のリストとして整理
3. AIを使って自然な文章に展開
   • プロンプト例：「このメモを読みやすい文章に展開してください」

4. AIを活用した質の向上

記事の完成度を高めるため、以下のようなプロンプトでAIに依頼すると効果的です。

• 読みやすさの改善

  • 「この文章を技術記事として、より簡潔で分かりやすい表現に改善してください」
  • 「初心者エンジニアにも理解できるように説明し直してください」

• 内容の充実化

  • 「この説明に具体的なコード例を追加してください」
  • 「この内容の実践的なユースケースを教えてください」

• 論理展開の強化

  • 「この記事の論理展開で不足している点を指摘してください」
  • 「各セクション間の繋がりを自然にするためのアドバイスをください」

• 文体の統一

  • （Cursor AI Chatで過去記事を参照させて）「私の過去記事の文体を参考に、内容を洗練させてください」
  • 「技術記事に相応しい専門用語の使い方に修正してください」

さいごに

GitHubとZennの連携と、CursorでAIを利用した執筆支援により、エンジニアの技術ブログ執筆への障壁を大きく下げてくれます。

まずは小さな技術記事から始めて、継続的なアウトプットの習慣を作っていきましょう。皆さんの技術発信が、エンジニアライフをより豊かにしていくことを願っています🎉