noteでコードを書く時はCodePenやGistを使ってみよう（拡張機能あり）

予めお伝えしておきますが、プログラマー向けです。
プログラマーじゃなくても使えますし、読めるように書いていますが、プログラマー以外には価値が薄いと思います。

# サンプルコード

カーソルキーを押したら押したキーが表示されるだけの簡単なものです。
ここで使うのはjsファイルについてですが、jsファイルの内容を知る必要はないです。

# コードとgistで見る

世の中のサンプルコードがCodePenで見れるワケではないので、code記法とGistで比較してみましょう。

## code

document.onkeydown = keydown;

function keydown() {
 if (event.key == "ArrowUp") {
   document.getElementById("displayArea").textContent = "↑";
 } else if (event.key == "ArrowDown") {
   document.getElementById("displayArea").textContent = "↓";
 } else if (event.key == "ArrowLeft") {
   document.getElementById("displayArea").textContent = "←";
 } else if (event.key == "ArrowRight") {
   document.getElementById("displayArea").textContent = "→";
 } else {
   document.getElementById("displayArea").textContent = event.key;
 }
}

## Gist

背景の黒と白の差が目を引きますが、行番号が振られているかとかシンタックスハイライトは見過ごせません。
Gistの埋め込みにダークモードがあれば使いやすいのですが、うまく見つけられませんでした。
が、noteのダークモードがあるのでそちらを使うことで、背景の問題は解決できます。

chrome拡張機能が欲しくてダウンロードリンクに飛んだのですが、こちらだとうまくダウンロードできませんでしたので、ダウンロードリンクを掲載しておきます。

note-dark

# CodePenの開発について

フロントエンド開発にめっちゃ便利！CodePenライクな爆速Chrome拡張エディター

いちいちCodePenを開くのが面倒くさいな、と思っていたらありました。

# Gistを使いやすくしたい！

Gistを使い始めるとすぐに感じるのが、非常に管理しにくいのです。
スニペットを撒き散らす分には良いんですが、管理したくなると大変です。

そこで、Cacherというサービスを使います。Githubアカウントがあれば使えるので、Gistを持っている人は何もしなくても使い始めることができます。

Code snippet organizer for pros | Cacher

ローカルで使えるスタンドアローン版もダウンロードできますが、chrome拡張機能でやりたい事が完結できます。
ブラウジングのメモリを軽くしたい時ぐらいでしょうか。

Cacher