メモは仕事中、毎日のようにとっています。しかし、自己流でメモを作成することが多く、他の人のやり方をまねたり改善することは少ないのではないでしょうか？自分も今まで自己流でメモを取っていて、整理されたメモを取ることはありませんでした。
そこで、メモの取り方を見直してみることにしました。そこで見つけたのが「markdown」です。markdown とメモが相性が良いのではと思い採用してみました。
本稿では、markdown でメモを取る理由を説明し、VScode で markdown を書ける設定を紹介します。そして、よく使う markdown 記法を紹介します。
メモを取る理由って何？
まず、そもそも仕事中にメモを取る理由は何でしょうか？大きく分けると 2 つあるかと思います。
1 つは「記録を残すため」です。仕事中様々にシーンで発生する見聞きした内容を記録しておいて、後から見直せるようにします。
もう 1 つは、「思考を整理するため」です。何かドキュメントで成果物を作るタスクの時、まず指示内容や前提条件を書き出したり、論の展開をメモに書き出して、思考を整理したりします。一見、メモ取ることはあまり重要ではないようにも思えますが、上述したようにタスクを円滑に進めるための基盤になっています。
どんなメモを取るの？
では、もう少し具体的にどんなメモを取りますか？自分の場合、メモは 4 種類あります。
- TODO リスト
- tempInfo
- 落書き帳
- 会議メモ
TODO リストは作業の一覧です。タスクに着手する前に 1 つのタスクを分割して進めるときに、箇条書きにしてタスクの全量を洗い出します。1 つのタスクが完了したら、タスクごとに「ok」などと追記してそのタスクが完了したことを表現します。朝会などで作業進捗を報告するときのメモにもなります。作業が途中で一日の業務を終えるときは、どこまで進んだのか、残りの作業は何か軽くメモを残しています。
tempInfo は、チャットで共有されて流れてほしくない情報やよく使う語句/URL などを一時的にまとめておく備忘録です。ブラウザのお気に入り登録するほどではないけど、時々使う URL などを備忘録として残しています。
落書き帳は、思考を整理するための自由なスペースです。頭の中で考えるより、書き出して考えた方が早いことが多く、すぐに試行錯誤する環境をつくるために落書き帳としても使用しています。
4 つ目は「会議メモ」です。会議に出席して議論の要点を書き記したり、決定事項・注意事項・宿題事項など記録しておきます。
メモの種類は 4 種類と書きましたが、実際には TODO リストと tempInfo をメモアプリで 1 ファイルにまとめて書いたりしてました。常時、メモアプリで 2~3 シートくらい同時に開いて用途によって画面を切り替えるような運用をしていました。使っていくとごちゃごちゃしてきます。。
毎日使っていれば情報が多少散らかってもわかりますが、何か月か後に見返すと断片的な情報の羅列でわかりづらさもありました。（自分で書いたメモにも関わらず。。）そこで、もう少しうまくメモをとれる仕組みを考えようと思いました。
会議メモと markdown は相性がいいのではないか？
いろいろ検討した結果、markdown と会議メモは相性がいいのではないかと思うようになりました。まず、そもそも markdown とは文書を記述するための軽量マークアップ言語のひとつです。
日本語 Markdown ユーザー会では、以下のように説明しています。
Markdown（マークダウン）は、文章の書き方です。デジタル文書を活用する方法として考案されました。特徴は、
- 手軽に文章構造を明示できること
- 簡単で、覚えやすいこと
- 読み書きに特別なアプリを必要としないこと
- それでいて、対応アプリを使えば快適に読み書きできること
などです
このような引用した文章を見ながら、自分の感想も踏まえて markdown の特徴をまとめると、以下のようになります。
1. 情報を構造化しやすい（書き手視点）
2. 直感的に読める（読み手視点）
1 つの目の「情報を構造化しやすい」について、markdown では「#」を用いて見出しをつけることができます。書き手は、この見出しをつけて記載することで、文章に階層を明示することができ、情報の整理に一役買ってくれます。
2 つ目の「直感的に読める」について、markdown で書かれた文章を（例えば VScode で）プレビュー表示させると、見出しは大きな文字で表示されたり、箇条書きをする場合は自動で「・」をつけてくれたりしてくれます。派手さはあまりありませんが、シンプルで読みやすい見た目で表示されます。
1 つ目の特徴である構造化と相まって、読み手は予測しながら文章を読むことができ、直感的に文章を把握することができます。（あと、ちょっとかっこいいという理由は内緒です）
＊
先ほどまでに「どんなメモを取るのか？」を整理し、4 種類のメモがあると述べました。この中で、仕事をする上で、メモが一番効果を発揮するするのはどれでしょうか？
自分は 議事メモ だと思います。発言録とは違って、議事メモには開催日や参加者のような基本情報から、決定事項や宿題事項、意見の要約など議論の要点を記録します。議事メモは後から見直して、次の自分のアクションのインプットになったり、知識を忘れないような補助をしてくれます。会議メモは認識合わせのためにチーム全体に共有されることもあり、重要な地位にあります
そのため、議事メモを書いて残すことはまず大事なことです。そして、会議中に情報を整理しながら聞いたり、後から見直してわかるようにすることもさらに大事です。
この「会議中に情報を整理しながら聞いたり、後から見直してわかるようにすること」に刺さるのが markdown です。
書き手側の視点で考えると、markdown の記法にしたがって議事メモを書けば、情報を整理しながら（構造化しながら）話を聞くことになります。そして、読み手側の視点で考えると、書いた議事メモを markdown のプレビュー表示などで確認すれば、直感的に文章を把握することができます。このような理由から、メモを一番効果的に活用できる会議メモと、markdown は相性がいいのではないかと思うようになりました。
その他のメリット
markdown でメモを取ることのメリットは他にもあります。例えば、以下のようなものです。
- Git 管理がしやすい
- 他の形式（PDF,html など）に変換しやすい
- VScode と相性が良い（使い慣れたエディタで文章を書ける）
- 表現としてできることに制限がある（細かい装飾とな）ため、余計なことを考えなくても済む（見た目に時間をかけるのではなく、考える時間に集中できる）
個人的には、「表現としてできることに制限がある（細かい装飾が難しい）ため、余計なことを考えなくても済む」が大きなメリットに感じています。見た目を整えるのは大事なことですが、限度があることによってやりすぎないことで時間を節約できるように感じるからです。また、Git 管理ができるので、Git に慣れたエンジニアからするとメリットが大きいかもしれません。
デモンストレーション
markdown で書いた議事メモをサンプルとして用意しました。編集画面とプレビュー画面です。編集画面では、##や-を使っているのがわかりますね。あとは空行が多くて文章があまり詰まっていないことも印象に残るでしょうか。プレビュー画面では、見出しがはっきり見えて、文章に階層があるのが一目瞭然です。
markdownの編集画面
## 240605\_会議議事録
- 日時:2024/06/05
- 場所:オンライン
- 参加者:田中太郎, 鈴木一郎, 佐藤花子
- アジェンダ:
1. 要件定義の確認
2. CMS 機能要件の検討
3. 次回会議の日程調整
## 議題
1. 要件定義の確認
2. CMS 機能要件の検討
3. 次回会議の日程調整
## 決定事項
- 要件定義の大枠を確認し、次回までに詳細を詰める。
- CMS の主要機能として、ユーザー管理、コンテンツ管理、SEO 対応機能を含めることを決定。
- 次回会議の日程を 2024 年 6 月 12 日に設定。
## 宿題事項
- 田中太郎: CMS 機能要件の詳細をまとめる。
- 鈴木一郎: 現行システムの調査を行い、移行に関する課題を整理する。
- 佐藤花子: UI/UX デザインの参考資料を収集する。
## 議論
- 要件定義の確認
- プロジェクトの目的とスコープについて再確認し、全員が共通認識を持つ。
- 各チームメンバーからのフィードバックを反映し、要件を微調整。
- CMS 機能要件の検討
- ユーザー管理機能の詳細について議論し、権限管理の必要性を確認。
- コンテンツ管理機能については、記事投稿、編集、削除の基本機能に加え、カテゴリ分類機能を検討。
- SEO 対応機能については、メタタグの自動生成とサイトマップの自動更新を含めることを決定。
- 次回会議の日程調整
- 全員のスケジュールを確認し、次回会議の日程を 2024 年 6 月 12 日に設定。
- 次回までに各自の宿題事項を完了させることを確認。
＊
markdownのプレビュー画面↓
240605_会議議事録
- 日時:2024/06/05
- 場所:オンライン
- 参加者:田中太郎, 鈴木一郎, 佐藤花子
- アジェンダ:
- 要件定義の確認
- CMS 機能要件の検討
- 次回会議の日程調整
議題
- 要件定義の確認
- CMS 機能要件の検討
- 次回会議の日程調整
決定事項
- 要件定義の大枠を確認し、次回までに詳細を詰める。
- CMS の主要機能として、ユーザー管理、コンテンツ管理、SEO 対応機能を含めることを決定。
- 次回会議の日程を 2024 年 6 月 12 日に設定。
宿題事項
- 田中太郎: CMS 機能要件の詳細をまとめる。
- 鈴木一郎: 現行システムの調査を行い、移行に関する課題を整理する。
- 佐藤花子: UI/UX デザインの参考資料を収集する。
議論
- 要件定義の確認
- プロジェクトの目的とスコープについて再確認し、全員が共通認識を持つ。
- 各チームメンバーからのフィードバックを反映し、要件を微調整。
- CMS 機能要件の検討
- ユーザー管理機能の詳細について議論し、権限管理の必要性を確認。
- コンテンツ管理機能については、記事投稿、編集、削除の基本機能に加え、カテゴリ分類機能を検討。
- SEO 対応機能については、メタタグの自動生成とサイトマップの自動更新を含めることを決定。
- 次回会議の日程調整
- 全員のスケジュールを確認し、次回会議の日程を 2024 年 6 月 12 日に設定。
- 次回までに各自の宿題事項を完了させることを確認。
執筆環境を整えよう
ここからは、VScode で markdown でメモをとれるような執筆環境を整えていきましょう。VScode のインストール手順は他の記事に譲り、本書で VScode はインストール済・日本語化は完了している想定で進めます。
まず、以下の拡張機能を VScode にインストールしていきましょう。
- Prettier - codeFormatter
「Prettier」はフォーマッターです。shift-Alt-F を押下すると、文章を整形してくれます。形を整えるのは地味にめんどくさいので助かります。
- markdownLint
「Prettier」は Lint です。markdown の記法にそぐわないところを指摘してくれます。黄色い波線が記法にそぐわない目印です。文法は大事です。
- Markdown PreviewEnhance
「Markdown PreviewEnhance」は、ライブレビューをしたり、インライン、UML、PDF など他形式にエクスポートしてくれます。
- Markdown All in One
「Markdown All in One」は、markdown に必要なものが詰まっています。入れておきましょう。
また、VScode にプラグインをインストールするときにのポイントは、インストールしたら一度 VScode を閉じて再起動させることです。インストールしてすぐに設定が反映されないことがあり、再起動させると目的のプラグインが使えるようになったりします。
＊
これで VScode に markdown でメモをとれる環境が整いました。試しにファイルを作成していきましょう。
- VScode の「ファイル」→「新しいテキストファイル」を選択します。
- 新しいテキストファイルを「sample.md」というように、「任意のファイル名＋.md」という名前で保存します。「.md」という拡張子がポイントです。この拡張子で markdown ファイルであることを判断します。
- 以下のサンプルテキストを張り付けてみましょう
# サンプルテキスト！
## メモを取るときに使おう
- 書いてよし
- 見てよし
- 保存もしやすくてよし
4.画面上で右クリックをして「markdown preview Enhance」を押下すると、プレビュー画面を表示することができます。
ちなみに、作業をするときは、アウトライン、編集画面、プレビュー画面の 3 つの画面を同時に開いておくと作業しやすいです。また、VScodeの検索ではgrep検索というフォルダを横断した検索ができるもの便利な機能です。
よく使う markdown の記法を紹介
よく使う markdown の記法を紹介します。
見出し
#[スペース]で見出しになります。#の数を変えると見出しの大きさを変えることができます。
# 見出し 1 です
## 見出し 2 です
### 見出し 3 です
見出し 1 です
見出し 2 です
見出し 3 です
箇条書きリスト
-または*、+の後にスペースを置くと箇条書きリストを作成できます。
- アイテム 1
- アイテム 2
- サブアイテム 2.1
- サブアイテム 2.2
- アイテム 3
- アイテム 1
- アイテム 2
- サブアイテム 2.1
- サブアイテム 2.2
- アイテム 3
コード
バッククォート3つで囲むとコードブロックを作成できます。シンタックスハイライトのために言語名を指定することもできます。
\```
print("Hello, World!")
\```
print("Hello, World!")
水平線
3つ以上の-、*、_を連続して入力すると水平線が作成できます。
---
リスト表示
番号付きリストは数字とピリオドの後にスペースを置くと作成できます。
1. 項目 1
2. 項目 2
3. 項目 3
- 項目 1
- 項目 2
- 項目 3
引用
>を使うと引用ブロックが作成できます。複数行にも対応しています。
> これは引用です。
>
> 引用の続きです。
これは引用です。
引用の続きです。
リンク
[リンクテキスト](URL)でリンクを作成できます。
[Google](https://www.google.com)
チェックボックス
先に説明したチェックリストと同様です。
- [ ] チェックなし
- [x] チェック済み
- チェックなし
- チェック済み
テーブル
|と-を使ってテーブルを作成できます。:を使うと列の揃え方を指定できます。
| 見出し 1 | 見出し 2 |
|:--------:|---------:|
| 内容 1 | 内容 2 |
| 内容 3 | 内容 4 |
| 見出し 1 | 見出し 2 |
|---|---|
| 内容 1 | 内容 2 |
| 内容 3 | 内容 4 |
注釈
脚注は、[^1]を使って本文に注釈を挿入し、文末に注釈を追加します。
これは注釈付きの文です[^1]。
[^1]: これは注釈の内容です。
これは注釈付きの文です1。
太字
**または__で囲むと太字になります。
**これは太字です**
__これも太字です__
これは太字です
これも太字です
斜体
*または_で囲むと斜体になります。
*これは斜体です*
_これも斜体です_
これは斜体です
これも斜体です
訂正線
~~で囲むと訂正線（取り消し線）が付きます。
~~これは取り消し線です~~
これは取り消し線です
文字色
markdownでは色を変えることができないので、cssで色を変えます。ものによっては色を変更できない場合があります。
<span style="color: red; ">赤文字</span>
赤文字
インラインコード
バッククォート（`）で囲むとインラインコードになります。
これは `インラインコード` です。
これは インラインコード です。
画像
 で画像を挿入できます。
