📔

Notionでプログラミングノートを作ってみた

commits3 min read 12

Notionとは?

Notionは2018年に登場したオンラインメモツールです。度々 Evernoteと比較されるサービスですが公式が「オールインワン・ワークスペース」を大きく掲げており、現在とても注目されているツールです。Evernoteからの乗り換えもしやすく、「データベース」という仕組みで情報管理ができるため、とても自由度が高いメモツールになっています。

https://www.notion.so

私の運用方法 - プログラミングノート風データベース

私はNotionの存在を2020年初頭に知り、自分のWikiとして運用しています。そこでNotionの「データベース」という機能が、個人開発をする上で備忘録の執筆、開発の参考にした記事のリンクをまとめるのにとても便利だったためご紹介します。私はプログラミングノートのように自分の知見や、詰まったところをまとめておきNotionのページを見れば解決できるようにしています。情報の一元管理ができると一箇所で情報のインプットとアウトプットができるため、生産性の向上に繋がります。

Notionテンプレート公開

今回作成したページを直感的に触ってカスタマイズ可能なテンプレートを用意しました。

https://festive-island-d6d.notion.site/MyDevelopLog-template-4a42841dedaf4ae6b5e1a8f1cd17484e

最低限ではありますが、サンプルとしていくつか技術ごとのページを用意しています。ページ右上メニューからDuplicateを選択しNotionのWorkSpace内に複製してお使いください。

カテゴリの追加やページの追加もテンプレート内のカテゴリやページをそれぞれのページ複製することで自由にカスタマイズできます。情報を追加したりページを増やすなど使いやすいようにカスタマイズして使ってみてください。新規ページを追加した場合は開発備忘録や参考記事の方にもタグを追加、ページテンプレートを作成することで技術毎に情報の絞り込みができるようになります。

作成したページ

プログラミングノートトップページの画像
トップのページ すべての親ページとなります

この下に技術別でページを子ページとして配置しています。画面内の項目数が多いですが、1ページの中にすべてのリンクを入れる形で自分が学習したことのある技術をジャンル・カテゴリごとにまとめています。カテゴリとして分類が怪しいものもありますが、自分だけが使うページなので分類はざっくりとまとめています。今後ページが増えたときにどうするかは検討中です。

ページのタイトルだけでは文字の羅列となり視覚的にわかりにくいと感じたため、主に技術系のアイコンをフォント形式、SVG形式で配布しているDeviconを使用しました。SVG画像をアイコンとして設定したことでページがわかりやすく、より賑やかになりました。

話が少しそれますが、Deviconは技術系アイコン(プログラミング言語、サービス)が豊富であり、フリーで使うことができるため、個人開発をする時にもよく活用させてもらっています。そしてNotionの技術ごとのページの中身はこのようになっています。

これは現在、私が学習している`Vue.jsのページになります。

Vue.jsページの画像

  • 技術の公式サイトへのリンク
  • 公式ドキュメント・リファレンスへのリンク
  • Wikipediaへのリンク
  • QiitaやZennの技術タグページリンク
  • 備忘録データベース
  • 参考記事データベース

以上6項目をすべてのカテゴリページに共通して配置しています。

備忘録、参考記事データベースはすべてのカテゴリを扱うデータベースとして作り、技術ごとにタグを付け絞り込み検索したものを貼り付けています。作成したデータベースはこのようになっています。順番としては先にカテゴリ関係なくメモをしたあとに個別のページで見やすくまとめる形になります。

全カテゴリーの備忘録データベース

備忘録一覧の画像

すべてのカテゴリを一箇所にまとめて管理しています。Notionのデータベースにはタグごとにフィルターできる機能があるので、全カテゴリ備忘録データベースへ個別ページに埋め込み、カテゴリごとフィルターして表示している形となります。

Vue.jsの技術タグで絞り込んでいる様子
Vue.jsというタグを付けた備忘録ページだけを絞り込んで表示

条件指定で絞り込みが柔軟にできるためアイデア次第ではもっと便利に使えそうですね。

参考記事のリンク集データベース

参考記事
他の人の記事タイトルが並んでいるため、記事タイトルをモザイクにて加工しています。

個人開発をする上で参考になったWebページをNotion公式のChrome拡張機能 Notion Web Clipper を使ってどんどん保存しています。データベースでは検索機能も使えるのですが、技術タグを使って備忘録データベースと同様に絞り込み、個別ページに貼ることで情報の一元管理をしています。

また備忘録としてメモを取る際にも、コードブロック内で言語ごとにわかりやすく色をつけてくれる機能や、見出しを見やすく表示してジャンプできる機能があります。

備忘録ページの画像
コードの表示と見出しの表示が見やすくて便利です。Markdownで書けるのもGood!

まとめ

Notionは操作が難しいイメージで、使い始めるのに抵抗があったのですが、今は使い方を紹介しているブログやYouTubeの動画も増えてきているため、とても参入しやすくおすすめだと言えます。

Notionはとても自由度が高く、見やすくまとめようと凝りすぎると時間がきりないくらいになると感じました。このプログラミングノートを作るなかでも、アイコンの設定やカテゴリの振り分け、技術ページの作成など、かなり時間がかかっています。Notionは簡単なメモからデータベースを使った自分専用の備忘録などアイデア次第で何でもできるツールなので、気になったら使ってみてほしいです。私はもともとQiitaやZennといったサービスにて記事を投稿するのに抵抗があり、自分だけに見える形でアウトプットしていました。しかし今回、Notionと出会いプログラミングノートを作成して記事を書いたことで学んだことをアウトプットする習慣が付きました。今後はNotionに書いたものを少しづつインターネット上でも積極的に発信していきたいです。

記事についてわからない部分や、もっと詳しく知りたいことがある場合は記事の「Discussion」「GitHubで編集を提案」にてお願いします。

長くなってしまいましたが、最後まで読んでいただきありがとうございました。

GitHubで編集を提案

Discussion

Notionでインラインのコードブロックを使用したいのですが、何故か「`」が使用
出来ないです。``` でコードブロックは出来ます。方法をご存知ないでしょうか?

現在、主にWindowsの環境でNotionを使っているのですが、コードブロックを表示するときに毎回コードを書いたブロックを「Ctrl + Shift + 8」でインラインコードブロックに変換していました。質問にあった「```」でコードブロックになるのは恥ずかしながら今初めて知りました。キーボードだと「Shift + @」で打てますね。これで回答になっているか不安ですがどうでしょうか?

ショートカットは知っていて毎回テキストを囲った後にcommand + Eでインライン可能なのですが、毎回囲うのが面倒なのでmarkdownの形式「`」で出来ないかと思って質問しました。

そうだったんですね。
試してみたところできませんでした。
お力になれず、すみません。

こちらの記事を参考にNotionでノートを作りたいのですが、Deviconに含まれないアイコンを使用されていると思います。どちらから入手したかよろしければお教えいただけませんか?

NotionのページにしていするアイコンはかならずしもSVG形式である必要はなく一般的な画像形式(PNGやJPEG)でも設定可能です。そこでDeviconに含まれていないアイコンは公式のGitHubリポジトリや公式サイトにある画像を保存してアイコンに設定しています。またICONS8といったアイコン配布サイトにも技術アイコンは多数あるので臨機応変に組み合わせていますね。ご参考になれば幸いです。

ありがとうございます!

こちらのNotionのテンプレートを活用させていただきます。
共有ありがとうございます!

そう言ってもらえて嬉しいです。どんどん活用してください!

素敵な運用の仕方ですね!!
Notion使い始めたばかりなので、参考になります。

ありがとうございます!!

ログインするとコメントできます