JavaScriptによるWeb開発を始めるには挫折しがちですが、それを簡単にするツールがあります。

CodePen.ioは、コーディングを学び、最小限の手間で迅速にアイデアをプロトタイプ化するために設計されたブラウザ内のコーディング環境です。

この記事では、このサイトの機能の一部と、それらがどのように優れたプログラマーになるために役立つかを説明します。

サイファーペン（codepen）は何ですか？

CodePenにはペンと呼ばれるものがあり、HTML、CSS、JavaScriptの3種類のウィンドウと、入力と同時にリアルタイムに更新されるプレビューペインが用意されています。

Web開発者がWebサイトのアイデアを発表する場として利用されることが多いですが、フロントエンドのWeb開発の基本を学ぶ場としても最適です。ここでは、CodePenを使う上で知っておきたい注目の機能を紹介します。

1 プリプロセッサー

プリプロセッサーは、コーディングを簡略化するために使用される解釈言語またはコンパイル言語です。利便性を高めるために、言語に機能を追加したり、コードを読みやすくしたりするのです。Web開発では、HTML、CSS、JavaScriptのプリプロセッサを組み合わせて、きれいなコードを素早く作成する。

CodePenでは、プリプロセッサを動的に切り替えて、リアルタイムにコンパイルするコードを確認することができます。View Compiled HTML/CSS/JSを選択すると、コードがどのように解釈されるかを確認することができます。

今回は、HamlとSassを使って、ヘッダーテキストの一部のスタイルを設定する簡単なサイトを作成しました。View Compiledを選択すると、標準的なHTMLとCSSが表示されます。この例では、違いはごくわずかです。しかし、新しい言語を学習する際には、コンパイル後に前処理されたコードがどのように見えるかを確認することが有効です。

2 外部リソース

CodePenはプリプロセッサのネイティブサポートに加え、外部スクリプトもサポートしています。そのため、ライブラリの実体験を伴う個人プロジェクトや、Reactionなどの人気ウェブアプリケーションライブラリのリフレッシュに最適な環境となっています。

外部ライブラリを追加するには、ペンの「設定」ペインを開き、「JavaScript」タブに移動します。リソースを追加するには、リソースのURLを手動で追加する方法と、リソースを検索して追加する方法があります。

この機能は、mo.js社の記事、Babelの前処理で使用しました。

CodePenのIan (@Bardoctorus)によるPen Mojs MUOの例を見てください。

はい、コードペンは埋め込むことができます！どうぞ、上のプレビューペインをクリックして、Mo.jsが何をコーチしたのか見てみてください。

その他のペンは、外部ライブラリと同様にインポートすることができます。つまり、以前に書いたペンから要素を抽出して、新しいペンの中でモジュールのように使うことができるのです。CodePenユーザーのAdamのシンプルなPollペンが良い例です。

III. テンプレート

新しいコンセプトを学んだり、新しいアイデアを試したりするとき、同じようなコンポーネントを使ったり、同じ導入手順を読み直したりすることがよくあります。codePenでは、テンプレートペンを作成することで、繰り返しを減らし、要点に直接到達することができます。

テンプレートを作成するには、新しいペンを開き、変更を加えてから、設定メニューのテンプレートスライダーを選択します。

https://vimeo.com/221428690

これまで、無料ユーザーは**3つのテンプレートしか持てませんでしたが、すべてのユーザーが自分のアカウントにいくつでもテンプレートを持つことができるようになりました。新しいアイデアを最小限の遅れでスタートさせるのに最適です

4 コラボレーションモデル

CodePenの最大の特徴は、コラボレーションとティーチングができることでしょう。プログラマーのコラボレーションを実現する優れたツールはすでに数多くありますが、CodePenのアプローチはシンプルで直感的です。

