※こちらはバイセルテクノロジーズ Advent Calendar 2023の10日目の記事です。 前回の記事は、金澤さんのAuth0とEntra IDを扱うプロダクト同士を繋げるためのIstio設定あれこれでした。 はじめに こんにちは、開発3部の神保です。 バイセルでは、お客様宅への出張訪問による買取が買取チャネルの主力となっています。現在開発3部の弊チームでは、この出張訪問買取で使用されるWebアプリケーション「Visit」の新規開発を進めています。 VisitのフロントエンドにはReactを採用しましたが、Next.js等のフレームワークは使用せず、Vite + ReactによるSPA (Single Page Application)構成を選択しました。 技術選定の過程では、社内での採用事例などからNext.jsも検討の対象となりましたが、最終的にはその採用を見送る結論に至りました

yarn と npm の栄枯盛衰2021 å¹´ 8 月に yarn の v3 がリリースされました。2020 年の同月あたりに yarn v2 がリリースされたので、約 1 年ぶりのメジャーバージョンアップになります。 v1 → v2 のパラダイムシフトは強烈でしたが、 v2 → v3 は berry というパッケージ名は相変わらずで、 v2 の正統なバージョンアップでありちょっとだけ物足りなさを感じてます。 Get Started なにはともあれ、とりあえずは触ってみましょうか。 Node.js ≥ 16.10 であれば、 Corepack を使って以下のコマンドで yarn v3 をインストールできます。 $ corepack enable $ corepack prepare [email protected] --activate # yarn.lock ã‚„ README.md が生成される $

スライダー・カルーセルなどがホイールで操作されてしまうページやコンテンツ単位のジャンプに置き換えられてるページの方がまだ好感が持てる。いいかスクロール量と速度を中途半端に変えるな。普通のスクロールの顔をしてさも気遣いをしているような態度で俺とページの間のインタラクションを奪うな— 稲葉 (@eps_r) 2016年12月22日 説明しづらいんですが、ブラウザでのホイール回転を勝手にスムーススクロールというか、余韻（イージング）スクロールとか表現されるものに置き換えてしまうWebサイトを時折見かけます。 後付けの慣性とでも言うのでしょうか。はっきりいって右クリック禁止並にダサくてユーザー体験を毀損していて、友達に噂とかされると恥ずかしいサイトだと思っているのですが、不満に思う人が少ないのか、あるいは地味で説明しづらい事象なのをいいことに実装しているやからがいい気になっているのか、一向に消滅し

はじめに 2025年10月10日、カナダのトロントで開催されたイベント "Remix Jam 2025" で Ryan Florence と Michael Jackson が Remix 3 を発表しました。このセッションは、React Router の生みの親たちが、なぜ React から離れ、独自のフレームワークを作ることにしたのか、その理由と新しいビジョンを語った歴史的な発表です。 本記事では、1時間47分に及ぶセッションの内容を詳しく解説します。 なぜ Remix 3 を作るのか 💡 動画で確認する (3:17:30~) React への感謝と決別 Michael Jackson と Ryan Florence は、React に対して深い敬意を持っています。React は彼らのキャリアを変え、Web 開発の考え方を一変させました。React Router を10年以上メンテナ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 前提 ※ ポエム記事なので、全て私個人の主観です🙏 ※ あと、すんません。ふざけて色々詰め込んだら結構長くなりました。ホンマすんません。。 結論と主旨 先に書いときます。 Next.js は非常に便利。とても良い技術で、慣れると最高 特に、AI 搭載サービス作るなら採用技術の最有力候補だと思っている Next.js はそんなに好きじゃないですが、今後も使います（市場が大きい内は） でも、初心者にはやっぱり「オススメ」ではない（＝初心者向けではない） Next.js 以外にも色んな技術使ってて、常に別の技術採用時にも対応できるようにはし

先日、はてラボで「はてなアイコン」をリリースしました。普段はスマートフォンアプリを書いていることが多い id:kouki_dan です。 labo.hatenastaff.com サービスの紹介はリリース時のエントリを参照してください。このエントリでは技術的な裏側の紹介をしていきます！ Cloudflareスタックを試したかった 2年くらい前に、Cloudflare D1などが発表されて盛り上がっていた頃、Cloudflareを使ってなんか作りたいな〜と思っていました。はてなの社内には自由研究用のリソースとして、AWS, Google Cloudをはじめ、様々なクラウドサービスを特段の申請不要でエンジニアが自由に試せる環境が用意されています。もちろん費用は会社が出してくれて、常識的な範囲で使ってねということになっています。2年くらい前にCloudflareも追加してもらい、社内で自由にCl

2024/12/10に開催された3社合同フロントエンド合同勉強会で話した内容 https://prtimes.connpass.com/event/335335/

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た

hey / STORES advent calendar 2020 7日目を担当する @ume-kun1015 です。 2020年の振り返りとして、この記事ではNuxt.jsで実装してきたアニメーションをまとめようと思います。 概要 Nuxt.jsでの開発を行おうとすると、Vue.jsのコミュニティが活発だからか、自然と多くのUIライブラリやアニメーションライブラリを見ます。しかし、自分はそれらを使わず、ほとんどのケースで自分で実装していく派です。 理由としては、 要件を満たすものを探し、実際にプロジェクトに入れてみて、要件を満たせるかの検証に時間がかかる。 ライブラリが提供しているUIとデザイナーから要求されるUIの調整が難しい。 将来要求される機能追加や変更を叶えられるかがわからない。 tree-shakingが未対応であるライブラリの場合、使わない機能のJavaScriptまでimp

個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変

はじめに この記事の内容はhtmx v1の記事です。 最新のhtmx v2に関する解説は以下の本にまとめましたので、そちらを参考にしてください！！ HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui)　似たような機能として、Ruby on RailsのH

概要 今回は、最近フロントエンド界隈で少し話題になった Next.js と Remix を比較した記事を読み、実際に Remix がどんな感じなのか気になって自分でも触ってみたため、その内容を新たな記事としてまとめていこうと思います。 基本的には、Remix の公式のチュートリアルやドキュメントを参考にまとめたため、大きな解釈違いはないと思っているのですが、間違っている箇所などあれば気軽に指摘していただけると嬉しいです。 また、以下で紹介する Next.js と Remix の比較記事を元にした記事になっていますが、結論あまり記事は関係なく、Remix を触ってみたよという程度の記事になっている点にご了承ください。 記事の内容 まず最初に、私が読んだ Next.js と Remix を比較した記事の内容をざっとまとめていこうと思います。 Next.js は独自の技術が多すぎる Next.j

このエントリーは一休.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

はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事

TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて

TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs

そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2019年3月⁩. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback 概要 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersecti