HTML、CSS、Javascriptコードの行を記述およびテストするためのCodepenやJSFiddleなどのサイト、またはライブプレビュー付きのWebアプリケーションプロジェクト

学びたい初心者と経験豊富な専門家の両方のために、コードの行をテストして、プレビューとほぼリアルタイムで結果を確認できるWebサイトがいくつかあります。 これらは、画面が2つに分割された実際のアプリです。一方の側では、HTML、CSS、PHP、Javascriptなどのコードを記述し、もう一方の側では、キーを押して実行した後、実際にどのように見えるかを確認します。そのようなコードはウェブサイトの中にありました。
これらは単なるコードエディタではなく、間違いを心配することなくプログラミングをテストし、バグがどこにあるかをすばやく見つけることができる場所です。 CodepenとJSFiddleは、このカテゴリで最も人気のある2つのサイトですが、他にもたくさんの選択肢があります。

アプリケーションやウェブサイトに使用される主なプログラミング言語

オンラインでコードをテストするサイト

1） CodePen

CodePen は無料で直感的で使いやすいため、プログラマーが使用する最も人気のあるサイトです。 プログラマーの世界の標準になったので、Google検索を実行して、Codepenによって既にコンパイルされているページを見つけ、それがあなたが探していたものであるかどうかをすぐに確認します。 柔軟なビューポートと記述されたコードの即時実行により、JavaScriptおよびCSSアニメーションのテストに十分なだけでなく、外部スクリプト（React、Vue、およびCDNを介して利用可能なその他のもの）に簡単に接続できます。
CodePenはこのカテゴリーでトップの座に値しますが、共同コーディングや全ページのライブビュー（部分的なライブビューは無料）など、一部の機能は有料です。

2） jsfiddle
プログラミングコードを記述およびテストするためのサイトの世界で2番目（時系列で最も古いものの1つですが）は jsfiddle、主にJavaScriptの作成とテストを対象としています。 HTMLおよびCSSコードにも使用でき、コード補完のヒントをサポートしているため、経験の浅い場合はCodePenよりも望ましい場合があります。
JSFiddleの大きなプラスポイントは、コラボレーションモード（音声チャットとテキストチャットを含む）を無料で提供しているため、他の人と同時にコードで作業できることです。

3） 失敗
多くのコードサイトでは、HTML / CSS / JSをコーディングし、静的Webページを生成できます。 失敗 プロジェクトを保存するための少しの空きストレージスペースを提供し、Node.jsサーバー側コードを簡単に実行できるようにします。 それは共同の方法でグリッチでプログラムすることができます、
また、コラボレーションコーディング、バージョン管理、多くの学習リソース、GitHubとの良好な統合、簡単な埋め込み、アドバイスを求めるコミュニティ、自由に編集または使用できる既成のプロジェクトなど、他にも多くの優れた機能が付属しています。 VisualStudioとの統合。 これは、Webアプリを起動する（またはその方法を学ぶ）ための優れた、迅速で簡単な方法です。

4） サンドボックスコード
サンドボックスコード グリッチに似ていますが、もう少し複雑で完全です。 CodeSandboxは、より柔軟でカスタマイズ可能なインターフェイスを備えており、完全なWebアプリケーションを配布でき、ファイルを保存するスペースがあり、プログラマーだけが作成できる基本的な作業のほとんどを実行します。

5） Repl.it
Repl.it は、フロントエンドとバックエンドのコードをサポートするPythonなどのさまざまなタイプのプログラミング言語をテストするための開発環境であり、サイトとアプリケーションをデプロイでき、GitHub統合と直感的なインターフェイスを備えています。 Webページをデザインしようとしている人にとっては少し難しいかもしれませんが、経験豊富なプログラマーにとっては、検討するリソースです。 インターフェイスを設計しているだけの場合、またはコードを初めて使用する場合でも、すべてを定期的にプログラムする場合は、調査する価値があります。

6） Liveweave はJSFiddleと非常によく似たWebエディターであり、Webサイトで使用するコードを記述およびテストし、ライブプレビュー機能、HTML5、CSS3、JavaScript、およびjQueryのコードヒントを備え、プロジェクトをzipファイルとしてダウンロードできます。 jQuery、AndgularJS、Bootstrapなどの外部ライブラリを非常に簡単に追加することもできます。

7） サンドボックスコード は、React、Vue、Angularなどのさまざまなフレームワークを使用してWebアプリケーションプロジェクトを開始できる無料のオンラインスペースです。

8） StackBlitz は優れたJavaScriptアプリエディターであり、VueやReactなどのさまざまなフレームワークをサポートしています。

9） 痰、ミニマリストサイト、クイックテストに最適。

10） JSBin、JSFiddleのよりミニマルなバージョンで、Webページをコーディングし、それがどのように見えるかを確認します。

十一） CSSDeck は、いくつかの基本的なHTML/CSSおよびJSのアイデアを試すためのシンプルなサイトです。

12） ICECoder、コードをテストするための別のオンライン環境。ブラウザで実行され、オフラインでも使用できるプログラムをダウンロードする必要があります。

13） プランカー、コード、ファイル、ウェブページを記述してGithubに保存できるインターフェースツール。

14） スクリムバ は、ビデオとコードエディタの革新的な組み合わせであり、学生や学習したい人にとって完璧な学習環境です。

15） ウェブメーカー、オフライン機能とCodePen統合を備えたWebアプリビルダー。

16） RAID、美しいグラフィックとCSSコードの自動修正を使用してHTML / CSS/JSコードを記述してみてください。

17） PlayCode また、基本的なHTML / CSS/JSコードをリアルタイムでテストするための環境でもあります。

19） JSItor はCodepenとJSFiddleの別の代替手段であり、HTML、CSS、Javascriptを組み合わせたコードを記述して、結果をすぐに確認できます。

コースやインタラクティブなチャレンジで遊んでプログラミングを学ぶサイト