経験豊富なプログラマーであろうと新入生であろうと、複雑なプロジェクトに取り組んでいると、事実上、問題に遭遇する可能性があります。 プロジェクトを多くのモジュールに分割すると、問題が発生し、エラーの追跡と解決策の発見がより困難になります。 他の状況では、作業中の問題に対する適切な解決策が見つからないため、個々のインスタンスのデバッグが難しい場合があります。
また、コードの一部として発生することもあり、その時点では複雑に見える場合があります。 JavaScriptは、習得が非常に簡単なWebベースの言語の12つです。 デスクトップブラウザを起動し、開発者ツール(通常はFXNUMX)に移動するだけで、完了です。 その後、複雑なソフトウェアをインストールしたり実行したりすることなく、JSを試すことができます。
開始するには、必要なのはブラウザだけです。 このシンプルさを箱から出してすぐに使えるのは素晴らしいことですが、もっと必要な場合もあります。 たとえば、最近発見した新しいWeb APIを試してみたいが、新しいプロジェクトを開始したくないとします。
この投稿では、最も人気のあるXNUMXつのJSプレイグラウンド、CodePen、CodeSandbox、およびStackBlitzを比較対照します。 始めましょう!
コードペン
フロントエンドWeb開発ツールは常に進化しており、テキストエディターは、開発者の生活を簡素化する最新テクノロジーの大きなコンポーネントです。 AtomやNotepad++などのスタンドアロンのテキストエディタとは別に、プログラムのインストールを必要とせず、より優れたコラボレーションを促進するブラウザベースのエディタが近年爆発的に増えています。
CodePenは、「ユーザーが作成したHTML、CSS、およびJavaScriptコードスニペットをテストおよび表示するためのオンラインコミュニティ」であり、フロントエンドWebページをより適切に作成する方法を学ぶ素晴らしい機会を提供します。
CodePenにはXNUMXつの「モード」があります。 最初で最も一般的に使用されるのはペンです。 ボタンをクリックしてエディターに直接転送するのと同じくらい簡単です。 そこから、プレビューパネル、および基本的なHTML、CSS、およびJS編集ウィンドウにアクセスできます。
「ファイルシステム」や「IntelliSense」などはありません。単純な構文の強調表示と、prettifyのような高速コマンドだけです。 [オプション]タブでは、XNUMXつの言語すべて(JSのTypeScriptなど)の制限された範囲のプリプロセッサから選択するか、外部ソースへの接続を追加できます。
無料で何かをするだけでよい場合は、どちらのエディターでも十分です。 多くのセットアップやライブラリを必要としないものにはCodePenをお勧めします。HTML、CSS、JSにオプションのプリプロセッサを追加しただけです。 遊び場を利用してソーシャルメディアの存在感を高めたり、個人的なポートフォリオを開発したりする場合は、CodePenの方が適しています。
プレミアムバージョン
CodePenで選択できる選択肢がさらにいくつかあります。 年払いの場合、毎月12ドル、19ドル、または39ドルのXNUMXつのプレミアムプランのいずれかを取得できます。 XNUMXつの層のいずれかで、無限の数のプライベートペン、投稿、およびコレクションを作成できます。
また、Proバッジ(ソーシャルブースト)、ライブコラボモードアクセス、広告なしなどを受け取ることができます。 特定のチーム固有の戦略やその他の階層間の違いもあります。 詳細については、公式の請求書を確認してください。
主な機能
CodePenでHTML、CSS、JavaScriptを作成する以外に、それを際立たせるものがいくつかあります。
- コードのリアルタイム表示が可能です。 コンパイルは必要ありません。
- 実験することで、新しいことを学ぶことができます。
- 問題を探して対処するための小さなテストケースを作成します。
- あなたの素晴らしい作品を展示してください。
- 後で使用するためにペンを作成して保存します。
- 他の開発者のコードを試して、実際の動作を確認してください。
Advantages
- まず、費用はかかりません。
- 組み込みの学習リソース。
- 他の人と協力し、プロジェクトを比較して、将来どこに行くことができるかを確認します。
- UIは使いやすく、簡単です。
デメリット
- コードライブラリは小さく、自動コードの完了は不十分です。 XNUMXページのプロジェクトに適しているだけで、それ以上のプロジェクトは処理できません。
- CodePenでは、プライベートペンを作成できますが、Proメンバーシップ($ 9 /月)にアップグレードする必要があります。
コードサンドボックス
CodeSandboxは、Webベースのコードエディタです。 発生、パッケージ化、依存関係の管理を自動化し、ワンクリックで新しいプロジェクトを構築できるようにします。 魅力的なものを作成したら、Webサイトを共有するだけで他の人と共有できます。
エディターはすべてのJavaScriptプロジェクトと互換性がありますが、プロジェクトをcreate-react-appテンプレートに保存するオプションなど、特定のReact固有の機能が含まれています。
CodeSandboxでビルドするプロジェクトはすべて、テンプレートで始まります。 特定のライブラリ、フレームワーク、またはランタイム(Node.jsを含む)に関連する場合もあれば、単に標準のWebテクノロジーを使用する場合もあります。 テンプレートを選択すると、エディターに移動します。エディターには、必要なすべてのファイルがあり、プレビューウィンドウが既に開いています。
すべてのサンドボックスの「ファイルシステム」にアクセスできます。つまり、新しいファイルを作成したり、モジュール(NPMパッケージを含む)を利用したり、静的アセットを操作したりできます。 テンプレート固有の構成ファイルを変更する機会もあります。
IDEの場合と同様に、ファイル構造と依存関係を備えた独自のユースケース用の独自のテンプレートを作成することもできます。 ツールはGithubにリンクされているため、コミットをすばやく生成してPRを開くことができます。 アプリケーションをZEITまたはNetlifyにすぐにデプロイできます。
CodeSandboxチームプロ
開発者がブラウザベースのウェブアプリ開発サンドボックスを構築できるようにするオランダの企業であるCodeSandboxは、チームがクラウドでコードを処理できるようにするコラボレーションプラットフォームを正式にリリースしました。 新製品のTeamProは、設計者や管理者から品質保証(QA)チームに至るまで、完全な製品チーム向けに構築されたノーコードソリューションです。
プロジェクトは、Webアプリケーションに変更を加えたり受け入れたりしたい人のために、ユーザーフレンドリーなインターフェイスで提供されます。変更を実行するために開発者にメモや推奨事項を送信したり、ディスカッションのためにそれらを返したり、プロセスを繰り返したりするなどの代替方法を回避します。
主な機能
- Webベースのコードエディタおよびプロトタイプツール。
- ローカルで使用する場合は、サンドボックスをzipファイルで簡単にダウンロードできます。
- プログラミング サンドボックスで行われ、同僚と簡単に共有できます。
Advantages
- ユーザーエクスペリエンスの向上とエディターの制御の向上。
- ライブプレビュー機能は、別のウィンドウで変更および表示できます。
- コードは自動的にフォーマットされ、CLI(codesandbox-cli)が含まれます
- 高度なnpmモジュールのサポート。
- 推奨事項を含む素敵なエラーメッセージ。
- より優れたターミナル、テストビューア、および問題ビューアを提供することにより、デバッグエクスペリエンスが向上します。
デメリット
- エンドユーザーは多くのパーソナライズにさらされています。
- ローカルコンピュータからのファイルのドラッグアンドドロップは正しく機能しません。
- CodeSandboxでは、特定のフォルダー構造に従う必要があります。
- プライベートサンドボックスの機能は、常連客のみが利用できます。
StackBlitz
StackBlitzは、Webアプリケーション用のVisualStudioCodeを利用したオンラインIDEです。 プラットフォームは、デスクトップバージョンと同じように応答性と適応性があります。 StackBlitzは、プリロードされたオンラインIDEです。 Angular と React 開発ツール。
Thinkster.ioは、依存関係のインストールやビルド設定を気にすることなく、AngularまたはReactプロジェクトをできるだけ簡単に開始できるように、この素晴らしいプロジェクトを構築しました。 StackBlitzは、他のオンラインコードエディタにはない驚くべきユニークな機能を数多く提供します。 結果として、StackBlitzをさらに調査し、このオンラインIDEが提供するものを発見することは価値があります。
Stackblitzは、完全なIDEに非常に匹敵します。特に、ツールがVSコードに基づいているためにVSコードに別れを告げることができない場合はそうです。 このパッケージには、フルスタックアプリケーションの作成を開始および継続できるようにするさまざまな機能が含まれています。
このプログラムは、開発者の間でよく知られているVisualStudioを利用しています。 オフライン編集は、プロジェクトの傑出した機能です。 これを可能にするために、Stackblitzチームはブラウザー内Webサーバーを作成しました。 入力すると、依存関係が自動的にインストールされ、コンパイル、バンドルされ、ホットリロードが実行されます。
プレミアムバージョン
士官候補生、宇宙飛行士、司令官は、それぞれ月額8ドル、月額29ドルで無料で利用できます。 Astronaut and Commanderには、無制限のプライベートプロジェクト、無制限のファイルアップロード、コアチームのSlackチャネルへの招待などの多くの機能が含まれています。 詳細については、公式の請求委員会を参照してください。
主な機能
- プロジェクトにNPMパッケージを追加します。
- 新しいブラウザ内開発サーバーのおかげで、オフラインで編集できます。
- ライブアプリにいつでもアクセス(および共有)できるホスト型アプリのURL。
- その他の注目すべきVisualStudioCode機能には、Intellisense、プロジェクト検索(Cmd / Ctrl + P)、GotoDefinitionなどがあります。
Advantages
- デプロイのためのFirebaseの機能。
- エディターは本当に使いやすく、非常に高速です。
- ユーザーはpackage.json、index.html、およびindex.jsにアクセスできます。
- 埋め込むこともできる共有可能なソースコード。
- ページの大部分でのライブプレビュー。必要に応じて別のページで開くオプションがあります。
- オフライン中、編集
- スマートな補完と改善されたIntellisense。
- Stackblitzのコアは オープンソース.
デメリット
- create-react-appコマンドによって管理されるため、建物や開発者サーバーに影響を与えることはありません。
- Reactでは、基本的なフォルダー構造を順守する必要があります。
- 手動でフォーマットすることは可能ですが、コードを自動的にフォーマットすることはできません。
まとめ
今日では、上で見たようなコーディングの遊び場を使用して、Webプロジェクトを完全に構築することができます。 Webブラウザーから直接ビルド、デバッグ、テスト、および展開できる場合は、面倒なIDEをPCにインストールする必要はありません。
私の意見では、StackBlitzは、JavaScript、Angular、およびその他の開発プロジェクトをすぐに使用できるWebベースのIDEであり、Node.js、npm、などのローカル開発環境をインストールする必要がないため、その中で最適です。またはAngular。 VisualStudioCodeをローカルで使用するのと同じエクスペリエンスを提供します。 実際には、StackBlitzはVisual Studio Codeによって駆動されるため、デスクトップバージョンと同じくらい高速で用途が広いと感じます。
CodePen、CodeSandbox、StackBlitzのどれがあなたの頼りになるツールですか? コメントで教えてください。
アバティヤ
この素晴らしい記事に感謝します。stackblitz.comを見たら、これが私が欲しいものだとわかります。