Treat Myself

海外生活中アラサー女子の英語・プログラミング学習備忘録

【Code Pen】を使ってみた感想

スポンサーリンク

Code Pen

 

オンラインで使えるテキストエディタCode Penの無料会員版を使ってみた感想をまとめてみました。

 

 

Code Penとは?

Code Penはオンラインで利用できるHTML/CSS/Javasacritのコーディングができるサービスで、コードを書くとどのように表示されるかをリアルタイムで確認できます。

 

Web系の情報を発信されているブログなどでコードが埋め込まれている時ににもよく使われていています。

公式サイトURL

https://codepen.io/

 

利用者の作ったコードがみれる

会員登録をして(無料でできます)ログインするととCode Penを利用されている他の利用者の書いた作品とコードををみることができます。

プログラミング独学中の身としては、他人が書いたコードをみる機会が少ないので、「こんなこともできるんだ!」という発見があり刺激になります。

またCode Pen内でSNS機能があり、気に入った作品に♡をつけたり、コメントも残せます。

 

使いやすい環境に設定できる

実際にCode Penをつかってコードを書く時ですが、設定をするとSassやBootstrapなどを導入することができるので、使いやすい環境に設定してコードを書くことができます。

 

ちなみにBootstrap・Fontawesomeを入れたい時はピンクの線で囲んだ検索ボックスから検索して選択するだけで導入できて、簡単です。

 

Code Pen setting

 

Emmet・ショートカットが使える

Emmetやショートカットが使えるだけでかなり作業効率が上がりますよね?

 

Code PenではEmmetはなにも設定せずに使うことができました。

ショートカットも用意されていてコードを書くページの左下のボタンから確認することができます。

ショートカット一覧のスクリーンショットを載せておきます↓

Code Pen shortcut

 

SNSにシェア・コードを埋め込みできる

コードを書き終えて作品をSNSで共有したい時や、ブログなどに作品のコードを埋め込みたい時にCode Penを使うと簡単にできます。

 

SNSで共有したい時

  1. コードを書くページの右下にある「Share」ボタンをクリック
  2. シェア先を選ぶ(TwitterFacebook・DEV・SMS)
  3. コメントを書いて共有

 

ブログなどに作品のコードを埋め込みたい時

  1. コードを書くページの右下にある「Embed」ボタンをクリック
  2. 埋め込みコードをコピー
  3. 埋め込みしたい先にコピーしたコードを貼付ける

Code Pen embed

Previewでどのように表示されるか確認したあと、4種類用意されている埋め込みコードから使いたいものを選んでコピーするだけです。ちなみに私はオススメとなっているHTMLを使用しています。

 

はてなブログでHTMLを埋め込む時は編集モードをHTML編集に切り替えて貼付けるだけでコードを埋め込むことができました。

 

埋め込んだもの↓

See the Pen abogypR by Yaponka (@Yaponka) on CodePen.

 

まとめ

 Code Pen はオンラインで簡単にコードが書けて結果がその場で見えるので、他の方が紹介しているコードの動きを確認したりする時に使うのにとっても便利です。

 

また、自分の書いたコードとその結果をブログに埋め込んだりもできるので、これからどんどん活用していきたいと思っています。