はてなブックマーク

Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ

2025/01/04 Git Hooks ツールの Lefthook を追記 2025/01/05 フロントエンドの状態管理に XState を追記 各リンクテキストを対象名がわかりやすい形式に変更 概要 以前のプロジェクトで使っていたり、進行中に差し替えまでは出来ないけど次使うならこれを使おうと思っていたライブラリやツールなどが、いざ新しくプロジェクトを作ろうと初期構築を始めたら色々と失念している事ってよくありませんか？ 最近実際それがあり、個別のページにわかれて技術メモはとってあったりするのですが探しながらは手間なのとブクマしただけのものもあるので、インデックス的に手軽に気になった技術をメモっておく見ながら構築したり技術選定の前段階に使うようなノートを作ったので誰かのお役に立つかもと公開してみます。 気軽に雑にメモるのを前提に作ったものをそのまま公開しているので文体等は統一されてません

"use cache"は、Next.jsのDynamic IOで利用することができる新たなディレクティブです。本稿は筆者の備忘録を兼ねて、Dynamic IOの成り立ちや"use cache"の内部実装について解説するものです。 Dynamic IOの成り立ち Dynamic IOは2024年10月のNext Confで発表された、Next.jsにおける新しいコンセプトを実証するための実験的モードです。Dynamic IOはその名の通り、主に動的I/O処理に対する振る舞いを大きく変更するものです。 具体的には、以下の処理に対する振る舞いが変更されます。 データフェッチ: fetch()やDBアクセスなど Dynamic APIs: headers()やcookies()など Next.jsがラップするモジュール: Date、Math、Node.jsのcryptoモジュールなど 任意の非同期

はじめに インターネット通信の安全性を確保するための標準プロトコルとして広く利用されているTLS（Transport Layer Security）。しかし、分散型システムやプライバシー要求が高まる現代において、TLSには限界が浮き彫りとなっています。そこで登場したのがzkTLSです。zkTLSはTLSの強みを活かしつつ、Zero-Knowledge Proofs（ZKP）を組み合わせることで、データの整合性や出所をユーザーが証明できる新たなセキュリティプロトコルです。本記事では、zkTLSの技術的側面に焦点を当て、詳細に解説します。 TLSの進化 TLSは1994年にSSL（Secure Sockets Layer）プロトコルに代わって導入され以来、インターネット通信の安全性を確保する標準プロトコルとして定着しました。現在では、ほぼすべてのウェブサイトがHTTPSを採用しており、TLSに

はじめに 動画版もアルヨ～。 Cursorとは Cursor とは一言で言うと、VSCode をベースに作られた AI 搭載のコードエディタのことです。 例えば、ChatGPT、Claude、Gemini などの生成AIを利用してプログラミングするときを思い出してみてください。 このように、エディタにコードを書きながら、ブラウザで開いている AI に質問をする、という作業を繰り返し行います。しかし、エディタとブラウザを行ったり来たりするのは少し面倒ですよね。 そこで登場するのが Cursor です。Cursor は ChatGPT や Claude、Gemini などの AI が内蔵されているエディタで、AIを使ってコードの編集、エラーの解決、ターミナルの操作、タブ補完などができます。 また、VSCode をフォークして作られているので、使い方、操作感も VSCode に非常に似ています。

フロントエンドエンジニアが実際に使用しているVSCode拡張機能17選 はじめまして、フリーランスのフロントエンドエンジニアのAKIと申します。今回は、実務で活用している便利なVSCode拡張機能をご紹介させていただきます。特にNext.jsでの開発現場での実用性を重視して厳選しました。 基本的な開発環境を整える拡張機能 1. ESLint コードの品質管理において最重要となる拡張機能です。特にチーム開発においては必須のツールとなります。新規プロジェクトを立ち上げる際、最初に導入を検討すべき拡張機能の一つです。 2. GitLens Gitの操作性を大幅に向上させる拡張機能です。コードの変更履歴やその著者を即座に確認できるため、コードレビューの効率が格段に向上します。チーム開発における情報共有ツールとして非常に重宝しています。 3. GitHub Copilot 有料ではありますが、開発効

以前にTauri, Rust, TypeScriptで書いたソースコードを流用してWebアプリにしてみた。 前はPureScript + Halogenで書かれたソースを TypeScript + Rustに書き換えたんだけど、今回もう一度書き換えてReact + TypeScript + Wasm + Rustの構成にする。 作った成果物 開発環境 Windows 11のWSL2環境で実行しています。 ~$ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy ~$ npm -v 9.6.7 ~$ rustup show Default host: x86_64-unknown-li

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ

