近年、さまざまなフロントエンドコードサンドボックスが次々と登場しています。ほとんどのサンドボックスは、クライアント（そして時にはサーバー側(cè)）コードを?qū)g験し、他のコードと共有するための迅速かつ簡単な方法を提供します。最も人気のあるのはCodepenです。それは素晴らしいツールですが、必要なすべての機(jī)能を提供するわけではありません。 CodepenをCodepenの代替品と比較する7つのベストコードサンドボックスのレビューを以下に示します。

オンラインコーディングサンドボックスには通常：

が含まれます

• 色分けされたHTML、CSS、およびJavaScriptエディター
• コードコマンドは自動的に完了します
• プレビューウィンドウ（通常）は、マニュアルリフレッシュなしでリアルタイムでリロードできます
• html preprocessor、haml
など
• 少ない、Sass、Stylus、および同様のCSS Preprocessors
• は、React、Preact、Angular、Vue.jsなどの一般的なJavaScriptライブラリを含んでいます（一部の新しいサンドボックスは、バックエンドコード開発を可能にします）
• 開発者コンソールとコード検証ツール
• コードコラボレーションツール
• 短いurl
を介して共有します
• デモを他のページに埋め込みます
• コードのクローニングと導(dǎo)出
• コードリポジトリへ、たとえば
無料の基本サービス
少額の月額料金で、より高度なサービスをお楽しみください
あなたのコーディングスキルを世界に見せてください！

ファイルを作成したり、エディターを起動したり、ローカルサーバーを?qū)g行したりせずに、実験的なコードスニペットをテストおよび保持することができます。

いくつかのより良いオプションを見てみましょう。

キーポイント

オンラインエンコーディングサンドボックス（Codepen、JSFiddle、JS Bin、CSS Deck、CodeSandbox、PlayCode、Plunkerなど）は、色分けされたHTML、CSS、JavaScriptエディター、自動コードコマンドの完了、プレビューウィンドウのリアルタイムリロード、HTMLプリプロセッサ、CSSプレプレセッサー、人気のJavaScriptライブラリ、開発者コンソール、コード検証ツール、およびコードコラボレーションツール。
コードサンドボックスは、ファイルを作成したりローカルサーバーを?qū)g行したりせずに、クライアントおよびサーバー側(cè)のコードを簡単に実験し、他のコードと共有し、実験的なコードスニペットをテストおよび保存する方法を提供します。また、コーディングスキルを?qū)g証する方法も提供します。
Codepenは最も人気のある美しいコードサンドボックスの1つですが、JSFiddle、JS Bin、CSS Deck、CodesAndbox、PlayCode、Plunkerなどの代替品は、マルチファイル編集、非同期AJAXリクエストなどのユニークな機(jī)能と機(jī)能を提供します。 HTMLファイル編集など。

1. codepen

Codepenは最初ではありませんが、最も人気のある美しいコードサンドボックスの1つです。このサービスは、CSS-TricksのChris Coyierが共同設(shè)立し、人気のペン（クライアントデモ）とプロジェクト（Webプロジェクトの構(gòu)築に使用できるオンライン統(tǒng)合開発環(huán)境）に焦點を當(dāng)てています。共有、埋め込み、エラーコンソール、外部JavaScriptライブラリ、人気のあるCSSプレセッサーなどの高度な機(jī)能を備えたクリーンで強(qiáng)力なユーザー編集インターフェイスを提供します。

Codepen Proでは、プライベートペン、資産管理、コラボレーションモード、埋め込みIFRAMEテーマを月額8ドルから提供しています。

2. jsfiddle

jsfiddleは、最も初期のコードサンドボックスの1つであり、その後のサンドボックスに影響します。 HTML、CSS、およびJavaScriptテストの任意の組み合わせに使用でき、さまざまなライブラリとフレームワークを提供します。異常に、非同期AJAXリクエストをシミュレートすることもできます。

JSFiddleはコードに焦點を當(dāng)てているため、ハイライトされたデモや共有ツールなど、さまざまなソーシャル機(jī)能が見つかりません。このインターフェイスは他のインターフェイスよりもシンプルであり、異常に、[実行]をクリックして結(jié)果ペインをリロードする必要があります。しかし、それは常に速く感じられ、そのシンプルさは一部の人にはより好まれているかもしれません。

3. js bin

JS BinはJavaScript Master Remy Sharpによって作成されましたが、今日でも彼によって管理されています。基本のコーディングに焦點を當(dāng)て、それらをうまく処理します。他のいくつかのサンドボックスとは異なり、タグを含むHTMLファイル全體を編集できます。 JS Binは、通常のオプション、ライブラリ、および前処理者に加えて、JavaScript開発に不可欠なログコンソールを提供する最初のサンドボックスの1つでした。商用Proアカウントは、資産のアップロード、プライベートビン、パーソナライズされたURL、Dropbox同期などの高度な機(jī)能を提供します。プライバシーが心配な場合、または他の人にコードのステータスを確認(rèn)したくない場合は、JS Binをローカルにダウンロードしてインストールすることもできます。

