調べ物をするときChatGPTを使うと便利

最近仕事でReact.jsを触る機会が増えた。今まではVue.jsを書いていたため「Vueのv-ifにあたるものはReact.jsでどう書くんだろう…」のような疑問があれこれ湧いてくる。そのようなとき、話題のChatGPTを使うとはかどるなと思った。

たとえば「React.jsでProps値がundefinedではないときに特定要素をレンダリングしたい。でも方法がわからない」という場面があったとする。 今までであればGoogle検索や本をあれこれ参照し、それっぽいものを試しつつ公式ドキュメントなどの一次情報で裏どりしていた。この「あれこれ参照」の部分をChatGPTで丸々省略できるのがとても便利だし、時間も大幅に短縮できると感じる。

狙った答えを返してもらうポイントは「一度にあれこれ聞かない」「要件を明確に伝える」「比較対象があれば提示する」ことかなと思う。記載項目に対して網羅的に答えようとする傾向があるため、一度に複数の質問を入れると回答がブレる。また、要件が明確でないと汎用的な回答しか返ってこない。精度を上げるなら比較対象が出せるといい。

先ほどの「React.jsでProps値がundefinedではないときに特定要素をレンダリングしたい」であれば、最初に「特定要素をレンダリングする方法」を質問する。

(自分)React.jsの機能にVue.jsのv-ifに相当するものはありますか?

すると、次のように返ってきた。

(回答)React.jsでは、Vue.jsのv-ifディレクティブに相当する機能は、条件付きレンダリングを使用して実現できます。 条件付きレンダリングには、JSX内でのif文の使用、三項演算子の使用、または論理演算子を使った方法など、いくつかの方法があります。 以下は、三項演算子を使った場合の例です。例えば、条件によって表示するコンポーネントを切り替える場合、以下のように書くことができます。(以降省略)

比較対象を出し、回答範囲を絞っている。この結果、条件付きレンダリングが当てはまることを返してきている。回答 + 簡単な解説が返ってくるので、さらに続けて質問する。

(自分)Propsの値に応じて条件付きレンダリングを利用する場合、condition(コード例内の変数)にPropsを当てはめれば良いのでしょうか?

すると、次のように回答される。

(回答)Propsの値に応じて条件付きレンダリングを行う場合、そのままPropsをconditionに当てはめることができます。 以下は、Propsの値によって表示するコンポーネントを切り替える例です。(以降省略)

出てきた回答を一部引用して質問すると、それまでのコンテキストを失わずに回答してもらえる。回答内容に対して深掘りしていく感覚がある。

内容を確認して試した後、条件付きレンダリングの英語の名前を調べ(Conditional Rendering)、その情報を元に公式ドキュメントやO'reilly platformで詳細を確認する。ChatGPTで概要を把握しているため情報の裏どりと詳細を見れば用事が終わってしまう。

概念や基本機能であれば、欲しい情報に近いものをChatGPTに出してもらうことができるのではないか。ただ、質問がうまくないと狙った回答が返ってこないのは人も同じである。国語力と読み書きスキルは高いものが求められる時代になりそうだなと感じた。