Web 開発を学ぶための 8 コード プレイグラウンド

初心者のプログラマであっても、熟練した開発者であっても、コード プレイグラウンドは他の人と共有したり学習したりするときに役立ちます。

コード プレイグラウンドは、コードを作成、コンパイル (または実行) し、他のユーザーと共有できるオンライン サービスです。また、他のコードをフォークしたりいじったりすることもできます。

Web 開発を学習し、HTML または CSS のスキルを練習している場合は、コード プレイグラウンドを使用してオンラインで簡単な Web ページを作成すると便利です。また、これらのプラットフォームのトレンド プロジェクトを活用し、学習リソースとして利用することもできます。

一方、プロの Web 開発者で、自分の作品を披露したい場合は、コード プレイグラウンドが最適な場所です。

最も良い点は、ほとんどのコード プレイグラウンドには無料枠があり、コードの結果を Web サイトに埋め込むことができることです。

いくつかレビューしてみましょう！

JSフィドル

JSFiddle は 、HTML、CSS、JavaScript スニペットをテストできるコード プレイグラウンドです。これは 2009 年に概念実証アプリとして誕生し、現在では最大のコード プレイグラウンドの 1 つとなっています。

無料のアカウントを作成し、すべてのフィドルを保存したり、他の人のスニペットをフォークしたりすることもできます。

JSFiddle のもう 1 つの印象的な点は、コラボレーション セッションです。 Fiddle でコーディング中にオーディオ チャット セッションを作成できます。

コード スニペットの結果とソース コードを埋め込みたいブロガーの場合、JSFiddle は優れた選択肢となるでしょう。

もちろん、執筆時点では、このコード プレイグラウンドは Python、Go、PHP などの他の一般的なプログラミング言語をサポートしていないため、フルスタック アプリを構築することは期待できません。

特徴

• 無料で使用できるプラットフォーム
• ミニマルなインターフェース
• HTML、CSS、および JS のサポート
• プラットフォーム上の公開 Fiddle スニペットをフォークする
• サイト上で直接音声チャットを使用して他のユーザーとコラボレーションする
• 優れた ドキュメント

コードペン

Codepen は単なるコード プレイグラウンドではなく、スキルを向上させ、最高の成果を共有したいと考えている開発者のコ​​ミュニティです。

600 万人を超えるユーザーがおり、フロントエンド開発で最も使用されているオンライン コード エディターの 1 つです。フロントエンドの学習を始めている場合は、学習の旅を続けるためのアイデアとモチベーションを見つけることが理想的です。

開発経験についてはどうですか？

Codepen には、HTML、CSS、JS でコーディングするための 3 つの調整可能なパネルを備えた使いやすいエディターが備わっていると言えます。 Codepen には、JavaScript および Typescript や Sass などの CSS プリプロセッサのサポートが組み込まれています。また、npm パッケージに依存している場合は、設定パネルからインストールできます。

特徴

• オプションの プロプラン
• 使いやすいコードエディター
• 素晴らしいコミュニティ
• ほとんどのコードペンはオープンソースです
• フロントエンド開発を実践するのに理想的な場所

コードサンドボックス

適切な設定がなければ、Web サイトのプロトタイピングは困難な作業となる可能性があります。 Web サイトを迅速に構築することが最優先の場合、 CodeSandbox を 使用することは迷う必要はありません。

その名前が示すように、CodeSandbox はフロントエンド開発のためのサンドボックス環境を提供します。

GitHub の統合やデバッグ ツールから、カスタマイズ可能な VS コードのようなエクスペリエンスに至るまで、このコード プレイグラウンドは、数秒でコーディングを開始するためのすべてを提供します。

主な目的がコラボレーションである場合、サンドボックス リンクを共有するだけで、リアルタイム ペア プログラミングを行う準備が整います。

たとえば、厳選した 最適なサンドボックス のリストを探索できます。

CodeSandbox のすべての特徴を列挙していると時間が足りなくなってしまうので、その重要な機能について触れておきましょう。

特徴

• GitHubの統合
• 人気の VScode エディターを強化する Monaco エディター に基づいています
• コラボレーションファーストプラットフォーム
• Vercel または Netlify にデプロイする
• デバッグツール
• すぐに使えるテストフレームワーク
• npmのサポート

ソロラーン

人気のコーディング学習プラットフォーム Sololearn には、Web 開発用の独自の コード プレイグラウンド があります。

正直に言うと、これはこの記事で紹介した他のオンライン エディタのようなフル機能の IDE ではありませんが、コードを書いて実行できる、気を散らすことのない環境を提供します。

プログラミングを始めたばかりの場合は、これで十分です。

