237
296

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Markdownで勉強メモしたり プログラマ以外にもおすすめ

Last updated at Posted at 2020-11-21

Markdownでメモするといろいろ便利って話です。
gitでも管理しやすいし、githubに草生やすのもモチベーションになります自分の場合。

エディタ(メモ帳代わり)はVSCodeを使います。
非エンジニアでも英語学習とかにも使えそうです!

Markdown

マークダウンとは、アメリカ合衆国、フィラデルフィア出身のライター・コラムニストであるジョン・グルーバー(John Gruber)によって、2004年に開発された「フォーマット」のことを指します。
デジタル文章を作るときに使うHTML(HyperText Markup Language)などのマークアップ言語を、簡略化できるようにプログラムされました。
https://backlog.com/ja/blog/how-to-write-markdown/#i

QiitaやWikipediaもMarkdownで書くのがデフォルトになっています。
簡単に構造化されて統一感のある文章が書けます。

書き方はこのチートシートが便利です。

https://qiita.com/kamorits/items/6f342da395ad57468ae3

VSCodeインストール

ここからダウンロードしてください。
https://code.visualstudio.com/

Screen Shot 2020-11-21 at 23.19.14.png
左のタブからブロックの絵をクリックして、Extentionsの検索窓でmarkdownと記載すると、
「Markdown All in One」があるのでこれをインストールします。

好きなファイル名で拡張子を.mdで保存して準備完了です。

画像のURLを貼ることで表示できる

Screen Shot 2020-11-21 at 23.23.15.png

画像の表示させ方.txt
![画像名](URL)

こうすることで、ネット上のファイルもエディタ内で表示できるので便利です。
何か勉強していて、イメージのつきにくいものなどをGoogleで検索して、そのまま貼り付けることができます。
プレビューは右上の虫眼鏡アイコンを押すと出てきます。
Screen Shot 2020-11-21 at 23.22.37.png

URLは右クリックでコピーできます。
Screen Shot 2020-11-21 at 22.57.56.png

英語学習の場合はこんな感じでしょうか。
Screen Shot 2020-11-21 at 23.44.10.png

画像検索すればどういうシチュエーションで使われているかが想像しやすいので、
いざ英語を話したいときにイメージがパッと出てくる様になるかなと期待してます。
Atsueigoで同じ様なノートの取り方が解説されてたので笑
(markdownでメモりはじめたのが最近なので効果はまだわかりません!)

Mermaid.jsで描画もできる

Screen Shot 2020-11-21 at 23.57.43.png
カテゴリとか関係を覚えるときに、グラフ化することもできます。
PowerPointでぽちぽちするより楽だと個人的には思います。

グラフ描き方.txt

    ```mermaid 
    
    graph TD; #上から下へ描画
    A-->B;
    A-->C;
    B-->D;
    C-->D;
    
    graph LR; #左から右へ描画
    基本ソフトウェア-->制御プログラム
    基本ソフトウェア-->言語処理プログラム
    基本ソフトウェア-->サービスプログラム
    subgraph Kernel # 枠で囲ってグルーピングできる
      制御プログラム---Proccess
      制御プログラム---TaskManagement
      制御プログラム---MemoryManagement
    end
    
    ```

VSCode上では、下記の2つのExtentionを入れています。
Screen Shot 2020-11-22 at 0.01.56.png

シーケンス図とかも描けます。
Screen Shot 2020-11-22 at 0.15.06.png

詳しくは下記…

mermaid.js参考
https://mermaid-js.github.io/mermaid/#/
https://qiita.com/caesar_cat/items/e8a116a585863633d15a

237
296
4

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
237
296

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?