【導入10 分】 mise & pnpm & GitHub 連携で Qiita CLI をセットアップ！ - 導入編 シンプル版

![ロゴ mise pnpm qiita](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869171/aae9f48f-8787-4316-aae6-8e963f7d7da3.png)

## 目的

mise en place と pnpm で Qiita CLI を導入する。GitHub 連携の設定もする。

## 関連記事

導入が終わって記事を書き始めるときにどうぞ。

https://qiita.com/AMASAShiro/items/5f37430f14536bc17b49

詳細版。わからないことがあるときにどうぞ。

https://qiita.com/AMASAShiro/items/22196acd12f006e66567

## 想定読者

- Qiita CLI を使って記事を投稿したい (GitHub 連携含む)
- mise-en-place や pnpm を使ってみたい
- Homebrew, VSCode, git, GitHub を使える (インストール・設定済み)

## ツール

括弧内は導入時のバージョン。

- **[mise](https://mise.jdx.dev/)** (2025.4.4 macos-x64 (2025-04-15))
- **[Node.js](https://nodejs.org/ja)** (23.11.0)
- **[pnpm](https://pnpm.io/ja)** (10.8.0)
- **[Qiita CLI](https://github.com/increments/qiita-cli)** (1.6.2)
  
- **[Visual Studio Code](https://code.visualstudio.com/)** (1.99.2)
- パッケージマネージャー
  - macOS : **[Homebrew](https://brew.sh/ja/)** (4.4.31)
  - Windows : **[winget](https://learn.microsoft.com/ja-jp/windows/package-manager/winget/)**  
  など

<font color="red">**GitHub 運用**</font>時

- **[Git](https://git-scm.com/)** (2.49.0)

動作確認環境は以下。これを前提に説明する。
Windows ではパッケージマネージャやフォルダパスなどを読み替えてください。

- MacBook Air Retina, 13-inch, 2018 Intel
- MacOS Sonoma 14.7.5

## Qiita CLI

- 自分の PC のエディタで記事がかける
- 記事を書いたらコマンドで Qiita に投稿する
- GitHub 連携では GitHub に記事を反映したら Qiita に自動投稿
- TypeScript のプログラム。Node.js 環境で実行

## 機能

- 記事の作成
- 記事のプレビュー
- 記事の投稿
- 記事の取得

## 運用設計

- 管理方式: **ローカル運用**・ <font color="red">**GitHub 運用**</font>のどちらか
  - **ローカル運用**: 自分の PC で記事管理
  - <font color="red">**GitHub 運用**</font>: GitHub のリポジトリで記事管理
- フォルダ : 以下例
  - **記事フォルダ**: `~/Documents/publish/qiita`
  - **削除記事フォルダ**: `~/Documents/publish/qiita/deleted`
- **記事リモートリポジトリ** : 以下例
  - リポジトリ名 : qiita
  - デフォルトブランチ : main
  - 公開範囲 : Private
  - Add a README file : なし
  - Add .gitignore : None
  - Choose a license : None

:::note warn
- Qiita で削除した記事のファイルが不要なら**削除記事フォルダ**は不要
- **記事リモートリポジトリ**
  - リポジトリ名は**記事フォルダ**名になる (クローン時)
  - デフォルトブランチは `main` または `master`
  - 公開範囲は `Private`, `Public` どちらでもよい
:::

## 導入準備

### フォルダ作成

**ローカル運用**と <font color="red">**GitHub 運用**</font>で手順が違う。
Qiita で削除した記事を PC に残したい場合、**削除記事フォルダ**を作成する。

#### **ローカル運用**

```zsh
mkdir -p ~/Documents/publish/qiita # 記事フォルダ
mkdir -p ~/Documents/publish/qiita/deleted  # 削除記事フォルダ
```

#### <font color="red">GitHub 運用</font>

```zsh
mkdir ~/Documents/publish
cd ~/Documents/publish
git clone 記事リモートリポジトリの url # 記事フォルダができる
mkdir -p ~/Documents/publish/qiita/deleted # 削除記事フォルダ
echo deleted >> .gitignore
```

### Qiita アクセストークン作成

- [Qiita にログイン](https://qiita.com/)
- メニューから【設定】→【アプリケーション】→【個人用アクセストークン】にある【新しくトークンを発行する】をクリック
- 表示された画面で以下の内容を入力して【発行する】をクリック
  - アクセストークンの説明 : なんでも良い 例) github_qiita
  - スコープ : **read_qiita**, **write_qiita** にチェック
- Qiita アクセストークンが表示されたらコピー。なくさないように。知られないように。

![Qiita アクセストークン発行](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869171/ea8eb179-99a4-4213-9393-8824dc06e552.png)

### GitHub にQiita アクセストークンを登録

<font color="red">**GitHub 運用**</font>する時はこの手順を実施する。
Secret の Name は必ず **QIITA_TOKEN** にする。

- [GitHub にログイン](https://github.com/)
- **記事リモートリポジトリ**を表示
- 【Settings】→【Security / Secrets and variables】→【Actions】で表示される画面で【New repository secret】をクリック
  ![GitHub secret 設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3869171/d11b54bb-93d2-4815-9141-5fb9af96eccf.png)
- 以下の内容を入力して【Add secret】をクリック
  - Name : **QIITA_TOKEN**
  - Secret : 発行された Qiita アクセストークン

## Qiita CLI の導入

下記コマンドでツールをインストール・設定する。

```zsh:ツール導入・セットアップと記事フォルダをリモートリポジトリに反映
# mise
brew install mise
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc
source ~/.zshrc
mise --version # 動作確認

# node / pnpm
cd ~/Documents/publish/qiita # 記事フォルダに移動
mise use node@latest
mise use pnpm@latest
pnpm init

# Qiita CLI
pnpm install @qiita/qiita-cli
pnpm qiita init # 初期化。pnpxではエラーになった
pnpm qiita version # 動作確認

# GitHub 運用時は GitHub に反映
git add *
git commit -m "Initial Commit"
git push -u origin main # GitHub Actions のエラー (public がない)は気にしない

# Qiita 認証情報設定
pnpm qiita login
```

以下のメッセージが表示されるので Qiita アクセストークンを入力する。

```zsh: Qiita アクセストークンの入力
以下のURLにアクセスしてトークンを発行してください。（「read_qiita」と「write_qiita」にチェックを入れてください）
  https://qiita.com/settings/tokens/new?read_qiita=1&write_qiita=1&description=qiita-cli
  
発行したトークンを入力: # ここで Qiita アクセストークンを入力
```

## Qiita CLIの設定

限定共有記事を扱う時は設定ファイル `記事フォルダ/qiita.config.json` を変更する。

```json: 変更後の qiita.config.json 例
{
  "includePrivate": true,
  "host": "localhost",
  "port": 8888
}
```

### 補足 Qiita CLI のアップデート

必要があればコマンドを実行する。

```zsh: Qiita CLI アップデートコマンド
pnpm update @qiita/qiita-cli --latest
```

## Qiita CLI 導入完了 - さいごに

とってもシンプルで 10 分で導入できそうでしょ？:smile:
実は[詳細版](https://qiita.com/AMASAShiro/items/22196acd12f006e66567)だと作業が大変そうにみえたのでこの記事を書きました。

記事を書き始めるならこちらをどうぞ。

https://qiita.com/AMASAShiro/items/5f37430f14536bc17b49

# ツールへのリンク

https://github.com/increments/qiita-cli

https://mise.jdx.dev/

https://pnpm.io/

https://nodejs.org/ja

https://code.visualstudio.com/

https://git-scm.com/

https://brew.sh/ja/

https://learn.microsoft.com/ja-jp/windows/package-manager/winget/