はじめに
下書きがいっぱいだったので、Qiitaの記事を作成・投稿するアプリを作りました
開発環境
- MacBook Air M1, 2020
- Cursor 2.1.42
- nvm 0.39.7
- Node.js 22.4.0
フォルダ構成
frontend: Vite + React + TypeScript のフロントエンド
backend: Express + TypeScript のバックエンド
my-qiita/
├── README.md
├── backend/
│ ├── package.json
│ ├── package-lock.json
│ ├── tsconfig.json
│ ├── README.md
│ └── src/
│ ├── index.ts
│ └── routes/
│ └── articles.ts
└── frontend/
├── package.json
├── package-lock.json
├── tsconfig.json
├── tsconfig.app.json
├── tsconfig.node.json
├── vite.config.ts
├── eslint.config.js
├── index.html
├── README.md
├── public/
│ └── vite.svg
└── src/
├── main.tsx
├── App.tsx
├── App.css
├── index.css
└── assets/
└── react.svg
導入
💬 frontendフォルダに vite, react, ts アプリをセットアップして
cd frontend
npm create vite@latest . -- --template react-ts
> npx
> create-vite . --template react-ts
│
◇ Use rolldown-vite (Experimental)?:
│ No
│
◇ Install with npm and start now?
│ No
│
◇ Scaffolding project in /frontend...
│
└ Done. Now run:
npm install
npm run dev
フロントエンドの起動
npm install
npm run dev
localhost:5173にアクセス
💬 Qiitaの記事を作成、投稿するために、左側にマークダウンを記入、右側にプレビューするページを作成
依存関係のインストール
cd frontend
npm install react-markdown remark-gfm
-
src/App.tsx- メインコンポーネントの更新 -
src/App.css- スタイルの更新 -
src/index.css- グローバルスタイルの更新
💬 投稿するボタンは動く？
- 完全版: Qiita API連携（将来的に）
- バックエンドAPIを用意し、実際にQiitaへ投稿する機能を実装。
- タイトル、タグ、本文などの入力欄を追加
- バックエンドAPIエンドポイントを作成
- Qiita API v2 との連携
💬 完全版を作成お願いします
-
frontend/src/App.tsx- 完全版 -
frontend/src/App.css- スタイル更新 -
backend/package.json- 新規作成 -
backend/tsconfig.json- 新規作成 -
backend/src/index.ts- 新規作成 -
backend/src/routes/articles.ts- 新規作成 -
backend/.env.example- 新規作成 -
backend/.env- 新規作成（.gitignoreに追加） -
backend/.gitignore- 新規作成
cd backend
npm install
.envファイルを作成し、Qiitaアクセストークンを設定
QIITA_ACCESS_TOKEN=your_qiita_access_token_here
PORT=3001
NODE_ENV=development
開発サーバー起動
npm run dev
記事を入力して投稿してみましょう！
リポジトリはこちら