マークダウン講座

📝 マークダウン講座 1.5期生 & TA 松井 敏

自己紹介 • 🧑 松井 敏(まつい びん) • 🧑‍💻 元ゲームプログラマ & 元Windowsソフトウェアプログラマ • 👜 HACARUS C#&CI/CD メンター(副業) • 🏆 Microsoft MVP for Developer Technologies 2012-2025 • 🖥️ Unity5 3Dゲーム開発講座 ユニティちゃんで作る本格アクションゲーム • 💻 C#読書会主催、Greek Alphabet Software Academy TA • ❤️ プログラム、マンガ、料理、睡眠、妻&子供

🤔 クイズ：文章で最も簡単に強調する方法は？ Q：文章を書く際、重要な部分を強調したい場合、最もシンプルで効果的な方法は何でしょうか？ A：太字にする 小説、雑誌、マンガなどでも多用される表現方法です

📝 しかし、プレーンテキストでは... 普通のテキストエディタで文章を書く場合： • 太字表現ができない • 装飾機能が限られている • 見た目で強調することが困難 この文章で重要な部分はどこでしょうか？ すべて同じ見た目で区別がつきません。 メモ帳のようなシンプルなエディタでは装飾に限界がある

❌ 従来ツールの問題点 • MSワードやGoogleドキュメントは文章への装飾ができる • 特定ソフトへの依存が発生 • 簡単な文章を殴り書きしたい場合などではツールを起動するのも手間 • 他エディタへのコピペで装飾が失われる つまり、昔からあるツールでも文章を「装飾したい」というモチベーションは強かった

🌐 HTMLという解決策 HTMLを使えば文章の装飾が可能： <p>この<strong>重要な部分</strong>を強調できます</p> しかし問題が... • 記述が複雑で覚えにくい • 他のエディタにコピペすると装飾が失われる • 専門知識が必要 HTMLは強力だが、日常的な文章作成には不向き

📖 マークダウンとは？ • 文章を記号で強調・整理するシンプルなルール • 見やすく、使いやすい文章表現 • 誰でも簡単に習得可能 元々htmlをシンプルに書けるルールとして作られたのでマークダウンの表現は全てhtmlでも可能

✅ マークダウンの利点 • 文章構造をルール化 • 色んなツールで同じ形で表示 • テキストファイルとして軽量 • 記号で恐らく装飾をするのに最も短く書ける書き方 最少で書けて、かつ、テキストファイルなのがエンジニアに人気の大きなポイント

📁 ファイル形式での利用 • .md拡張子で軽量保存 • 対応エディタで即座に表示 • テキストなのでGitの差分も見やすい 特にGit管理されているプロジェクトのテキストは自分は全てmdで作る

💻 エンジニア領域での普及 • GitHub - READMEファイルやドキュメント • Qiita,Zenn - 技術記事の執筆 • はてなブログ - マークダウン形式選択可 • Connpass - 詳細はマークダウンで記入 • Discord - チャットでも使える • Notion - 貼り付け対応 一見対応してないツールでもコピペしたら貼れるケースもある

🤖 AI・LLMとの相性抜群 • LLMがマークダウンルールを理解 • 見出しや強調表現を正確に認識 • 最も確実でシンプルな書き方 強調表現などは「」などでも大体理解してそうだけど、明確にルール化されていると、認識する確率が高くなる

📝 マークダウンエディタ • Visual Studio Code • GitHub • HackMD • Pinetree • 個人的には右にプレビューが出るものが使いやすい • ツールによっては記号表現が強調表示になったり、入力補完があったりする • Helpがあるものや、ツールボタンなどが使えたりもする • 一旦説明を続けます。後でみんなで触ってみましょう

🗂️ 今回学習する基本ルール • Headers (見出し) - 文章の構造化 # Headers • Lists (リスト) - 項目の列挙 - List • Links (リンク) - 外部参照の挿入 [Title](Link) • Blockquotes (引用) - 他者文章の引用 > 引用文 空白も大事です。リンクは僕もたまに間違えます。。()を先に書いたり。

🎨 基本記法の種類 • 太字・斜体 - 文字の強調表現 • 打ち消し線 - 削除や訂正の表現 • コードの挿入 - プログラムコード表示 • 水平線 - セクション区切り • 画像の埋め込み - 視覚的情報追加 • 表 (テーブル) - データ整理表示

🚀 特殊機能 (プラットフォーム依存) • 数式 - LaTeX記法での数学表現 • Mermaid図 - フローチャートや関係図 • 楽譜 - 音楽記譜 • チェックボックス - TODOリスト作成 • 絵文字 - :のような表現

💪 習慣化の効果 • マークダウンが身につくと常に使いたくなる • 非対応エディタでもマークダウンで記述 • 慣れてくると脳内でコンパイルされて読めるようになる

👀 構造化文章の読みやすさ • ルール化により専用エディタ不要で読みやすい • 最重要は#の見出しと-のリスト • これだけで資料的な形になる

🎯 実用例 • 日常的な文章作成に最適 • シンプルで効果的な表現手法 • 今日のこの発表資料もマークダウンから作成！

まとめ • 文章は装飾したい • 色んなツールで同じ形で表示したい • シンプルなルールで記入したい • テキストファイルとして手軽に書ける • AI・LLMとの相性抜群 • 色んな形式に出力できる

📝 マークダウンエディタ実践 • みんなで実際にマークダウンエディタをさわってみましょう！！ • HackMD • 空白大事 • #と-だけで文章を書く • #,##,### • -の階層化 • 区切り線 • 最近は絵文字もトレンド • 書いた単語にリンクをはってみる • 先頭にキャッチ画像を貼ってみる • 殆どのエディタでコピペが可能 • 引用も使いやすい • コードが書けるのも強み``````