コーディングのスピードを上げる為にはコードの管理が必須です。
その為にはよく使うコードは管理しておく必要があります。
今回は万能ツールNotionを使ってコード管理する方法について解説していきます。
またコーディングスピードを上げるには自作したコードスニペットの登録も有効で、そちらについてはこちらの記事を参照下さい。
Notionを使う
コード管理には以前Boostnoteというツールを使っていたんですが、WindowsとMacで見え方が違ったり（バージョンが違うかも）、データがPC内なので他のPCと共有出来ない（共有する方法が分からなかった）ので、途中からNotionに切り替えました。
NotionはWeb上で保存されるので、どのPCから見ても同じだしPCが壊れてもデータは消えません。
前回はNotionを使った案件管理の方法について記事を書いたので、Notionを初めて使う人はこちらの記事を参照下さい。
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や動画などを貼る事も出来るので、動きのあるものもまとめる事が出来ます。
まとめ：コード管理にNotionを活用しよう！
最近コード管理にNotionを使っている人が増えてきた気がします。
Notionでの「コード管理」はじゅんぺいさん@junpei_sugiyama のブログを参考にしたら完ぺきにできましたhttps://t.co/MDIwhmKJa0
コードを溜めるのも引き出すのNotionからだと楽ちんです
ちなみに「Notion コード管理」でググったら一番上にじゅんぺいさんのブログが出てきて感動☺️ pic.twitter.com/pVYLMkapkf
— こーた@もっと家族と過ごしたくてWeb制作フリーランス (@kotaclprg) August 26, 2021
そろそろコードをパーツ化させて
効率上げていきたいので、
Notionを使ってみようと思います✨じゅんぺいさん(@junpei_sugiyama )
ブログが以前TLにあったので参考に😊#デイトラ #プログラミング初心者#駆け出しエンジニアと繋がりたいhttps://t.co/6yPkXvbjJt— さとけん＠東北のweb屋さん (@web_satoken) September 2, 2021
#朝活はら部ハウス でしめじさん @simeji_pro さんが納品時確認を怠らないと話を受け、早速Notionでチェック表を作成😌
納品時の良し悪しは顧客満足度の成否を分ける。大切ですね。リストはLIGさん、Notionはじゅんぺいさん@junpei_sugiyama の記事を参考にどうぞ。
⬇️URLリンクは追加ツイートへ⬇️ pic.twitter.com/xNMZX6S34b
— とし@リモートWeb営業0→100支援｜営業MVPの脱サラフリーランス☕️🧈 (@ToshiTraveler) May 8, 2021
工夫次第で色々出来ると思うので、ぜひ試してみて下さい。