ノウハウ

Notionを使ってプログラミングのコード管理をする方法【日本語対応版】

2021年6月5日

※ 当サイトではアフィリエイト広告を利用しています

コードをまとめてすぐ引き出せるようにしたいんだけど、いい方法ない?
Notionっていうツールがおすすめだよ!

コーディングのスピードを上げる為にはコードの管理が必須です。

今回は万能ツール『Notion』を使ってコード管理をする方法について解説していきます。

またコーディングスピードを上げるには自作したコードスニペットの登録も有効で、その方法についてはこちらの記事を参照下さい。

あわせて読みたい
VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】
VSCodeで自作したスニペットを登録する方法【作業効率アップにおすすめ!】

続きを見る

じゅんぺいブログは、Web制作コーディングWordPress制作)の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください!
完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

プラグラミングのコード管理(コードスニペット)に『Notion』を使う理由

コード管理には以前『Boostnote』というツールを使っていましたが、WindowsとMacで見え方が違ったり、データがPC内なので他のPCと共有出来ない(共有する方法が分からなかった)ので、途中から『Notion』に切り替えました。

『Notion』はWeb上で保存されるので、どのPCから見ても同じだしPCが壊れてもデータは消えません。

またiPhoneアプリで見ることも出来ますし、他の人と共有して見ることも可能です。

『Notion』を使った案件管理の方法についても記事を書いているので、『Notion』を初めて使う人はこちらの記事を参照下さい。

あわせて読みたい
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】

続きを見る

 

そして私がNotionを使って2年以上コードを書き溜めて販売したのがこちらになります。

👇画像をクリック

こちらは3日で500部も売れ、発売から10ヶ月以上経っても売れ続けているので、コードスニペットの需要が如何に高いかが分かると思います。

 

Notionを使ってプログラミングのコード管理をする方法【日本語対応版】

それでは本題に入っていきます。

Notionを使ったコード管理の手順は以下になります。

  1. ページ作成
  2. 見出し作成
  3. 下層ページ作成
  4. 画像を貼る
  5. コード入力
  6. 参考サイトをブックマーク
  7. CodePenを埋め込む
  8. テーブル作成

全て必須というわけではないので、ご自身が使いやすいように使えば大丈夫です。

それでは順番に見ていきますが、今回は日本語化している状態で解説をしているので日本語化については以下の記事を参照下さい。

あわせて読みたい
Notionを日本語化する設定方法を解説
Notionを日本語化する設定方法を解説

続きを見る

 

ページ作成

まずはページ左側のプライベートの横にある+をクリックしてページを追加します(+はカーソルを乗せないと表示されません)

Notion:『ページを追加(+ボタン)』か『新規ページ』をクリック

Notion:『ページを追加(+ボタン)』か『新規ページ』をクリック

そして『無題』というタイトルのページが作成されました。

Notion:無題ページが作成

Notion:無題ページが作成

まずは右の『無題』の所にタイトルを書きます。

今回は『コードスニペット』とします。

Notion:ページタイトル入力

Notion:ページタイトル入力

タイトルを入力して『Enterキー』を押すと下の方にあったメニューが全部消えます。

上記の『「Enter」キーを押して空白ページから始める』のことですね。

Notion:タイトルを入力して『Enterキー』を押した状態

Notion:タイトルを入力して『Enterキー』を押した状態

それではページが作成されたので、実際にコードスニペットを作成していきます。

ちなみにページはいくつでも作成可能です(無料版でも無制限)

 

見出し作成

ページを作成したら見出しを作りましょう。

例えば『HTML・CSS・WordPress』など、言語やジャンルごとに分けておくと管理しやすくなります。

ここではh2で見出しを作成します。

まずは入力エリアにマウスの乗せると左に+が表示されるので、これをクリックします。

Notion:+をクリック

Notion:+をクリック

するとこちらが表示されるので、h2を選択します(スクロールして探します)

Notion:見出し2をクリック

Notion:見出し2をクリック

ちなみに選択肢にマウスを乗せると右側に簡単な解説が表示されます。

そして入力欄が表示されるので今回は『WordPress』と入力します。

Notion:『見出し2』入力欄

Notion:『見出し2』入力欄

Notion:『見出し2』入力後

Notion:『見出し2』入力後

また+の右に6つの点があるのでそこをクリックすると、文字色と背景色を変えられます(背景色はスクロールすると表示されます)

Notion:6つの点をクリック

Notion:6つの点をクリック

そして『カラー』から色を変えられます。

Notion:カラー変更(文字色)

Notion:カラー変更(文字色)

Notion:カラー変更(背景色)

Notion:カラー変更(背景色)

ただ文字色か背景色のどちらかしか変えられないようです・・・

Notion:カラー変更(文字色)

Notion:カラー変更(文字色)

 

下層ページ作成

次にページを作成していきます。

先ほどと同じように+から『ページ』を選択します。

