採用トップ

テンファイブロゴ
テックブログ

Notion×VSCodeで学習進捗を見える化

はじめに

学習を継続するのは想像以上に難しいですよね。
特にプログラミングやITの学習では、新しい概念やツールが次々と登場し、「今日は何をやったのか」「次は何を学べばいいのか」が見えにくくなり、モチベーションが低下しがちです。
そこで本記事では、VSCodeとNotionという二つの強力なツールを組み合わせ、学習タスクの管理と記録を自動化し、学習の「見える化」を実現するワークフローを紹介します。

  • Notionのタスクデータベース…学習計画から実績までを一元管理
  • VSCodeターミナル＋Gitコミット…日々の作業を自然にログ化
  • Notion API連携（応用）…より高度な自動化

この仕組みを取り入れることで、

  • 学習内容を振り返りやすくなり
  • 継続的に学習できる仕組みが整い
  • 将来のポートフォリオ制作にも活用できる

というメリットがあります。では、具体的な手順を見ていきましょう。

1. Notionのタスクデータベースを用意する

1.1 データベースの作成手順

  1. 新規ページ作成
    • Notionのサイドバーで「＋新規ページ」をクリックし、タイトルを「学習ボード」とします。
  2. テーブル化
    • ページ上で「/database」を入力し、「テーブル - フルページ」を選択します。
  3. プロパティ設定
    • デフォルトの「Name」「Tags」を以下のように編集・追加します。
プロパティ名タイプ説明
Nameタイトルタスク名（例：「Python基礎：for文学習」）
Status選択📝 To Do / 🔧 In Progress / ✅ Completed
Start日付着手日
End日付完了日
Tagsマルチ選択言語や教材名（例：Python, VSCode）
Duration数値所要時間（時間単位）
Repo URLURL関連Gitリポジトリへのリンク

Duration を使うと、どの分野に時間を多く割いたか後から分析できます。

1.2 ビューのカスタマイズ例

  • カンバンビュー
    Statusごとにカードをドラッグ＆ドロップできるので、作業の進捗がわかりやすいです。
    色付きタグを設定すれば、優先度や難易度も視覚的に把握できます。
  • カレンダービュー
    Start/Endを使用してタスクをカレンダー上に表示し、週間・月間の学習計画を視覚化できます。
    「先週は何時間学習したか」を振り返るのに便利です。
  • リストビュー＋フィルタ
    特定のTags（例：「#Python」）で絞り込み、集中したい学習テーマのみ一覧表示します。
    フィルタを保存しておくと、毎回条件設定の手間が省けます。
  • ガントチャートビュー
    Timelineブロックを利用すると、各タスクをバー形式で横並びに表示し、全体スケジュールを俯瞰できます。
    長期プロジェクトのマイルストーン管理に最適です。

2. VSCodeターミナルとGitで学習履歴を残す

2.1 タスクIDの運用ルール

タスクを一意に管理するため、以下のルールでIDを付与します。

TASK-YYYYMMDD-XXX
  • YYYYMMDD…タスク作成日
  • XXX…連番（001, 002…）

例：

TASK-20250618-001: Python入門～変数と型の基礎

IDを固定長にするとソートや検索がしやすくなります。

2.2 Gitコミットメッセージのフォーマット

VSCodeターミナルで次のようにコミットすると、学習ログをそのままGitの履歴に残せます。

git add .
git commit -m "TASK-20250618-001 Python入門～変数と型の基礎"

コミット時にタスクIDと学習内容を含めることで、後から git log --grep=TASK-20250618-001 のように検索が可能です。

2.3 VSCodeタスク設定でコマンド登録

.vscode/tasks.json に以下を追加すると、メニューからワンクリックでコミット操作やNotion更新コマンドを実行できます。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Git: 学習コミット",
      "type": "shell",
      "command": "git add . && git commit -m \"${input:commitMessage}\"",
      "presentation": { "echo": true, "reveal": "always" }
    }
  ],
  "inputs": [
    {
      "id": "commitMessage",
      "type": "promptString",
      "description": "コミットメッセージ（例: TASK-… 学習内容）"
    }
  ]
}

GUIから Run Task… → Git: 学習コミット を選ぶだけで実行できます。

3. README.mdでタスク管理をもっと便利に

3.1 タスク一覧リンク集の作成

プロジェクトルートに README.md を設置し、次のようにNotionのタスクページへのリンク集を書くと、VSCodeからワンクリックで移動できます。

# 学習タスク一覧

