はじめに こんにちは、今夜の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

はじめに こんにちは、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 連携の実装を作成し、サンプルプログラムとして提供

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 先日リリースされたRemix Stacks、Remixチームが公開しているAWSを利用したサーバレス構成のGrunge Stackテンプレートがどのような構成になっているのかを調べるために早速デプロイまでの流れを試してみました。 Grunge Stack Grunge StackはAWSを利用したサーバレス構成のアプリケーションテンプレートです。サーバレスフレームワークとしてはArchitectを利用しています。データベースにはDynamoDBを利用し、アプリケーションはCloudFormationを利用してLambdaへデプロイされAPI Gatewayを介して公開されます。また開発用にローカル環境のサンドボックス環境も用意されているのでAWS環境へデプロイせずに動作を確認することが可能です。（サンドボックス環境のDynamoD

RemixにRemix開発チームが推奨する技術スタックを利用したプロダクションレディなテンプレートをすぐに利用することができる新機能、Remix Stacksが追加されました。 はじめに こんにちは CX事業本部MAD事業部の森茂です。 2021/3/18 未明、Remixに「Remix Stacks」と呼ばれる新機能が追加されました。 Remix StacksはRemixチームが推奨する技術スタックを用いたプロダクションレディなテンプレートを簡単にセットアップできる機能です。また、これにあわせてCreate React AppのCustom TemplatesやNext.jsの--example-pathのようにGitHubリポジトリにあらかじめ用意したテンプレートを利用することもできるようになりました。 Remix Stacks 公式ドキュメントによると、Remix Stacksには以

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 まだReleaseバージョンも付与されていないため開発中とも思われますが、Microsoft製のCSS-in-JSライブラリGriffelがGitHubに公開されてたのでさっそく試してみました。 Griffelは正式なリリース版ではないため不確かな部分がございます。またアップデートなどで仕様が変更になる場合もございます。あらかじめご了承ください。 Griffel まだライブラリの紹介ページなどはなくGitHubのドキュメントに紹介されている範囲ですが、特徴として下記4点を謳っているようです。（まだプロダクトアイコンもなさそう） Zero config start: Griffel has both runtime & build time implementations Optional build time transforms

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 ブログで記事を書くと欲しくなる機能のひとつにOG画像を自動生成する機能があると思います。今回はRemixを使ってOG画像を自動生成する機能を実装してみました。 RemixでmicroCMSを使ったブログサイトを構築してみた RemixでmicroCMSを使ったブログサイトを構築してみた〜プレビュー画面〜 OG画像を自動生成する方法としては、canvasを利用する方法とヘッドレスブラウザ等でスクリーンショット画像を利用する方法がよく取られますが、今回はPuppeteerを利用してスクリーンショットを撮影しその画像をOG画像として利用する方法を選択しました。 なおデプロイ環境はVercelを想定しています。VercelではRemixはAWS Lambdaの上で動作するためローカルサーバーや他の環境とは少し異なる方法が必要となります。V

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 こちらの記事でRemixとmicroCMSを使った簡単なブログを構築してみました。ただ実際に運用する場合はブログに記事を投稿する際あらかじめプレビュー画面で確認したいことが多いと思います。microCMSには記事を書く際に下書き保存している記事を確認するためのプレビュー機能があるので、今回はその機能をRemixで実装してみました。 microCMSの設定 microCMSでは下書き状態のコンテンツにdraftKeyというユニークなキーが発行されます。コンテンツ取得時にこのdraftKeyを付与することでまだ公開されていない下書き状態のコンテンツを取得できます。microcms-js-sdkを利用している場合は、queriesにdraftKeyを付与するだけ取得できるようになります。 const content = await cl

はじめに こんにちは、CX事業本部MAD事業部の森茂です。 RemixとヘッドレスCMSのmicroCMSを使って簡易的なブログサイトを構築を試してみました。 microCMSはmicroCMS社が開発、提供されている多機能ながら洗練されたUIでとても使いやすいヘッドレスCMSです。利用枠や機能に制限はありますが、利用料金が無料のHobbyプランも提供されており、基本的な機能は十分に試すことができます。 また、公式のSDKが提供されており少ない記述で手軽にAPIから情報を取得できます。SDKにはAPIの型情報も用意されており開発工数はかなり削減できそうです。 microCMS SDK 今回作成したソース Next.jsやS3環境などでmicroCMSを利用する記事もありますのでこちらも参照ください 環境構築 技術スタック・サービス Remix v1.1.3 microCMS + micro