参考文献 ※1 EDINET API機能追加に係る利用者向け説明会資料 ※2 EDINET API仕様書 Version2 ①会社名の選択 まず会社一覧及び、会社のEDINETコードが必要になってきます。 これについてはAPIで取得する方法はなく公式サイトからZIPを落としてくるか ここからプログラム的に自動でダウンロードする必要があります。 今回は手動であらかじめダウンロードしたものを使います。 公式サイトからダウンロードすると毎回リンクが変わる、上記の直接リンクだと固定という謎仕様のようです（ドキュメントにもそうかいてある） ZIPを展開するとShift-JISのCSVが手に入ります。文字コードに注意しましょう。EDINETからダウンロードするCSVはUTF16なのにこっちはShiftJISなのです。 中身は上記のようなもになっています。 末尾に0がついているものの証券コードも入ってい

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Remixとは？ Remix とは、公式サイト によると、React ベースのフルスタックの Web フレームワーク のことです。 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. （訳）Remixはフルスタックのウェブフレームワークで、ユーザーインターフェイスに集中し、ウェブスタンダ

筆者がよくやるコマンドが存在する場合のみ有効化する形式にしています。 curl を使ったインストール方法の場合は ~/.local/bin/mise へ、zsh 以外のシェルを利用している方は公式ドキュメントを参考に自身のシェルのものへ置き換えて下さい。 IDE Integration | mise-en-place mise activate --shims は PATH に shims を追加する為です。mise は PATH を動的に変更する形式な為、 mise activate zsh だけだとインストールした言語やツールをエディタ等の対話シェル以外からは利用できないので追加しています。上記のように設定すれば対話シェルでは mise の PATH 変更形式を利用しつつ、エディタ等でも利用できるようになります。 設定ファイル Configuration | mise-en-place

はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても

はじめに この記事の内容は、以下の動画でも解説しているので是非見てみてください！（動画の方が多分わかりやすいです！） Hydrationとは？ Hydration（ハイドレーション）とは、直訳すると「水分補給」という意味です。 フロントエンドの世界では、静的な HTML に JavaScript を結び付けてインタラクティブにするプロセスのことを指します。 例えば、React で SSR する場合を考えてみましょう。 SSR では、まずブラウザはサーバーに対して、リクエストを送信します。リクエストを受けたサーバーは、JavaScript を実行して、HTML を作り出します。そして、完成したこの HTML をブラウザに送り返します。 このとき重要なのは、受け取った HTML が "あくまでも見た目しかない" ということです。つまり、このままだと Web ページは静的で、クリックしても何も起

先日、Next.jsの新たなレンダリングモデルであるPartial Pre-Rendering(以降PPR)について記事を投稿しました。 この記事を書いてる時は意識してなかったのですが、感想でアイランドアーキテクチャに言及されるケースが散見されました。社内で上記記事の話題になった時も同様に、アイランドアーキテクチャとの違いについて問われました。 結論から言うと、PPRとアイランドアーキテクチャは全く異なるものです。本稿ではPPRとアイランドアーキテクチャの違いについて解説します。 PPR まずはPPRとアイランドアーキテクチャの概要を改めて整理しましょう。 PPRはページをstatic renderingとしつつ、部分的にdynamic renderingにすることが可能なレンダリングモデルです。具体的には、画面をbuild時(もしくはrevalidate後)に静的生成しつつ、リクエスト毎

はじめに この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！ Cookieとは？ Cookieとは、一言で言うと、サーバーからブラウザに送信される小さな文字列データのことです。 HTTP Cookie (ウェブ Cookie、ブラウザー Cookie) は、サーバーがユーザーのウェブブラウザーに送信する小さなデータであり、ブラウザーに保存され、その後のリクエストと共に同じサーバーへ返送されます HTTP Cookie - MDN ...と言っても、これだと難しくてよく分からないですよね。そこで、今回の記事では「Cookieとは何なのか？」について、順を追って解説していきたいと思います。 HTTPはステートレス まず、覚えておかないといけないのは、HTTPがステートレスなプロトコ

昨今様々なヘッドレスUIライブラリ登場しています。ヘッドレスUIは特定のスタイルがなく、UIコンポーネントの基礎となるロジックと機能のみを提供することに焦点を当てたものです。 この記事ではRadixUIをはじめとするいくつかのヘッドレスUIライブラリを紹介していきます。 RadixUI ヘッドレスUIの代表格で、効率的な実装、容易なメンテナンス、アクセシビリティを優先しているUIライブラリです。開発者が完全にスタイルを制御できるプリミティブを提供し、複雑なアクセシビリティのロジックや状態管理を抽象化しています。32のコンポーネントが利用可能で、設定を排除することで開発を効率化しプロジェクトにコンポーネントを迅速に組み込めるようになっています。 GitHub stars: ~13.5k Npm weekly downloads: ~1,345,900 コンポーネント数: 32 Headles

本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs

Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて

