AIで知識ゼロからアプリ開発1000時間 #3

3：Reactの壁と日付の罠

Reactで「日付」と「使い始めて何日目か」を表示させだくて四苦八苦した話だばって、書ぎ方ひとつ間違えるだけで全部表示されねぐなるのさ。returnの中の構造、Hooks（useStateとかuseEffect）のお作法、HTMLのカタチ――最初は全部「なんでダメなんず？」って感じだったばって、少しずつ意味が見えてきて、最後はちゃんと表示されで感動したんず。やっぱし、ひとつひとつ乗り越えでいげば、アプリ開発もなんとかなるもんだなって思った日だったじゃ。

「なして表示されねんず？」
朝から晩までそうブツブツ言ってたこの日、やっとReactの“文法の罠”に気づいた。やりたかったのは単純なこと。「今日の日付」と「アプリを使い始めてからの経過日数」を表示するだけ。…だったはずなのに。

最初は useState と useEffect っちゅうの使えば表示できるってAIが教えてくれた。書いでみだ。

jsコピーする編集するconst [currentDate, setCurrentDate] = useState(new Date());
const [daysSinceStart, setDaysSinceStart] = useState(0);

useEffect で日数計算して setDaysSinceStart に入れる――まではよかった。

でも表示するために return の中に <p>{daysSinceStart}</p> って書いたら、画面が真っ白に。
「なんでじゃーーー！」

何回ビルドしなおしても、エラーは出てねえのに、なーんも表示されね。ここから地獄の「divタグとの戦い」が始まった。

---

JSXはやさしくない

Reactでは return の中に「複数の要素」は並べられねえらしい。普通に <div> ふたつ並べると、

Adjacent JSX elements must be wrapped in an enclosing tag.

って怒られるんず。要するに「全部ひとまとめにしろ」って話だった。それで <></> ってやつでくるんだら、ようやく表示された。

---

CSSが効がねくなった理由

さらにもうひとつ問題が。今度はCSSが効がね。透明背景や文字の位置が全部無視される。なんでだ？と思ったら、div の閉じ忘れ。HTML構造を壊したまんまで return しようとしたせいだった。まさが、1行の書き忘れでデザイン全滅するとは…。

---

日付のフォーマットも一工夫

currentDate.toLocaleDateString() だと「2024/5/6」みたいに表示される。でも「2024/05/06」ってちゃんと2桁にしたくて、format関数を導入。

jsコピーする編集するconst formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}/${month}/${day}`;
};

こうしてやっと表示された、2024/11/17　＋　〇 days の文字。
「おぉぉぉ……表示されたぁぁぁぁ！！」

---

地味だけど大きな一歩

日付表示なんて、普通の人から見れば超どうでもいい部分かもしれね。でも、アプリ作ってる側にとっては「毎日続けてる」ってのを見せる重要な演出なんず。
この1行の積み重ねが、自分の成長の証でもある。

---

まとめ

• Reactのreturnには「構造ルール」がある
• useStateとuseEffectはReactの心臓みたいなもん
• CSSが効かない時は、HTML壊れてないか確認
• AIに頼っても、結局は自分で何度も確かめるしかねぇ

まだまだ先は長いばって、今日も一歩前進したんず。アプリ開発って、こういう積み重ねなんだべな。