『React書いて』から始まった僕の、本物への道

「このコード、なんで動いてるか分かる？」

あの時、先輩エンジニアにそう聞かれて、僕は何も答えられなかった。顔から火が出るほど恥ずかしかったあの日から、まさか自分がReactの設計についてあれこれ話せるようになるなんて、当時の僕は夢にも思ってなかったな。

ここ数年、フロントエンド開発の案件がすごく増えてきて、僕も流行りのReactを使い始めたんだ。でも正直、最初は手探り状態。そんな僕の目の前に現れたのが、まさに救世主、あのAIツールだった。

「〇〇するReactコンポーネント書いて」

そうAIに頼むだけで、スッとコードが出てくるんだ。それをコピペ。動けばOK。エラーが出たらまたAIに聞く。この繰り返しで、正直なところ、なんとかなってたんだよね。簡単な画面なら1日でパッと作れるし、クライアントさんからも「早いですね！」って褒められて、ちょっと得意になってた。でも、心の奥底ではずっと不安だったんだ。「なんでuseEffectって使うんだっけ？」「TypeScriptの型って、結局何のため？」…基本的なことが全然分からないままだったから。

最初の印象

※本記事にはアフィリエイト広告が含まれます

初めてAIに「React書いて」ってお願いして、数秒で動くコードが出てきた時は、本当に衝撃だった。まるで魔法みたいで、「え、これだけでいいの？」って本気で思ったよ。Reactって難しいって先輩たちが言ってたから、もっと構えなきゃいけないのかと思ってたんだけど、AIがあればこんなに簡単に始められるんだ！って感動したのを覚えてる。正直、これで僕もReactマスターになれるんじゃないか、なんて安易に考えてたんだ。新しい技術へのハードルが一気に下がった気がしたね。

実際に使ってみて

実際にAI頼りで開発を進めてみると、簡単な機能や画面なら本当にサクサク作れて、そのスピード感は感動ものだった。開発スピードが上がると、クライアントからのフィードバックも早めに得られるし、改善サイクルも速くなって、良いことずくめのように感じてたよ。でもね、ちょっと複雑な機能や、複数のコンポーネントが連携するような設計になってくると、途端にAIが生成したコードだけでは対応しきれない場面が増えてきたんだ。

例えば、ある時、コンポーネントのライフサイクルに関わる処理で、画面の動きがおかしくなるバグが発生したんだ。AIに聞いても部分的な修正コードはくれるんだけど、「なぜそうなっているのか」が全然理解できないから、根本的な解決に至らない。結局、修正に丸2日もかかってしまって、その時は「このままじゃプロとは言えないな…」って、かなり落ち込んだよ。表面的なコードをなぞるだけじゃダメなんだって痛感した出来事だったね。

良かったところ

• 開発のスタートダッシュが速い

AIに「React書いて」とお願いするだけで、すぐに動くプロトタイプや簡単な機能が作れるのは本当に便利だった。ゼロから始める時の手間が大幅に削減されるから、アイデアを素早く形にできるのは大きなメリットだね。

• 新しい技術の学習ハードルが下がる

Reactの書き方や基本的な構文が分からなくても、まずはAIに書いてもらったコードを動かすことで、Reactがどういうものなのかを肌で感じられる。専門書を読み込む前に、実際に手を動かすきっかけになるんだ。

• 定型的な処理の自動生成

フォームのバリデーションやAPI連携の基本的なコードなど、パターンが決まっている処理はAIに任せると効率的だよ。自分でいちいち書く手間が省けるから、もっと本質的なロジックに集中できる時間が増えるんだ。

気になったところ

• コードがブラックボックス化する

AIが書いてくれたコードは動くけど、「なぜ」そう動くのかが分からないことが多かった。表面的なコピー＆ペーストだけだと、根本的な理解が深まらないから、いざトラブルが起きた時にどうしていいか分からなくなるんだ。

• デバッグが困難になる

自分が理解していないコードの中に潜むバグを見つけ出すのは、本当に大変だった。AIに聞いても、間違った前提で質問すると的外れな答えが返ってくることもあるし、結局は自分の知識不足が原因で、無駄な時間を費やすこともあったんだ。

どんな人に向いてる？

AIに「React書いて」とお願いするアプローチは、いくつかのタイプの人にすごく向いてると思うよ。

• Reactを学び始めたばかりで、全体像を掴みたい人

まずは動くものを見て、触ってみたいという入門者には、AIは最高の相棒になるはず。

• 簡易的なプロトタイプを素早く作りたい人

細かい設計は後回しで、まずはアイデアの検証をしたい時なんかに、AIの速度は大きな武器になるよ。

• 定型的なコードの生成を効率化したい人

繰り返し書くようなボイラープレートコードはAIに任せて、より創造的な部分に力を入れたい人にもピッタリだね。

• ある程度の知識があって、AIのコードをレビュー・修正できる人

AIの生成物を鵜呑みにせず、自分の目でチェックして、必要に応じて手直しできるスキルがあるなら、AIは強力なアシスタントになるだろうね。

使い続けていく中で見えてきたこと

AIに「React書いて」と頼み続けていく中で、僕のReactとの向き合い方は大きく変わったんだ。最初は「コピペでOK」だった意識が、いつの間にか「AIが生成したコードをレビューして、より良く修正する」という意識に変わっていった。AIは確かに優秀なアシスタントだけど、決して万能な開発者じゃないってことを痛感したんだ。

結局、「なぜ」を理解することこそが、プロとして成長する上で不可欠だって悟った僕は、そこから改めてReactやTypeScriptの学習に本気で取り組むようになった。簡単なコンポーネントなら自分で設計して書けるようになり、AIはあくまで効率化のための補助ツールとして使うようになったんだ。そうすることで、以前よりもはるかに質の高いコードを書けるようになったし、チームのメンバーとも自信を持って設計について議論できるようになったんだよね。

AIは強力なツールだけど、その力を最大限に引き出すには、使う側のリテラシーと学び続ける姿勢が何よりも大切だと、僕は自分の経験を通じて確信したよ。

AIを使いこなすってことは、AIのコードを理解し、自分の言葉で説明できるようになることなんだ。僕のReactの旅は、これからもずっと続いていくんだと思う。

📚 あわせて読みたい

• 「プロンプトは戦略だ！」と学んで劇的効率UP！私のAI活用術
• 私が実感！AIで物流の悩み解消、時間もコストも浮いた話
• まさか私が？AIが変えた個別指導と残業激減のリアル

AI知恵袋ちゃん

この値段なら試してみる価値あり！