ARTS チェックイン 10 日目 - React の asChild モード、LLM fine-tune フレームワーク、および聴くことに関する忍耐について

これらの日々は忙しくて、毎日のチェックインが遅れてしまいました。まだ追いついていないので、週末にまとめて補完します。

A：58. 最後の単語の長さ #

文字列 s が与えられます。s はいくつかの単語で構成されており、単語の前後にはいくつかの空白文字があります。文字列の中で最後の単語の長さを返します。
単語は、文字だけで構成され、空白文字を含まない最大の部分文字列です。
例 1：
入力：s = "Hello World"
出力：5
説明：最後の単語は "World" で、長さは 5 です。
例 2：
入力：s = "fly me to the moon"
出力：4
説明：最後の単語は "moon" で、長さは 4 です。

function lengthOfLastWord(s: string): number {
  const result = s.trim().split(/\s+/)
  return result[result.length - 1].length
}

提出結果：

58/58 のケースがパスしました（実行時間：68 ms）
ランタイムは、typescript の提出の中で 42.36 % のものよりも速いです
メモリ使用量は、typescript の提出の中で 93.1 % のものよりも少ないです（42.2 MB）

非常に簡単な問題が出題されました。正規表現はデフォルトで貪欲モードになっているため、split の際に最も多い空白文字で分割されるため、簡単に解決できます。

R：React での Radix の asChild パターンの実装 #

Q：asChild パターンとは何ですか？
UI ライブラリのコンポーネントは、オプションやコンポーネントのすべての要件を満たすのは難しいため、as パターンが開発されました。これは、デフォルトのコンポーネントを渡し、親コンポーネントで as コンポーネントのプロパティを渡すことができるようにするものです。

<Button as={Link} />

Radix UI はこのパターンを改良し、asChild プロパティとして実装しました。asChild が true の場合、子コンポーネントをレンダリングし、それ以外の場合はコンポーネントのデフォルトの形式をレンダリングします。

<Button asChild>
  <a href="https://www.jacobparis.com/" />
</Button>

1 つの子コンポーネントのみのレンダリングをサポートしており、実装は次のようになります：

function Button({ asChild, ...props }: any) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}
function Slot({
  children,
}: {
  children?: React.ReactNode
}) {
  if (React.Children.count(children) > 1) {
    throw new Error("Only one child allowed")
  }
  if (React.isValidElement(children)) {
    return React.cloneElement(children)
  }
  return null
}

Q：Slot コンポーネントは何に使用されますか？
Slot コンポーネントは渡された子コンポーネントをレンダリングするために使用されます。プロップスのマージ、className およびスタイルのディープマージ、および 1 つの子コンポーネントのみが渡されていることを確認するために使用されます。

Q：どのような実装の詳細がありますか？

タイプの処理：asChild が false の場合、コンポーネントのデフォルトのプロパティを受け入れる必要があります。asChild が true の場合、ユーザーは子コンポーネントにすべてのプロパティを渡すことが推奨されます。

type AsChildProps<DefaultElementProps> =
  | ({ asChild?: false } & DefaultElementProps)
  | { asChild: true; children: React.ReactNode }
type ButtonProps = AsChildProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>
>
function Button({ asChild, ...props }: ButtonProps) {
  const Comp = asChild ? Slot : "button"
  return <Comp {...props} />
}

スタイルのディープマージでは、子コンポーネントのスタイルが親コンポーネントのスタイルよりも優先されるため、後で展開する必要があります。
className のディープマージでは、tailwindcss を使用している場合は tailwind-merge ライブラリを使用してマージできます。それ以外の場合は、文字列の連結を行います。
React.Children.only(null) メソッドを使用して、1 つの子要素のみがサポートされていることをエラーとしてスローします。

このパターンは最初はクールに見えますが、何をしているのかよくわかりません。asChild パターンは、元々子要素を直接レンダリングできるようにする機能の一部を空の親要素に移動して渡すようにしたように見えます。また、子コンポーネントのプロップスの型定義もうまく書くことができません。一部のプロパティが必須であり、親コンポーネントから渡される場合、子コンポーネント関連のプロパティをオプションの型にする必要があります。理解できませんが、非常に感銘を受けました。全体的な印象は、renderProps の実践よりも劣るように思えます。

T：LLaMa-Efficient-Tuning - LLaMA-2 およびその他のモデルの Fine-Tune フレームワーク#

現在、自分のタスクを完了するために大規模言語モデルを使用しています。OpenAI や Anthropic の API サービスを使用する以外にも、LLaMA-2 などのオープンソースモデルを自分のタスクに適応させてデプロイすることもあります。このプロジェクトは、これらのモデルを簡単に fine-tune するためのフレームワークであり、LLaMA-2、BLOOM、Falcon、Baichuan、Qwen、ChatGLM2 などの主要なオープンソース LLM の fine-tune を実現できます。

S：耐心を持って聴くことについて#

最近、自分自身について反省しました。過去には、細心の注意を払って聴く耐心があまりなかったと感じています。自分が他の人の言いたいことを理解したと思ったら、もう聞きたくないと思ってしまい、自分の意見を表現したくてたまらなくなります。その結果、話すときに非常に速く話し、相手にとってもコミュニケーションの感じが良くないかもしれませんし、自分の思考も冷静ではありません。そこで、じっくり考えてみると、自分は得意なことにしか表現欲求がないように思えます。普段は閉じた人のように振る舞っているようですが、それは良くないことですので、もっと聴く耐心が必要です。以下は具体的な反省です：

普段は表現しないのは、多くの領域で表現能力がないためであり、表現能力のある領域に出くわすと、聴く耐心がなくなり、表現欲求が強くなります。これは良いことではありません。
評価を証明するために話すことから、価値を検証するために聴くことに移行する必要があります。
聴くことに長けることは、相手により良いコミュニケーション体験を提供するだけでなく、自分自身の「風格」を高め、より冷静で詳細な思考を促進することもできます。
Tinyfool 先生が共有していた、他の人と問題を議論する際には、最初の 30 分間は自分の意見を表明せず、相手の話をただ聞くだけで、相手が話し終わり、自分が理解した後に自分の意見を述べることです。反論するようなことはせず、自分が正しいと思うことを言うだけです。

参考文献：

ARTS 打卡活动