Next.jsでSSRF（=Server Side Request Forgery）の脆弱性が発覚したことが社内で話題になったので、まとめておこうと思います。対象の脆弱性は以下です。 脆弱性の概要 SSRF脆弱性は本来到達できないサーバーに対して、公開されてるサーバーを経由してアクセスすることができてしまう脆弱性です。 今回のNext.jsの脆弱性はhttpヘッダーのHostを書き換えることで、self hostingなNext.jsサーバーから任意のhttpリクエストを送信できてしまうというものです。これは、外部には公開してない内部APIに対するリクエストも可能になるため、SSRF攻撃になりえます。 今回の脆弱性の対象は、以下の条件を満たしている必要があります。 Next.jsをself hostingで運用している Next.jsアプリケーションがServer Actionsを利用して

この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ

2024/05/06 Files の見出しを追加し、対象・除外ファイルの設定をもう少し詳しく説明 徐々に利用者が増えている Biome の自分向け技術メモの共有です。導入の仕方やよく触る設定周りなど、自身がよく見返したり他者に説明する部分を抽出してまとめてあります。 実際に自身が利用した感想は以下の通りです。 pros 速さはとにかく正義 必要十分な lint ルールはあると感じた 設定もわかりやすく職人になりにくい cons ライブラリが提供してくれるライブラリのベストプラクティスを反映した eslint plugin が利用できない eslint 及び eslint plugin と比較するとルールは少ないので得られる学びは少なくなる 特に速さに関しては eslint だとプロジェクト規模が大きくなったり追加したルールが増えてくると開発効率に影響あるレベルで時間がかかるようになったので

JavaScript/TypeScript で try/catch を使わないエラーハンドリングに利用できるライブラリとしてはそこそこ有名だと思う neverthrow ですがあまり解説された記事が少なく、関数型と手続き型の書き方をいい感じにミックスできるいいライブラリで情報の少なさから選択されないのも勿体なく感じました。ちょうど GitHub のドキュメントを読みながら意訳してまとめた手元の技術メモがありますのでその一助になればと公開します。 neverthrow とは supermacro/neverthrow: Type-Safe Errors for JS & TypeScript プログラムのエラーハンドリングを try - catch ではなく関数型プログラミング由来の Result 型や Either 型と呼ばれる方法で実現する機能を提供するライブラリです。具体的には Res

GitHub Copilot、みなさん使ってますか？すでに多くの方が利用しており、「ないと困る」という方から「提案の質に問題がある」「まだまだ使えない」という方まで、様々な意見を聞きます。 筆者はGitHub Copilotに対して非常にポイティブな立場です。GitHub Copilotは使い方次第で開発速度を格段に向上させることを身をもって体験しており、これからの時代においてはGitHub CopilotなどのAIツールを使いこなせるかどうかで、個人の開発速度に非常に大きな差が出ると考えています。 重要なのは使い方次第と言う点です。前述のように様々な感想が溢れているのはAIツールの習熟度が大きく影響しているようにも感じます。AIツールは静的解析同様、利用者側の手腕が大きく問われるツールであると筆者は感じています。コマンドプロンプトエンジニアリングという言葉もあるように、AIツールを使いこ

この記事は Agents for Amazon Bedrock をアプリケーションに組み込む際の全体像を掴んでもらうためのものです。詳細な構築手順などは別資料をあたってみてください。 はじめに いったい何をしようとしているのかというと、生成AIを使ってWebサイトにチャットボットを手軽に実現してみよう、という試みです。 今回は Agents for Amazon Bedrock というサービスを使ってみることにします。 何をしてくれるサービスなのかは「よくある質問」を引用して紹介します。 Amazon Bedrock のエージェントとは、生成 AI ベースのアプリケーションをデベロッパーが簡単に作成できるようにするフルマネージド型の機能です。これにより、さまざまなユースケースの複雑なタスクを実行したり、独自のナレッジソースに基づいて最新の回答を提供したりすることができます。 素晴らしいです

概要 Jotai, primitive and flexible state management for React Jotai は Recoil からインスピレーションを受けて開発されたグローバルステート管理ライブラリです。コア API が厳選されており良い意味で少なくて機能もシンプルなので Recoil を利用した事がある人であれば直ぐに理解できるでしょうし、そうでない人でも useState に近い使用感なので比較的直ぐに理解して使えるようになると思います。 他のグローバルステート管理ライブラリと共通する Context や useState だと起きやすい以下の問題を解決します。 props のバケツリレーによる依存関係や影響範囲の複雑化 多数の Provider を管理することによる複雑化 これらの影響による過剰なメモ化による再描画対策 Recoil と比較した特徴としては T

はじめに この記事の内容は、以下の動画でも解説しているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、良ければチャンネル登録よろしくお願いします！ Bunとは？ Bun とは、公式サイト によると、バンドル、テストランナー、Node.js 互換のパッケージマネージャーを備えた、スピードのために設計されたオールインワンの JavaScript ランタイム＆ツールキット のことです。 Bun is an all-in-one JavaScript runtime & toolkit designed for speed, complete with a bundler, test runner, and Node.js-compatible package manager. （日本語訳）Bunは、バンドル、テストランナー、Node.js互換のパッケージマネージャーを