4. cssデッキ

名前にもかかわらず、CSSデッキは、ソーシャルおよびコラボレーション機(jī)能を備えた完全に機(jī)能的なHTML、CSS、およびJavaScriptサンドボックスです。それは長い間存在しており、他のサンドボックスに大きな影響を與えてきました。 CSSデッキはCodePenほど能力がありませんが、より速く感じられ、より構(gòu)成可能なコード化されたレイアウト畫面があります。サンプルコードのデモンストレーションを定期的に提出するアクティブなコミュニティがあります。

5. codeSandbox

ほとんどのコードサンドボックスは、HTMLファイル、CSSファイル、およびJavaScriptファイルを提供します（より多くのファイルがインポートされる場合があります）。 CodeSandboxは単なるサンドボックスではなく、オンライン開発環(huán)境のようなものです。

標(biāo)準(zhǔn)のWebプロジェクトと同様に、好きなだけ多くのファイルを追加し、マルチタグ、コードのような統(tǒng)合開発環(huán)境（IDE）を使用して編集できます。 GitHubまたはGoogleアカウントにサインアップすると無料ですが、リアルタイムで他の人と協(xié)力してプロジェクトをGITリポジトリにエクスポートし、NetlifyやVercelなどの靜的サイトホストに展開できます。

CodeSandboxは、リモートで作業(yè)するか、Chromebookなどの非定型開発デバイスを使用する場合の実用的なオプションになる場合があります。

6. playcode

PlayCodeは、複數(shù)のHTML、CSS、JavaScript、およびAssetファイルを追加できるもう1つのオンライン開発環(huán)境です。インターフェイスはCodeSandBoxよりもシンプルですが、高速で美しく見える、使いやすく、初心者にとっては困難ではないかもしれません。

PlayCodeにはログコンソールがあり、異常に、プレビューウィンドウのサイズと更新周波數(shù)を制御できます。編集者は無料ですが、プロジェクトを保存するには、Google、Microsoft、GitHub、または電子メールアカウントでログインする必要があります。

7. プランカー

Plunkerは、複數(shù)のHTML、CSS、およびJavaScriptファイルを追加できる別のプロジェクトベースのエディターです。コミュニティで生成されたテンプレートを含めて、プロジェクトを開始できます。他のサンドボックスと同様に、Plunkerを使用すると、作業(yè)プレゼンテーションを作成したり、他の開発者と協(xié)力したり、仕事を共有したりできます。一部のサンドボックスほど魅力的ではないかもしれませんが、UIは高速で強(qiáng)力なままです。

貢獻(xiàn)者の積極的なコミュニティがあります。ほとんどの人はAngular Demosを提出しているようですが、Vanilla JS、React、Preactの起動テンプレートもサポートしています。

その他のオプション

もちろん、Glitch、Esnextbin、Jsitor、Liveweave、Dabbletなど、他にも多くのコードサンドボックスがあります。 Stackblitzは、フロントエンド開発をサポートする新しいサンドボックスですが、node.js、next.js、およびgraphQLを使用してバックエンドコードを?qū)g験することもできます。

ヒント：stackblitzを試すには、ブラウザのアドレスバーに「node.new」（引用符なし）を入力するだけです。

お気に入りのサンドボックスを見逃しましたか？教えてください！

バックエンドコードを共有するためのその他のオプションについては、James Hibbardのオンラインバックエンドコードサンドボックスの概要をご覧ください。

獨自のオンライン開発環(huán)境をホストしたい場合は、IceCoderをチェックして、IceCoderを使用してブラウザの編集コードに関するSitePointのチュートリアルを參照してください。

似たようなものが必要ですが、コードを扱うときはオンラインではない場合は、Webメーカーをチェックして、「オフラインのブラウザベースのCodepen Alternative」の「Web Maker」のSitePointのチュートリアルを參照してください。

幸せなコーディングをお祈りします！

最高のコードサンドボックスとCodepenの代替案について

FAQ

コードサンドボックスで探している重要な機(jī)能は何ですか？