| タスクID                 | 内容                            | Notionリンク                                  |
|--------------------------|---------------------------------|-----------------------------------------------|
| TASK-20250618-001        | 変数と型の基礎                   | [リンク](https://www.notion.so/xxx)           |
| TASK-20250618-002        | 条件分岐とループ                 | [リンク](https://www.notion.so/yyy)           |

3.2 Markdownの利点

  • VSCode内蔵プレビューで即座に確認できる
  • 他の学習仲間と共有しやすい
  • ブランチを切ってレビューを受けやすい

4. 応用：Notion APIで完全自動化

4.1 スクリプト例（Pythonバージョン）

VSCodeタスクやシェルスクリプトから呼び出す例です。

#!/usr/bin/env python3
import requests
import os
import sys

NOTION_KEY    = os.getenv("NOTION_TOKEN")
DATABASE_ID   = os.getenv("NOTION_DB_ID")
TASK_PAGE_ID  = sys.argv[1]  # コマンド引数でページIDを受け取る

def update_status(page_id, status):
    url = f"https://api.notion.com/v1/pages/{page_id}"
    headers = {
        "Authorization": f"Bearer {NOTION_KEY}",
        "Notion-Version": "2022-06-28",
        "Content-Type": "application/json"
    }
    data = {
        "properties": {
            "Status": { "select": { "name": status } },
            "End":    { "date":   { "start": __import__('datetime').date.today().isoformat() } }
        }
    }
    res = requests.patch(url, headers=headers, json=data)
    if res.ok:
        print(f"ステータスを『{status}』に更新しました。")
    else:
        print("更新失敗:", res.text)

if __name__ == "__main__":
    if len(sys.argv) < 2:
        print("Usage: complete_task.py <PageID>")
        sys.exit(1)
    update_status(TASK_PAGE_ID, "✅ Completed")

環境変数には NOTION_TOKEN のみでなく、NOTION_DB_ID なども設定しておくと他の操作への拡張が楽です。

4.2 シェルからの呼び出し例

chmod +x scripts/complete_task.py
./scripts/complete_task.py TASK-20250618-001

スクリプトに引数チェックやログ出力を追加すると、運用中のトラブルシュートが容易になります。

4.3 VSCodeタスクへの組み込み

{
  "label": "Notion: 完了に移動",
  "type": "shell",
  "command": "${workspaceFolder}/scripts/complete_task.py ${input:pageId}",
  "presentation": { "echo": true, "reveal": "always" },
  "inputs": [
    {
      "id": "pageId",
      "type": "promptString",
      "description": "完了にするタスクのPage ID"
    }
  ]
}

複数のスクリプトを追加し、「In Progressへ移動」「再開」といった操作もタスク化できます。

5. トラブルシューティング＆ベストプラクティス

  1. 環境変数の管理
    • NOTION_TOKEN や NOTION_DB_ID は .env ファイルと dotenv で安全に管理すると便利です。
      Git管理下に置かないように .gitignore を設定してください。
  2. API制限に注意
    • 無料プランでは1分あたりのリクエスト数が制限される場合があります。スクリプト内でキャッシュを使うか、まとめて処理する工夫をして、必要以上に自動化スクリプトを回さないように設定すると良いでしょう。
  3. コミット粒度の調整
    • あまり細かくコミットしすぎると履歴が煩雑になります。1タスクあたり1～2回程度を目安にすると見通しが良くなります。
  4. Notionデータベースのバックアップ
    • 定期的にCSVエクスポートしてローカルに保存すると、万が一のデータ消失時も安心です。
      ZapierやMakeなどを使い、自動でバックアップするワークフローも構築できます。

おわりに

  • 手軽さ：VSCodeターミナル＋Gitコミットで、日々の学習を自然にログ化できます。
  • 可視化：Notionのカンバン・カレンダー・ガントビューで、進捗を一目で把握できます。
  • 一元管理：コミットメッセージとNotionリンクで、コードと学習タスクをシームレスに連携できます。
  • 拡張性：中級者以上はNotion APIを活用して、さらなる自動化ワークフローを構築できます。

この仕組みをあなたの学習ルーティンに取り入れて、「見える化」の効果をぜひ実感してみてください。継続的な学習が習慣化し、達成感と成果が目に見える形で得られるはずです。

以上です。学習の見える化で、ぜひスムーズな自己成長を実現してください！

参考リンク

採用情報 長谷川 横バージョン
SHARE

blog 関連記事

すべて見る
PHP Code Snippets Powered By : XYZScripts.com