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）
ランタイムは、42.36％の typescript の提出を上回ります
メモリ使用量は、42.2 MB の typescript の提出を上回ります

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

R：Implement Radix's asChild pattern in React #

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 などのオープンソースモデルを自分のタスクに適応させてデプロイすることも主要な方法の 1 つです。このプロジェクトは、これらのモデルを簡単に Fine-Tune するためのエンジニアリングフレームワークであり、LLaMA-2、BLOOM、Falcon、Baichuan、Qwen、ChatGLM2 などの主要なオープンソース LLM の Fine-Tune を実現できます。

S：聴くことに対する忍耐について#

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

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

参考文献：

ARTS 打卡活动