本周の掲示板 #1

身为技術者、特に大齢のプログラマーは、現在の悪い社会環境の中で生き残るために、不安を抱えています。このような不安は、不安定さ、達成感の欠如、同僚のプレッシャーから生まれます。

読書の感想#

最近、「人生効率マニュアル」という本を読んでいます。私はおすすめしませんが、個人的な意見や冗長な内容、自慢話、表面的な内容が混ざっているものの、一部の考え方は認められるものです。実力を磨く
確かに、自分自身に投資し、人生の目標を設定し、目標を具体的なステップに分割し、実現に取り組むことで、自己成長を促し、周囲の優れた人々の優れた品質を身につけ、彼らを超えることで、上記の不安を緩和することができます。

仕事#

Bilibili を辞めてから、大手企業に来てもう 4 ヶ月になりますが、試用期間の成長は最も速いものです。高い OKR に立ち向かい、環境に慣れ、新しい同僚と関わる、その難しい時間を乗り越えました。正式な社員になった後、すべてのプレッシャーが消え、学ぶべき新しい技術もなく、取り組むべき複雑なプロジェクトもありません。成長は仕事だけに頼ることはできません！
会社のコードリポジトリには学ぶ価値があるものがたくさんあります。実際にプロダクション環境に適用され、大量の UV/PV があります。さて、これで方向性が定まりました。興味のあるリポジトリをクローンして自主的に学ぶことができます。ただし、無料で学ぶだけでなく、技術も身につけることができます！😏

仕事中のふざける#

Tailwind#

会社のプロジェクトでTailwindを使用しています。以前はこのツールについて知っていましたが、多くのクラス名を覚える必要があり、要素に長い文字列を書くのは面倒だと思っていたので、詳しくは調べませんでした。しかし、会社に入ってから気づいたのですが、会社では常にパフォーマンスの最適化を行っており（これについては後で詳しく説明します）、ビジネスの開発とメンテナンスにも使用されています。そのため、一日中公式のドキュメントを読んで、理解が深まりました。

利点#

私にとって、Tailwind の明確な利点は次のとおりです：

CSS が最適化されており、ほとんどのプロジェクトでは生成される CSS のサイズが 10KB を超えないと言われています。手動で書く場合、重複したコードが非常に多くなる可能性があり、パフォーマンスが向上します。
セマンティックからアトミックへの変換であり、一連のデザイン規則に従っており、細かい粒度でカスタマイズできます。styleタグ内のマジックナンバーやクラス名の個人差による問題がなくなります。
CSS ファイルを個別に管理する必要がなく、要素を削除する際に関連するクラス名を心配する必要がなく、スタイルの競合問題が発生しません。
開発体験が向上し、CSS と HTML / コンポーネントの間を行き来する必要がなくなり、要素にクラス名を追加するだけでスタイルを適用できます。

デメリットと比較して、私は完全に受け入れることができます。したがって、次の新しいプロジェクトや既存のプロジェクトのパフォーマンス最適化の際には、Tailwind のアトミックスタイルを導入する手段として検討してみるかもしれません。

関連ライブラリ#

tailwind-merge
クラス名のスタイルをマージするためのライブラリです。スタイルを正しく上書きします。

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

class-variance-authority
コンポーネントの各プロパティに基づいて、異なるクラス名の組み合わせを生成するライブラリです。Tailwind と組み合わせて独自のコンポーネントを作成できます。

// components/button.ts
import { cva } from "class-variance-authority";
 
const button = cva(["font-semibold", "border", "rounded"], {
  variants: {
    intent: {
      primary: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600",
      ],
      // **or**
      // primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
      secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100",
      ],
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"],
    },
  },
  compoundVariants: [
    {
      intent: "primary",
      size: "medium",
      class: "uppercase",
      // **or** if you're a React.js user, `className` may feel more consistent:
      // className: "uppercase"
    },
  ],
  defaultVariants: {
    intent: "primary",
    size: "medium",
  },
});
 
button();
// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"
 
button({ intent: "secondary", size: "small" });
// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"

clsx
条件に応じて className 文字列を動的に構築するための CSS-IN-JS ライブラリです。例：

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'

tailwindcss-animate、tailwindcss-animated
Tailwind のアニメーションプラグイン

Preact#

会社のアプリケーションを最適化する際に、INP の報告値のトップ 10 を見つけました。そのうち 200 を超えるケースの多くでは、INP 要素はhtmlまたはhtml>bodyであり、INP のインタラクションイベントはpointerdown/upまたはkeydown/upです。

このような状況は、ローカルのブラウザでCPU x4 slowdownをシミュレートすると必ず発生し、ネットワークの速度には関係ありません。
私の推測では、これはアプリケーションがサーバーサイドレンダリング + ストリーミングレンダリングのアプローチを採用しているためであり、ストリーミングの最初のセグメントによってユーザーに一部のページコンテンツが表示され、この時点でユーザーはページとのインタラクションを持つ可能性があります。クライアント側のインタラクションは、エントリポイントの JavaScript ファイルの実行に依存し、hydration が注入された後に反応します。空白をクリックすると、INP がカウントされます：

任意のキーを押すと、INP がカウントされます：

パフォーマンスを確認しました：

特にデバイスのパフォーマンスが低い場合、JavaScript のダウンロードは影響を受けませんが、解析や実行には影響を与える可能性があり、高いInput delayの確率が高くなります。
会社のアプリケーションの INP の問題を調査する際に、導入されたreact.production.min.jsとreact-dom.production.min.jsが初期ロード時にユーザーのインタラクションをブロックしていることがわかりました。したがって、フレームワークの選択段階でこれよりも優れたものがあるかどうかを考える必要があります。
これは偶然ですが、preactは、reactの代替として使用できると言われており、本番ビルドのサイズはわずか 3.5KB です。素晴らしいですね。

これはパフォーマンスの向上をもたらす可能性があります。INP を最適化することができるでしょうか？機会があれば試してみたいと思います。

面白いこと#

パッケージのサイズやダウンロード時間を確認するためのオンラインツール bundlephobia
興味深いイラストの本「生活モンタージュ」。日常生活の小さな出来事、癒し、共感。今この瞬間、私が考えていることは、世界のどこかで同じように考えているはずです。
ブログのカバー画像は 500px から取得しました。