CodePenを使ってみた

ブログ

どうもこんにちは.ヤンです.
最近は雪も解けてきて暖かくなってきました.

今回はブラウザでコードスニペットのテストができる CodePen を使ってみました.

スポンサーリンク

CodePenって何

CodePenはソーシャル開発環境です。ブラウザ上でコードを書き、その結果を見ることができます。あらゆるスキルを持つ開発者にとっては便利で自由なオンラインコードエディタであり、特にコードを学ぶ人にとっては力になります。私たちは、主に HTML、CSS、JavaScript などのフロントエンド言語と、それらに変換する前処理構文に焦点を当てています。

https://codepen.io/about/ を Deepl翻訳で日本語にした

CodePenはブラウザ1つでコードの記述から実行,テスト,共有までを一貫して行えるサービスです.
ユーザは “Pen” と呼ばれる1つのコードスニペットを作成し,そこにHTML,CSS,JavaScrpitのコードを書きます.記述されたコードは即座にプレビューされ,ユーザはコードのテストを開発環境の構築なしに行えます.さらに,ユーザが作成した “Pen” はクリックひとつで世界中に共有でき,既存のサービスを超える新しい感動を生み出します.

CodePenを使ってみよう

CodePenのトップ画面 ログイン前

https://codepen.io

GitHubアカウントでサインインできます.

CodePenのトップ画面 ログイン後

ログインするとトップページが表示されます.

左上の”Pen”をクリックするとコードを書く画面に移動します.

Pen のトップ画面

実際にコードを書いて動作させてみました.
環境構築の必要がなく気軽に試せます.

コードスニペットの作成と共有

ボタンを押すと “Hello World.” が “Bye World” に変化する.

右下の “Shere” ボタンを押すと共有ができます.TwitterとFacebookは標準対応しています.
下のような形のリンクが取得できます.

Attention Required! | Cloudflare

“Embed” ボタンでは埋め込み用のHTMLが取得できます.実際に埋め込みを行うと以下のようになります.

See the Pen zYoBXWL by yangniao23 (@yangniao23) on CodePen.

“Rerun” で再実行ができます.実際にボタンを押してみましょう.

コードスニペットの作成から実行,さらには共有まで一手にこなす CodePen はあなたの開発を加速させます.

CodePenここがいい

  • HTML,CSS,JavaScrpitの開発がすぐにできる
    ⇒初心者でも開発環境の構築をせずにいきなりコードが書ける
     環境の統一ができてフォローしやすい
     Webページのディレクトリ構造がわからなくてもコードが書ける
  • コードスニペットなので思いつきでパッと作りやすい
    ⇒アイデアが思いついたらサクッと書いてテスト!ができる
  • 共有が一瞬でできる
     エディタからコピーして, Gist にアップロードして…が不要
  • 他人のPenを見るのが楽しい
     公開された Pen は検索できて,トレンドのペンが一覧になったページもある
     https://codepen.io/trending

CodePenはいいぞ

みんなも使おうね!

コメント

タイトルとURLをコピーしました