はじめに
エンジニアとして日々の業務をどう管理するか、試行錯誤してきましたが、
VS Code + MDファイルが良さそうなのでまとめます。
こんな人向け
- メモ・タスク・ドキュメントがツールごとに散らばっている
- NotionやOneNoteを使っているが管理しきれていない
- VSCodeを普段使っているエンジニア
- AIとのやりとりをまとめたい
課題
Notion、OneNoteなど複数のツールを使っていたが、タスク管理・メモ・ドキュメントが散らばってしまっていた。
またAIとのやりとりも、会話そのままではなく自分が後から見返しやすい形にまとめ直したかった。
解決策
MDファイルに統一することで一元管理できる。
VS CodeでMDファイルを使って書類管理するメリット
管理面
- ディレクトリで分類・階層化できる
- 完了フォルダへの退避ができる
- ファイル名の工夫で日付順に並べられる
- ファイル名・内容で検索しやすい
- 画面分割できる
- 絶対パスでファイルリンクを貼れる
- Git管理で変更履歴を追える → Gitの練習にもなる
Markdown機能
- プレビューモードで見た目を確認できる
- 画像を貼れる（Paste Image:
⌘ + ⌥ + V） - Markdownをそのまま書けるので記法の練習になる
プレビューの開き方
| 方法 | 操作 |
|---|---|
| ショートカット |
⌘ + K → V
|
| コマンドパレット |
⌘ + Shift + P → Markdown: Open Preview to the Side
|
| 右クリック | タブを右クリック → Open Preview to the Side
|
また、右上のアイコンをクリックすると、入力とプレビューを並列で表示できます。
### 実際のメモの画面
右上の赤枠アイコンをクリック時
※ フォルダ名は記事と一部異なります
主なMarkdown記法
| 機能 | 書き方 |
|---|---|
| 見出し |
# h1 ## h2 ### h3
|
| 太字・斜体 |
**太字** *斜体*
|
| 箇条書き | - item |
| チェックボックス | - [ ] タスク |
| コードブロック | ``` |
| 表 | | 列1 | 列2 | |
| リンク・画像 |
[text](url) 
|
| Mermaid | フローチャート・シーケンス図・ER図など |
ディレクトリ構成(参考)
メモ/
├── ▪️WORK/
│ ├── 00_Daily/ ← 日付ごとにMDファイルを作成
│ │ ├── 0201.md
│ │ ├── 0202.md
│ │ └── images/ ← Paste Imageで自動生成
│ │
│ └── 10_Tasks/ ← Linearの課題1つごとにMDファイルを作成
│ ├── 1151 認証機能.md
│ ├── 1152 ログイン機能.md
│ ├── 1170 チケット1 予約管理機能.md
│ ├── 1170 チケット2 予約管理機能.md
│ └── 1170 チケット3 予約管理機能.md
│
├── ▪️PROJECTS_DOCS/ ← プロジェクト固有の仕様・設計メモ
│ ├── 0105 プロジェクト構成図.md
│ ├── 0107 hono.md
│ └── 0110 prisma.md
│
├── ▪️LEARNING/ ← 学んだことまとめ＋Qiita下書き
│ ├── 0110 VSCode + MDファイルでメモ・タスクを一元管理する.md
│ ├── 0114 コマンド集.md
│ └── 0118 claudeについての学習.md
│
└── ▪️ARCHIVE/ ← アーカイブ
└── 0105-0131/
├── 0101.md
├── 0102.md
└── images/
フォルダ命名ルール
- 親フォルダ：▪️をつけ、番号なし、大文字
- 子フォルダ：番号プレフィックス（
00_,10_...） ※ 後から追加しやすいよう連番ではなく間隔をあけて番号をつける - ファイル名の先頭に日付をつけると昇順で並ぶのでおすすめ（例：
0201.md）
画像の貼り付け
VS Codeの拡張機能「Paste Image」を使うと、クリップボードの画像をMDファイルに直接貼り付けられる。
貼り付け方法(Mac)
- ショートカット：
⌘ + ⌥ + V - コマンドパレット →
Paste Image: Paste Image
setting.json
"pasteImage.path": "${currentFileDir}/images",
"pasteImage.basePath": "${currentFileDir}",
"pasteImage.nameConfig": "yyyy-MM-dd-HH-mm-ss",
"pasteImage.insertPattern": "",
"pasteImage.forceUnixStyleSeparator": true,
この設定にすると、MDファイルと同じディレクトリに images/ フォルダが自動生成され、画像がまとめて管理される。
├── 00_Daily/
│ ├── 0201.md
│ ├── 0202.md
│ └── images/ ← 画像はここに保存される
具体的な使い方
日々のタスクのMDファイル 構成例
# 2025-02-01
## 覚えておくこと（忘れやすいこと）
- すぐ忘れること（例：ボタンを押す、プルリク後に @claude_review を回す など）
## その日やること
-
## やったこと
-
## 気づき
-
## 振り返り
-
タスクのMDファイル 構成例
# 1151 認証機能
## 参考リンク
- [タイトル](URL)
## ソースコード
```ts
// コード
```
## メモ
-
## AIとのやりとりまとめ
-
終わりに
まだ試行錯誤中ですが、参考になれば幸いです。
より良い管理方法があればコメントでアドバイスいただけると嬉しいです！