CodePen 2.0 リリースノート

CodePen 2.0 は、シンプルなコードプレイグラウンドから包括的な開発環境へとプラットフォームを進化させます。このアップデートにより、ライブコラボレーション、統合された npm パッケージ管理、そして Pen をスタンドアロンのウェブサイトとしてデプロイできる機能が導入され、プラットフォームの用途がクイックプロトタイピングから本格的なプロジェクト開発へとシフトします。

統合されたプロジェクト管理とデプロイ

CodePen 2.0 は、エディタから直接 Pen をデプロイする機能を導入しました。ユーザーは Pen を codepen.app 上でホストされるライブウェブサイトに変換でき、プロトタイプ、デモ、そして小規模なウェブサイト（例: codepen.school プロジェクト）の迅速なデプロイが可能になります。

デプロイに加えて、プロジェクト構造がモダン化されました。エディタは現在、npm パッケージを管理するための package.json ファイルをサポートしており、開発者は以前のバージョンよりもバージョンや依存関係を細かく管理できます。JavaScript は単一の Pen 内で複数のファイルに分割して整理できるようになり、複雑なデモを構築する際に他の Pen から JavaScript をインポートする必要性が減少します。

リアルタイムコラボレーションと共有

プラットフォームは、複数のユーザーが同時に同じ Pen で作業できるライブコラボレーション機能を導入しました。ユーザーはプロジェクトに共同編集者を招待できる招待システムでこれをサポートします。

共有体験を向上させるため、CodePen は「Live View」を導入しました。これにより、閲覧者は作者がコードを編集している間、Pen の出力をリアルタイムで見ることができます。この機能はライブストリーミングや共同開発セッションを円滑にすることを目的としています。

ブロックによる拡張性

CodePen 2.0 は「Blocks」の追加による拡張性を念頭に設計されています。例えば、Chris Coyier は MJML（Mailjet Markup Language）ブロックの追加を実演し、レスポンシブなメールデザインプロセスを CodePen エディタ内で直接行えるようにしました。プラットフォームは、さまざまな開発ワークフローを支援するため、今後もエディタにより専門的なブロックを追加していく予定です。

コミュニティのフィードバックと業界の文脈

リリースは多くの人に歓迎される一方で、コミュニティはプラットフォームの進化についてさまざまな見解を示しています。

• ユーザーエクスペリエンス（UX）に関する懸念: 長年のユーザーの中には、新しいインターフェースが複雑すぎると感じ、CodePen の元々の魅力は手軽でシンプルなテストができる点にあったと指摘しています。あるユーザーは、新しいインターフェースは「ウェブサイトの中にウェブサイトを構築している」ように感じると述べました。
• AI のシフト: 複数のユーザーが生成 AI がプラットフォームに与える影響について議論しました。手動でコード参照や例を探す代わりに LLM を使ってコードを生成するユーザーが増えており、プロンプトでプロジェクトを開始し、CodePen で手動で洗練させるといった、より深い LLM 統合への要望があります。
• 機能要望: ユーザーは Pens の検索機能の改善を提案しており、特定のライブラリ（例: anime.js）や特定の要素（例: SVG）での高度なフィルタリングが可能になること、またローカル IDE（VS Code や JetBrains など）と CodePen Pens を同期できる API/プロトコルの作成を求めています。
• 持続可能性: 無料のホスティングやデプロイ機能が乱用されないようにどのように管理されるかについて、ユーザーの中で疑問が呈されています。これは無料ホスティングソリューションで一般的な課題です。

SUMMARY: CodePen 2.0 は、シンプルなコードプレイグラウンドからライブコラボレーション、npm パッケージ管理、直接デプロイ機能を備えた本格的な開発環境へとプラットフォームを変革します。

TITLE: CodePen 2.0 リリースノート