この記事は、2025 年 6 月時点、Windsurf Wave10 までの内容を基にしたものです。 ここに示された意見はわたし個人のものであり、所属する組織を代表するものではありません。 はじめに: なぜ、Windsurf を選ぶのか 2025 年 6 月、生成 AI によるコーディング支援ツールはまさに戦国時代。多くの開発者が数々の LLM や IDE に注目する中、自分は個人開発のパートナーとして「Windsurf」を選び、愛用しています。なぜなら、Windsurf は単なるコード生成ツールではなく、開発者と「対話」し、同じ目線でプロジェクトを進める「AI flow」（AI とペアプロするように対話しながら開発する思想）を体現しているからです。 引用元：Windsurf Launch と、かなり風呂敷を広げた謎の前振りで始まりましたが、この記事では、Windsurf が提唱する AI

ヘッドレスCMSという言葉をご存知でしょうか？ まず、CMSとはContent Management Systemの略でありウェブサイトのニュースや記事などを管理することの多いシステムです。代表的な製品としてWordPressがあげられます。 次に「ヘッドレス」ですがこれは「見た目を有していない」という意味です。 まとめるとヘッドレスCMSとは、WordPressなどの従来のCMSとは異なり、表示部分をなくしてAPIベースでコンテンツを取得することが特徴のコンテンツ管理システムです。 ヘッドレスCMSに関する詳しい解説は下記記事をご覧ください。 参考：今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流 ※弊社COOの寄稿記事です このヘッドレスCMSは従来とは異なる仕組みであるため、向いているケース・向いていないケースが顕著に存在しています。 我

はじめに こんにちは、森茂です。 先日公開したmicroCMSのWebフロントエンドにクリーンアーキテクチャを採用した話【前編】に引き続き、今回は後編として前編で紹介させていただいた構成にあわせて、実際にどのような実装とチームへの浸透を行っていったかについて紹介いたします。 なお、記事内に記載している仕様、ソースコードは説明用として省略や変更、部分的な引用を行っています、実際のサービスとは異なる箇所もある点をあらかじめご了承ください。 前編より 前編ではmicroCMSのフロントエンドアーキテクチャをどういった背景、構成で採用したかを紹介しました。実装の段階に進むにあたっては、その中でもとくに責務（関心）の分離と負担なく開発を進めことができるかを意識することにしました。 また、前編でも紹介の通り、クリーンアーキテクチャという概念に振り回されないことも重要と考えています。完璧な設計を求めるこ

はじめにこんにちは、フロントエンドエンジニアの森茂です。 microCMSにはMarkdown専用のエディターは用意されていないため、Markdownの情報を入稿したい場合はMarkdown記法が利用できるリッチエディターを利用する必要があります。ただし登録したデータはリッチエディターの形式に変換されてしまうため、Markdownのまま入稿データの管理を行うことはできませんでした。 しかしながらmicroCMSには拡張フィールド（旧iframeフィールド）というものがあり、自身で用意する必要はありますがオリジナルのアプリケーションを拡張フィールド内で開き、各種データを共有することが可能になっています。 今回はMarkdownでデータを管理したい方向けに、microCMSの拡張フィールドを利用したMarkdownエディターの利用例をご紹介します。 拡張フィールドについて拡張フィールドの活用方

はじめに こんにちは、今夜のNext.js Conf 2022が楽しみなCX事業本部Delivery部MADグループの森茂です。（執筆時点2022/10/25） Next.js Conf 2022/10/24よりCloudflare PagesでNext.jsのEdge Runtimeがサポートされました。 今までは静的なファイルへ書き出されたサイトのみがサポートされていましたが、このアップデートによりNext.jsのEdge Runtimeを利用したEdge環境での動的な処理がサイトで利用できるようになっています。 2022/10/26追記 この記事はNext.js v12.3.1での検証内容となります。Next.js v13ではまだビルドが通らないようでした。 注意が必要な点としては、Cloudflare Workersで動作するEdge RuntimeであるためNode.js環境に依

はじめに こんにちは、CX事業本部Delivery部MADグループの森茂です。 Supabaseのように手軽にデータベースが使え、さらにGraphQLエンドポイントが利用できるGrafbaseというサービスのプライベートベータが開始されていたのでさっそく試してみました。 まだプライベートベータのためサービスの価格など全容は公開されていないのですが、サイトやブログからの情報では、GrafbaseはGraphqlのスキーマをデプロイするだけでDynamoDBとGraphQLのエンドポイントを構築してくれるBaaSのようです。プライベートベータのため招待制となっていますが、私が申請した7月27日現在では数分後には招待メールが届き利用できるようになりました。 下記ブログ記事によると、GrafbaseのプラットフォームはRustでつくられており、Cloudflare Workers上、つまりエッジに