コードサンドボックスを選択する場合、いくつかの重要な機(jī)能を考慮する必要があります。まず、使用している言語をサポートする必要があります。ほとんどのコードサンドボックスはHTML、CSS、およびJavaScriptをサポートしていますが、PythonやRubyなどの他の言語を使用している場合は、それらをサポートするプラットフォームを見つける必要があります。第二に、コードを簡単に記述してテストするための使いやすいインターフェイスが必要です。第三に、作業(yè)を保存して共有できるようにする必要があります。これは、他の人と協(xié)力したり、プロジェクトを提示したい場合に特に重要です。最後に、プラットフォームにアイデアを共有してフィードバックを得ることができるコミュニティがあるかどうかを検討してください。

コードサンドボックスを使用してコーディングスキルを向上させる方法は？

コードサンドボックスは、コーディングスキルを向上させるための優(yōu)れたツールです。これらは、さまざまなコーディング技術(shù)を?qū)g験し、結(jié)果をリアルタイムで表示できる安全な環(huán)境を提供します。また、獨自のプロジェクトやコーディングの課題を作成することで、問題の解決を練習(xí)するためにそれらを使用することもできます。多くのコードサンドボックスには、他のユーザーから學(xué)び、仕事についてフィードバックを得ることができるコミュニティもあります。

利用可能な無料のコードサンドボックスはありますか？

はい、無料のコードサンドボックスがたくさんあります。最も人気のあるものには、Codepen、JSfiddle、Repl.itが含まれます。これらのプラットフォームは、コードを書いてテストするためのさまざまな機(jī)能を提供します。また、作品を共有して他の人から學(xué)ぶことができるコミュニティもあります。ただし、これらのプラットフォームは自由に使用できますが、有料ベースでプレミアム機(jī)能を提供する場合があることを忘れないでください。

共同プロジェクトにコードサンドボックスを使用できますか？

もちろん

！多くのコードサンドボックスは、他の人との簡単なコラボレーションを提供します。たとえば、プロジェクトを他の人と共有し、貢獻(xiàn)するように招待することができます。一部のプラットフォームもリアルタイムのコラボレーションを提供し、複數(shù)のユーザーが同じプロジェクトを同時に処理できるようにします。これは、チームプロジェクトやコードのヘルプを得るための素晴らしい方法かもしれません。

コードサンドボックスはどれくらい安全ですか？

コードサンドボックスのセキュリティは、プラットフォームごとに異なります。ほとんどの評判の良いプラットフォームは、コードと個人情報を保護(hù)するための措置を講じています。ただし、公開されているコードは、他の人が見て使用できることを忘れないでください。デリケートなプロジェクトに取り組んでいる場合は、プライベートリポジトリまたはプライベートコーディングスペースを提供するプラットフォームの使用を検討することをお勧めします。

コードサンドボックスを使用してポートフォリオを構(gòu)築できますか？

はい、コードサンドボックスはポートフォリオを構(gòu)築するための優(yōu)れたツールです。それらを使用してプロジェクトを作成および提示し、潛在的な雇用主またはクライアントにコーディングスキルを示すことができます。また、多くのプラットフォームを使用すると、プロジェクトを他の人と共有することもでき、フィードバックを得て仕事を改善する機(jī)會が與えられます。

CodePenの代替品は何ですか？

Codepenには、JSFiddle、Repl.it、Glitchなど、いくつかの選択肢があります。これらのプラットフォームは、複數(shù)の言語のサポート、使いやすいインターフェイス、作業(yè)を保存して共有する機(jī)能など、CodePenと同様の機(jī)能を提供します。また、アイデアを共有してフィードバックを得ることができるコミュニティもあります。

コードサンドボックスをオフラインで使用できますか？

一部のコードサンドボックスは、インターネット接続なしでコードを書き込み、テストできるオフライン機(jī)能を提供します。ただし、すべてのプラットフォームがこの機(jī)能を提供するわけではありません。オフラインコーディングが必要な場合は、代わりにローカル開発環(huán)境の使用を検討することをお勧めします。

モバイルデバイスでコードサンドボックスを使用できますか？

はい、多くのコードサンドボックスはモバイルに優(yōu)しいもので、スマートフォンやタブレットで使用できます。これは、いつでもどこでもスキルをコーディングまたは練習(xí)するのに最適な方法です。ただし、モバイルデバイスでのコーディングは、大畫面でのコーディングほど快適で効率的ではない場合があることを忘れないでください。

コードサンドボックスにコーディングの問題がある場合、どうすればヘルプを得ることができますか？

多くのコードサンドボックスには、コードに関する助けを求めてフィードバックを得ることができるコミュニティがあります。また、スタックオーバーフローやコーディングフォーラムなどのオンラインリソースを使用して、質(zhì)問をしたり、問題の解決策を見つけたりすることもできます。さらに、一部のプラットフォームは、新しい概念とテクニックを?qū)W習(xí)するのに役立つチュートリアルとガイドも提供しています。

以上が最高のコードプレイグラウンドとCodepenの代替品の7つの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。