blog

今まで何となく砂場遊び感覚で使っていたCodePenだが、せっかく入門編を配信してもらえるなら、ということで視聴。

有料版でないとできないこと

• Penのプライベート化
• Assetsで自前画像を使う（Codepen側に用意されている画像は無料でも使える）
• 複数名のコラボ機能で同時編集
• デプロイ
• プロフェッサーモード

（以前何かのコード検証で自前の画像使おうとしたんだけどどうしても表示されなかったのは無料版だったからか……）

基本的に「何かちょっとしたコード検証や実験をしたいときの砂場」だと思っていたので、（有料版のみとはいえ）「同時編集でコードを共創できるツールである」という認識がなかった。

いろいろ機能メモ

Fork

コードを複製できる。

Use Click-to-Load

埋め込んだとき、「Run Pen」を押さない限りは動かないようになる（サムネ的な扱い）。埋め込み先のパフォーマンスを軽くしたいときおすすめ。

Trending

注目のPenが上がってくるのでたまに眺めるといいかも。

Challenges

毎週運営から「これやるの面白いんじゃない？」というお題が出る。

その他似たようなツール

• jsfiddle
• stackblitz
  VSCodeっぽいUI

オンライン版VS Codeについて

• 通常のオンライン版
• GitHub版

の二つがあるので注意！

あと自分のPC上のVSCode環境を移植することもできるが、逆もできてしまうので注意！

※ターミナルはGitHub版「Codespacesで作業する」でしか使えない

有料版について

主にCodespacesの使用時間（core-hours）に影響する。

拡張機能Live Share

共同編集ができる（今のところ無料だが、そのうち有料化するかも）。