CodePen Proのユーザーは、新しいペンを作成し、「ビューの変更」メニューから開いて共同作業を行うことができます。これにより、ペンへのリンクが、お使いのCodePen Proプランに応じて、特定の人数で共有可能な招待状に変更されます。

この例では、私がHTMLを書き、友人がCSSをリアルタイムで更新し、マーカーカーソルで作業箇所を示しています。

リンクさえあれば、プロユーザーはもちろん、CodePenのアカウントを持っていても、誰でも参加でき、ブラウザ内でチャット機能を利用することができます。自動保存がオフの場合、ペンの所有者だけが変更を保存できるため、何も危険を冒さずに他の人にコードを公開することができる安全な方法です。

このモデルの開放性は、難しい概念を指導するために、ほとんど誰でも自分のペンに招き入れることができるので、初心者にとって有益です。また、入社希望者の面接にも最適で、プロがこのように使っているそうなので、便利な方法だと思います

5 プロフェッサーモード

プロフェッサーモードは、プロのユーザーだけがコードを編集できるルームを開催することができます。ホストのプロプランにもよりますが、10～100人のユーザーが視聴やチャットを行うことができます。

プロフェッサーモードでは、教室での学習と遠隔学習、またはその両方の組み合わせを柔軟に選択することができます。プロフェッサーモードを使えば、教室の後方にいる人も前方にいる人と同じ体験ができ、教師はエラー訂正を伴うライブアップデートを表示することが可能です。

6 プレゼンテーションモード

当然のことながら、プレゼンテーションモードはプレゼンテーションコードを意識して設計されています。アプリケーションは、オーバーヘッドプロジェクターでの使用を想定した簡易表示で、低速のインターネット回線や脆弱なハードウェアでの使用を想定した表示モードの最適化を行っています。

賢明な読者の皆様は、CodePenの無料版がまさにこの機能を備えていることを既にご存知かもしれませんが、Proモードにはいくつかの便利な機能があります。レイアウトや文字サイズ、テーマも自由に変更でき、ペンへのリンクを表示すると、短縮URLが大きく表示されるので、プロジェクトの共有が容易になります。

これらの小さな変更と、表示するものに合わせてプレビューウィンドウを拡大縮小できる機能により、デモモードは先生や開発者が同僚にアイデアを発表するのに最適なものとなっています。また、プログラミングの面接を受ける場合、デモモードはコードのデモを行うための明確で簡潔な方法です。

7モード

CodePenのデザインパターン集を利用すれば、インスピレーションを得るのがより簡単になります。

各カテゴリは、特定のタスクのためにCodePenユーザーから提供されたサンプルコードの集合体です。Webサイト用のダイナミックボタンを作成する方法をお探しですか？アコーディオンメニュー？ほぼすべての事例が豊富なカテゴリー分けをされています。

また、これらのパターンは、インタラクティブなボタンの仕組みや、ダイナミックユーザーインターフェースのさまざまな仕組みを学ぶのに最適な方法です。

8 エメット

以前はZenコーディングと呼ばれていたEmmetは、HTMLとCSSの開発において最も時間効率の良い手法として広く知られています。このプラグインは、自分で書くことの多いコードの一部を簡単なショートカットに変換してくれます。

説明するよりも実際に見てもらったほうがわかりやすいので、HTML文書では通常の設定でお願いします：。

これを各HTML文書に追加する操作を2つに簡略化しました。Emmetを使って、「Press Tab.

EmmetはCodePenに標準搭載されており、JavaScriptの新しいコンセプトを学ぼうとするとき、HTMLやCSSのサポートを素早く作成する必要がある場合に特に有効です。

コードペンを使った開発で、より良い体験を

CodePenはWeb開発者にとって素晴らしいツールであり、その分野は拡大しています。 JavaScriptは、今後のWeb開発のために学ぶべき素晴らしい言語です。

JavaScriptを始めたい人のための素晴らしいチュートリアルやコースが用意されており、CodePenは新しいスキルを試すのに最適な環境です。