サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
吉幾三さんがバイオハザードの世界に連れ去られた!? 「俺ら東京さ行ぐだ」の『バイオハザード ヴィレッジver.』を熱唱︕ 初めての人狼(ライカン)特殊メイクにも挑戦︕ 『バイオハザード ヴィレッジ』公式イメージソング「俺らこんな村いやだLv.100」 2021年4月23日（金）より公開 株式会社カプコン（本社︓大阪府大阪市、代表取締役社長︓辻本春弘）は、『バイオハザード ヴィレッジ』の5月8日（土）発売に先駆け、吉幾三さんが熱唱する『バイオハザード ヴィレッジ』公式イメージソング「俺らこんな村いやだLv.100」を4月23日（金）から公開いたします。 映像では、吉幾三さんに名曲「俺ら東京さ行ぐだ」の『バイオハザード ヴィレッジver.』を歌唱いただきました。 『バイオハザード ヴィレッジ』公式サイト 「俺ら東京さ行ぐだ」スペシャルアレンジ！ 「理性が無ェ 正気じゃ無ェ 人かどうかもわから無
最近の流れを見ていての感想文なので、ideaとして投稿します。筆者のバックグラウンドとしては、Remixの商業記事を書いたり、App Routerの商業記事を書いたりしている人です。 さて、筆者は2022年の秋から、社内システムではありますがRemixをプロダクション運用しています。また、Next.jsのApp Routerについても、パラダイムとしてはRemixにインスパイアされた部分が多い[1]おかげで、順調にキャッチアップできています。 RemixとApp Routerは、ルーティングとデータフェッチを高度に統合しており、Progressively Enhanced SPA（PESPA）と呼ばれることもあるそうです。PESPAについては、次の記事が話題になりましたね。 このPESPAであるRemixを実運用する中で、フレームワークの手触りが近年触ってきたものと大きく違っている点があっ
『星のカービィスーパーデラックス』のアレンジ楽曲「MetaKnight'sRevenge」が、第64回グラミー賞を受賞したことで話題を呼んでいる。大変おめでたいことであり、さっそくこれを聴いてみたという方も多いと思うが、そのアルバムクレジットにはNintendoやHAL研究所の権利表記が全くないことにお気づきだろうか。 先日の糸田氏による記事でも指摘があったように、ここにはアメリカにおける音楽著作権法の改定が影響している。実はここ数年の間に、海外におけるゲーム音楽アレンジ／リミックスを取り巻く状況は激変しているのだ。音楽サブスクリプション（特にSpotify）を日常的に使っている人ならお気づきだろう。こうした「許諾なしのゲーム音楽アレンジ楽曲」が堂々と、しかも商品として罷り通るようになってきているのだ。その背景で一体何が起きているのか。いい機会なので、その背景について解説しよう。 Spot
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
新人声優 +81-9014502501 mail@ssig33.com 0088-7709-7529 it/it. my opinion may be not my own. but my fate is my own. 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれない
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
How I built a modern website in 2021September 29th, 2021 — 34 min read For over half of 2021, I worked on a complete rewrite of kentcdodds.com. You're reading this on the rewrite of this site! Are you using dark mode or light mode? Have you signed in and selected your team yet? Have you tried to call into the Call Kent Podcast? This blog post isn't about these and other features of the new site, b
Komesan: 指定したURLに関連するはてなブックマーク、Twitter、HackerNewsのコメントを表示する Komesanというはてなブックマーク、Twitter、HackerNewsをまとめて表示するサイトを作りました。 https://komesan.pages.dev/?url=https://pages.cloudflare.com HackerNewsはオプショナル: https://komesan.pages.dev/?url=https://pages.cloudflare.com&service=hackerNews ブックマークレットで実行する場合は、次のようなURLのブックマークを利用します。サイトの下部に同じものがおいてあります。 #"/q/%E3%81%AF%E3%81%A6%E3%81%AA" data-gtm-click-label="entry-search-result-item-tag">はてな
こんにちは、@kaa_a_zu です。今日(11/23)の日本時間早朝に React Router の制作者である @Ryan氏 と @Michael が着想した Remix V1.0 が正式リリースされました🎉 RemixがWebの世界に及ぼす影響は大きいと思っており、実際のコードやドキュメントを見ながら既存のフレームワークと何が異なっているのかを中心に書いた紹介記事です。(正直、魂が震えています) より具体的な使い方はドキュメントを見て、手を動かしていただくのが良いかと思います。また、既に国内でも使ってみた系の記事がいくつかあるようです。 Remixの機能には様々なものがありますが、当記事では筆者がより注目しているものについて書いていきます。Remixに興味があるけど、あまり追えていないという方に読んでいただけると嬉しいです。 ※この記事はGatsbyやNext.jsよりもRemix
Remix / Next.js 14 など最新ウェブフレームワークをAWS Lambda にデプロイして、固定費のかからない完全サーバーレスな環境を構築する方法を紹介します。Dockerを使わなくてもできます。 SPA（Single Page Application）が主流だったフロントエンド開発トレンドがSSR（Server-side rendering）とエッジコンピューティングに向けた最適化が進むなど、多様化しています。開発手法自体は JavaScript / TypeScript をベースとしたフレームワークを利用することが多いと思いますが、AWSを利用したサーバーレスの文脈では、開発トレンドが SSR に変わっていくところに関して、少し悩みが出てくることもあるのではないでしょうか。 サーバーレスの定義を広げるとECS Fargate や App Runner のようなマネージドサ
OSSとしてリリースされたばかりのReactベースのフルスタックWebフレームワークであるRemixをためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 re:Inventを前にAWSの情報も気になるところですが、フロントエンド界隈もReact Conf 2021を前にReact v18 betaをはじめ、Next.js v12やReact Router v6、新しいRoutingライブラリReact Locationのリリースなどなど注目のリリースラッシュが続いているようです。そんな中Reactをベースにした新しいフレームワークであるRemixが本日（2021/11/23日本時間）リリースされました。 Remixとは RemixはReactRouterの作者でもあるMichael Jackson氏（@mjackson）とRyan Florence氏（@ryan
対象読者 RemixがNext.jsなどとはどんなところが違うのか知りたいJavaScriptエンジニア WebブラウザとNode.jsという異なるランタイムをそれぞれキャッチアップするのが辛くなってきたエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.5.1 Remix 1.7.1 Webフロントエンド技術の広がり Webブラウザ上で動くアプリケーション周辺のエンジニアリング分野は、JavaScriptの進化とともにサーバーサイドの責務から分離され、「Webフロントエンド」という名前で呼ばれることが多くなりました。この分野は、Webブラウザをランタイムとしてリッチなアプリケーションを効率良く開発し、ユーザーに良い体験を与えることを主な目的としていると、筆者は認識しています。 ここで着目したいのが、このWebフロントエンド分野においては「Webブラ
You’ve got a new project to work on. Or you’ve got an existing project you’re motivated to upgrade to a more modern approach. Or perhaps you’re dissatisfied with your current modern framework or second-guessing yourself and you’re investigating alternatives. In any case, you’ve got a decision to make. There are lots of “modern” frameworks to choose from. Even if you’re not facing this choice right
JavaScriptフレームワークを取り巻く状況は、常に変化を続けています。近年では、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）のバランスは、重要な検討事項です。 ChatGPTのRemix採用 2024年9月、ChatGPTがNext.jsからRemixに移行したことが明らかになりました。この出来事は、Remixの母体であるReact Router系のコミュニティで大きな話題となり、移行の理由について様々な憶測を呼びました。 JavaScriptエキスパートのWes Bos氏（学習動画教材とかを作っている人）は、ChatGPTのフロントエンドのソースコードを分析し、OpenAIがRemixを採用した理由について独自の考察を展開しました。 www.youtube.com 緊急で動画を回すWes Bos氏 Wes Bos氏の分析によると、ChatGPTのア
はじめに こんにちは。フロントエンド開発課に所属している新卒1年目のm_you_sanと申します。 最近話題のRemixを使って、シンプルなTodoアプリを作成する方法をご紹介します。 Todoアプリの作成を通じて、簡単なフルスタック開発を体験していただければと思います。 はじめに プロジェクトの作成 モデルの定義 Root Routeについて ルーティングについて 一覧画面の作成 新規追加画面の作成 編集画面の作成 削除機能の追加 まとめ プロジェクトの作成 はじめに以下のコマンドを実行して、プロジェクトを作成します。 ※Node.js v18以上、npm v7以上がインストールされていることが前提です。 npx create-remix@latest --template remix-run/indie-stack 今回はindie-stackというテンプレートを使用しています。 この
v2 へ移行中です 円安の影響や、自社製品がスケールアウトに対応したこと、Cloudflare LB の WebSocket の挙動が残念だったことなどを踏まえ、サービス構成を変更を検討中です。 脱 Vultr Egress 料金が Linode だと Vultr の半額 Linode へ移行 脱 Cloudflare LB Linode の NodeBalancers へ移行 マルチリージョンでの利用は Linode の Akamai Global Load Balancer 公開待ち 脱 Cloudflare サポートに不安があるため Akamai へ移行 脱 TimescaledB 移行は Linode PostgreSQL の提供開始待ち OLAP は DuckDB + S3 互換オブジェクトストレージへ移行 ログ保存は VictoriaLogs へ移行予定 脱 DataPacke
自分が思う最強の(かつ貧者の)構成を目指したログ。流行りの技術選定ってやつしたかった。 結論だけ言うと、まだ綺麗ではないが現実的に動く。動かし方を理解してないと事故る、かも。 この記事は自分がたどり着いた結論を順を追って記述するが、自分にとって自明な場所の差分を記録してないので、コードをなぞるより変更意図を追って各々自分で組み立てる、ということを推奨する。 動いてるリポジトリはここ。ただこの記事の説明を読まないと、その意図が伝わらない。 追記 20240829: DATABASE_URL で Connection Pool を有効にするのに ?pgbouncer=true を追加 https://supabase.com/partners/integrations/prisma このスタックの意図 Remix on cloudflare-pages コストとパフォーマンスを両立できる、20
Cloudflare Workers を活かしきるスタックを考えた(remix+d1 on pages-functions) + 残タスク このスクラップ で試行錯誤していたまとめ。 最終形はここにアップロードした。 docs の下に、このリポジトリを生成した手順、セットアップ方法、リリース方法を書いてある。 (remix-validated-form や vitest のテストの追加でもうちょっといじるとは思う) なぜ cloudflare-workers + d1 のポテンシャルは最強で、近い未来、開発者|個人開発者の銀の弾丸になると思っているのだが、それを活かす開発スタックが知られていない(要出典)。この記事では GW の間に自分で周辺ライブラリを使い倒しながら選定していった。 2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを
Focused on web standards and modern web app UX, you’re simply going to build better websites Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. export async function loader({ request }) { return getProjects(); } export async function action
Easily the biggest question we get asked is something like: How is Remix different from Next.js? It appears we have to answer this question! We'd like to address it directly and without drama. If you're a fan of Remix and want to start tweeting smug reactions to this article, we kindly ask that you drop the smugness before hitting the tweet button 🤗. A rising tide lifts all boats. We've been frie
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
この記事は『blessing software 夏のブログリレー企画』の5日目の記事です。 昨日はasukaさん(@a_skua)の「Flutterを用いたWeb開発の今後について考える」が公開されました。 次回はKanonさん(@samurai_se)の「私がエンジニア勉強会を作り、ブログリレーを主催するまで」です！ はじめに 以前、Type Challenges Judgeという、type-challengesのオンラインジャッジを作りました。 Type Challenges Judgeは、type-challengesの問題の回答の正誤判定を行ったり、自分がどれくらい正解したかや、他の人の回答が確認できるアプリです。 このアプリをRemix + Cloudflare（Pages、D1）に移行してみた[1]ので、やったことについて書こうと思います。 技術スタックについて Type Ch
こんにちは！Acompanyのマッケイです！ この記事は Acompany5周年アドベントカレンダー 11日目 の記事です。 今回はAcompanyのプロダクト開発でも活用しているRemixを開発環境で使ってみた所感を書いていこうと思います。 Hello,Remix Remixは、Reactをベースとしたフルスタックフレームワークです。 Reactを魔改造して色々できるようにしようぜ、という昨今のモダンフレームワークに習うように、RemixもReactに厚化粧をした"React"フレームワークです。 書き心地はそのままReactですが、気づいたらサーバーサイドのコードを書いており、気づいたらデータベースをいじっているというなんとも不思議な経験ができるフレームワークです。 フルスタックフレームワークを使っているというよりは、Reactで開発しながら、サーバーサイドの処理も同時に書けるのがRe
Update (Dec 2024): React Router v7 has been released! We now recommend starting all new projects with React Router v7 and upgrading existing Remix apps. We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Ro
Next.jsの対抗馬となりそうなReactのフレームワークでRemixのv1.0がリリースされました。 個人的にRemixでいちばん魅力を感じているのはCloudflare WorkersでSSRができるという点です（現状ではNext.jsをCloudflare Workers上でSSRするのは難しい）。これがなぜ嬉しいのかと言うと、パフォーマンスを出しつつ、低コストで運用でき、大量のアクセスに対しても低コストでスケールできそうだからです。 そもそもSSRをする必要ある？ ほとんどのWebサービスはSSRなしでSPAとしてビルドし、Cloudflare PagesやGitHub Pagesに静的ファイルをのせて動かせば十分だと思います。 例えば僕が先日作った個人開発のサービスもReact on Cloudflare Pagesの完全なSPAですが、SSRが必要な要素はまったくありません。
はじめに こんにちは、CX事業本部MAD事業部の森茂です。 先日リリースされたRemix Stacks、Remixチームが公開しているAWSを利用したサーバレス構成のGrunge Stackテンプレートがどのような構成になっているのかを調べるために早速デプロイまでの流れを試してみました。 Grunge Stack Grunge StackはAWSを利用したサーバレス構成のアプリケーションテンプレートです。サーバレスフレームワークとしてはArchitectを利用しています。データベースにはDynamoDBを利用し、アプリケーションはCloudFormationを利用してLambdaへデプロイされAPI Gatewayを介して公開されます。また開発用にローカル環境のサンドボックス環境も用意されているのでAWS環境へデプロイせずに動作を確認することが可能です。（サンドボックス環境のDynamoD
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
We want the default build output of Next.js to work well when self hosting, and also well on Vercel. And guess what? They're the same output. Well, almost. Let me clarify. It took us a while at Vercel to figure out the correct format and boundary between open source framework and infrastructure platform. Our philosophy is called framework defined infrastructure. And critically, the specification t
はじめに この記事は GENDA Advent Calendar 2023 13日目の記事です。 株式会社GENDA FE/BEエンジニアの shinnoki です。今年は自分にとって色々と変化のあった年で、年初にはアーリーのスタートアップでCTOを務めておりましたが、ご縁があり8月にGENDAに入社いたしました。 最近社員インタビューも公開されて入社の経緯なども触れていただいたため、興味があればぜひご覧ください。 今年は個人的にあまり最新技術のキャッチアップができていなかったことを差し引いても、フロントエンド界隈では激動の1年だったのではないでしょうか。 最新技術のキャッチアップが大変なのはフロントエンドに限ったことではなくどの領域においても発生する話ですが、フロントエンドは特に大変だよねという話は周囲からもよく聞くため、感覚として間違っていないと思います。 これらとどう付き合っていくか
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
本日11月23日Remixが正式にリリースされたので早速触ってみました。 Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRはサポートしていない Next.jsにはSSGやISRなどあらかじめデータをビルドしておいてその結果をリクエスト時に返すといった機能がありますが、Remixにはありませんでした。 その代わりRemixでは以下のようにページコンポーネントごとにheadersをexportするだけでHTTP headerをコントロールできる仕組みがあるので、そこでCache-Control
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
