新規投稿のお知らせを受信されたい方は、サブスクリプションをご登録ください:

開発者スポットライト:Chris Coyier、CodePen

2021-11-17

2分で読了
この投稿はEnglishおよび简体中文でも表示されます。
Developer Spotlight: Chris Coyier, CodePen

Chris Coyier氏は15年以上にわたりWeb上で構築しています。2007年、Chris氏はフロントエンドおよびフルスタック開発者向けのWebの主要な出版物の1つであるCSS-Tricksで、Web開発の世界で成功しました。

2012年にChris氏は、CodePenを共同設立しました。これは、開発者が協力してHTML、CSSおよびJavaScriptで記述されたコード例を共有できるようにするブラウザ上で動作するオンラインコードエディターです。

CodePenの性質上、すなわち、ホスティングコードと人気の高い埋め込み機能により、開発者が世界中でCodePenの「pen」機能を共有できることから、どんな種類の最適化でもCodePenのビジネスに大きなインパクトをもたらす可能性があります。CodePenは、これらの最適化の最初のステップとして、コードを実行し、Cloudflareのネットワークにデータを格納する機能にますます依存します。Chris氏が言うように、CodePenは「非常にたくさんのこと」のためにCloudflare Workersを使用しています。

「外部のCMSからコンテンツを抽出し、利用者のブラウザに到達する前に、Workersを使用してHTMLを操作します。たとえば、元のページを取得してコンテンツを取得し、フルレスポンスのためにそれらをつなぎ合わせます。」

Workersは、ネイティブのリクエスト/レスポンスクラスを使用して直接レスポンスに対応でき、当社のストリーミングHTMLRewriterエンジンを追加することで、パフォーマンスを損なうことなくHTMLを変更、結合および解析できます。Workersの機能はCloudflareのネットワークにデプロイされるため、CodePenはオリジンサーバーとクライアント間の非常にインテリジェントなミドルウェアを瞬時にデプロイすることができ、いかなる追加インフラストラクチャも立ち上げる必要はありません。

Chris Coyier氏のYouTubeチャンネルで人気の動画の中で、CodePenのフロントエンドエンジニアと対談し、CodePenの重要な機能を構築するためのCloudflare Workersの使用方法を説明しています。Chris氏は以下のように話しています。

「Cloudflare Workersは、常にエッジで実行されるサーバーレス機能のようなもので、信じられないほど高速化します。それだけでなく、周辺ツールが本当に素晴らしいのです。ご自身のWebサイト上で特定のルートで実行することができ、どんなに厄介なCORSのトラブルも排除し、クリーンなAPIの作成に役立ちます。しかも、KVストレージ(エッジも同様)へのアクセス、画像編集と最適化、HTML書き換えなどといった特別なパワーも持ち合わせているのです。」

また、CodePenは、Workers KVを活用してデータを格納します。これにより、結果をキャッシュし、地理的にユーザーの近くにあるCloudflareのネットワーク上でアクセス可能にすることで、膨大な量の反復処理作業を回避できます。

「WorkersはKV Storeと組み合わせて、価値あるジョブを実行します。たとえば、KV Storeをチェックして、何らかの処理作業が必要かどうか、またはその作業が既に完了しているかどChris氏うかを確認します。作業の必要があればそれを行い、それからKVを更新し、作業が完了してその結果がどこにあるのかを確認します。」

彼のYouTubeチャンネルのフォローアップ動画で、はWorkers KVに集中して取り掛かかり、ストレージを備えたシンプルなサーバーレス機能を構築し、Cloudflareにデプロイする方法を伝えています。Workers KVを追加すると、パフォーマンスやスケーラビリティを損なうことなく、Workers関数と並行して複雑なデータ構造を保持できます。

Chris氏とCodePenチームはWorkersに投資しており、最も重要なのはCloudflareの開発者ツールで開発することを_楽しんで_いることです。「周りのDXは疑いたくなるほど素晴らしいです。他のクラウド機能サービスから来ると、私たちがやるべきことを行うためにちょうど適切な量のツールがあるように思います。」

CodePenは、Cloudflare Workersの開発者環境をスタックに統合する際に何ができるようになるかを示すよい例です。ビジネス、WorkersおよびWorkers KVやHTMLRewriterのツールなどのあらゆる要素を通して、CodePenは将来を見据えた、高パフォーマンスのアプリケーションを構築できるのです。

さらにCloudflare Workersについての詳細を知り、ご自身のサーバーレス機能をCloudflareネットワークにデプロイしたい方はworkers.cloudflare.comをご確認ください!

Cloudflareは企業ネットワーク全体を保護し、お客様がインターネット規模のアプリケーションを効率的に構築し、あらゆるWebサイトやインターネットアプリケーションを高速化し、DDoS攻撃を退けハッカーの侵入を防ぎゼロトラスト導入を推進できるようお手伝いしています。

ご使用のデバイスから1.1.1.1 にアクセスし、インターネットを高速化し安全性を高めるCloudflareの無料アプリをご利用ください。

より良いインターネットの構築支援という当社の使命について、詳しくはこちらをご覧ください。新たなキャリアの方向性を模索中の方は、当社の求人情報をご覧ください。
Full Stack Week開発者Developer Spotlight

Xでフォロー

Kristian Freeman|@kristianf_
Cloudflare|@cloudflare

関連ブログ投稿

2024年10月09日 13:00

Improving platform resilience at Cloudflare through automation

We realized that we need a way to automatically heal our platform from an operations perspective, and designed and built a workflow orchestration platform to provide these self-healing capabilities across our global network. We explore how this has helped us to reduce the impact on our customers due to operational issues, and the rich variety of similar problems it has empowered us to solve....

2024年9月27日 13:00

Our container platform is in production. It has GPUs. Here’s an early look

We’ve been working on something new — a platform for running containers across Cloudflare’s network. We already use it in production, for AI inference and more. Today we want to share an early look at how it’s built, why we built it, and how we use it ourselves. ...

2024年9月27日 13:00

AI Everywhere with the WAF Rule Builder Assistant, Cloudflare Radar AI Insights, and updated AI bot protection

This year for Cloudflare’s birthday, we’ve extended our AI Assistant capabilities to help you build new WAF rules, added new AI bot & crawler traffic insights to Radar, and given customers new AI bot blocking capabilities...