Web開発を学び始めると、「ちょっとしたHTMLやCSS、JavaScriptを試したいだけなのに、ファイルを作ってブラウザで開いて…」という手間が気になることがあります。そんなときに便利なのが、ブラウザだけでコードを書いて、結果をすぐに確かめられるオンラインエディタ「CodePen（コードペン）」です。
この記事では、CodePenでできることと始め方、実際に試せるサンプルコード、使うときの注意点をまとめます。CodePenは2026年7月に「CodePen 2.0」としてエディタが新しくなったので、その変更点もあわせて紹介します。
CodePenとは？
CodePenは、HTML・CSS・JavaScriptのコードをブラウザ上で書き、その場で結果を確かめられるオンラインのコードエディタです。作った作品を公開したり、ほかの人の作品を見たりできるコミュニティの役割もあります。
CodePenで作ったコードのまとまりは「Pen（ペン）」と呼ばれます。エディタやローカルサーバーを自分のパソコンに用意しなくても、ブラウザで開くだけで書き始められます。画面は英語ですが、使うボタンは多くないので、慣れれば迷うことは少ないと思います。
CodePenでできること
書いたコードの結果をすぐに確かめられる
コードを入力すると、プレビュー画面に結果がすぐに反映されます。色や余白を少しずつ変えながら見た目を確かめたり、JavaScriptの動きを試したりするのに向いています。
ほかの人の作品から学べる
CodePenには、世界中の人が作ったPenが公開されています。気になるアニメーションや画面の部品を見つけたら、コードをその場で読めます。「フォーク」で自分のアカウントに複製して、数字を変えたり行を消したりしながら仕組みを確かめることもできます。
ブログやWebサイトに埋め込める
作ったPenは、埋め込み用のコードを貼るだけで、ブログやWebサイトに表示できます。技術記事で「コード」と「動き」を一緒に見せたいときに便利です。
CodePen 2.0で変わったこと
CodePenは2026年7月23日に「CodePen 2.0」を正式に公開しました（公式ブログのお知らせ）。それまで分かれていた「ClassicのPenエディタ」「Projectエディタ」「Vue専用エディタ」が、1つのエディタにまとめられています。主な変更点は次のとおりです（公式の紹介ページ）。
| 変わったこと | 内容 |
|---|---|
| ファイルを増やせる | HTML・CSS・JavaScriptの3つだけでなく、ファイルやフォルダを追加して、複数ページのサイトも作れる。初期状態は今までどおりHTML・CSS・JavaScript |
| Blocks | TypeScript、Sass、Tailwind CSS などを「Block」として追加すると、CodePen側で自動で変換してプレビューできる |
| デプロイ | PenをそのままWebサイトとして公開できる（プランごとの条件は料金ページで確認） |
| バージョン（履歴） | 保存するたびに履歴が残り、前の状態に戻せる |
| 共同編集 | ユーザー名やメールアドレスで招待して、一緒に編集できる |
以前のCodePenでは、Reactなどのライブラリを設定画面でCDNのURLを追加して読み込んでいました。2.0では、使う技術をBlockとして追加したり、JavaScriptに import を書いたりする形が中心です。古い解説記事と画面が違うことがあるので、注意してください。なお、慣れた画面で使いたい人向けに、Classicエディタに近い使い方も用意されています。
CodePenの始め方
- 書いてみる：
ブラウザで pen.new を開くと、新しいPenのエディタが開きます。まずはここで試してみるのが手軽です。 - アカウントを作る：
書いたコードを保存するには、CodePenの右上の「Sign Up」から無料のアカウントを作ります。 - コードを書く：
HTML・CSS・JavaScriptのそれぞれの場所にコードを書きます。プレビューに結果が表示されます。 - 保存する：
「Save」で保存します。保存したPenは、自分のプロフィールページから開けます。
サンプルコード：ボタンを押すと数が増える
CodePenにそのまま貼れば動く、小さな例です。ボタンを押すたびに、押した回数が1つずつ増えます。
<button id="countBtn">クリック</button>
<p>押した回数：<span id="count">0</span></p>button {
padding: 8px 16px;
font-size: 16px;
cursor: pointer;
}
#count {
font-weight: bold;
color: #d33;
}const btn = document.querySelector('#countBtn');
const count = document.querySelector('#count');
let n = 0;
btn.addEventListener('click', () => {
n++;
count.textContent = n;
});貼り付けたら、CSSの color を別の色にしたり、JavaScriptの n++ を n += 10 にしたりして、結果がどう変わるか試してみてください。こうした「少し変えて、すぐ確かめる」を繰り返せるのが、CodePenのいちばんの良さです。
document.querySelector の書き方は「document.querySelectorで使えるCSSセレクターの書き方」、() => { ... } の書き方は「JavaScriptのアロー関数って？」で紹介しています。
無料プランとPROプランの違い
無料プランでも、公開のPenは数の制限なく作れます。学習やちょっとした動作確認なら、無料プランで十分です。
有料のPROプランにすると、Penを非公開（プライベート）にしたり、画像やフォントなどのファイルをCodePenにアップロードして使ったりできます。料金やプランごとのできることは変わることがあるので、申し込む前に公式の料金ページで確かめてください。
使うときの注意点
- 作ったPenは初期設定で公開される：
無料プランでは、保存したPenは誰でも見られます。仕事のコードや、人に見せたくないものは置かないようにしましょう。 - APIキーやパスワードを書かない：
外部のサービスを呼ぶコードを試すときも、キーをそのまま書くと公開されてしまいます。 - 大きな開発には向かない：
2.0でファイルを増やせるようにはなりましたが、サーバー側の処理やデータベースを使う本格的な開発は、自分のパソコンにVS Codeなどの開発環境を用意したほうが進めやすいです。
似たサービス：JSFiddle
ブラウザでコードを試せるサービスには、JSFiddleもあります。CodePenは「作品を公開して見せ合う」コミュニティの色が強く、JSFiddleは「コードを貼って、さっと動きを確かめる」使い方に向いています。JSFiddleについては「ブラウザでサクッとコードが書ける「JSFiddle」とは？」で紹介しています。
まとめ
CodePenは、ブラウザを開くだけでHTML・CSS・JavaScriptを試せるオンラインエディタです。無料で公開のPenをいくつでも作れ、ほかの人のコードから学ぶこともできます。2026年7月のCodePen 2.0で、ファイルの追加やデプロイなど、できることも広がりました。
まずは pen.new を開いて、上のサンプルコードを貼ってみてください。JavaScriptを基礎から学びたいときは、入門書のサンプルをCodePenで動かしながら読むのもおすすめです。
コメント