<h2 style="text-align: start" id="hce781b0ccc">WEB業界に入る前からの夢だったゲーム制作</h2>久々の更新の内容は新しい制作物報告です。 Phaser3.jsというゲーム制作に特化したJavaScriptのフレームワークです。 僕がWEB制作をそもそも始めたのは、ゲーム業界に入る技術がなくて、それでも何か近いことがやりたくて色々調べていたら 「WEB制作に使われるJavaScriptというプログラムでゲームも作れる」 という情報を知って、 「じゃあWEB制作しながらJavaScript勉強してゲーム作ればいいんじゃね？」と思ったのが始まりですからね。 ある意味悲願ですよ。 実は中学生の頃からの夢だったんですよ、ゲーム開発。 それでも技術的な不安と、モチベーションやら仕事の忙しさやらで今までなかなか作にまで至らなかったですが 公開していませんがNext.jsで勤怠管理アプリも開発していましたが、そっちがひと段落して、ようやく重い腰を上げたというか 「よし、やるか！」となったので、色々調べて着手し始めました。 元々、「javascriptでもゲーム制作が出来る」という希望を持ち続けてweb制作を続けていたので、技術選定はJavaScript / TypeScript一択でした。 その昔、数年前に「phina.js」というこれまたJavaScriptのゲーム開発用フレームワークをすこーしだけ触ったことがあったんですが、当時はJavaScriptがまだまだひよっこ（今もですが）だったので、とても作りきれる気がしなかったので、一度挫折しています。 あとはAI先生のサポートが手厚いのも開発のしやすさの１つでした。 正直、Phaser3に関しても参考資料や参考ゲームは殆ど海外のもので、それでも先述のphina.jsよりは比べ物にならないぐらい多いんですが、なかなか調べものをするにも難しかったので 日本語で気軽にヒントを得られるAIは非常に有用でした。 バイヴコーディングではなく、ヒントだけ聞いて自分で書いていたので、効率はあまりよくないと思いますが。 そもそも学習欲の方が上なので特に苦ではなかったですし、むしろ1つ1つ出来上がっていく楽しさはやはり何事にも代えられないものがありますね。<h2 style="text-align: start" id="h5a2854e92d">つたないながらも作り上げた処女作</h2>そんなこんなでチュートリアルを経てから約2週間で完成しました！ いくつか考えたうちの1つですが、そんな凝った内容でもなく、比較的シンプルにわかりやすいゲームになっているかと思います。 「ハードルを上げすぎて途中で挫折する事」が回避すべき最重要事項だったので、比較的簡単なゲーム性且つ基本的なPhaser3のメソッドやロジックが学べるようなところを目指しました。<figure><img src="https://images.microcms-assets.io/assets/20aae90937104e9496c43227a9a7a183/e908053b164d4c30b98989c70a264d9a/og_image.jpg" alt="" width="1200" height="630"></figure>↑※画像のリンクからゲームがプレイできます。タイトルはそれっぽいのを付けただけですが 「制限時間内にハンバーガーを1つでも多く売り上げる」ゲームです。 制限時間は30秒、ハンバーガーの出来栄えがPerfectだとタイムボーナスが少しもらえたり 逆にBadだとペナルティでタイムが-1秒されるので、間違えずに素早く作らないといけません。 操作は操作パネルのボタンをタップするだけの単純なものなので、どなたでもサクッと遊べると思います。 反面、内容はそんなにないのでボリュームは物足りないと思いますが処女作なので大目に見てください。 基本的にはハイスコア目指してひたすらスコアアタックするだけのゲームです。<h2 style="text-align: start" id="h7dabb5418b">今後の展望</h2>ひとまず自分の技術力でオリジナルでゲームを作れることが分かったので 今後もいくつか<s>クソゲーを</s>量産して、Phaserに慣れたらもうちょっとボリュームのある中規模程度のゲームを数か月単位で開発しようかなと思っています。 ブラウザで昔やってた古のFFエンドレスバトルとかめちゃくちゃ好きだったので、テキストベースのローグライク形式のゲームとかも作ってみたさがあります。 アクションゲームなんかはハードルが一気に上がると思うので、作る時は集大成かなと思います。 ARC SYSTEM WORKSさんのブレイブルーの2Dのアクションゲーム（エントロピーエフェクトだったかな）ぐらいのが2Dゲーム最高峰クラスだと思うので さすがに個人で目指すのは無謀だと思いますが、憧れを持つ分にはいいのかなと。 Holo Indieなんかでも2Dのインディーズゲームが短期スパンで出ているので、結構感化されてというか、モチベーションに繋がっている部分もあるので 色々見てプレイしてアイデア吸収して、もっと高クオリティのゲームが開発できるよう精進していきたいですね。

ゲーム公開しました！

久々の更新。 最近、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項目全部入力したら確認ボタンがアクティブに変わる 隅々まで確認作業した訳ではないのでまだ出てくるかも。

タグ別記事一覧：Typescript

ゲーム公開しました！

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

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

Profile

なおまる

Category

Tags