Sololearn のもう 1 つの優れた点は、優れたコミュニティといくつかのプログラミング言語のサポートです。これは、他のテクノロジを試してみたい場合に非常に適しています。

特徴

• Sololearn アカウントで無料で使用できます
• シンプルなオンラインコードエディター
• コードを共有するための大きなコミュニティ
• 複数の言語のサポート
• Sololearn コースによる優れたエコシステム

要約すると、Sololearn のコード プレイグラウンドにはバッテリーは付属していませんが、本来の機能は動作します。すでに何百万もの Sololearner の一員である場合は、試してみるべきです。

コードプライ

Codeply の最も優れている点は、すぐに使用できる複数のフレームワークとライブラリ、およびレスポンシブ デザイン指向のコード エディターのサポートです。

React、Vue、Angular などの新しいフレームワークを使い始めたばかりの場合は、開始テンプレートの完全なセットと 40,000 人を超える開発者の素晴らしいコミュニティがある Codeply から始めるのが最適です。

特徴

• 無料で使用できるプラットフォーム
• シンプルかつ分かりやすい ドキュメント
• 1回限りの料金プロプラン
• 50以上のライブラリが含まれています
• さまざまな画面解像度で Web サイトをテストする

リプリット

Replit は 、おそらくあらゆる開発者にとって最も適したオンライン IDE です。これには、単純なホームページから最新の JS ライブラリを使用した複雑な Web アプリまで、構築する必要がある ものが 文字通りすべて含まれています。

Replit を使用すると、50 以上の言語でコーディングし、他の言語と同期してアプリを作成し、プログラムをテストし、GitHub と統合し、最大の開発者コミュニティの 1 つにアクセスできます。

Replit のすべての機能について説明すると文字通り紙が足りなくなりそうなので、主な機能について説明しましょう。

特徴

• 無料のスターター パックまたは月額 5 ドルの ハッカー プラン
• マルチプレイヤーモード（ライブペアプログラミング）
• 大きなコミュニティ
• 多くの言語がサポートされています
• エディタのカスタマイズ
• 「実行」ボタン: カスタマイズ可能なアクションを使用してプロジェクトを実行します。
• 秘密の保管場所
• ホストされたコード

スタックブリッツ

VS コードなしでは生きていけない場合は、 StackBlitz が 最適なオプションです。 CodeSandbox と同様に、この人気のコード エディターを強化する Monaco エディター に基づいています。

GitHub アカウントでサインインするだけで完了です。使い慣れた環境にアクセスできます。

コード エディターのエクスペリエンスは別として、これは非常に堅実なプレイグラウンドです。 React、Vue、Angular、Svelte、Ionic などのフロントエンド フレームワークやライブラリ用のすぐに使用できるテンプレートを使用できます。

ただし、このツールの主な特徴は、Node.js、Next.js、GraphQL などのバックエンド フレームワークを操作できることです。

特徴

• 無料「カデット」プラン
• ブラウザ内での VS コード エクスペリエンス。これには、Intellisense、プロジェクト検索などが含まれます。
• 流動的な (本当に流動的な) コーディング エクスペリエンス
• オフライン コード エディター (1 ～ 2 日接続が切断された場合に役立つ可能性があります)
• ホストされたアプリの URL: 簡単なライブ共有

グリッチ

最後になりますが、 Glitch は 、Web アプリの作成を容易にする共同プログラミング環境です。

コーディングするのに最も楽しいインターフェイスの 1 つです。ちょっと見てください:

不思議に思っている方のために言っておきますが、はい、ダークモードがあります。

美しいインターフェースはもちろんのこと、Glitch はその使いやすさ、ライブペアプログラミング、フレンドリーなコミュニティにより何百万もの人々に使用されています。

HTML、CSS、JS だけでなく、Node.js (バックエンド)、React、または イレブンティ (グリッチ ページに進むまで存在を知りませんでした) を使用して、あらゆる種類のフルスタック アプリを作成できます。

特徴

• アップグレードオプション付きの無料プラン
• ブラウザでフルスタック アプリを開発
• ライブペアプログラミング
• 楽しいインターフェース
• スターターアプリ
• 他人の公開アプリをリミックス (またはフォーク)

結論

現在では、上で見てきたようなコード プレイグラウンドを使用して、あらゆる Web アプリを完全に構築できます。重い IDE をコンピュータにダウンロードする必要はなくなり、Web ブラウザを終了せずにビルド、デバッグ、テスト、展開を行うことができます。

これらのツールの使用方法に移行するかどうかよくわからない場合は、ベスト コード エディター (マシンにインストールする必要があるもの) 10 個をチェックしてみてはいかがでしょうか。