ヘッドレスCMSの全体観を掴む | ヘッドレスCMSの本質
コンテンツ管理システムの歴史 なぜ、このような新しい性質を持つコンテンツ管理システム（CMS）が求められるようになったのでしょうか。その理由を知るためには、CMSの歴史と時代背景について知ることが一番の近道になります。 1990年代中頃: CMSの誕生 1990年にWorld Wide Webが登場してから、しばらくの間、WebサイトはHTMLの手動編集によってのみ管理されていました。しかし、次第にWebサイトの規模や複雑性が増していき、手作業でのコンテンツ管理が困難になります。 そして、1990年代中頃、HTMLの手動編集によるWebサイト運営の非効率を解消するためのソリューションとして、最初のCMSが登場します。この時、多くの企業が自作のカスタムCMSを作り、いくつかのエンタープライズ向けCMSも登場しました。 2000年代初頭: オープソース化による急速な普及 2000年代前半になる
GitHub - react-hookz/web: React hooks done right, for browser and SSR.
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
ISUCON 13 参加記 (白金動物園)
白金動物園の sorah です。優勝した ISUCON 9 以来 Writer や Admin (アドバイザー), ポータルのメンテナ係として運営に幽閉されていて長いこと選手をやっていませんでしたが、今回ひさびさに選手として参加したのでその参加記。 結果としては 18 位で 103,838 点で終了。10 万点到達の着順ではわりと早かったチームになれたものの、その後伸ばせず、かなり悔しい。 https://isucon.net/archives/57993937.html 一方で Ruby を利用して NameError や NoMethodError による fail を高速に繰り返していたため「ベンチマーク Fail 回数の多い 3 チーム」として 53 回で TVer からスポンサー賞をもらいました。我々より Fail 数が多いチームは Go だと思うんだけど、コンパイラがそこそこ怒
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
この記事は毎週必ず記事がでるテックブログLoglass Tech Blog Sprintの17 週目の記事です。 1 年間連続達成まで残り 36 週となりました！ はじめに こんにちは！株式会社ログラスでエンジニアをしているd4te74です 🍷 ログラスではレポートと呼ばれる経営データ分析のための機能領域を改善するチームに所属しています。 この記事では、最近取り組んでいたレポート機能のフロントエンドのパフォーマンスチューニングとして行った「巨大なテーブルコンポーネントの仮想スクロール化」について書いていこうと思います。 ※ Loglass は事業の予実を管理するサービスです。 レポート機能とは レポート機能とは、Loglass 内に統合された部署や勘定科目などの経営データに対し集計・分析が行える機能で、ユーザー自身がそれらを自由度高く表形式に組み立てて、表示できるというものです。 以下の
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお話します。
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
コンポーネント設計のすゝめ 〜ベストプラクティスを学ぶLunch LT〜 - connpass https://findy.connpass.com/event/296449/
【注意喚起】ReactのuseStateの値がすぐに更新されない理由を誤って理解しがちな件について - Qiita
「state 更新 反映されない」を検索するまで Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。 私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。 「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。 そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState
自分が Moonbit 言語について知っていること
I will write an English version later to give back to the moonbit community. Addition: https://gist.github.com/mizchi/aef3fa9977c8832148b00145a1d20f4b この記事はリバースエンジニアリングを含んでいる。公式の Discord サーバーで質問して得られた内容を含むが、ここに書かれたものは自分の理解であって、公式の見解ではない。 前の紹介記事では煽り気味だったので、実際に調べながら書いてみてどう感じているかという実践的な話をする。 作者と開発組織 開発母体は深センの研究組織 IDEA 元 Meta で BuckleScript | ReScript を開発していた Hongbo Zhang 氏がチーフアーキテクト。 ReScript を知らない人の
react-router 使う機能、使わない機能
最近久しぶりに React Router を使う機会があった。 SSR不要な要件だったのでNext.jsではなく Vite を選んだら、ルーターが必要となり React Router を選定した。 React Router は Remix との統合もある通り、もはやただのルーターではなく、fetch や form action までもサポートされている。 採用にあたって考えるのはどこまで React Router の機能を使うかだ。 自分は router が欲しくて入れるので fetcher や action は不要だ。 一方で React Router を FW と考えると FW の標準に乗るのは自然な発想にも思える。 今回、React Router の機能に寄せて開発してみて、この機能使う・この機能使わないという土地勘ができたのでメモをしておく。 router ルーターライブラリなので
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮
静的サイトジェネレータ「Astro 4.0」正式リリース。デバッグを容易にするDev Toolbarが登場、キャッシュ導入でビルド時間が80％短縮 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.0」が正式にリリースされました。 今年（2023年）9月にAstro 3.0がリリースされたばかりで、速いペースでのバージョンアップが続いています。 Astro 4.0 is here! Introducing the Astro Dev Toolbar — your new companion for local development. Inspect, audit, and extend your dev environment in the browser. Plus: 80% faster builds, i18n routing
Readonly 使ってますか？
ムーザルちゃんねるのムーです。今回は TS の Readonly を使うか否か zaru さんと会話しました。 以前の zaru さんのこちらの記事 Reactのpropsはreadonlyにするべきか？で、Readonly については記載していますが、今回会話をする中で改めて気づいた知見などがあったのでシェアしたいと思います。 動画本編の中でも Readonly の罠として二つ紹介していますが、それらについて書いておきたいと思います。 その1 immutable なオブジェクトを mutable なものにアサインすると、変更できてしまう。 これはよく知られている挙動だと思います。 具体的には以下のようなコードです。 interface Cat { readonly name: string; } const cat1: Cat = { name: "Alice" }; cat1.name
こんにちは、atama plus というスタートアップで web エンジニアをしている yubon です。 atama plus Advent Calendar 2023 の 7 日目になります。 本記事では、atama plus で実際に開発・運用している React プロジェクトにおいて、機能的な凝集度を高めるために行ったディレクトリ構成の再設計について紹介します。 フロントエンドのディレクトリ構成に関する考え方や設計思想は多くの記事で紹介されていますが、「業務で開発しているプロジェクトのコードで、ペインがある状態から再設計して実際に移行した」というケーススタディ的な記事は少なそうだったので、書き残しておこうと思います。
インストール不要でLlama 3やMistralなどオープンソースLLMをブラウザで動かせるチャットボット「Secret Llama」が登場
Llama 3やMistral-7Bといったオープンソースの大規模言語モデル(LLM)をサポートし、WebGPUを使ってブラウザ上で完全に動作するチャットボット「Secret Llama」が公開されています。 Secret Llama https://secretllama.com/ GitHub - abi/secret-llama: Fully private LLM chatbot that runs entirely with a browser with no server needed. Supports Mistral and LLama 3. https://github.com/abi/secret-llama 実際にSecret LlamaのデモサイトでLlama 3を動作させて会話してみたところが以下のムービー。 大規模言語モデルを完全にブラウザで動作できる「Secr
『レオン』ナタリー・ポートマンの「不快」発言、リュック・ベッソン監督が反応 ─ 「批判はいつだってできる、物事は変わっていく」 | THE RIVER
『レオン』ナタリー・ポートマンの「不快」発言、リュック・ベッソン監督が反応 ─ 「批判はいつだってできる、物事は変わっていく」 Photo by Gage Skidmore https://commons.wikimedia.org/wiki/File:Luc_Besson_(28439137772).jpg 1994年の映画『レオン』でマチルダを演じたナタリー・ポートマンが同作の物語を批判したことについて、リュック・ベッソン監督が反応した。今の自分は「同じ人ではない」とした上で、作品擁護の姿勢を見せている。 不朽の名作として数えられる『レオン』は、寡黙な殺し屋レオン（ジャン・レノ）とマフィアに家族を殺された孤独な少女マチルダの絆を描いた1作。一緒に暮らすことになった2人の間には、“恋愛感情”とも捉えられる複雑な感情が芽生え始めていく。 本作を機に世界的地名度を獲得したポートマンは同作を「
計測方法と結果 以下のようになlazy loadが発火した時点でのソースと画面中央の距離(px)を測るページを用いて、iframeと画像の二種類のソースを対象に4000pxのdiv要素とボタン以外に何も読み込まれていない状態とすでに画像が読み込まれている状態との二つの状態を掛け合わせて計測しました。 import React, { useState, useRef } from 'react'; export default function Home() { const iframeDistance = 4000; const [showImage, setShowImage] = useState(false); const imageRef = useRef(null); const toggleImage = () => { setShowImage(!showImage); };
The New Internet
WireGuard is a registered trademark of Jason A. Donenfeld. Avery Pennarun is the CEO and co-founder of Tailscale. A version of this post was originally presented at a company all-hands. We don’t talk a lot in public about the big vision for Tailscale, why we’re really here. Usually I prefer to focus on what exists right now, and what we’re going to do in the next few months. The future can be dist
こんにちは、MLOpsチームです。先日OCRモデルを学習するためのアノテーションにおいて、作業効率を検証するためのPoCとしてアノテーションUIを開発しました。本記事ではこのアノテーションUIにおける工夫について、試用によって得られた知見をまじえつつ紹介します。 はじめに アノテーションUIを開発することとなった背景について説明します。 アノテーションUIとは アノテーションUIは機械学習の学習データを作成するためのUIです。アノテーションUIはアノテーション作業の効率に強く影響し、アノテーション作業によって得られる学習データの量は機械学習の精度に大きく寄与します。したがって、アノテーションUIは機械学習において最も重要なコンポーネントのひとつといえます。 UIを開発した背景 キャディではOSSツールなどのUIを用いてアノテーションが行われていましたが、ここに独自の工夫を導入すれば入力効率
プロダクト全体のソースコードを解析して、提供しているモジュールおよびそれを使用しているプロダクトごとに個別に自動集計する仕組みとその実装方法について解説します。
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 今回はHeadless Editor FrameworkであるTiptapのご紹介と、そちらを使ってオリジナルなエディタを作成しようと思います。 Tiptapとは TiptapはHeadless Editor Frameworkと呼ばれています。 これまでWebでのWYSIWYGエディタとしてQuill.jsやDraft.jsなどが存在しました。 これらは文字の装飾や文章の編集に関するUIをデフォルトで提供しており、エディタに特別な機能を追加しようとしたり、UIを大きく変えるというのは少々大変でした。 TiptapのようなHeadless Editor Frameworkは、エディタで必要な機能のコア機能を提供し、必要なUIや機能は拡張機能として追加できるような仕組みになっ
この記事は、以下の記事で述べたライフタイムのうち、 2. レンダー, 3. コンポーネント に関連する内容です。 両方を合わせて読むと、より理解が深められると思います。 はじめに: 止まらないデータの流れを意図的に止めることが可能 React の、特に Function Component の良いところといえば「ステートを更新したのに表示が更新されない」ようなバグを防ぐという思想が強く押し出されていることですよね？（圧） React の元開発者である Dan Abramov 氏のブログの「壊れにくいコンポーネントを書く」ことについての投稿を見れば、そのような側面がよく分かると思います。 const SomeComponent: FC = () => { const [count, setCount] = useState<number>(0); // 再レンダリングのたびに、下の式が実行さ
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DO
ジャンプTOON Web アプリケーションの全体像〜採用技術と開発方針〜 | CyberAgent Developers Blog
目次 はじめに Next.js × GraphQL のサーバー間通信 Fastly でのコンテンツ配信とキャッシュ方針 vanilla-extract の採用とスタイリングシステム Chromatic による UI テスト / UI レビュー Datadog でのサービスモニタリング ジャンプTOON の CI/CD リリース戦略とブランチ運用の工夫 おわりに はじめに ジャンプTOON の Web 版（以降、ジャンプTOON Web）の開発を担当している2024年度新卒入社の鏑木 俊樹（かぶらき としき） @tosssssy_ です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON Web では Next.js App Router （v14.2）を採用して開発をしてお
まずは下記のツイートをご覧ください。 すごい便利そうですよね。これで紹介されてた機能を実際に使ってみたので紹介します。 登場人物の紹介 tldraw と draw-a-ui と makereal.tldraw.com の整理を先にしておきます。 tldraw tldraw そのものにこの機能はありません。 tldrawはホワイトボードを作成するためのReactライブラリです。 下記がサンプルです。 miro ライクなホワイトボードを少ないコードで実装できます。 draw-a-ui tldraw と gpt-4-vision api を使って、描いたワイヤーフレームを元にhtmlを生成するアプリが draw-a-ui です。 git cloneして下記コマンドで簡単にローカルで試すことができます。 makereal.tldraw.com makereal.tldraw.com は draw-
はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを作成する日記① Tailwindを導入できた ComponentにPropsを渡せた Componentの中でPropsを使用できた Componentをループを使って表示できた React Iconsを導入できた Next.jsでTODOアプリを作成する日
introduction HonoにはRPCの機能があり、routerで定義している情報（引数とか型とか）を他のファイルで簡単に利用することができます。 この記事では、そのRPCの機能とNextを組み合わせて、HonoをNextのBFFとして使用する組み合わせについて紹介していきたいと思います。 まず、今回作成した２つのサンプルのリポジトリを紹介します。 以下の２つのリポジトリのコードを用いて説明するので、もし興味があればクローンして色々試してみて下さい。 next-hono-webはshadcn/uiのコンポーネントをお借りして作成したサンプルのダッシュボードに対して、一部の値を動的に設定するよう変更を加えたものです。 next-hono-backendはとてもシンプルで、next-hono-webで使用するサンプルデータを返すよう定義されています。 next-hono-backend側
新興のJavaScriptフレームワークNueとは？公式サイトざっくりまとめこの記事では、新興のJavaScriptフレームワークであるNueについて公式サイトの内容をざっくりまとめています。注）完全に正確な情報が知りたい方は記事内のリンクより公式サイトをご確認ください。 Nueは、MITライセンスでGitHubでホストされているオープンソースプロジェクトで、ヘルシンキ出身のフロントエンド開発者であるTero Piirainen氏によって開発されました。彼はオープンソースプロジェクト、テクノロジー製品、スタートアップの構築に25年以上の経験を持ち、Riot.js、Flowplayer、jQuery Toolsの製作者として知られています。 公式サイトのファーストビューでは「Nueは強力なReact、Vue、Next.js、Vite、Astroの代替ツールです。あなたのウェブ開発のやり方を変
Patterns for Reactivity with Modern Vanilla JavaScript
Patterns for Reactivity with Modern Vanilla JavaScript August 21, 2023 “Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We mu
スキル管理チームの「入社半年〜ズ」が感じる、仕事と成長をドライブするSmartHRの文化 - SmartHR Tech Blog
2023年8月22日にリリースしたSmartHRの最新プロダクト「スキル管理」。 実は、リリース時チームメンバーの3分の1、数にて4名がSmartHR入社半年以内のメンバーであり、しかもそのうち3名は配属時期が6〜7月とリリースの直前！ 今回は、そんなスキル管理の「入社半年〜ズ」に集まってもらい、リリース後の心境や、SmartHRについて感じていることについて語ってもらいました。 また、先日実施されたイベント「0→1をスクラムでやってみた -スキル管理機能の作り方- - connpass」では、新規プロダクトリリースに至る苦労や知見が、リリース時スクラムチームメンバーから選ばれた6名によって披露されたので、ぜひ資料をチェックしてみてください。 higashi173 大学卒業後、第三者検証の会社にQAエンジニアとして入社。1年ほど在籍したのち、ポテンシャル採用のQAエンジニアとして2023年
A content-first Web framework Nue is a closer-to-metal framework embracing minimalism and web standards. It's structurally clean and stupidly fast. Get started Product roadmap Content-first: Build entire sites without ever leaving your content Vision The ultimate goal of Nue is to build a perfect web framework, which is ridiculously fast and easy to use. Nue JS Server-side templating and reactive
お金がない小中高校生のためのプログラミング入門
私がパソコンを初めて触ったのは小学3年生でした。 当時は親の仕事用のPCに勝手にフリーソフトを入れて遊んでいましたが、自分のPCが欲しくなりジャンクを漁るようになりました。 最初に自分のPCを買ったのは小学4年生だったと記憶しています。 ありがたいことに今は非常に高性能なPCを使えているのですが、このPCを手に入れるまでお小遣いも少なくお年玉も1万円ほどしかなかありませんでした。 今後の後輩のために、お金のない学生がプログラミングに入門するまでの内容を記録しておこうと思います。 この記事のきっかけになったツイートです。 この記事の目的 この記事は以下のような高校生以下の読者を想定した記事です。 プログラミングとかやりたいけどScratchやMinecraftでやるのは違う気がする 親にパソコンを買ってもらえない 独学で勉強したい・誰かに質問できる環境ではない 私の当時の環境 お年玉は500
はじめに こんにちは！@nyakako13 です。 少し前からtypescript,reactの学習を進めています。 pythonでの開発時はblack formatterとiSortの拡張機能でimport文の自動並べ替えをしていました。 今回、typescriptの開発でも同じように自動でimport文の整理ができないかな？と思い調べてみました。 eslintやprettierでもplugin等で実現できるみたいですが、現在は一人での開発で、すべてのプロジェクトに適用したいので、とりあえず今回はvscodeの設定でやってみます。 vscodeの設定方法 vscodeのsetting.jsonを開きます 下記を追記します。 "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.organizeImports"
Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。スクロール位置に応じて、視覚的に見える範囲のデータのみをDOMに挿入することで、レンダリング処理を最小限にするというものです。 この仮想スクロールについて、直感的にスクリーンリーダーでの閲覧に耐えられるのかの不安を感じました。しかし、あまりテーブルを仮想スクロールする場合についてのまとまった情報をWeb上で発見することができませんでした。 そこで、実際に仮想スクロールを採用した検証用のWebアプリケーションを作成し、スクリーンリーダーでの動作を確認してみることにしました。 「日本の郵便番号」ア
PR TIMESのトップページをNext.jsにリプレイスしました | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + […]
永山です。 神話の時代、天を衝く巨塔を築こうとした高慢な人類の Node.js パッケージマネージャは様々に引き裂かれたと言われています。 現代においてよく使用されているものだけでも npm, Yarn, pnpm などがあり、エムスリー社内でもプロジェクトによってどのパッケージマネージャが採用されているかはバラバラです。 それぞれのパッケージマネージャは異なるコマンドラインインタフェース (npm / yarn / pnpm) によって操作する必要があるため、作業するプロジェクトによって適切なコマンドを呼び分けなければなりません。めんどくさ。 本記事では Zsh プラグインである zeno.zsh を用いてこれらパッケージマネージャの差異を吸収することで快適な開発体験を実現する方法、およびその過程で模索した zeno.zsh の設定ファイルの TypeScript 化の試みについて紹介し
Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ
おそらく日本語の商業出版の技術書ではほぼ初となる[1]、Tailwind CSSの本格的な入門書を発売します（そして私にとっては初の単著となります！）。 技術評論社様の「エンジニア選書シリーズ」という比較的新しめのレーベルです。表紙が風車なので、愛称として「風車（ふうしゃ）本」とでも呼んでもらえると喜びます！ 物理版＆電子版の両方が出ます。Amazonほか各種ECサイトなどでお求めください。 コンセプトと構成 この本はHTMLやCSSそのものの基礎は扱いません。 「すでにCSSを使ったことがあり、CSSの設計で苦しみを味わってきた開発者（本文まえがきより引用）」が対象読者です。 コンセプトとしてはTailwind CSSというフレームワークの入門書である以上に、ユーティリティファーストという思想への入門書を志向しています。全9章ですが、どの章も概ね以下の3つのテーマを巡って展開しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Vite は使ってないけど Jest を Vitest に移行する
巨大なテーブルコンポーネントを仮想スクロール化してブラウザのメモリ使用量を1/10にした話
フロントエンドのディレクトリ構成を整理してコードの凝集度を高める
HTMLのLazy Loadの挙動がブラウザによってかなり異なるので違いを実測して確かめてみた
アノテーションにおけるUIの工夫 - CADDi Tech Blog
ソースコードを解析して社内向けUIライブラリの使用状況を自動で集計する
Tiptapでオリジナルエディタをつくろう！
useState の初期値 ―― 変化する Props の値を固定する
HTML DOM — Phuoc Nguyen
図からプログラムを自動生成してくれるmakereal ( tldraw )について
Next.jsでTrello風タスク管理アプリを作成する日記⑤ - Qiita
Next as Frontend + Hono as BFF という組み合わせの提案
新興のJavaScriptフレームワークNueとは？公式サイトざっくりまとめ | フロントエンドクラブ
Nue: The content-first web framework
【vscode】TypeScriptで不要なimport文を自動削除＆自動で並べ替え - Qiita
テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ
zeno.zsh を活用して Node.js パッケージマネージャの違いを吸収する - エムスリーテックブログ
やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話
【PR】『Tailwind CSS実践入門』を2024年1月26日に出版します