前半にやったこと

① React公式チュートリアル
② Techpit React中級 「スネークゲーム 🐍 を作って学ぶ React Hooks API での状態管理」
③ 上記②のスネークゲームをVueでも作る
④ 自主企画：時間計測＆ポモドーロアプリ（途中）

それぞれを振り返る

② React中級 スネークゲーム

https://github.com/Fielsyuka/hooks-snake-game
https://fielsyuka.github.io/hooks-snake-game/

• 理解が足りない部分は公式ドキュメントや参考書を読みながら進めました。
• ほぼ教材どおりのブランチと、自分で書き換えてみるブランチに分けて色々試してみました。
  Stateをまとめてみたり、useReducerを使ってみたり・・・
  結果的には、試してみることで勉強にはなりましたが必要を感じた時に導入するのが一番だと思いました。
  今作っているアプリの方がreducerの必要性を感じるので、いずれ書き換えていきたいと思います。
• フックやレンダリングについて大雑把には理解したものの、React内部で何が起きているのか理解できてないので、他にもアプリを作ったり検証しながら理解を深めていきたいです。

③ Vue版スネークゲーム

https://github.com/Fielsyuka/vue-snake-game
https://fielsyuka.github.io/vue-snake-game/

• 環境構築は @vue/cli を使って、*.vueファイル（SFC構文）で構築しました。
  インストール参考：https://cli.vuejs.org/guide/installation.html
• Javascriptの記述自体はほぼ②と同じですが、templateの箇所（ReactでいうJSXの部分）がHTMLの延長のような感覚で書けたり、styled-componentを使わなくてもCSSをコンポーネント内で書けたり、vueで用意されてる機能を使って、あまり詰まることなくReactよりも感覚的に書ける気がしました。

④ 自主企画：時間計測＆ポモドーロ

https://github.com/Fielsyuka/enjin-exercise
https://fielsyuka.github.io/enjin-exercise/
②と③で比べてみて、Reactをもっと知りたいと思い自主企画はReactを選びました。
時間がないのでバックエンドはやりません。
が、データベースと繋げる想定で作っていきたいと思います。

実装したい機能

ポモドーロ

• YoutubeのURLで好きなBGMを再生できる。
• 休憩時間になったらBGMと時間計測をストップ、休憩用の音楽を流す。
• オン・オフや設定時間を変更できる。

時間計測

• タスク単位でカードを追加・時間計測ができる。
• 任意の名前と色でタグを関連づけられる。
• タグや日付ごとに絞り込みや集計ができる。

大体の目標UI（XD）

※デザイン技術ないので、ほぼNotionや他アプリのパクリですごめんなさい・・・

現時点で出来ているもの

• カードごとに時間を計測
• カードの追加（タイトルとタグ）
• タグリスト、タグの追加
• YouTubeの読み込み

まだ出来ていないもの

• タグの色選択や編集機能
• カードに日付を紐付ける
• カードのデータ置き場を変える
• ローカルストレージなどに保存
• 絞り込みやソート
• 見た目的な所
• ポモドーロの設定画面を考える

今後のスケジュール

３月までに終わらせることを第一目標に・・・
① カードのデータ置き場を変える、カードに日付を紐付ける
② ポモドーロをデフォルト設定で簡単に作っていく
③ タグの編集機能
④ 絞り込みの実装
⑤ 見た目を整える
⑥ ローカルストレージなどに保存
これ以降はできるところまで頑張ります！
２週３週してリファクタリングして行けたらいいなと思います。