JS初学者おじがReactアプリを作れるようになるまでの1ヶ月間
この記事は
この記事は、JavaScriptがほぼ分からないおじさんSEがReactアプリを作れるようになるまでの記録です。
以前の記事
の続編であり、生成AI関連技術を使ったアプリケーション開発の記録でもあります。
この記事が、これから学習を進める方々の手助けになれば幸いです。
きっかけ
以前MarkItDownを実行するAPI開発の記事を書きましたが、そのAPIを呼ぶGUIアプリケーションが存在しないため、自分で書こうと思いました。しかし、私にはフロントエンドアプリの開発の経験がなかったため、まずはbolt.newを使ってフロントエンドアプリを書いてもらいました。結果なんとなく画面を出てきたのですが、「ただ画面作ってください」レベルのプロンプトだと、デザインはイマイチだし、何と言っても出力されたプログラムのコードは全く分からない。。
この時点でいくら生成AIを使うと開発ができるとは言っても、フロントエンド技術に関する基礎的な知識がないと出力されたコードを検証したり未完成の部分を仕上げることができないので、結局実用レベルのアプリケーションを完成させることはできないと気づきました。ということで急ごが回れということでまずはJavaScript の学習から始めることになりました。
始める前の技術レベル
ここで今回の取り組みを始める前の自分の技術レベルを晒しておきます。
普段の仕事でアプリ開発、ましてや自分でプログラムコードを書く機会は少なく、これまでアプリ開発のPMや部門間調整の仕事が中心でした。
一方で生成AIの技術トレンドは継続的に追っており、主にPythonを使ったバックエンドの開発は多少できます。またレイヤードアーキテクチャについては概ね理解しています（つもり）。
Google Cloudのプロフェッショナル認定は3種類取得しており、Gitの操作、VSCodeの操作は一通りできます。
数年前にフロントエンドエンジニアと連携してスキーマ駆動開発を実務で行ったことがありますが、フロントエンド関連の技術はほとんど分からず、ReactはもちろんJavaScriptの構文も理解していません。
UIデザインの知識的には、同僚のデザイナーに勧められてノンデザイナーズブックを読んだことがある、figmaを使って見よう見まねで画面デザインをしたことがある、程度です。
最初の学習方法
まずはUdemyのJavaScriptとReactの講座、及びNext.jsの講座を受講しました。
具体的な教材は以下のリンクの通りです。
【Next.js入門】ReactフレームワークのNext.jsでマイクロブログを構築しながら基礎と本質を学ぶ講座
【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版
ここまでの学習期間はおよそ70時間、日数にしておよそ3週間ほどです。（Udemyの場合、動画視聴だけでなく内容理解と実装の時間も要するので、実際の学習時間は動画時間の3倍くらい見積もったほうが良いです）
正直、この学習を乗り越えられるかどうかが一番のハードルだと思います。
なお、この学習は業務終了後の休日の空いた時間を使って行いました。
ここまでの学習で一応分かったこと
- JavaScriptの基本的な構文
- アロー関数
- 分割代入
- スプレッド構文
- 外部APIの実行方法
- 省略記法
- さまざまなCSSの実装方法
- TypeScriptの型定義のやり方
- Reactでの状態管理
- propsによるコンポーネント間の値の渡し方
- グローバルstate
- フックとカスタムフック
- コンポーネント
- exportとは
- ReactとNext.jsの違い
- package.jsonの扱い方
- Vite
いよいよ開発に入ってみる
ここまでの学習で、自力でTypeScriptやReactのコードをすらすら書くことはまだ難しいものの、人が書いたコードや生成AIが出力したコードを読んで、内容をなんとなく理解できるまでになりました。
bolt.newを使ってデザイン
shin codeさんのYouTube動画、爆速 × 高品質！Bolt.newで美しいLPの作り方3選をご紹介します！を参考に、以下のプロンプトを入力して初期コードを生成しました。
ExcelやPowerPoint,PDFなどのファイルをMarkdown形式に変換してくれるウェブアプリ画面を作ってください。
変換にはMarkItDownというサービスを使用します。既にAPIエンドポイントは開発済みなのでそこにアクセスする機能も実装してください。機能は以下の通り
・ファイルアップロード機能
・変換結果表示テキストエリア
・変換結果の編集機能
・変換結果のファイルダウンロード
以下の技術を使ってください
・NextJs App Router
・TailWindCSS
・Shadcn UI
・Framer Motion
セクションごとにコンポーネントを分けて作ってください。
これで高品質なものを作ってください。
bolt.newでの出力結果のNext.jsコードを実行して表示されるUIはこちら
すごいです。これだけでミニマルかつ必要なものが揃ったユーザーフレンドリーなデザインが出力されました。タイトルや説明、ボタンがすべて英語になっていますがこのUIであればユーザーが使い方に迷うことはないでしょう。なのでこれをそのまま採用することにしました。なお今回はbolt.newには課金せずに使っているので、プロンプトによる出力は最初の1回しかできません。（つまり別案でやり直したい場合は別スレッドで始める必要あり）
bolt.newではバックエンドに相当する部分は基本的には出力してくれないので、ここは自力で実装する必要があります。
ここまでの所要時間はおよそ30分程度でした。
clineを使った開発に移行
ここからはVSCodeを使って開発しました。
VSCodeにclineプラグインを導入しているので、それに補助してもらいながら開発を進めます。
ちなみに、主に使っているモデルはclaude3.5 haikuです。
bolt.newからのデータのエクスポート、GitHubのリポジトリ作成、VSCodeの初期設定などをおよそ2時間ほどかけて行いました。
仕様を固める
肝心のAPIコール部分は、bolt.newでは具体的な実装はおこなってくれなかったのでclineと一緒に行います。まずはclineのPlanモードを使って仕様及び全体の設計方針を決めます。
最初の指示
/ TODO: Replace with actual API call
await new Promise(resolve => setTimeout(resolve, 2000));
の具体的な実装をしたいです。
APIのエンドポイントは、
'https://yourdomain/markitdown-api/' （この記事では公開しないのでダミーです）
リクエストタイプはPOST,
引数はアップロードするファイルオブジェクトです。
戻り値はString型で、その中にMarkdownに変換されたテキストデータが格納されています。
それに対して、clineは以下の返答。
APIコールの実装について、具体的な計画を立てるため、以下の点について確認させてください:
1. エラーハンドリングの詳細
* ネットワークエラー発生時の対応方法
* ファイルサイズや形式の制限基準
* APIエラー時のユーザーへのフィードバック方法
* ファイルアップロードの仕様確認
2. 現在サポートされているPDF、Excel、PowerPointファイル以外の対応予定
* ファイルサイズの上限
* 想定される最大ファイルサイズ
* アップロード進捗表示
3. 実際のネットワーク転送進捗に基づく進捗バーの更新方法
* 進捗表示の詳細度(バイト数、パーセンテージなど)
* 変換後のMarkdownデータの取り扱い
4. 変換されたMarkdownデータの表示方法
* データの保存や後続処理の要件
これらの点について、具体的なご要望やガイドラインをお聞かせください。
実装するにあたり考えないとならないことはたくさんあり分かってはいるつもりですが、いざ自分で考えるとなると面倒なことがたくさんありますし、思わず漏れている観点もあったりします。そういう時にもclineだと的確に質問をしてくれます。これは設計力を高めるのにも非常に助けになりますね。
この質問に対して、自分で仕様を考えそれを回答をすると以下の通りの返答が返ってきました。
1. ユーザーから詳細な要件が提供されました。これらの要件に基づいて、FileUploader.tsxのAPIコール実装の具体的な計画を立てます。
主な実装ポイント:
1. ファイルサイズのバリデーション (10MB以上は拒否)
2. サポートされているファイル形式のチェック
3. fetch APIを使用したファイルアップロード
4. エラーハンドリング
5. 進捗状況の管理
6. Markdownデータの返却と表示
追加で確認したい点があるため、もう一度質問します。
実装計画について、最終的な確認をさせてください:
1. ファイルサイズと形式のバリデーションについて
* 10MB以上のファイルは即座に拒否し、toastで通知
* サポートされているファイル形式: PDF, PowerPoint, Word, Excel, Images, Audio,HTML, Text-based formats, ZIP files
2. APIエンドポイントへのリクエスト方法
* FormDataを使用してファイルをアップロード
* エンドポイント: 'https://yourdomain/markitdown-api/'
* POSTメソッドで送信
3. エラーハンドリング
* ネットワークエラー時: デストラクティブなtoastで通知
* ファイルサイズ/形式エラー時: 対応するtoastメッセージを表示
* APIからのエラーレスポンス時: エラー内容をtoastで通知
4. 進捗状況の管理
* setUploadProgressメソッドを使用
* ネットワーク転送の実際の進捗に基づいて更新
*
5. 変換後のMarkdownデータ
* APIからのレスポンスをapp/page.tsxのsetMarkdown関数で設定
* String型で返却
これらの実装方針で問題ないでしょうか?
問題ありません！
これをもとに次は実装にclineのActモードを使って実装をしてもらいます。
実装を進める
bolt.newでは対応しきれない以下のような部分の対応が中心です。
- コンポーネント間のデータの引き渡し
- エラーハンドリング
- レイアウトの調整
- axiosを使ったAPI呼び出しの実装（前述の仕様固めをインプットにして）
- コンポーネントの依存関係調整やimportエラーの対応
この後、なんとなく動くけど想定通りではない機能が確実に動くようにテストと実装を行いました。
例えば、
- Markdownプレビューはテーブルは表示できているが、h1タグが無効化されているため画面上ではただのプレーンテキストになっている
- バリデーションは出来ているがエラーメッセージを出すtoastが画面に表示されない
などです。
なお今回一番苦労した点は、Markdownエディタのレイアウト調整でした。
ここを動的にレンダリングをする際に全体のレイアウトが崩れてしまうので、その調整を何度も行いました。この辺りはCSSの知識及びTailwind CSSの知識が必要だったので、やはり基本的な知識は重要だと実感しました。
今回、Reactコンポーネントに対するテストコードは書いておらず、作ったものをviteでローカル起動し、自分のPCのブラウザで実際の挙動を確認しながらテストを繰り返すという方法でやっています。
実装は作業は休日も挟みつつ、およそ5日ほどで実装とテストを終えました。
時間にすると多分20時間くらいです。
仕上げ
bolt.newを使って初期画面を作る際に画面デザインのテーマを特に指定しなかったので、モノトーンのシンプルな画面デザインになっていました。
これに対してテーマカラーを指示して画面デザインを仕上げます。
この時点ではclineでの開発に移行しているので、テーマカラーの設定もclineに指示しました。コーポレートサイトやお手本にしたいサイトのスクリーンショットをプロンプトに含めて依頼するだけです。
これは30分もかからず終わります。
最終的に仕上げたアプリのUIはこんな感じです。
おわりに
生成AIを活用したアプリケーション開発は今後必須になっていくと思いますが、実用レベルの仕上がりにするためには、PGMコードの基本的な知識が必要になります。
とは言っても細かいところまで1から実装できる必要性は薄れてきており、出てきたコードを理解するということができれば、ある程度の開発はできるようになります。それ以上の開発、例えばロギングであったり、障害の対応についてはこれまでの知識を生かして実装する必要があるので、アプリケーション開発をしたことがないという人にはまだまだ難しい世界ではありますが、自分で作りたいアプリケーションを作るという世界は確実に近づいてきていると実感しました。
また、フロントエンドアプリの開発は書いてすぐに挙動を操作できるという点が魅力的で、学習のモチベーションにもつながりやすいです。
あと、フロントエンドは技術は本当にリースの進化は早く、いろんな記事やチュートリアルを参考にして学習したとしてもあっという間に内容が古くなって、しかも各ライブラリやフレームワークのバージョンが上がると破壊的変更が発生することもあり、場合によってはその対応に迫られるということがままあるということが分かりました。
しかし、おそらくこの点は生成AIを活用することで、フレームワークのバージョンが上がった場合にも、その旨を指示することによってバージョンアップするということがおそらくできると思います。
まとめ
学習時間：70時間
実装＆テスト時間：21時間
この記事を書く時間：4時間
合計：95時間
費用：$8（OpenRouterクレジット代金）、Udemyは会社補助のため自腹出費なし
結果：JS初心者おじさんでも、（生成AIを活用すれば）１ヶ月もあればReactアプリケーションは作れます！
蛇足
そもそもなのですが、なんで自分で実装をしてみようと思ったかというと、生成AIの登場によってアプリ開発のコストは劇的に下がるのは間違いないので今後はそれ自体が強みにはならなくなっていく一方、生成AIの力を真に活かすためにはアイデアを素早く形にし実証実験を繰り返しユーザーフィードバックを取り入れプロダクトを成長させていく戦略立案と実行能力が必要になる、そしてその際には生成AIプロダクトを活用したある程度の実装力は必要となる、と確信しているためです。
そんなことを考えているときに、たまたま以下の記事を発見し、その内容に共感したので共有させていただきます。
Discussion