Qiita 執筆環境

このリポジトリは、Qiitaの記事を快適に執筆・管理するための環境です。 VS Code、Qiita CLI を組み合わせることで、執筆から校正、投稿までのフローをサポートします。

✨ 特徴

• Qiita CLI ベース 公式CLIを使ったシンプルな執筆フロー。
• Textlint 日本語の技術文書をチェック・校正するためのLintツール。執筆中の記事に対して自動的に文章の品質チェックを実行します。
  • 技術用語のスペルチェック（spellcheck-tech-word）: よくある技術用語の誤字を検出します（例: Javascript → JavaScript、nodejs → Node.js）
  • AI生成文章の検出（@textlint-ja/preset-ai-writing）: AIが生成した可能性のある文章パターンを検出し、より自然な表現への改善を促します
  • コマンドラインから npm run lint で実行するか、VS Code拡張機能と連携して保存時に自動チェックが可能です
• 拡張機能整備(VSCode想定) 保存時に自動フォーマットとLint修正を実行します。詳細は拡張機能の使い方を参照してください。
• Dev Container 対応 環境構築不要で、すぐに統一された執筆環境を利用できます。

📁 プロジェクト構造

qiita-workspace/
├── public/          # 記事ファイル（.md）を配置するディレクトリ
├── .textlintrc.json # Textlintの設定ファイル
├── qiita.config.json # Qiita CLIの設定ファイル
└── package.json     # 依存関係とnpmスクリプト

🚀 使い方

1. 環境の準備

このリポジトリをクローンした後、以下のいずれかの方法で環境を立ち上げてください。

ローカルで動かす場合

Node.jsがインストールされている必要があります。

npm install

GitHub Codespaces / Dev Container を使う場合

VS Codeでこのフォルダを開き、「Reopen in Container」を選択するか、GitHub上で「Code」→「Codespaces」から起動してください。

2. 初期設定

Qiitaアカウントとの連携が必要です（初回のみ）。

npx qiita login

指示に従ってアクセストークンを発行し、設定してください。

3. 記事の作成

新しい記事を作成します。

npx qiita new <basename>

4. 執筆・プレビュー

ブラウザでプレビューを確認しながら執筆できます。

npm run preview
# または
npx qiita preview

文章の校正（Lint）を行いたい場合は以下のコマンドを実行します。

npm run lint

5. 画像の扱いについて

記事に画像を追加する場合は、Qiita CLIのプレビュー機能を使用します。

1. npm run preview でプレビュー画面をブラウザで開きます。
2. プレビュー画面内のアップロード機能を使って画像をアップロードします。
3. 生成された画像URLをコピーして記事に貼り付けます。

   ![説明](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/...)

Note Qiita CLI自体には、ローカルの画像ファイル（./images/xxx.pngなど）を自動でアップロードする機能はありません。 そのため、画像は必ずプレビュー画面経由でアップロードしてURLを取得してください。

6. 記事の公開・更新

執筆が完了したら、以下のコマンドでQiitaに公開（または更新）します。

npm run publish
# または
npx qiita publish

📚 ドキュメント

• Qiita CLI & Markdown ガイド: Qiita CLIの詳細な使い方と、Qiita特有のMarkdown記法についての解説です。
• 拡張機能の使い方: 推奨されているVS Code拡張機能の設定と使い方です。
• 執筆効率化Tips: プレビューの画面分割や自動校正など、効率的に執筆するためのヒント集です。

---

📝 利用可能なnpmスクリプト

コマンド	説明
npm run preview	記事のプレビューを起動
npm run lint	文章のチェックを実行
npm run lint:fix	文章のチェックと自動修正を実行
npm run publish	記事をQiitaに公開・更新（画像アップロード含む）

🔧 設定の詳細

Textlintの設定

この環境では次のルールが有効です。

• spellcheck-tech-word - 技術用語のスペルチェック（例: Javascript → JavaScript）
• @textlint-ja/preset-ai-writing - AI生成文章の検出と警告