こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回は、
コードをまとめてすぐ引き出せるようにしたいんだけど、いい方法ない？
といった方に対する記事となります。
コーディングのスピードを上げる為にはコードの管理が必須です。
その為にはよく使うコードは管理しておく必要があります。
今回は万能ツールNotionを使ってコード管理する方法について解説していきます。
またコーディングスピードを上げるには自作したコードスニペットの登録も有効で、そちらについてはこちらの記事を参照下さい。
Notionを使う
コード管理には以前Boostnoteというツールを使っていたんですが、WindowsとMacで見え方が違ったり（バージョンが違うかも）、データがPC内なので他のPCと共有出来ない（共有する方法が分からなかった）ので、途中からNotionに切り替えました。
NotionはWeb上で保存されるので、どのPCから見ても同じだしPCが壊れてもデータは消えません。
前回はNotionを使った案件管理の方法について記事を書いたので、Notionを初めて使う人はこちらの記事を参照下さい。
ページを作成
まずはページを作成します。
左下のNew pageか、PRIVATEの所にマウスを乗せると右に＋が表示されるので、そこからページを作成します。
ページはいくつでも作成可能です（無料版でも無制限）
見出しを作成
次に見出しを作成します。
例えば HTML CSS WordPress などジャンルごとに分けておくと管理しやすくなります。
ここではh2で見出しを作成します。
まずは入力エリアにマウスの乗せると、左に＋が表示されるのでこれをクリックします。
するとこちらが表示されるので、h2を選択します。
次の画像はWordPressと入力した物ですが、＋の右にクリリンの額のような点があるのでそこをクリックすると、文字色と背景色を変えられます。
ただ文字色か背景色のどちらかしか変えられないようです・・・
ページを作成する
次にページを作成していきます。
先ほどと同じように＋からPageを選択します。
こちらは見出しというジャンルに複数のページを作成した物になります。
この中の1つがこちらになります。
それではこれと同じように作成していきます。
画像を貼る
これは必須ではありませんが、あると分かりやすい物に対しては貼っておくといいでしょう。
＋からImageを選択します。
そしてこちらをクリックして、PC内の画像を選択すればOKです（最大5MBまで）
コードを入力
そしてコードを入力します。
＋をクリックしてCodeを選択します。
するとこのように入力欄が表示されるので、コードを入力します。
ここでこの入力欄にマウスを乗せると、左上にコードの種類が表示されます。
これは自動で決まるわけではなく、自分で選択します。
種類は沢山あるので、スクロールして探すか検索します。
このコードの種類選択は必須ではありませんが、例えばCSSのコードを入力したのにHTMLを選択した場合はこのようになります。
これをCSSにするとこのようになります。
コードに色が付きました。
このように内容に沿ったコードの種類を選択すると色が付きます。
まぁそれだけなので特に気にしなくてもいいんですが、設定しないのも気持ち悪いので自分はちゃんと選択してます。
あとは同じようにHTMLなど別のコードを入力するば完成です。
参考サイトをブックマークする
あとは参考サイトなどがあればブックマークしておくのもいいと思います。
まずはこの何もない所にブックマークしたいURLを入力します。
すると右側にこのような表示がされるので、Create bookmarkを選択します。
するとこのようになります（今回の見出しはこちらのサイトには載っていません）
参考サイトの表示が味気ない場合
たまにタイトルやアイキャッチなど表示されない味気ないサイトがあります。
そういう時はCaptionでタイトルだけでも入力しておきましょう。
こちらの赤枠の下にあるテキストが入力したタイトルです。
これがないとさっぱり分からないですよね。
Captionを入力するにはこの枠内にマウスを乗せて右上に表示される点をクリックします。
するとCaptionの項目が表示されるので、ここから入力します。
そしてこちらが完成形になります。
画像の代わりにgifや動画などを貼る事も出来るので、動きのあるものもまとめる事が出来ます。
工夫次第で色々出来ると思うので、ぜひ試してみて下さい。
