1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

この記事は何?

2024/06/10 〜 2024/07/17の期間、Qiitaで

が開催されています。

テーマのひとつに

がありました。
テーマに該当するmermaidのxychartで学習進捗を可視化する記事です。

背景

私は現在、別記事に書いた UMTPレベル3という資格試験の学習 をしています。

学習方法としてGitHubのコントリビューションのグラフを使い、学びの習慣をつくることをやっています。
こちらの記事が具体的な手法の紹介です。

この手法で学びの習慣はできてきましたが、

  • 学習の進捗を可視化し、ゴールを見据えて学びたい

と思うようになりました。

現在は技術書のサンプルコードを写経、コミット・プッシュしGitHubのコントリビューションのグラフに記録しています。

この際に学習進捗も更新していけば、

  • 学習進捗の見える化でモチベーションアップ
  • ゴールを意識した学びができる

と思いました。

そこでマークダウンに進捗を表すグラフを表示できないか、と考えました。

学習進捗の可視化

マークダウンでグラフ表示する手段を調べていてmermaidのxychartで実現できそうなことがわかりました。

そこで以下のようなマークダウンを記述し、学習進捗を記録するようにしました。

>* 進捗メモ(2024/6/9 23:26)
>  * サンプルプログラム実施進捗: 19 / 23 = 82 (%)
>  * 練習問題実施進捗: 17 / 23 = 73 (%)
>  * 全体: 36 / 46 = 78 (%)

// 実際は```mermaid と ``` でxychart-betaを括っています。
xychart-beta
    title "Java言語で学ぶデザインパターン入門 第3版の学習進捗"
    x-axis [0601, 0604, 0605, 0606, 0607, 0609]
    y-axis "進捗 (%)" 0 --> 100
    line  [60, 65, 69, 73, 76, 78]
    bar   [60, 65, 69, 73, 76, 78]

プレビューするとつぎのようなチャートが表示されます。

このようなチャートを表示することができ、日々の学習進捗状況を可視化することができました。

学習の進捗状況がパッと見て、把握することができるようになりました。
つぎの効果が得られています。

  • 進捗を上げなければ!、という気になる
  • 頑張っているな、ということがわかり自己肯定感のアップ

個人的に良い施策となりました。

最後まで読んでいただきありがとうございました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?