本格的にサイト模写を初めて１ヶ月がたちました。

私が普段使ってるエディタは「AWS（Amazon Web Services）」。

オンラインのプログラミング講座「Skill Hacks」でもおすすめされているエディタだったので迷いなく使ってたんですが、いざ実際に模写で使ってみると…

少しの変更もすぐ反映されないと、イライラしてしまってw

さらにアップロードでの時間ロスに気づき…

aimi

集中力が途切れやすい私。

気分が乗ってきてる時ほど、フルアクセルで頑張るしかないのです…泣、でもこうも待たされるとちょっとね…

リアルタイムプレビューのあるエディタを探していたところ、見つけました…！

「CodePen（コードペン）」です！

「CodePen（コードペン）」とは？…無料で使えるリアルタイムプレビューOKなエディタ

無料で使える、リアルタイム・プレビュー可能なエディタです。

画面の小さいパソコンだとちょっと見にくいですが、左から順にHTML、CSS、必要であればJavascript、下にはプレビューです。

aimi

つまり、４画面がいっきに管理できるということなんですね。

以前使っていたAWSと比べると圧倒的に使いやすい＿φ(￣ー￣ )

その理由をご説明しますね。

codepenで模写中！

「CodePen」のメリット

リアルタイム・プレビュー

「CodePen」のプレビュー画面＝タイムラグなし！

本当にすぐ、自分の書いたコードが画面下のウインドウに反映されます。

クラウドブラウザのため、PCを変えてもどこでも利用可能

私のPCはMacですが、Windowsでももちろん使えます。

仮に漫画喫茶で急にコードを書かなければならなくなった場合でも、すぐに対応可能。

旅行先での客先トラブルがあっても、漫画喫茶さえあればお仕事対応できちゃいますよ♪（もちろん急な用事はないに越したことはないですが…）

WordPress埋め込み可能

私のブログはまだまだ記事数が少ないですが、いずれコードについても書いていこうと思っているので、この機能については棚からぼたもちでした( ´∀｀)

ブログにコードを貼り付けられるということは、

• 同じカスタマイズを共有できる
• 同じプロジェクトに加われる

ということ。

他のエディタでももちろんできるものもありますが、かなり使いやすいですし、コードも直感的にいじれて見やすいので万人に受け入れられると思います。

つまり、ブログに貼っても違和感がないということです。

これは助かりますね。

codepenの埋め込みもボタンひとつで簡単に出来る

実際の「埋め込みコード」は以下のようになります。

See the Pen
30DAYSトライアル模写 by aimi＠高知アウトドアライター (@aiaiminini)
on CodePen.

立ち上げ早い・同じPCならログイン不要

AWSで不満に思っていたのは

• 重い
• 立ち上げのたびにログイン・立ち上げ待ちの時間が必要（ファイルが溜まってくると余計長くなる）

など。

私は細切れの時間でコーディングすることが多いので、長く使っているうちに毎回ログインするのは非常に不便に思っていました。

なのでログイン不要なのはすごく時間節約になります。

codepenダッシュボード。プロジェクトを選べばすぐにに前回の画面に戻ります

無料機能でも、まったく問題ない

有料機能と大きなちがいは「画像ファイルを名前をつけて保管できる（AWSにはあった機能…）」ことなんですが、保管できなくてもgoogledrive(外部のurlで管理)を読み込ませればしっかり表示します。

詳しくは以下のブログを参考にさせていただきました。（リンク失礼します）

CodePenの無料会員で画像を使うには

こんにちは、ゆんつです。手軽にソースコードとその実行結果を表示してくれるとても便利なサービス「CodePen」。このCodePenで画像を使いたい場合があります。有料プランの場合はアップロードサーバーが用意されているので、そのサーバーに画像

konpure.com

チーム内でコードを共有できる

Githubのように、チーム内でコードを共有できるので「在宅ワーク」にはぴったり。

また”世界の知らない人が自分のコードを見てくれる”というのも、なかなか緊張感のある体験♪

自動保存機能あり

これはどのエディタでもそうだと思うのですが、「CodePen」にもしっかりと自動保存機能があります。

