Everything you care about in one place
Follow feeds: blogs, news, RSS and more. An effortless way to read and digest content of your choice.
Get Feederpostd.cc
POSTD
Get the latest updates from POSTD directly as they happen.
Follow now 44 followers
Latest posts
Last updated 11 days ago
ポストデベロッパー時代
12 days ago
今から2年前の2023年3月に“The End of Front-End Development”（フロントエンド開発の終焉）という記事を投稿しました。ちょうどOpenAIがGPT-4を発表した後で、多くの人が近い将来、ソフトウェアはすべて機械が作るようになり、人間のソフトウェア開発者は不要になるだろうという考えに傾いていました。 筆者はこうした論調には懐疑的で、当面の間、ソフトウェア開発は依然として人間の助けを必要とするだろうと前述の記事の中で主張し、その理由を論じました。筆者が立てた仮説は、大規模言語モデル（LLM）は人間の開発者を置き換えるのではなく、補強するというものです。 当時、Twitter上ではAIの登場により数カ月、長くても1、2年で人間のフロントエンド開発者の需要は無くなるとの意見が大勢を占めていました。あれから2年以上が経ちますが、現実はどうでしょうか。当時言われていたような「ポストデベロッパー」時代は到来しているでしょうか。 この記事では、現在の状況を新たな視点から捉え直し、何がどう変わったのか、今後どのような進化の過程を辿るのかを検討してみたいと思います。この記事が、開発者を志しながらも今後のキャリアに不安を覚えている読者の参考になれば幸いです。❤️ 企業によるAIの利用状況 ここ数年、AIツールを導入する企業がますます増えています。最近、フォーブス誌に“AI Writes Over...
React Server Componentsを理解する
about 2 months ago
React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダリングしつつ、抽象化によりクライアントとサーバーの隔たりを感じさせないユーザビリティを実現することができます。Client ComponentsとServer Componentsをコード内に混在させることで、すべてのコードが1カ所で実行されているように見せることができます。 しかし、抽象化には常にコストが伴います。そのコストとはどのようなものでしょうか。RSCはいつ「使える」のでしょうか。バンドルサイズが小さくなると、帯域幅も狭まるのでしょうか。RSCを「使うべき」ときはいつでしょうか。RSCを適切に使う上でデベロッパーが従うべきルールは何でしょうか。そのルールが存在する理由は何でしょうか。 これらの問いに答えるため、RSCの仕組みを詳しく見ていきましょう。React本体と、ReactのメタフレームワークというRSCの2つの側面について考察します。特に、RSCに関する正確なメンタルモデルを構築できるよう、ReactとNext.jsの内部構造について説明します。 noneこの記事は、Reactを使い慣れたデベロッパーを対象としています。読者には、コンポーネントやフックに関する予備知識が前提条件として求められます。また、JavaScriptのPromise、async、awaitについても熟知していることを想定しています。これらに関する知識がない方は、Promise、async、awaitの仕組みに関する筆者のYouTube動画をご覧ください。Reactのあらゆる側面についてゼロから詳しく知りたい方は、筆者の「Understanding React（Reactを理解する）」コースをぜひチェックしてみてください。このコースでは、Reactのソースコードを掘り下げることで、JSX、Fiber、コンポーネント、フック、フォームなどの仕組みを理解していただくことができます。...
Next.jsのPages RouterからApp Routerに移行する
3 months ago
Next.jsプロジェクトをアップグレードする Next.jsの従来のPages Routerから新しいApp Routerに移行しましょう。ここの移行により、アプリケーションのルーティング効率と柔軟性が向上します。App Routerは、ファイルシステムベースのルーティング機能が改善されたほか、React Server Componentsが導入されたことなどにより、開発体験を向上させます。 依存関係をチェックする package.jsonファイルのバージョンが最新であることが重要です。依存関係をすべてチェックし、新しいApp Routerと互換性があることを確認しましょう。必要であればアップグレードしてください。この準備を行うことで、移行時に互換性の問題が発生するのを避けることができます。 依存関係はnpmを使用することで簡単にチェックできます。以下のコマンドを実行してください。 $...
NextJSのoutput: exportによるi18n
4 months ago
この記事では、Next.jsのプロジェクトにおける国際化対応（i18n）の設定方法について説明します。Next.jsが直接サポートしていない部分の課題を克服しながら、Pages Routerを使用してi18nを実装する方法と、output: exportを使用する方法について検討したいと思います。 none国際化ルーティングは、Next.jsのルーティングレイヤーを使用しないためoutput: 'export'では実装できません。output: 'export'を使用しないHybrid Next.jsのアプリケーションは完全にサポートされています。 まず初めに、TypeScriptを使用してNext.js v14のプロジェクトを初期化しましょう。TypeScriptの代わりにJavaScriptを使用することもできます。どちらも問題なく使用できます。 NextJSプロジェクトの初期化 次のコマンドを実行してプロジェクトをセットアップしてください。。 `npx...
Interopと難解な問題
5 months ago
Webプラットフォームにおける優先事項、技術的負債、難解な問題について話しましょう ブラウザエンジンプロジェクトは、他のほとんどのソフトウェアプロジェクトと多くの点で似ています。「管理者」は今も、休職中のメンバーなどを考慮に入れながら、マネージャーが統括する専門チームを編成し、予算を割り当てます。優先事項を決め、綿密な計画を立てる必要があります。そして筆者がこれまで見てきたどのプロジェクトとも共通する点として、同じようなプレッシャーや問題に直面します。全ての作業に十分なリソースが確保できることはなく、常に何かしら新たな要求が追加され、技術的負債が積み上がり、時折本当に難解な問題が発生します。 ブラウザエンジンプロジェクトに特殊な点があるとすれば、独立したプログラム以上のものになろうとしていることでしょう。相互運用可能な標準プラットフォームに貢献しようとしているのです。私たちにとって問???なのは、チーム独自の優先事項を「全て」クリアし、一般向けにリリースされるなどして、初めてその恩恵が得られるということです。 これは実際に経験するとつらいものです。 <details>要素を例に見てみましょう。これは文字通り最も単純なインタラクティブ要素です。これまでの経緯を以下に整理します。 2011年6月にChromeが<details>を導入 1年後の2012年7月にSafariが導入 その1年後の2013年7月にOperaが導入 その3年後の2016年9月にFirefoxが導入 Microsoftは導入せず、2020年にEdgeがChromium版に移行してようやく導入 リリースから全てのブラウザに導入されるまで9年もかかりました。新たに定義された、ブラウザ普及率が100%に限りなく近い状態になったことを示す「Baseline: Widely...
CORSガイドの決定版
6 months ago
無垢な仔猫の写真を集めたウェブサイトを訪問したと想像してみてください。かわいい仔猫達の写真の背後には、このウェブサイトの強大な力が隠れています。誰かがウェブサイトにアクセスすると、サイトのオーナーはその訪問者のネット上の行動に関するあらゆる情報を入手できます。その中には、銀行取引情報、SNS上の投稿やメッセージ、メール、オンラインの購買データなどが含まれます。あなたが受ける信用面や金銭面の損害はどれほどのものになるでしょうか。あなたのメッセージが流出し、銀行口座のお金が使い込まれるかもしれません。しかし幸いなことに、実際にはそのような状況は起こりません。それは、SOPとCORSのお陰なのです。 目次 Ajax（Asynchronous JavaScript And XML） インターネットがジャングルではない理由 認証情報を「含める」vs「含めない」 CORSルールの定義 クロスオリジンリクエストの処理 リクエストするか否か アクセスを許可するか拒否するか...
進化した正規表現：JavaScriptの正規表現の歴史と未来
7 months ago
クイックサマリー：以前は、JavaScriptの正規表現は他の言語の正規表現に比べてパフォーマンスが劣っていたものの、近年改良が重ねられ、他の言語に見劣りしなくなっています。この記事では、Steven Levithan氏がJavaScriptの正規表現の歴史と現状を評価し、より読みやすく、保守性とレジリエンスに優れた正規表現の書き方をアドバイスします。 モダンJavaScriptの正規表現は、皆さんがよく知っている従来の正規表現と比べると随分進化しました。正規表現はテキストを検索して置き換えるツールとして非常に優れている一方で、書くのも理解するのも難しいという根強い評判があります（しかし今から説明するように、この認識は時代遅れかもしれません）。 正規表現に関するこの認識は、JavaScriptに特に当てはまります。PCREやPerl、.NET、Java、Ruby、C++、Pythonといったよりモダンな言語の正規表現に比べてパフォーマンスが劣るJavaScriptの正規表現は、長年人気が低迷していました。しかしそれはもはや過去の話です。 この記事では、JavaScriptの正規表現が経てきた改良の歴史を説明し（ネタバレ：ES2018とES2024が大きな転機となりました）、モダンな正規表現の機能を実例とともに紹介します。さらに、JavaScriptの正規表現を他のモダンな言語の正規表現に匹敵する、あるいは勝るものにした軽量なJavaScriptライブラリについて紹介し、最後にJavaScriptの今後のバージョンで正規表現を改良し続けるために現在検討されている提案をいくつかお見せします（中には現在お使いのブラウザにすでに実装されているものもあります）。 JavaScriptにおける正規表現の歴史 # 1999年に標準化されたECMAScript 3は、Perl由来の正規表現をJavaScriptに導入しました。大幅な改良が加わり、正規表現はかなり便利になりましたが（他のほとんどのPerl由来の正規表現とも互換???を得ました）、それでもいくつか大きな漏れがありました。JavaScriptの次に標準化されたバージョンであるES5が登場するまで10年かかりましたが、その間に他のプログラミング言語と正規表現の実装にいくつか便利な機能が新たに追加され、それらの正規表現はより強力で読みやすくなりました。 しかしそれは当時の話です。 noneJavaScriptの新しいバージョンが出ると、ほぼ毎回正規表現に何らかの改良が行われていたことをご存知でしたか？ では実際に見てみましょう。...
アルゴリズムのパフォーマンスを段階的に改善する
7 months ago
最近、筆者はRaBitQという新しい近似最近傍探索アルゴリズムを使ったさまざまな試みを行っています。このアルゴリズムを提案した論文の著者はすでにC++実装を提供しており、実行速度はかなり速いです。筆者はこれをRustに書き換えようとしました（いわゆるRiiR（Rewrite it in Rust）です）が、実装結果は元のアルゴリズムよりも大幅に遅いことが判明しました。この記事では、アルゴリズムのパフォーマンスを段階的に改善する方法をご紹介します。 環境の準備 データセット 最も重要なのは、適当なデータセットをいくつか用意することです。前述の論文では、sift_dim128_1m_l2とgist_dim960_1m_l2という2つのデータセットについての結果が示されています。このデータセットでは、128項目と960項目というのがよく使われるサイズであり、1,000,000個のデータポイント（ベクトル）があれば性能を測るのに十分だということです。つまり、これらのデータセットを使うことで、アルゴリズムの性能をしっかりと評価できるということです。データセットはこちらからダウンロードできます。（こちらのサイトはTLSに対応しておらず、FTPダウンロードしか提供していません。） これらのデータセットは、一般的なベクトル形式であるfvecs/ivecsを使用しています。 | dim (4 bytes)...
ReactコードをCSSの:hasセレクタで置き換える
9 months ago
CSSの新しい:hasセレクタと、これを使用したReactコードの改善方法について説明します。実用的で美しい例とともに。 大昔、とは言ってもCSSが出てきた当初の話ですが、CSSはカスケードする仕組みになっていると教えられていました。それは、Cascading Style Sheetsという名前からも分かります。CSSでは、入れ子のように要素の中の要素を指定し、さらにその中に含まれる要素を指定していくことができます。しかし、その逆はできません。したがって、子要素が親要素にスタイルを適用するには、JavaScriptを使うしかありませんでした。 今までは。 すべての主要ブラウザがCSSの:hasセレクタに対応したことで、親要素を指定できるようになりました。それだけではありません。これは世界が一変したと言えるほどの出来事です。筆者のように、要素の角を丸くするために透過GIFを使用していた時代からウェブ開発を行っている読者の方は、これによって広がる可能性に圧倒されるでしょう。 これを使ってぜひ色々と遊んでみていただきたいと思いますが、Reactの世界では実際にどのような実用的用途があるのでしょうか。ここでは特に注目すべき用途を3つ紹介したいと思います。 :hasセレクタとは？ 従来のCSSでは、以下のようなことができます。 .content .card {...
React Compilerについて理解する
9 months ago
Reactのコアアーキテクチャは、与えられた関数（すなわちコンポーネント）を繰り返し呼び出します。この仕組みはReactのメンタルモデルを単純化し、その人気に一役を買いましたが、同時にパフォーマンスの問題が生じる原因にもなりました。関数のパフォーマンスコストが高いと、アプリの動作は総じて遅く???ります。 開発者はReactにどの関数をいつ再実行するか手動で指示しなくてはならなかったため、パフォーマンスチューニングが悩みの種になっていました。Reactチームが最近リリースしたReact Compilerというツールは、コードを書き直すことにより、開発者が手動で行っていたパフォーマンスチューニングの作業を自動化します。 React Compilerはコードに何をするのでしょうか？裏ではどのような処理が行われるのでしょうか？使った方がいいのでしょうか？こうした疑問について詳しく見ていきたいと思います。 noneReactの内部実装について詳しく学び、完全で正確なメンタルモデルを得たい方は、Understanding Reactという筆者の新しいコースでReactのソースコードを掘り下げて説明していますので、ぜひチェックしてみてください。Reactの使用経験が豊富な開発者でも、内部実装の理解を深めることは大いに役立ちます。 コンパイラ、トランスパイラ、オプティマイザ モダンJavaScriptのエコシステムでは、コンパイラ、トランスパイラ、オプティマイザという用語がよく聞かれます。これらは何でしょうか？ トランスパイル トランスパイラとは、コードを解析し、同等の機能を持つコードを別のプログラミング言語で出力するか、調整を加えたコードを同じプログラミング言語で出力するプログラムです。 React開発者は何年も前からトランスパイラを使用し、JSXをJavaScriptエンジンが実際に実行するコードに変換してきました。JSXは、基本的にはネストされた関数のツリー（これらはネストされたオブジェクトツリーを構築）を作成するための省略記法です。...
まだまだある実例に沿った:has()の使い方
10 months ago
:has()疑似クラスは筆者が断トツで一番気に入っているCSSの新機能です。筆者と同じ意見の読者も多いでしょう。少なくとも、State of CSSのアンケートに回答した方の中には多くいるはずです。セレクタを逆向きに指定できることで、これまでできると思いもしなかったようなすごいことがもっと可能になります。 「もっと」と言うのは、すでに多くの人が極めてスマートなアイデアを色々と発表しているからです。以下に一部紹介します。 Using :has() as a CSS Parent Selector and...
useDeferredValueを使用してUIを素早く最適化する
12 months ago
登場以来、Reactはアプリケーションのパフォーマンスを最適化するためのツールを多数供してきました。中には極めて有益でありながら、あまり知られていないものもあります。useDeferredValueはその一つです。このツールは、特定の状況においてユーザーエクスペリエンスを大きく左右することができます。⚡ 筆者は最近このフックを使用し、このブログの厄介なパフォーマンス問題を解決したのですが、そのあまりの効果に衝撃を受けました。低性能デバイスでは反則級の改善が見られ、まるで黒魔術のようでした。 useDeferredValueには若干気後れさせるような評判があり、実際かなり洗練されたツールではあるのですが、正しいメンタルモデルで向き合えば恐るるに足りません。このチュートリアルでは、その仕組みと、アプリケーションのパフォーマンスを劇的に改善させる使い方を詳しく説明します。 問題 数年前、筆者は本物のような影を生成するShadow Palette Generatorというツールをリリースしました。 スライダーなどのUIコントロールを動かしてみることで、自分だけの影をデザインすることができます。CSSコードを自分のアプリケーションにコピペすることも可能です。 問題は次の点です。このUI上のコントロールは、「即座に」結果が反映されるよう設計されています。例えば、ユーザーが「Oomph」スライダーを動かすと、その効果がすぐに見られます。つまり、スライダーを動かす間、UIが「1秒間に数十回再レンダリングされる」ということです。 Reactは高速ですし、このUIの大部分は容易にアップデート可能です。問題は、シンタックスハイライトされた下部のコードスニペットです。 シンタックスハイライトの処理は驚くほど複雑です。まず、rawコードを「トークン化」する必要があります。この工程では、コードをいくつかに分けてラベルを付けます。各トークンには異なる色を付けられるため、それぞれ<span>タグでラップする必要があります。 このスニペットの中の1行に対して必要なマークアップの量は以下の通りです。...