はじめに こんにちは、CX事業本部Delivery部MADグループの森茂です。 Momentoは世界初のサーバレスキャッシュサービス、世界最速のキャッシュサービスと謳っているフルマネージドなキャッシュサービスです。アカウント登録から運用まで数分で使い始めることができます。現在は無料ですぐに使い始めることができます。SDKについても、下記のように主要な環境はほぼ網羅されています。 .NET Go Java JavaScript Python Rust CLI 今回はMomentoのキャッシュをRemixでつかってみます。また、ほぼ同じロジックで動作できるのでついでにNext.jsのSSRでも動作をためしてみました。 検証環境 M1 MacBook Pro macOS Monterey 12.4 Node.js 16.14.0 Remix 1.6.5 Next.js 12.2 Momentoの

はじめに こんにちは、CX事業本部Delivery部MADグループの森茂です。 Remix v1.6.5のリリースにuseLoaderDataとuseActionDataの型推論が追加されました。普段Remixを利用していないといったい何のこと？と思われるかもしれません。しかしRemixでアプリケーションを開発しているユーザーにとっては非常に大きなDX改善となっているので紹介させてください:) useLoaderDataとuseActionData Remixでは、APIからデータを取得するなどサーバーサイド側でデータの処理を行い、そのデータをフロント側へ渡す際useLoaderDataという関数を利用します。また、フォームのデータをやり取りするためにはuseActionDataという関数を利用します。どちらもRemixでアプリケーションをつくる際には一番利用する関数と言えるかもしれません

少し長いですが2ページのみのためソースコードを全文掲載しています。違和感を感じる部分としてはWorker内ではドメイン、ホスト名がないため指定は不要という点かもしれません。今回は公式ドキュメントにあわせてhttps://.../を利用しています。 app/routes/index.tsx import { redirect } from '@remix-run/cloudflare'; import type { ActionFunction, LoaderFunction } from '@remix-run/cloudflare'; import { json } from '@remix-run/cloudflare'; import { Form, Link, useLoaderData } from '@remix-run/react'; import type { Task }

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 Cloudflare Workersで動作するTypeScript製フレームワークHonoを紹介させていただきます。 Honoとは @yusukebe氏を中心に開発が進められているフレームワークでExpressでアプリケーションを作るような書き方でCloudflare Workersで動くアプリケーションを簡単に組み上げていくことができます。 import { Hono } from 'hono' const app = new Hono() app.get('/', (c) => c.text('Hono!!')) app.fire() Cloudflare WorkerはService WorkerのためNode.jsに依存したAPIは動作しません。Cloudflare Workers上でアプリケーションを作ろうとすると意外と

キー値は最大512バイト、バリュー値については最大25MBまでサポートしており、任意のTTL（最低は60秒）を設定することも可能です。なお記録されるデータは結果整合性をとっており、データの伝播には最大60秒かかる場合があるためアトミックな処理には向いていません。Durable Objectsとも比較されますが、Durable Objectsは強い整合性をもっており、リアルタイムなデータのやり取りなどアトミックな処理を行うデータストアの用途として活躍します。なおDurable Objectsは有料プランでのみ利用可能となっています。 Workers KVのユースケースは無限に考えることができると思いますが、Remixと組み合わせた場合にはセッションのストレージ、APIやデータベースのキャッシュストレージとしての用途として特に活躍してくれるでしょう。 Workers KV、Durable Ob

React Routerがv6.4で再び大きく変化するようです。まるでReactがCSR版のRemixになる？まず素振りがてらPre−release版をためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 React Routerがv6.4で再び大きく変化するようです。3月末に下記Remix公式ブログで事前の案内はありましたがReact Routerと同じチームが開発しているRemixの思想がReact Routerに取り込まれ、そのPre-release版とData APIについてのドキュメントが先日先行して公開されました。 Release Remixing React Router · remix-run/react-router React Routerの安定版は2022年6月現在 v6.3.0となります。 React Router v6.4 Pre-rel

*2022年5月15日現在 Cloudflare R2 documentation · Cloudflare R2 docs Pricing · Cloudflare R2 docs R2 サービスの登録 R2は従量課金制となっているため事前に支払い情報の登録が必要です。とはいえ無料枠がかなり大きいので検証範囲の範囲では無料枠を超えることは少なそうです。 R2はダッシュボードからR2有料プランを購入することですぐに利用できるようになります。（購入といってもこの時点で料金はかかりません） R2バケットの作成 ダッシュボードから作成することもできますが、今回はCLIから作成します。 Wranglerがインストールされていない場合はインストールとアカウントの紐付けをあらかじめ行っておいてください。 Wrangler v2のインストールとアカウントの紐付け $ npm install -g wra

