Notionを使ってコードを管理する方法【テンプレートあり】

こうしたお悩みを解決していきます！

Notionは便利なタスク管理ツールで、最近は個人や企業でも導入が進んでいる人気ツールです。

タスク管理の作成方法については、こちらの記事を参考にしてください。

今回はNotionの機能を活用したコード管理方法を紹介します。

エンジニアやコーディングを行う方は、業務でよく使うコードがあると思います。

しかし、使うたびにGoogle検索したり、メモしていても整理不足で探すのに時間がかかった経験はありませんか？

Notionを使えばこれらの問題を解決し、作業効率を大幅に向上させることができるのでぜひ参考にしてみてください。

今回作成するコード管理ページはこちらです。ボタン1つで保存フォーマットを表示できる便利機能付きです！

とにかく早くテンプレートが欲しいという方はこちらからどうぞ！

コード管理ページ作成方法

新規ページ作成

まずは新規ページを作成します。タイトルは「コード管理」と設定します。

分野ごとにカラムを分割して横並びにする

このページ内に分野ごとに子ページやコードブロックを追加し、整理していきます。

まずは分野ごとにカラムを分割してレイアウトを整えます。

今回は、

こちらの3つの分野に分類してみます。

まずはページ内のカラムを3分割します。

「コード管理」ページ内で「/col3」と入力してEnterを押すと、カラムを3分割できます。

最近のアップデートでカラム分割のショートカットが使いやすくなり、個人的にも非常に嬉しいポイントです。

以下の記事でカラムを分割して横並びに表示される方法を詳しく解説しているので興味のある方は参考にしてみてください。

カラムを3分割したら、それぞれに見出しを設定します。

ショートカットで「/h2」、もしくは「+」を押して「見出し2」を選択して見出しを追加します。

今回はさらに見やすくするために区切り線を追加します。

「＋」を押して「区切り線」を選択します。

そうするとこちらの画像のようになるはずです。

分野ごとに子ページを作成する

次に各分野ごとに子ページを作成します。

ショートカットで「/page」、もしくは「+」を押して「ページ」を選択してそれぞれページを作成します。

今回は例として、PHPという子ページを作成します。

左上にページ階層が書かれてあるので「コード管理/PHP」となっているのでOKです。

ここにPHPでよく使うコードをまとめていきます。

コードブロックの使い方

Notionにはコードを見やすく表示するための機能も備わっています。それが「コードブロック」です。

ショートカットで「/code」と打つと「コード」が出てくるのでそれをクリックします。

するとコード入力用のブロックが表示されます。

ブロックにマウスを持ってくると左上に言語名が出てくるのでそれをクリックすると選択可能な言語がずらっと現れます。

こちらの言語を選択することでその言語に対応したシンタックスハイライトでコードを表示してくれます。つまり、見やすい状態でコードを保存できるということです。

今回はPHPを選択します。試しに最近Laravelで使ったコードをコピペしてみます。

こんな感じになります。とても見やすいですよね。

右上の「コピー」をクリックでコードをコピー、「キャプション」をクリックでコードブロック下に文字を表示させることができます。

今回はコードブロックの上にh3の見出しをつけてさらにわかりやすくします。

おまけ：テンプレ機能を使ってボタン1つで見出しとコードブロックを表示させる

これまでの方法では、コードを保存するたびに「見出し」と「コード」を毎回追加する必要がありますよね？

テンプレート機能を使えば、ボタン1つでこのセットを表示できます！

赤枠部分をクリックするだけで見出し、コードブロックがセットで出てきます！

くわしいtemplate機能の作成方法はこちらの記事をご覧ください。

完成したテンプレはこちらからどうぞ！ぜひ複製してテンプレートボタン試してみてください！

よく使うコードを見やすく管理して作業効率を上げよう

いかがでしたでしょうか？

よく使うコードがこのように見やすく整理されていると、必要なときにすぐ使えて便利ですよね。私自身もこの方法を愛用しています。

他にもこんな機能があれば便利というご意見があれば、コメントやTwitterでぜひ教えてください！