あまりに保存しないで作業していると「あなたは50つの未保存動作があります」と教えてくれますよ。

aimi

黄色い帯の「お知らせ」で教えてくれるので、すぐにわかりますよ♪

「CodePen」のデメリット

すべてが英語

右クリックの「翻訳」を使ってもいいのですが、肝心のコードまでが翻訳されてしまうww

なので翻訳機能は基本、使えません( ´∀｀)

しかし、全ての機能が直感で使えるので難しくありませんよ！

サービス終了したら使えない（埋め込みもはがす必要）

「CodePen」は2018年くらいから始まった新しいサービスですが、Webの世界は移り変わりが早いので突然サービスが終わることも考えられます。

その場合は引き上げるしかなくなります、仕方ないですね…

すべて公開されてしまう（非公開機能は有料）

メリットの項で申し上げましたが、チームでも使える・埋め込みでも使えるツール、ということ＝世界に公開されているということなので、見られたくないコードは有料プランで運用すべき。

または「Github」のようなツールもあるので、そちらを検討した方が良さそうです。

まとめ：「CodePen」は初心者にうってつけのコードエディタ

ここで一度まとめましょう。

aimi

無料でこれだけの機能が使えるなら、、、！

まさに初心者にうってつけのツールであることは間違いないです♪

いまは無料でもたくさんのエディタがあるので、迷ったらぜひ使って見てほしい「CodePen」。

ぜひチェックして見てくださいね！

以上、『【初心者向けエディタ】「CodePen」のリアルタイム・プレビューが秀逸な件』の記事をお送りしました。

関連記事

【Windowsから乗り換えたゾ】コーディングには「MacBook Pro」一択な5つの理由

コーディングを始めた当初、WIndows→「Macbook Pro」に乗り換えました。

今やMacの虜になってしまったのはいうまでもありません٩( ᐛ )و

ちょっと高いけれど、「稼ぐぞ！」というモチベーションを上げるアイテムとしてオススメです。

【Windowsから乗り換えたゾ】コーディングには「MacBook Pro」一択な5つの理由

こんにちは、高知の田舎でフリーランスのコーダーをしているaimiです。WEB関連の仕事を始めて4年/フリーランスのコーダーになり半年が経ったわけですが…コーダーになった記念に、夫が「MacBook Pro 8GB 13inch」をプレゼントしてくれたんです。

www.programmer.aimisuna.com

2020.04.21

【完全初心者向け】「Skill Hacks」を完走したので、徹底レビューする

本記事でも冒頭で紹介させていただいた、完全オンラインのプログラミング講座「Skill Hacks」。

69,800円買いきりで、永久質問無料！

HTML・CSSのほかに、BootstrapやRuby on railsの基礎が学べます。

（この言語の選択もナイスチョイス＆秀逸、これも記事内で理由説明しています。）

「スクールに何十万円もかけられないよ…！」という方は必見・要チェックのサービスです。

【完全初心者向け】「Skill Hacks」を完走したので、徹底レビューする

こんにちは、駆け出しフリーランスエンジニア主婦のaimiです。プログラミングはまったくの未経験だった私でしたが…先日、プログラミング講座「SkillHacks」を完走いたしました!しかしプログラミングってぜんぜん簡単じゃありません。じゃあなんで挫折せず最後までできたのか？その理由まで、書いていこうと思っています。

www.programmer.aimisuna.com

2020.05.01

【独学プログラミング】「SkillHacks」は高いの？完走した私が解説する

「SkillHacks」は質問無制限サポート付き・69,800円。

月数万円の収入しかない、私には思い切りの必要な金額でした。

完走してみて高かったのか？安かったのか？

ぶっちゃけた解説をさせていただきました！

【独学プログラミング】「SkillHacks」は高いの？完走した私が解説する

こんにちは、フリーランスエンジニア主婦のaimiです。先日「SkillHacks」を完走したよ！という記事を書かせていただいたのですが…「ぶっちゃけ、プログラミングスクールよりはお値打ちだよ！」という記事がたくさんありますが、69,800円だって決して安い金額じゃありません＿φ(￣ー￣ )

www.programmer.aimisuna.com

2020.05.03