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 15 days ago
Next.jsのPages RouterからApp Routerに移行する
15 days ago
Next.jsプロジェクトをアップグレードする Next.jsの従来のPages Routerから新しいApp Routerに移行しましょう。ここの移行により、アプリケーションのルーティング効率と柔軟性が向上します。App Routerは、ファイルシステムベースのルーティング機能が改善されたほか、React Server Componentsが導入されたことなどにより、開発体験を向上させます。 依存関係をチェックする package.jsonファイルのバージョンが最新であることが重要です。依存関係をすべてチェックし、新しいApp Routerと互換性があることを確認しましょう。必要であればアップグレードしてください。この準備を行うことで、移行時に互換性の問題が発生するのを避けることができます。 依存関係はnpmを使用することで簡単にチェックできます。以下のコマンドを実行してください。 $...
NextJSのoutput: exportによるi18n
about 2 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と難解な問題
3 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ガイドの決定版
4 months ago
無垢な仔猫の写真を集めたウェブサイトを訪問したと想像してみてください。かわいい仔猫達の写真の背後には、このウェブサイトの強大な力が隠れています。誰かがウェブサイトにアクセスすると、サイトのオーナーはその訪問者のネット上の行動に関するあらゆる情報を入手できます。その中には、銀行取引情報、SNS上の投稿やメッセージ、メール、オンラインの購買データなどが含まれます。あなたが受ける信用面や金銭面の損害はどれほどのものになるでしょうか。あなたのメッセージが流出し、銀行口座のお金が使い込まれるかもしれません。しかし幸いなことに、実際にはそのような状況は起こりません。それは、SOPとCORSのお陰なのです。 目次 Ajax（Asynchronous JavaScript And XML） インターネットがジャングルではない理由 認証情報を「含める」vs「含めない」 CORSルールの定義 クロスオリジンリクエストの処理 リクエストするか否か アクセスを許可するか拒否するか...
進化した正規表現：JavaScriptの正規表現の歴史と未来
5 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の新しいバージョンが出ると、ほぼ毎回正規表現に何らかの改良が行われていたことをご存知でしたか？ では実際に見てみましょう。...
アルゴリズムのパフォーマンスを段階的に改善する
5 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セレクタで置き換える
7 months ago
CSSの新しい:hasセレクタと、これを使用したReactコードの改善方法について説明します。実用的で美しい例とともに。 大昔、とは言ってもCSSが出てきた当初の話ですが、CSSはカスケードする仕組みになっていると教えられていました。それは、Cascading Style Sheetsという名前からも分かります。CSSでは、入れ子のように要素の中の要素を指定し、さらにその中に含まれる要素を指定していくことができます。しかし、その逆はできません。したがって、子要素が親要素にスタイルを適用するには、JavaScriptを使うしかありませんでした。 今までは。 すべての主要ブラウザがCSSの:hasセレクタに対応したことで、親要素を指定できるようになりました。それだけではありません。これは世界が一変したと言えるほどの出来事です。筆者のように、要素の角を丸くするために透過GIFを使用していた時代からウェブ開発を行っている読者の方は、これによって広がる可能性に圧倒されるでしょう。 これを使ってぜひ色々と遊んでみていただきたいと思いますが、Reactの世界では実際にどのような実用的用途があるのでしょうか。ここでは特に注目すべき用途を3つ紹介したいと思います。 :hasセレクタとは？ 従来のCSSでは、以下のようなことができます。 .content .card {...
React Compilerについて理解する
7 months ago
Reactのコアアーキテクチャは、与えられた関数（すなわちコンポーネント）を繰り返し呼び出します。この仕組みはReactのメンタルモデルを単純化し、その人気に一役を買いましたが、同時にパフォーマンスの問題が生じる原因にもなりました。関数のパフォーマンスコストが高いと、アプリの動作は総じて遅く???ります。 開発者はReactにどの関数をいつ再実行するか手動で指示しなくてはならなかったため、パフォーマンスチューニングが悩みの種になっていました。Reactチームが最近リリースしたReact Compilerというツールは、コードを書き直すことにより、開発者が手動で行っていたパフォーマンスチューニングの作業を自動化します。 React Compilerはコードに何をするのでしょうか？裏ではどのような処理が行われるのでしょうか？使った方がいいのでしょうか？こうした疑問について詳しく見ていきたいと思います。 noneReactの内部実装について詳しく学び、完全で正確なメンタルモデルを得たい方は、Understanding Reactという筆者の新しいコースでReactのソースコードを掘り下げて説明していますので、ぜひチェックしてみてください。Reactの使用経験が豊富な開発者でも、内部実装の理解を深めることは大いに役立ちます。 コンパイラ、トランスパイラ、オプティマイザ モダンJavaScriptのエコシステムでは、コンパイラ、トランスパイラ、オプティマイザという用語がよく聞かれます。これらは何でしょうか？ トランスパイル トランスパイラとは、コードを解析し、同等の機能を持つコードを別のプログラミング言語で出力するか、調整を加えたコードを同じプログラミング言語で出力するプログラムです。 React開発者は何年も前からトランスパイラを使用し、JSXをJavaScriptエンジンが実際に実行するコードに変換してきました。JSXは、基本的にはネストされた関数のツリー（これらはネストされたオブジェクトツリーを構築）を作成するための省略記法です。...
まだまだある実例に沿った:has()の使い方
8 months ago
:has()疑似クラスは筆者が断トツで一番気に入っているCSSの新機能です。筆者と同じ意見の読者も多いでしょう。少なくとも、State of CSSのアンケートに回答した方の中には多くいるはずです。セレクタを逆向きに指定できることで、これまでできると思いもしなかったようなすごいことがもっと可能になります。 「もっと」と言うのは、すでに多くの人が極めてスマートなアイデアを色々と発表しているからです。以下に一部紹介します。 Using :has() as a CSS Parent Selector and...
useDeferredValueを使用してUIを素早く最適化する
10 months ago
登場以来、Reactはアプリケーションのパフォーマンスを最適化するためのツールを多数供してきました。中には極めて有益でありながら、あまり知られていないものもあります。useDeferredValueはその一つです。このツールは、特定の状況においてユーザーエクスペリエンスを大きく左右することができます。⚡ 筆者は最近このフックを使用し、このブログの厄介なパフォーマンス問題を解決したのですが、そのあまりの効果に衝撃を受けました。低性能デバイスでは反則級の改善が見られ、まるで黒魔術のようでした。 useDeferredValueには若干気後れさせるような評判があり、実際かなり洗練されたツールではあるのですが、正しいメンタルモデルで向き合えば恐るるに足りません。このチュートリアルでは、その仕組みと、アプリケーションのパフォーマンスを劇的に改善させる使い方を詳しく説明します。 問題 数年前、筆者は本物のような影を生成するShadow Palette Generatorというツールをリリースしました。 スライダーなどのUIコントロールを動かしてみることで、自分だけの影をデザインすることができます。CSSコードを自分のアプリケーションにコピペすることも可能です。 問題は次の点です。このUI上のコントロールは、「即座に」結果が反映されるよう設計されています。例えば、ユーザーが「Oomph」スライダーを動かすと、その効果がすぐに見られます。つまり、スライダーを動かす間、UIが「1秒間に数十回再レンダリングされる」ということです。 Reactは高速ですし、このUIの大部分は容易にアップデート可能です。問題は、シンタックスハイライトされた下部のコードスニペットです。 シンタックスハイライトの処理は驚くほど複雑です。まず、rawコードを「トークン化」する必要があります。この工程では、コードをいくつかに分けてラベルを付けます。各トークンには異なる色を付けられるため、それぞれ<span>タグでラップする必要があります。 このスニペットの中の1行に対して必要なマークアップの量は以下の通りです。...
言葉で説明できないとき：対話型インターフェースを超えるAIのためのデザイン
11 months ago
クイックサマリー：人工知能がコンピューティングパラダイムの進化をもたらしており、それに伴いデザイナーはより直感的なユーザーインターフェースを開発するチャンスに恵まれています。新しい機能のほとんどは、テキストベースの大規模言語モデルによって実現されているため、グラフィカルインターフェースからチャットボットのような対話型インターフェースへの移行が必要との声が多く聞かれるようになっています。しかし、多くのインタラクションパターンにおいて、対話は優れたインターフェースではないことをかなりの証拠が示しています。最新のAI機能によって、対話だけにとどまらずヒューマンコンピューターインタラクションの未来がどう変わりうるのか、マクシミリアン・ピラスが考察します。 人間とコンピューターのインタラクションのあり方を根本から変えうるような技術革新はそうそうありません。幸運なことに、次のパラダイムシフトは今まさに私たちの目の前で展開されているようです。 こうした変化は、新たな抽象化レイヤーを解放し、サブシステムの詳細な仕組みを覆い隠す傾向にあります。詳細を一般化することで、複雑なシステムをより単純で直感的なものとして見せることができます。それにより、コンピュータープログラムのコーディングや、コンピューターを操作するためのインターフェースの設計が合理化されます。 例えば、コマンドラインインターフェースは抽象化レイヤーを作り出し、格納されたプログラムによるインタラクションを可能にしました。その結果、スイッチを用いて1と0を入力することでしかプログラミングできなかった以前のコンピューターではあらわになっていたサブシステムの詳細が見えなくなりました。 グラフィカルユーザーインターフェース（GUI） は、視覚的メタファーを用いてコンピューターを操作できるようにすることで、この概念をさらに抽象化しました。これらの抽象概念により、コンピューターは大勢の一般ユーザーにも使えるものになりました。 こうした進歩を遂げてきたものの、まだ完璧に直感的なインターフェースは見つかっていません。インターネット上に公開されている大量の関連論文からもそれは明らかです。しかし、近年見られるAIの進歩を受け、多くの技術者はコンピューティングの次なる進化のサイクルが始まっていると確信しています。 インターフェースの抽象化レイヤー（下から上）：コマンドラインインターフェース、グラフィカルユーザーインターフェース、AI搭載の対話型インターフェース。（出典：マクシミリアン・ピラス）（拡大プレビュー） 次のインターフェース抽象化レイヤー # 近年のイノベーションの大半は、機械学習の一種である生成AIによって推進されています。データセット内のパターンを認識し、確率分布を推定することで、テキストやメディア、コードの斬新な構成を可能にします。コンピューターの制御がさらに簡単になることから、「グラフィカルユーザーインターフェース以来最も重要なテクノロジーの進化」であるとビル・ゲイツ氏は語っています。自然言語のような非構造化データを解釈する能力を新たに手に入れたことで、これまでにない形の入出力が可能になり、今までにない 斬新な...
グラフィックデザインにおけるAIジレンマ：卓越したタイポグラフィとその先へ
11 months ago
クイックサマリー：AIはタイポグラフィに大変革をもたらしつつあります。それは、デザイナーにとってチャンスをもたらすと同時に、課題も突きつけています。品質に影響はあるのでしょうか。また、デザインの役割や活字の使用は今後どう変わっていくのでしょうか。この未知の領域を進みながら、私たちはグーテンベルクによる印刷機の発明以来の重要な岐路に立っていることに気づかされます。近い将来、テキストとの関わり方やビジュアルコミュニケーションは大きく変わるでしょう。 時は2028年、あなたは今よりもはるかにグレードアップしたワークステーションの前に座り、壁に映し出された画面を見つめています。「ねえ、AI」とあなたは語りかけます。「このページの見出しなんだけど、いくつか字体の選択肢を…」あなたが話し終わる前に、「タイプマスター3000」の愛称で呼ばれるAIアシスタントが熱心に口を挟みます。「大胆かつ奇抜なデザインがいいですか？それとも、洗練された雰囲気の中に遊び心も感じさせるセリフにしますか？」 あなたはあきれた顔でこう言います。「選択肢を10個出してちょうだい。今回は遊びの要素は抜きで。」 AIが見栄えのいいフォントや統一感のある質の高いデザインを生み出せなかった時代は終わりました。ライセンスの問題も過去の話です。2028年のAIは、独創的なフォントファミリーを複数の言語で提示できるようになっています。グリフ（訳注：一般的には「字体」などの意）も一つひとつ完璧な仕上がりです。しかし、完璧とは言え、癖がないわけではありません。 拡大プレビュー タイプマスター3000が瞬時に生成したフォントのサンプルを見てみると、「Sandy Serif」や「Desert Island Display」といった具合に、どのデザインにもどこか海辺のバカンスを思わせるような雰囲気があります。 あなたはため息をつきます。「ビーチ感は抑えて、もっとビジネスライクにしてくれる？」 「了解です」とタイプマスター3000は言います。「ビジネスモードに戻ります！」 気に入ったフォントが見つかったのでタップすると、あなたが作成したデザインに即座に反映されます。バランスや位置関係も調整されて、まるで初めからそこにあるべきであったかのような自然な仕上がりです。...