未経験からReact/Next.jsに初めて触れてみた話

おはようございます。YASUです。

昨夜、生まれて初めてReactとNext.jsに触れました。結論から言うと、説明を聞いても半分くらい「?」のままでしたが、気づいたら自分の手でToDoリストアプリが1本完成していました。今日はその一部始終を記録しておきます。

結論

意味がわからないまま進めても、動くものは完成する。ただし「動くものが作れる」と「実務で通用する」の間には、まだそれなりの距離があることも同時に実感した夜でした。

まず設定を3つ選ぶだけで始まった

Next.jsのプロジェクトを作る際、いくつか質問されました。

「TypeScriptとJavaScript、どちらにしますか」「スタイリングはどうしますか」「データの保存方法は」。それぞれに「推奨」の選択肢が用意されていたので、素直に全部推奨のまま進めました。TypeScript、Tailwind CSS、まずはブラウザ内保存のみ、という構成です。

正直、この時点でもう1つも意味がわかっていません。それでもEnterキーを押し続けていたら、プロジェクトができあがりました。

いきなり出てきたカタカナの洪水

プロジェクトのトップページを見ながら「これがコンポーネントです」「これがJSXです」と説明が始まりました。コンポーネント、JSX、className、Tailwind。正直、一つ一つの単語は聞いたことがあっても、繋げて理解するには全く追いつきませんでした。

ただ、ここで良かったのは「今は理解できなくて当たり前」と言われたことです。無理に飲み込もうとせず、そのまま次に進みました。

ToDoリストが動いた瞬間

useStateという仕組みを使って、入力・追加・完了チェック・削除ができるToDoリストのコードが一気に書き上がりました。ブラウザで開いてみると、ちゃんと動きます。文字を入れて追加ボタンを押すとリストに増え、チェックを入れると取り消し線がつき、削除ボタンで消える。中身は正直まだよくわかっていませんが、「動いた」という事実だけは強烈に残りました。

地味だけど一番「へえ」だった話

次に、リロードしてもデータが消えないようにする機能(localStorageというブラウザの中に保存する仕組み)を追加してもらいました。ここで、ちょっとしたバグの落とし穴の話を教わりました。

普通に実装すると、ページを開いた瞬間の「まだ何も読み込んでいない空っぽの状態」が、うっかり保存処理によってそのまま上書き保存されてしまい、結果的に前回保存していたデータが消えてしまう、という現象が起きるそうです。それを防ぐために「読み込みが完了したかどうか」を示す旗のような仕組み(フラグ)を1つ用意して、読み込みが終わるまでは保存処理をさせない、という工夫がされていました。

これは「動けばいい」で終わらせず、裏側の順番までちゃんと考えないといけない、という実例で、個人的に今回一番「なるほど」と思った部分でした。

で、これで案件いけるのか

正直に言うと、途中で「これなら案件が来ても頼めば作ってもらえそうじゃないか」という気持ちがよぎりました。ただ冷静に振り返ると、今の自分にできているのは「動くものを一緒に作ってもらった」ところまでで、以下の部分はまだ全く手が届いていません。

料理人が横についていて、材料さえ渡せば美味しい料理を作ってくれる。でも「お客さんの好みを聞き取る」「味見をして合っているか判断する」のは、まだ自分の役目としてできていない。そんな例えがしっくりくる状態です。

まとめ

意味がわからないまま進めても、動くものは完成します。ただそれは「理解した」とは別の話で、これからは今回の体験を土台に、少しずつ「なぜそのコードで動いているのか」を埋めていく段階だと思っています。まずは1つ、ゼロから動くものを作れたという事実を、今日の自分への収穫にしておきます。

それでは、また次の記事で。