✏️

新しい技術を学習しながらNotionでメモをとり、Zennで効率よく記事化するフロー

2020/10/28に公開
7

新しい技術を学習するときに調べ物をしながらNotionに開発メモ(という名のリンク集)をつくり、開発が終わったらそのメモを基に記事化する、というフローがいい感じに型にはまって1年くらい運用できたので紹介します。

調べ物をしながら開発を進めていくスタイルの人にはおすすめの方法なので、良ければ参考にしてください。

対象読者

  • 新しい技術を調べ物をしながら開発を進めることが多い
  • ブラウザがタブでいっぱいになりがちでどうにかしたい
  • 参考にしたページをよく見失って困る
  • 学習したことを記事化したいけどめんどくさくて諦めてしまう

1. Notionでメモ用ページを作る

https://www.notion.so/product

Notionは、タスク、Wiki、およびデータベースを統合するマークダウンサポートを備えたメモアプリケーション及びサービス。 同社はこのアプリを、メモ作成、プロジェクト管理、タスク管理のためのオールインワンワークスペースと説明している。
Notion (ソフトウェア) - Wikipedia

Notionについて詳しくはたくさん記事が出てるので調べてみてください。開発メモはこのNotionを使います。僕がNotionを使う理由は以下のとおりです。

  • 自分の使いやすい形にリストをカスタマイズできる
  • マークダウンで書ける(コピペできる)
  • リンクプレビューが見やすくて便利

メモを作るサービスは自分好みのがあれば何でも良いと思います。僕の場合は以下のようなメモ用のデータベースを作っています。(公開用に一部編集しています。)

ページが作れたら準備完了です。

2. 参考にしたページはタブに残し、閉じる前にNotionに記録する

新しい技術を学習するとき、ウェブ検索して参考になる記事を探し、記事が見つかったらしばらくはタブに残すことが多いと思います。

ここからが一番大事なところです。その記事のタブを消す前、あるいはブラウザのタブの数が多くなってきたら、先程作ったNotionのデータベースにページを作って記事のリンクを貼り付けていきます。

学習で参考になった記事のリンク集をNotionのページに作っていくような感じです。NotionはURLを貼り付けてCreate bookmarkすると、OGPなどを読み取っていい感じのプレビューを作ってくれるので、URLさえコピペしていけば見やすいリンク集が簡単に作れます。

自分はそれ加えて、簡単なメモを書いたりタイトルを付けてリンクのグループ分けをしたりします。画像は「OpenAPI(Swagger)」を勉強したときに作った実際のNotionページになります。

この時点では自分しか見ないので、自分が分かりやすいように整理できていれば問題ありません。これを作っておけば、ブラウザのタブを閉じてしまっても参考になった記事を再参照しやすくなりますし、しばらくしてから再学習するときにも役立ちます。

3. 完全に理解したらNotionを基に情報を整理して記事化する

Notionに記録するところまでで止めてしまっても問題ないですが、せっかくなので記事化します。

Notionでリンク集を作っておくと、コピーしてエディタに貼り付けるだけでMarkdown形式で貼り付けられます。リンクプレビュー部分もただのリンク記述としてコピーされてくるので、記事化が捗ります。

以下は上で紹介した「OpenAPI(Swagger)」のNotionページを一部コピペした例です。

[Redocly/redoc](https://github.com/Redocly/redoc)

redocのサンプル見るのが一番わかりやすい

[ReDoc Interactive Demo](https://redocly.github.io/redoc/)

[How to reference array item examples in OpenAPI 3?](https://stackoverflow.com/questions/49839121/how-to-reference-array-item-examples-in-openapi-3)

### OneOf, AllOf, AnyOf
[oneOf, anyOf, allOf, not](https://swagger.io/docs/specification/data-models/oneof-anyof-allof-not/)


## 設計

[スキーマファースト開発のためのOpenAPI(Swagger)設計規約](https://future-architect.github.io/articles/20200409/)

[Swaggerの記法まとめ - Qiita](https://qiita.com/rllllho/items/53a0023b32f4c0f8eabb)

[Swagger ではない OpenAPI Specification 3.0 による API サーバー開発](https://www.slideshare.net/techblogyahoo/swagger-openapi-specification-30-api)

あとはこれを基に整形します。この「OpenAPI(Swagger)」を整形して公開したのがこちらです。

https://zenn.dev/d_forest/articles/bec25d3a1b111ed37a09

自分が書いた記事で、リンク集っぽい記事はだいたいこの方法で書いたものです。効率的に学習しながらアウトプットもできておすすめです。

他にもいい方法があったら是非コメントなどで教えて下さい。

GitHubで編集を提案
PY

Discussion

catnosecatnose

なるほどー、とりあえずNotionでメモを作ってから記事化良いですね!
そのうちZennに自分用のメモを気軽に投稿できる仕組みを作ろうと思っているのですが、そのときにNotionは参考になりそうです。

Keita Mori(ふぉれ)Keita Mori(ふぉれ)

ありがとうございます!是非参考にしてみてください。
メモ(リンク集)をNotionで作っている理由で一番大きいのはリンクプレビューです。URLをペーストするだけで、タイトルや概要が表示されるのはやはり楽ですし、コピーするとマークダウンのリンクになるのも記事化しやすいです。

大学生だった.大学生だった.

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

Keita Mori(ふぉれ)Keita Mori(ふぉれ)

インラインのコードブロックは「``」と最初に打ってしまうと装飾されません。「`」「hoge」「`」と順に入力すると装飾されると思います。また開始が行の先頭ではない場合はスペースを打ってから「`」で開始する必要があります。もしくはテキストを範囲選択して<>ボタンを押すことでもインラインのコードブロックになります。

大学生だった.大学生だった.

度々すいません。Notionの使い方についてお聞きしたいのですが、ページ内リンクではなく注釈の付け方をご存知ないでしょうか? マークダウンだと [^1] で付けれると思います。Notionだと上手く行きません。

rii_125rii_125

注釈の追加できる機能なんてないと思いますが・・・
ただ現時点で注釈っぽい方法で、注釈したい範囲を選択したら「コメント」という項目が出ると思います。そちらから注釈っぽいものを作ることが可能かもしれません。