RemixをCloudflare Workersを動かす最初の一歩について、まずはデプロイまでの手順をご紹介します。（Wrangler v2版） はじめに こんにちは、CX事業本部MAD事業部の森茂です。 最近ビックニュース続きのCloudflare使っていますか？とくにCDN エッジを利用したサービスが話題になっており私もわくわくがとまりません:) RemixはCloudflareのCDN エッジサービスであるWorkersでSSRを使って動かすことのできるReactベースのフレームワークのひとつです。そこで、今回は、これを機にCloudflare Workersを使ってみようという方向け、RemixをCloudflare Workersで動かす最初の一歩を紹介させていただきます。 Cloudflare の記事一覧 | DevelopersIO Remix の記事一覧 | Develop

こんにちは、devcontainer職人です🧑‍🍳 今回紹介するのはDocker Composeを既に利用している開発環境にかんたんにdevcontainerを構築する方法を紹介します。 VSCodeのdevcontainerはとても良くできた開発環境構築方法なのですが、ちょっと難しそうと思われていたり、VSCode以外のエディタを使う人の開発体験が悪くなるのでは、などの懸念がありまだあまり使われていないような印象があります。今回はそんなdevcontainerを3分で作れるtipsを紹介します。 準備するもの Docker Composeで構築した開発環境 VS Code Docker Desktop for Windows/Mac Remote - Containers extension Docker Composeで構築した開発環境のサンプル 今回用意するのはサンプルとしてRu

はじめに タイトルで大きくふろしきを広げてしまいましたが、結論から言うといろいろと試してみた結果、現時点ではまだ着地点を見出せていません。現時点での自分なりの最適解として、useQuery、usePrefetch、useMutationと楽観的更新の実装例についていくつか紹介させていただきます。 モチベーション 現在、Redux Sagaをふんだんに利用したアプリケーションのメンテナンス・機能拡張に携わっているのですが、ページ数やAPIエンドポイントが多数あることからコード量が多く構造も複雑になっており、メンテナンスコストの増大が懸念されるようになってきました。そこで今後のメンテナンス性の向上、また新規に参画するメンバーにも入りやすいようRedux SagaをはがしReact Queryへ少しずつ移行してくための検証を兼ねてReact Queryの使い方を探っています。 React Que

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 2022年4月24日にVitest公式のVSCodeプラグインがアナウンスされました。 Vitestはあたらしいテストフレームワークとして昨年末に公開されました。年初に紹介記事を書いたときにはまだv0.2系でしたが、あっという間にv0.9.4まで開発が進み（2022年4月24日現在）正式版のリリースまであと少しというところまで来ています。勝手な予想ですが、5月にはリリースされそうなVite v3とあわせてのリリースとかありそうでしょうか？？？ プラグイン自体は2022年3月末にリリースされていたようですが、作者の@zxch3n氏がVitestチームへ参画し公式のVSCodeプラグインとしてアナウンスされたようです。 動作環境 プラグインを利用するには下記環境が必要となります。またプラグイン自体はまだプレビュー版となっているようです

また、Project API keyとURLも同様にメモをしておいてください。 Remixのセットアップ Remixアプリケーションを用意します。今回は初期構築を行ったものをGitHubへ公開していますのでそちらをCustom Stackとして利用、もしくはクローンして利用していただくか下記手順で構築を行ってください。 Remix Custom Stacksを利用する場合 あらかじめ用意してあるRemix Custom Stacksを利用してセットアップする方法です。一番Remix wayに則った手法かもしれません。 $ npx create-remix@latest --template himorishige/remix-form-example $ cd remix-form-example $ cp .env.example .env .envファイルにSupabaseから取得した

CX 事業本部 MAD 事業部のふじいです。 MAD 事業部では今期から KPI の1つとして OSS へのコントリビューション数をカウントしています。 前々回、前回に引き続き、第3Qである1月~3月における各メンバーのコントリビューション実績を紹介していきたいと思います！ MAD事業部って何？　って方は以下の記事もご覧ください。 OSSコントリビューション実績一覧 以下が各メンバーによるコントリビューション実績です。 広義の貢献（コントリビューション）という意味で、Pull Request だけでなく Issue の起票も含めています。 Remix へ Auth0 連携実装サンプルプログラムの提供 React ベースのフルスタック Web フレームワークである Remix に森茂がコントリビュートしたものです。 Remix で Auth0 連携の実装を作成し、サンプルプログラムとして提供