やっと HTML をマークダウンでノートにまとめ終えた

15 May, 2025

時間めちゃくちゃかかった

始めた日: 3/7
- AI Studio の Gemini Flash Thinking の力を借りて終わらせた
- 12時間ぐらいかかった
微修正し始めた日: 3/13
- ここからが長かった
- どうまとめたらいいのかが定まらずに、AIに質問してずっと試行錯誤を繰り返した
Markdown についてまとめ始めた日: 3/14
- １日半ぐらいかかった
- まだマークダウンでまとめる時の型が定まっていないなかったから、これも後から修正することになる
ずっと試行錯誤していた期間: 3/16 ~ 5/17
終わったと思って、VSCode で見てみた時に直しすべき問題があることがわかった日: 5/16
最終的に終わった日: 5/17
- 実際の表示: に書いた HTML がインライン要素とブロックレベル要素があって、新しい行に表示されるのと同じ行に書かれるのが混在してしまうという問題があり、統一させるために全ての実際の表示: の後ろに <br> タグを付けた
- 実際の表示: に書いたコード例がなぜか変換されていなくて原因を調べたらマークダウンファイルで HTML を直接書くときにインデントしたらコードブロックになるということだったので、全て直した
- <button> 要素の formaction 属性などの form~ 属性のコードが本来なら別々の行にあるべきなのがインラインコードで同じ行に表示されるという問題があり、これには <div> タグで囲み汎用的なブロックレベル要素にして対処した
  - これも全てを見直して結果的に form~ 属性と <label> 要素の form 属性のコードを直したほうがいいことわかって直した
- 今日だけで５回ぐらい見直したんじゃないか
- 疲れた実に疲れた

結局 2ヶ月以上かかった。でもこれは単に HTML をまとめる以上のことをしたとも思う
マークダウンでトピックをまとめる時の基礎となる考え方や型を会得できたことは大きな成果だ
これからはこの型を元にして効率的にまとめることができる

マークダウンで、あるトピックについてまとめる時の型を見つけるまでの過程

Notion が見出し 3 までしか対応していないということで、見出し 3 までしか使わないという方針にした
そしたら、まとめている時に見出し 4 以上にしたいところが出てきた
そこで、見出しをほぼ使わず、本来見出しにしたいところを太文字にしてネストで構造を表す方針にした
ここで自分の中でこのアイデアは良いと思いこれがこれから自分がノートを取る時のスタンダードになると信じていた
それで、ノートが長くなるにつれて全体像を把握したいという欲求が出てきた
ノートの一番初めに目次をコードブロックで手作業で書いた
だがやっぱり 1 クリックでその場所へ飛びたいということと、新しいことを書くたびにいちいち新しい見出し相当のものを追加しなければならないという面倒くささが徐々に積もってきた
そこで Notion に見出し 4 以上のものが書かれたマークダウンファイルをインポートしたらどうなるのかを AI に聞いてみた　そしたらそれは自動的に見出し 3 になりますとのことだったので、それでいいんじゃないかと思い始めた　互換性のある純粋なマークダウンファイルには、本当に自分が書きたい構造で書く　そして Notion にはバックアップ的な役割でノートを書いておく　この考えになれたことで、見出しを使って書こうと考えを変えることができた　ここで考えを変えたのは大正解だった
マークダウンファイルに書いた HTML コードもちゃんと変換されるということを知り、コードブロックだけではなくて、そのまま HTML コードを書いて、後で見返した時に一目でわかるようにしたほうがいいんじゃないかという考えが出てきた
全部修正した
そしたら今度はそのコード例は、後で見返した時に一目でわかるくらい十分に書けているのかという疑問が湧いた
全部修正した
結局試行錯誤しながら全部を通して見て修正するというのを 20 回以上はしたと思う　頭おかしくなりそうだ

間違っていたこと

Notion が見出し 3 までしか対応していないということで、純粋なマークダウンファイルでも見出し 3 までしか使わないと決めたこと
見出しを使わずに太字とネストだけでまとめようとしたこと

学んだこと

あるトピックについてマークダウンで、まとめる時の情報の整理の仕方を身につけることができた
あとから見直しとか修正する時が一番時間かかる
- 後から直せばいいかの精神が後に多大な労力を要するようになる
Markdown について多く学べた
- コードブロックをネストできること
マークダウンがいるで、HTML コードを書いて HTML として変換させたい場合、インデントするとコードブロックとして認識されるので、インデントしてはいけない
コードの実際の表示を書く時、HTML のコードにはブロックレベル要素とインライン要素があるから改行して書いたとしても、インラインコードの場合は改行されずに表示されてしまう
- これを防ぐために 実際の表示: の後に <br> タグを書くと良い
実際の表示: のところにコード例をインデントが入った状態でそのまま書いてしまうとマークダウンパーサーがそのインデントをコードブロックの合図と勘違いしてしまい HTML に変換しない
- 実際の表示: に書くコードだけインデントをなしにする
- コードブロックのコード例のところはコードを見やすくするためにインデントを入れたほうが良い
- これはマークダウンファイルに HTML を直接書く時によく起こることらしい
マークダウンを処理するソフトウェアによって表示は異なるということ
- Obsidian での処理の仕方と VSCode の処理の仕方は違う
- ある一つのソフトウェアだけを見るのではなく、互換性がある書き方をするのが良い
見出しに、ネストした番号順をつけることで、目次で一瞬で構造を理解できるようになる
ほぼ同じことを書く場合やしっかり理解したい場合には別の所にまとめて書くのが良い

時間がかかった要因

最初にあやふやなまま進めてしまったがために、後で修正しなければならない範囲が膨大になってしまった
- コード例を中途半端に書いたことで後から全て修正する羽目になった
- 同じように書いたところを直す時にそれら全てを直さなければいけなかった
  - 全部直したか直してないのかわからなくなる
もうすでに 80% くらいまとめ終わって後は微修正、見直しをするという段階で新しい知識を学ぶことはあまりないからそこから全く楽しくなくなったので、取り組む意欲がなくなってしまった

追記

一段落ついたので、色々なことを始めようと思う。毎週金曜日にその週に何をやったのかをブログに書いていこうと思う
今こうやってブログを書いてて思うが、いつ頃何をしていたのかほとんど覚えていない
ただ疲労感とこんなに時間がかかったという焦りと少しの達成感があるだけだ
ブログを1週間ごとに更新したら自分が今週何をして来週は何を終わらせたいかという明確な目標ができると思う