Notion:ページ作成

Notion:ページ作成

こちらは『見出し』というページにさらに複数の下層ページを作成した物になります(ページタイトルの『WordPress』とは無関係の内容です・・・)

Notion:ページの中に複数の下層ページ

Notion:ページの中に複数の下層ページ

そしてこの中の1つがこちらになります(CSSは長くなるので省略しています)

Notion:コードスニペットの例

Notion:コードスニペットの例

それではこれと同じように作成していきます。

 

画像を貼る

これは必須ではありませんが、あると分かりやすい物は貼っておくといいでしょう。

これはシンプルにドラッグ&ドロップでOKです。

Notion:画像をドラッグ&ドロップ

Notion:画像をドラッグ&ドロップ

または+から『画像』を選択します。

Notion:画像をクリック

Notion:画像をクリック

そしてこちらをクリックして、PC内の画像を選択すればOKです(最大5MBまで)

Notion:画像ファイルをアップロード

Notion:画像ファイルをアップロード

画像の代わりにgifや動画などを貼る事も出来るので、動きのあるものもまとめる事が出来ます。

 

コードを入力

そして重要なコードを入力します。

+をクリックして『コード』を選択します。

Notion:コードをクリック

Notion:コードをクリック

するとこのように入力欄が表示されるので、コードを入力します。

Notion:コード入力欄

Notion:コード入力欄

ここでこの入力欄にカーソルを乗せると、左上に言語が表示されます。

Notion:コード入力欄(言語表示)

Notion:コード入力欄(言語表示)

これは自動で決まるわけではなく、自分で選択します。

種類は沢山あるので、スクロールして探すか検索します。

Notion:コード入力欄(言語選択)

Notion:コード入力欄(言語選択)

検索すると該当する言語だけ表示されます。

Notion:コード入力欄(言語検索)

Notion:コード入力欄(言語検索)

Notion:コード入力欄(言語変更)

Notion:コード入力欄(言語変更)

この言語選択は必須ではありませんが、例えばCSSのコードを入力したのにHTMLを選択した場合はこのようになります。

Notion:コードの言語をHTMLにしてCSSを書いた場合

Notion:コードの言語をHTMLにしてCSSを書いた場合

これをCSSにするとこのようになります。

Notion:コードの言語をCSSにしてCSSを書いた場合

Notion:コードの言語をCSSにしてCSSを書いた場合

コードに色が付きました。

このようにコードに沿った言語を選択すると色が付きます。

それだけなので特に気にしなくてもいいんですが、設定しないのも気持ち悪いので自分はちゃんと選択してます。

あとは同じようにHTMLなど別のコードを入力すれば完成です。

 

参考サイトをブックマーク

あとは参考サイトなどがあればブックマークしておくのもいいと思います。

まずはこの何もない所にブックマークしたいURLを入力します。

Notion:URL入力前

Notion:URL入力前

URLを入力すると右側にこのような表示がされるので『ブックマークを作成する』をクリックします。

Notion:URL入力後『ブックマークを作成する』をクリック

Notion:URL入力後『ブックマークを作成する』をクリック

そしてこの状態で少し待ちます(数秒程度)

Notion:URLのブックマーク(プレビューの取得中)

Notion:URLのブックマーク(プレビューの取得中)

するとこのようにサムネ付きでブックマークされます。

Notion:ブックマーク作成

Notion:ブックマーク作成

 

CodePenを埋め込む

コードをCodePenでまとめている人もいるかと思います。

そしてNotionにはCodePenを埋め込むことも出来ます。

Notion:CodePenを埋め込む

Notion:CodePenを埋め込む

しかしこれもブックマーク同様にページのURLを入力して『CodePenを埋め込む』をクリックすればOKです。

Notion:CodePenを埋め込む

Notion:CodePenを埋め込む

こちらが埋め込まれたCodePenです。

Notion:埋め込まれたCodePen

Notion:埋め込まれたCodePen

画面内をクリックすればコードなど見られるようになります。

Notion:埋め込まれたCodePen(画面クリック後)

Notion:埋め込まれたCodePen(画面クリック後)

 

テーブルを作成

これはコード管理とはちょっと違いますが、Web制作での情報をまとめるのに便利です。

Notion:テーブル作成

Notion:テーブル作成

テーブルの作成方法は以下の記事に詳しく解説しています。

あわせて読みたい
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】

続きを見る

まとめ:コード管理にNotionを活用しよう!

最近コード管理にNotionを使っている人が増えてきた気がします。

工夫次第で色々出来ると思うので、ぜひ試してみて下さい。

以上になります。

あわせて読みたい
Notionを日本語化する設定方法を解説
Notionを日本語化する設定方法を解説

続きを見る

あわせて読みたい
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】
Notionを使ってWeb制作の案件管理をする方法【日本語対応版】

続きを見る

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-ノウハウ
-