kumarishin Youtubeを通じてNext.jsを学んでいこうという独学の第二回になります。
第二回の分量は少なめですが、学んだことをアウトプットしていこうと思います。
第一回の話はこちら
前回から進めているのは最初のログイン画面。page.tsxを編集していっていますが、コンポーネントを作っていってます。
今あるのはformディレクトリにあるPatientForm.tsxでした。
今回新たに作ったのは、入力フォームのコンポーネントを編集するための『CustomFormField.tsx』になります。
Componentsディレクトリ直下に作成しました。
こちらを動画見ながらカタカタ同じように入力していきます。
同じように入力して意味あるの？と思われるかもしれませんが、動画とすんなり同じようにはいかなくて、やっぱりタイピングミスだったり、コードの抜け漏れがあったりしてエラーになるので、そこで動画を止めながらエラーの原因を修正して…という感じでやるので結構勉強になります。
AIに聞けば自動で修正してくれることもありますが、自分のためなのでなるべく使わないようにして…
あとは動画を流しながら必死にタイピングしているので、タイピング速度を上げるトレーニングにもなります。
さらに言えば、コードを作っていくのって、上から順に打っていくんじゃないんだなということが勉強になります。
今回でいうと
- 入力フォームの中で表面に出力される部分のコードをはじめにつくり
- その中で依存関係が出てくるものはインポートし
- そこに渡す属性値を用意し
- 属性値がどんな型になるのか、型定義を行う
という順番で上下に行き来しながら作っていきました。
なので、JavascriptやReactのメソッドについての学習というよりは、Typescriptとしてどんなものが入力されうるもので、さらにその型がどの程度宣言できるのかを考えながらやることが大事ということがわかってきました。
関数として引数を複数渡す場合、第一引数・第二引数…と記述してそれぞれに型を書いていってもいいですが、動画では
引数をまとめて『props』と書いてその型を『CustomProps』とまず定義しました。
その上で、interfaceで型定義を細かく書いていきます。
ここで気になった（疑問になった）のは、型宣言の方法。typescriptでは型宣言の方法にinterfaceとtypeでの宣言ができます。
ブログ記事にも違いは書いていますが、よく理解できなかったので、そんな時にChatGPTの出番です。
といった感じで、答えてもらいました。シンプルなものであればinterface、多目的に宣言が必要な場合にはtypeという感じですが、『今回はtypeじゃだめなの？』とも思いましたので追加質問。
ということですので、今回は動画の構成上interfaceになったのだと理解しておきました。
引き続き頑張っていきます。