この週報は各地の内容をまとめたものです
技術#
AI と React を組み合わせてスマートなフロントエンドを実現#
フロントエンド開発には、早期に人工知能技術を取り入れる必要があります。開発者は React と AI 技術を使用して、チャットボットやパーソナライズされた推奨機能などのスマートアプリケーションを構築できます。Next.js、OpenAI の Chat GPT、MongoDB などの技術スタックを活用することで、開発者はインテリジェントな React アプリケーションを実現できます。ベクトル化とセマンティック検索を通じて、アプリケーションはユーザーのクエリに関連する情報を提供できます。さらに、RAG フレームワークを使用することで、リアルタイムデータと言語モデルを組み合わせ、よりインテリジェントでコンテキストを理解したアプリケーションを提供できます。人工知能技術の応用は、ユーザー体験を向上させるだけでなく、ビジネス意思決定に対してより正確でタイムリーなデータを提供します。
- フロントエンド開発は、アプリケーションにスマート機能を構築し、データから豊富な洞察を得るために、早急に人工知能を取り入れる必要があります。
- 開発者は埋め込みモデルを使用して埋め込みベクトルを生成し、それをベクトルデータベースに保存して、自然言語クエリを通じてカスタムデータから関連情報を見つけることができます。
- Next.js、OpenAI の Chat GPT、LangChain、MongoDB などの技術スタックを活用することで、よりインテリジェントで強力な React アプリケーションを構築できます。
ウェブコンポーネントの試みられた分類#
この記事では、著者がウェブコンポーネントを構築する際の経験と見解について議論しています。著者はウェブコンポーネントを HTML ウェブコンポーネントと JavaScript ウェブコンポーネントの 2 種類に分類し、さまざまなコンポーネントの例を紹介しています。記事では、JavaScript を使用して CSS を注入することや、Shadow DOM の使用に関するいくつかの詳細と注意点も言及されています。また、いくつかのコンポーネントがウェブコンポーネントになれない制限についても指摘し、読者にウェブコンポーネントを使用して移植性と持続性のあるコードを作成することを奨励しています。
- HTML ウェブコンポーネントは、ゼロ依存で上流ライブラリを使用せずに、行動とインタラクティブ性を追加することでウェブページの機能を強化できるコンポーネントです。
- JavaScript ウェブコンポーネントは、既存のコンテンツと組み合わせるシナリオに適したオプションの低優先度コンポーネントですが、パフォーマンスと耐久性にいくつかの問題があります。
- HTML ウェブコンポーネントを作成する際は、JavaScript による CSS の注入に過度に依存しないように注意し、ウェブページのパフォーマンスと持続可能性を考慮する必要があります。
CSS コンテナクエリの始め方#
この記事では、コンテナクエリの概念と使用法について紹介しています。コンテナクエリは、要素のサイズをクエリする方法であり、コンテナのサイズに基づいてその子要素のスタイルを設定できます。従来のメディアクエリと比較して、コンテナクエリはより柔軟で、コードを簡素化できます。記事では、ニュースリストレイアウトの例を挙げて、コンテナクエリを使用してレスポンシブな記事コンポーネントレイアウトを作成する方法を示しています。また、コンテナクエリの新しい構文とネストされたコンテナの使用についても説明しています。
- コンテナクエリは、要素のサイズに基づいてスタイルを適用する新しいウェブレイアウト技術です。
- コンテナクエリはメディアクエリの代わりになり、レイアウトをより柔軟にし、コードを簡潔にします。
- コンテナクエリはレスポンシブデザインに使用でき、異なる画面サイズに応じてウェブページが自動的にレイアウトを適応させることができます。
あなたのウェブサイトの URL は美しくあるべき#
この記事では、URL を美しくすることの重要性とテクニックについて議論しています。美しい URL は、より読みやすく、ユーザーフレンドリーなウェブサイト体験を提供し、SEO にも役立ちます。記事では、URL の段落をできるだけ少なくすること、URL のスラッグがタイトルと完全に一致する必要はないこと、時には無意味なストップワードを削除できることなどのいくつかのテクニックを提供しています。これらのテクニックを通じて、簡潔で明確かつ美しい URL を作成できます。
- URL の美しさは、有用な人間可読のコンテキストを提供することで、ユーザーがリンクをクリックする前にその内容を理解できるようにすることにあります。
- 良い URL は、簡潔でありながら明確で、十分な情報を提供しつつ、長すぎたり煩雑になったりしないようにする必要があります。
- 美しい URL を作成するためには、URL の段落をできるだけ少なくし、URL の構造と内容の整理に注意し、過剰な階層や冗長な情報を避けるべきです。
ツール#
pushdeer#
オープンソースのアプリなしプッシュサービス、iOS14 + で QR コードをスキャンするだけで使用可能。快適なアプリ /iOS と Mac クライアント、Android クライアント、自作デバイスもサポート。
code-block-writer#
コードの執筆を模擬するツール。
h3#
⚡️ 極めてシンプルで高性能かつ移植性のある H (TTP) フレームワーク。
linkinator#
🐿 あなたのウェブサイト上で迅速に移動し、すべての壊れたリンクを見つけます。
inpaint-web#
WebGPU とブラウザ上の WASM を駆動する無料のオープンソース修復ツール。
target="_blank" 属性のセキュリティ脆弱性#
このテキストは、HTML におけるハイパーリンクタグとターゲット属性の使用について説明しています。その後、target="_blank" 属性を使用する際のセキュリティ脆弱性について言及しています。新しいページが親ページの window オブジェクトにアクセスでき、悪意のあるリダイレクトを行う可能性があります。この問題を解決する方法は、ハイパーリンクタグに rel="noopener noreferrer" 属性を追加し、新しいページが独立したプロセスで実行されるようにし、window.opener が設定されるのを防ぐことです。また、rel="noreferrer" 属性は、リファラーリクエストヘッダー情報を送信しないようにします。最後に、rel="noopener" または rel="noreferrer" 属性を追加することで、ウェブサイトのセキュリティとパフォーマンスを向上させることができると強調しています。
- HTML ハイパーリンクタグは、別の文書や部分を参照するためのクリック可能な要素を作成することを許可します。
- ターゲット属性は、リンクの開き方を指定するために使用され、現在のウィンドウまたは新しいウィンドウでリンクを開くことができます。
- target="_blank" を使用する際は、悪意のある操作を防ぐために rel="noopener noreferrer" 属性を追加する必要があります。
更新#
Remix が v2.3.0 をリリース#
Remix は v2.3.0 をリリースしました。このバージョンにはいくつかの重要な変更と新機能が含まれています。主な変更点は、useBlocker フックの安定化、DOM の同期更新のための unstable_flushSync API の追加、いくつかの小さな改善と修正です。また、いくつかの依存ライブラリも更新され、詳細な変更リストが提供されています。さらに、以前のバージョン v2.2.0 の重要な変更点についても紹介されています。
Remix は 2.3.0 をリリースし、安定した useBlocker 機能と unstable_flushSync API を追加し、依存関係を更新しました。
Remix は 2.2.0 をリリースし、Vite のサポートを導入し、いくつかの API とテンプレートを追加し、fetcher と永続化機能を改善しました。
Remix は 2.1.0 をリリースし、ビュー変換機能と安定した createRemixStub を導入し、いくつかのマイナーな変更と依存関係の更新を行いました。
waku 0.17.0#
全量の SSR をサポート。
TypeScript 5.3 の発表#
TypeScript 5.3 がリリースされ、新しい機能と最適化が追加されました。これには、インポートプロパティ、インポートタイプ内の resolution-mode の安定したサポート、switch (true) のスコープの縮小、Symbol.hasInstance を通じた instanceof のスコープの縮小、インスタンスフィールド上の super プロパティアクセスのチェックなどが含まれます。これらの機能と最適化により、TypeScript はさらに強力で使いやすくなります。
- TypeScript 5.3 は、JavaScript に型構文を追加する言語であり、型チェックとエディタツールの強化に使用されます。
- 新しいバージョンでは、インポートプロパティ、分岐条件の細分化、ブール値比較の細分化などの新機能が導入されています。
- インポートタイプ内の resolution-mode プロパティのサポートや、インスタンスフィールド内の super キーワードのアクセスチェックも行われています。
Redux Toolkit 2.0#
このリリース候補版では、createSlice 内で非同期 thunk を定義する方法が変更され、セレクタの使用と実装が改善されました。また、今後リリース予定の Redux Toolkit 2.0、Redux core 5.0、React-Redux 9.0 のバージョンについても紹介されています。このバージョンには、他の改善や変更も含まれています。
- Redux Toolkit 2.0 では、buildCreateSlice を使用して非同期 thunk 機能を持つカスタマイズされた createSlice メソッドを作成できるようになりました。
- createSlice は、すべての slice オブジェクトに selectSlice フィールドを追加し、簡単な状態検索を可能にします。
- entityAdapter.getSelectors () は、カスタムセレクタ作成関数やカスタマイズされたメモリオプションを受け入れることができるようになりました。
AI#
GPT クローラーの紹介 - URL だけで任意のサイトをカスタム GPT に変える#
この記事では、GPT Crawler というオープンソースプロジェクトを紹介しています。これにより、カスタム GPT アシスタントを迅速に作成できます。ウェブサイトの URL を提供することで、そのサイトの内容を GPT の知識ベースとしてクロールできます。この方法は、最新の情報を持つカスタマイズされたボットを作成するために使用できます。記事では、GPT Crawler の使用方法、クローラーの設定、知識ファイルを ChatGPT または OpenAI API にアップロードしてカスタム GPT アシスタントを作成する方法についても説明しています。
- GPT Crawler は、新しいオープンソースプロジェクトで、提供されたウェブサイトの URL に基づいてカスタム GPT アシスタントを作成できます。
- GPT Crawler を使用すると、ウェブサイトから最新の情報を取得し、特定の質問に答えるカスタマイズされたチャットボットを作成できます。
- GPT Crawler を使用するには、プロジェクトをクローンし、依存関係をインストールし、クローラーを設定し、知識ファイルを ChatGPT または OpenAI API にアップロードしてカスタム GPT アシスタントを作成する必要があります。
make-real-starter#
tldraw 公式のスケッチを UI コードに変換するためのツール。
build-it-figma-ai#
Figma で UI コードを生成するプラグイン。
autodraw#
あなたが描いた図に基づいて、あなたが描きたいものを推測します。
その他#
遥か遠くの物事は、常に私に永遠の魅力を持っています。（I am tormented with an everlasting itch for things remote.）
-- 《白鯨》，アメリカの古典小説