【プログラミング初心者必見！】Code Penの魅力紹介(2020年版)

こんにちは！たくみです。

今回は、プログラマーとして勉強している私が最近知った、便利なツール「Code Pen」について
お話します。

知ってからは、コーディングの際にその便利な機能に頼りっぱなしです！

使用には無料会員と有料会員の2通りがありますが、私が無料会員なので今回は無料会員ができることに関してお話ししていきます。

「無料会員でもここまでできるんだ！」というのを、実際に使い方を画像と共にお伝えしていきます。

プログラミング初心者の方必見です！

では、始めます。

Code Penとは

まずそもそもCode Penてなによ？

と思われる方もいらっしゃると思うので簡単に説明します。

という、プログラマーにとっては非常にありがたいものです。

登録しなければ使えませんが、登録方法も簡単なので大丈夫！

では早速、登録方法についてご説明していきます。

CodePen 検索〜登録まで

まずはブラウザで、Code Penを検索してみてください。

CodePen:https://codepen.io/

英語表記の画面が出てきます。
日本語に翻訳できると思いますが、私は特段使ってみて問題なさそうだったので、このまま英語でやっています。

登録の仕方

画面中央にある、「sign up for free」より登録画面に移ります。

登録手段は下記の4つです。

CodePenのここがスゴイ！

①コードを保存・使いたい時に引き出せる!

まずはログインした最初の画面を見てください。

Picked Pensというタイトルの下に、何やらいろんなものがあります。

気になる所ではありますが、先に自分で書いたコードを保存する方法から入ります。

画面左上の、Createの下にあるPenをクリックします。

(右上のUser MenuからNew Penを選ぶのでもOKです。)

このような画面に移りました。

このように書いたコードが、下に反映されました。

(※ちなみに、HTMLはhead部分にいつも書くような設定なしでOKです。便利ですよね。)

もしこのコードを保存したければ、右上のSaveを押します。

Saveされたコードは、ダッシュボードから見ることができます。

右上のUser Menuから、ダッシュボードをクリックします。

ダッシュボードには、今まで保存したコードが蓄積されます。

先ほどのコードも、ここに保存されていました。

保存する時に、タグ付けもできるので、再び使う時のためにコード名とタグ付けをしておくと良いでしょう。

このように、どんどん書いたコードを保存していきましょう！

②世界中の人が考えたコードを使える！

まとめ