大厂外包工#
外注の 1 週間。火曜日に危機的な状況で指名され、チームの AI コンテストのためにデモを作成する必要がありました。ゼロからバックエンドの情報管理システムのフレームワークを構築しました。火曜日の朝に開発内容を整理しました（8 つのページ）。デモ版の締め切りは木曜日でした（後に金曜日に変更されました）。
中後半の業務は、工場内の外注のみが行います（注：職種を差別するつもりはありません、🐶助けてください）。
アレクサンダー#
アレクサンダーの理由は、この期間に工場で行った仕事が非常に断片的であり、システム全体の能力向上にはあまり役立たなかったためです。また、中後半のプロジェクトに長い間触れていなかったため、非常に不慣れで、自分に 2〜3 日しか残されていないと、このタスクを完了できないと感じていました。
突破口#
プレッシャーに耐えて突破口を見つけ、私は火曜日にフレームワークを完成させることをチームに約束しました。これにより、水曜日にはみんなが各自の役割を果たし、順調に開発を始めることができました。それぞれが担当するページをしっかりと作り、水曜日と木曜日にデモ版の 80％を完成させました。木曜日 / 金曜日には、上司 / トップマネージャーからの承認を得て、私たちは非常に達成感を感じました。私自身も比較的満足しています。時には本当に追い詰められることがあります！
選択#
簡単なリストを作成してみましょう、恥ずかしくありません：
- ベースフレームワーク：
webpack5+React18+react-router-dom - コンポーネントシステム：
antd - 言語：
ts+sass - その他：
immer、schedule-x、dayjs
深く考えずに進めたことがわかります。思いついたものをインストールするだけで、すべては速さのためです。
唯一の収穫は、webpack-dev-server --host 0.0.0.0+devServer.host = 0.0.0.0の設定によって、プロジェクトを実行した後、IPv4/6 のプロジェクトの実行アドレスが同時に表示され、ローカルネットワーク内の他のマシンからアクセスできることを知ったことです。
摸鱼学习#
throttle vs debounce#
スロットルは、一定の時間内に 1 回の実行のみを許可し、複数回のトリガーは無効です。スクロール
デバウンスは、一定の時間後に実行され、複数回のトリガーは再計算されます。入力クエリのデバウンス
パッケージの検索方法#
実際には、npmでキーワードを検索して、必要なパッケージを見つけるのが最も速い方法です。以下のように検索します：
keywords:react schedule
一致する結果を見つけて、いくつかのスケジュールコンポーネントをお勧めします：
さらに Google 検索と組み合わせると、必要なパッケージを見つけることができるでしょう。
パフォーマンスの最適化#
ブラウザの互換性#
Google が提供するcore-web-vitalsパッケージ web-vitals API は、一部のブラウザでは正確な指標値を計算できない場合があります。これはブラウザの互換性の問題であり、疑問を抱くのは合理的です。
Next.js の学習#
Next.js 学習チュートリアルを参考に、パフォーマンスの最適化について学びました。
フォントの最適化#
next/font/google、next/font/localを提供し、フォントリソースを静的リソースに統合して読み込むことで CLS を最適化します。
画像の最適化#
Imageコンポーネントを提供します。
- 異なるデバイスやサイズに応じたレスポンシブ画像の表示
- 明確なサイズ指定による CLS の最適化
- レイジーローディング、ビューポート内の画像のみの読み込み（手動ではなく）
import Image from 'next/image';
export default function Page() {
return <Image
src={'/hero-desktop.png'}
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop version"
/>
}
リンクの最適化#
Linkコンポーネントを提供し、CSR ナビゲーションをサポートします。ページ全体のリフレッシュではなく、リンク先のみを更新します。
import Link from 'next/link';
export default function Page() {
return <Link
key={link.name}
href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
>{link.name}
</Link>
}
本番環境では、Link タグがビューポート内に表示されると、プリフェッチの最適化が行われ、ほぼ即座に開く体験が向上します。
ページ#
Next.js の特別なファイルpage.tsx - パスセグメント、ルーティングベースのコード分割サポート、異なるページ間で相互に独立して影響を与えません。
レイアウト#
Next.js の特別なファイルlayout.tsx - 共有 UI の部分的な再レンダリング
ローディング#
Next.js の特別なファイルloading.tsx - ルートレベルの非同期コンポーネントの Suspense フォールバック
エラー#
Next.js の特別なファイルerror.tsx - 予期しない例外をキャッチし、エラー UI の境界を定義します。
404NotFound#
Next.js の特別なファイルnot-found.tsx - リンク / リソースが見つからない場合、404 の UI 境界を定義します。error.tsxよりも優先され、定義されていない場合はerror.tsxが表示されます。
静的レンダリング vs 動的レンダリング#
静的レンダリング：
- より高速なユーザーエクスペリエンス
- 静的コンテンツのキャッシュによるサーバーの負荷軽減
- SEO の向上
動的レンダリング：
- 頻繁に変化するデータ
- 個別のデータ、個別の表示
- リアルタイム情報
ストリーミングレンダリング#
ページ内の異なるチャンクを並行して読み込み、解析、レンダリングし、遅いリクエストがページ全体の読み込みに影響を与えるのを防ぎます。Next.js では、ストリーミングレンダリングを実現するための 2 つの方法があります：
loading.tsxは、Next.js の特別なファイルであり、React Suspense コンポーネントのフォールバック UI として機能し、ページ全体をストリーム化します。- React Suspense は、コンポーネント / コンポーネントグループの遅延レンダリングを実現するためのもので、条件に基づいて動的にコンポーネントをレンダリングします。
いつ考慮すべきか？
- ユーザーエクスペリエンス、優先的なインタラクション
- モジュールの表示優先度
- データの取得
ベストプラクティス：
- ページ全体：
loading.tsxはページレベルのローディングトランジションを実現できますが、個々のコンポーネントが遅いためにユーザーが長時間待たされる可能性があり、コンテンツのレンダリング速度が遅くなる可能性があります。 - 各コンポーネント：コンポーネントが次々と表示されるため、あまり意味がありません。
- ページセクション：複数のコンポーネントをラップするラッパーコンポーネントを作成する必要があります。
PPR - 実験段階の読み込みモデル#
Pre Partial Render、一部のプリレンダリング、フォールバック部分を静的コンテンツとして HTML に埋め込み、ダイナミックコンテンツはユーザーが対応するルートにアクセスする際に動的に遅延ロードされます。
URL の検索パラメータ#
利点：
- リンクをブックマークしたり共有したりできる
- SSR に適しており、サーバー側でもパラメータを取得してデータを取得し、レンダリングできる
- ユーザーのクエリパラメータを持ち運び、ユーザーの行動分析に役立つ
- URL クエリで値を渡すだけで、コンポーネントの状態を個別に管理する必要がない
フック：
- useSearchParams
- usePathname
- useRouter：プログラムによるナビゲーション
CSC vs SSC#
クライアントサイドレンダリングでは使用できず、サーバーサイドレンダリングでは使用できるもの：
- イベントリスナー
- フック
- document、window などの API
SEO#
TDK、Open Graph Metadata