明日は中間発表会です！内容を箇条書きにしてみました。

1. 教材

スネークゲームを作って学ぶ React Hooks API での状態管理

2. 進捗

• 1/3:1回目が完成
  • https://s-yoshiii.github.io/hooks-snake-game/
• 2回目もほぼ完成し、現在は最終の調整をしているところです。

1回目

CSSをsassに変更したこと以外は、教材通りに作成。

2回目

TypescriptとCSSinJSを使用して作成。
CSSinJSはEmotionというライブラリを選びました。CSSやSassと書き方が似ており、普段書き慣れているものの方がCSSinJS初心者としては扱いやすいかと思ったことが理由です。

3. 気づき・つまづいた点等

1回目

普段reactを業務で使用しておらず、教材についていくことが精一杯でした。
マス目を二次元配列と考えて、その中にスネークや餌をポジショニングするという考え方や、キーダウンイベントなど、このようなやり方ができるんだと経験できたことが、収穫となりました。

2回目

typescriptのエラーや書き方に慣れておらず、苦労しました。
typescriptに少し慣れ始めると、関数や変数がどの型を返すのか意識するようになりました。
課題で使われていた処理が普段のコーディングにも役立っています。
▼処理の対象外とする条件を、関数やループの先頭に書いて、returnを返す

if (!newDirection) {
    return;
}

4. 今後のスケジュール

まだ自主制作ができるほど、経験があるわけではないので、あと2～3課題ほど、作ってみたいです。
すでに課題は選定しており、序章だけ進めています。
ある程度、reactでの制作に慣れてきたら、自主制作ができればいいなと考えています。