エスケープ文字
Markdownの特殊文字を表示したい場合は、バックスラッシュ（\）を使ってエスケープします。
\*これはエスケープされたアスタリスクです\*
*これはエスケープされたアスタリスクです*
行内改行
行末に2つのスペースを入れると改行されます。
行内改行を使うには、行末に
2つのスペースを入れます。
行内改行を使うには、行末に
2つのスペースを入れます。
HTMLタグ
MarkdownはHTMLタグもサポートしています。HTMLタグを使うとさらに詳細なフォーマットが可能です。
<p>これはHTMLタグを使った段落です。</p>
これはHTMLタグを使った段落です。
参考文献
Qiita midori-game（2021）「VSCode と Git の連携、Github への push まで（初心者向け）」, https://qiita.com/midori-game/items/0abf0013a70790518738 2024年06月17日アクセス.
classmethod のんピ(2021)「自己流の手順書フォーマットを公開してみた」,https://dev.classmethod.jp/articles/non-97-operation-manual/ 2024年06月17日アクセス.
Qiita kumapo0313 (2018)「Visual Studio Code で Markdown 編集環境を整える」,https://qiita.com/kumapo0313/items/a59df3d74a7eaaaf3137 2024年06月17日アクセス.
Qiita kitfactory(2017)「 Visual Studio Code + Markdown Preview Enhanced はチームでデファクト化したい Markdown 環境だ！、と思う (2017/10 月時点)」,https://qiita.com/kitfactory/items/2fde799fa092f0d8f0f1 2024年06月17日アクセス.
Qiita tomo_makes(2016)「【ドキュメントが書きたくなる】Markdown ライブプレビュー + インライン数式/UML/図表 + 綺麗に PDF/Word エクスポートまで」,https://qiita.com/tomo_makes/items/da4e8fe7d8cf168b545f 2024年06月17日アクセス.
「NotePM」ブログ編集局「Markdown 記法/書き方（見出し・表・リンク・画像・文字色など）」,https://notepm.jp/help/how-to-markdown 2024年06月17日アクセス.
-
これは注釈の内容です。 ↩