久々の更新。 最近、Next.js × TypeScript × Supabaseで勤怠管理アプリを作成しています。 その中で、すでに登録されている出勤時間を一度出力し、出力した内容をrefで値を取得、さらにほかの箇所に受け渡す仕組みを作ったさいにrefの型定義で躓いたので、備忘録として書き残しておきます。<pre><code class="language-javascript">～省略～
export default function Schedule() {

～省略～
   const [activeTime, setActiveTime] = useState&lt;string&gt;(&apos;&apos;);
   const [newTime, setNewTime] = useState&lt;string&gt;(&apos;&apos;);
   const [activeId, setActiveId] = useState&lt;string&gt;(&apos;&apos;);
   const [activeType, setActiveType] = useState&lt;string&gt;(&apos;&apos;);
   const [activeName, setActiveName] = useState&lt;string&gt;(&apos;&apos;);
   const timeRef = useRef&lt;(HTMLInputElement | null)[]&gt;([]);
   const idRef = useRef&lt;(HTMLInputElement | null)[]&gt;([]);
   const typeRef = useRef&lt;(HTMLInputElement | null)[]&gt;([]);
   const nameRef = useRef&lt;(HTMLInputElement | null)[]&gt;([]);
   const changeTimeHandler = (index: number) =&gt; {
     const timeElem = timeRef.current;
     timeElem &amp;&amp; timeElem[index] ? setActiveTime(timeElem[index]?.value) : false;
     const idElem = idRef.current;
     idElem &amp;&amp; idElem[index] ? setActiveId(idElem[index]?.value) : false;
     const typeElem = typeRef.current;
     typeElem &amp;&amp; typeElem[index] ? setActiveType(typeElem[index]?.value) : false;
     const nameElem = nameRef.current;
     nameElem &amp;&amp; nameElem[index] ? setActiveName(nameElem[index]?.value) : false;
   }
   const changeTimeUpdate = async () =&gt; {
     const user = await getCurrentUser();
     if (user) {
       const { error: statusError } = await supabase
         .from(&apos;works&apos;)
         .update({ [activeType]: newTime })
         .match({ id: activeId, user_id: user.id, work_date: selectedDate });
       if (statusError) {         alert(`${activeName}を更新できませんでした。`);
       }
     }
   }
   return (
     ～省略～
               &lt;div className=&quot;flex flex-wrap gap-2&quot;&gt;
                 &lt;dl className=&apos;flex flex-wrap gap-y-2 gap-x-1 w-full&apos;&gt;
                   {eventsOnSelectedDate.length ?
                     eventsOnSelectedDate.map((event, index) =&gt; {
                       // イベントタイプに基づいて表示を動的に変更
                       return (
                         &lt;React.Fragment key={index}&gt;
                           &lt;dt className={`w-1/4 grid place-content-center rounded-md text-white bg-[${event.color}]`}&gt;
                             {event.name}
                           &lt;/dt&gt;
                           &lt;dd className=&apos;w-[calc(50%-8px)]&apos;&gt;
                             &lt;p className=&apos;border border-[#cdd0d4] px-3 flex items-center text-lg w-full h-full rounded-md pointer-events-none&apos;&gt;{event.title}&lt;/p&gt;
                           &lt;/dd&gt;
                           &lt;dd className=&apos;w-1/4&apos;&gt;
                             &lt;button className=&apos;btn btn-neutral w-full&apos; onClick={() =&gt; { changeTimeHandler(index) }}&gt;変更&lt;/button&gt;
                             &lt;input ref={(el) =&gt; timeRef.current[index] = el} type=&apos;hidden&apos; defaultValue={event.title} /&gt;
                             &lt;input ref={(el) =&gt; idRef.current[index] = el} type=&apos;hidden&apos; defaultValue={event.id} /&gt;
                             &lt;input ref={(el) =&gt; typeRef.current[index] = el} type=&apos;hidden&apos; defaultValue={event.type} /&gt;
                             &lt;input ref={(el) =&gt; nameRef.current[index] = el} type=&apos;hidden&apos; defaultValue={event.name} /&gt;
                           &lt;/dd&gt;
                         &lt;/React.Fragment&gt;
                       );
                     })
                     :
                     &lt;div className=&apos;text-center w-full&apos;&gt;出勤の登録がありません&lt;/div&gt;
                   }
                 &lt;/dl&gt;

 ～省略～
   )
 }
</code></pre>実際のコードはこんな感じでした。 この書き方だと、ずっとinputのref={～}の部分で型エラーが出ていて、型定義してる部分もちゃんと推論出来るように書いているはずなんですが・・・。 初期化時に明示的に型を指定したりしても直らず・・・。 まあ、テスト環境だとエラー出てても動作問題ないし、一旦そのままでいいやと思ってvercelにデプロイしたら 見事にデプロイエラー出た／(^o^)＼ なのでいろいろ調べて調べて調べて・・・ どうやら、ref属性に関数を渡す場合、(el: HTMLInputElement | null) =&gt; voldという型にする必要があるそうで。 refの初期化の型だけではなく、elementの属性側にも型指定をしないといけなかったようです。<pre><code class="language-javascript">// 変更前: 
&lt;input ref={(el) =&gt; timeRef.current[index] = el} type=&apos;hidden&apos; defaultValue={event.title} /&gt; 
// 変更後: 
&lt;input ref={(el: HTMLInputElement | null) =&gt; { timeRef.current[index] = el }} type=&apos;hidden&apos; defaultValue={event.title} /&gt;</code></pre>という風な形で記述を変更したら直りました！ 相変わらず型定義奥が深いというか、React特有のお作法というか、まだまだ分からんことだらけだ・・・。

Next.js useRefの型定義について

表題の通りです。 1年以上暖め続けた自分用のサイトがようやくひと段落しました。 まだ修正箇所はいくつかあるけれど、一旦人様に見せられるぐらいには仕上がったかなと。 コードはGitHubに上げてます。 見たい方は下記からどうぞ。 <a href="https://github.com/Juki0204/portfolio">https://github.com/Juki0204/portfolio</a>詳細はまた後日まとめる予定です。<h2 style="text-align: start" id="hcd546f27db">現時点での修正・追記予定</h2>・ブログのrss-parserのfetchが上手く機能していない不具合 これはvercelのwebhookでブログ更新時にリビルドするようにしとかないといけないから設定だけで済みそう ・お問い合わせフォームに確認画面の追加 これはページ遷移せずモーダルか何かで出すのがスマートかなあ →一旦モーダルで実装してみた。 ・お問い合わせフォームに不備があっても送信ボタンを押すと送信完了画面に遷移してしまう不具合 これはページ遷移のクリックイベントに正誤判定が無いせいでどっちでも飛んでしまうのが原因 確認画面を挟んで確認画面から送信、もしくは送信ボタンに正誤判定を設けるのどちらか →確認画面から送信する仕様に変更 ・お問い合わせフォームのバリデーション 未入力、不正なメールアドレスはエラーメッセージ出力 3項目全部入力したら確認ボタンがアクティブに変わる 隅々まで確認作業した訳ではないのでまだ出てくるかも。

カテゴリー別記事一覧：プログラミング

Next.js useRefの型定義について

ポートフォリオサイト完成しました。

Profile

なおまる

Category

Tags