React×TypeScript×AI開発に未経験から1週間挑戦した学習記録

はじめに

フロントエンド開発の学習を進める中で、バグの発見・修正の難しさに課題を感じていました。
バックエンドも含めたアプリケーション全体の構築に取り組むためにも、保守性と可読性の高いコードを書くスキルが必要だと感じ、その中で設計段階からミスを減らせるTypeScriptに注目しました。
実際に使ってみると、開発時の補完やエラー検出が強力で作業効率が向上しました！

学習前のスキル

• HTML◎
• CSS◎
• JavaScript（webアニメーション作成等程度）
• PHP（WordPressカスタマイズ程度）
• flutter（半年程度）

使用した技術・ツール

• React
• TypeScript
• JavaScript (ES6)
• Vite（ビルドツール）
• Cursor（エディタ）
• Windsurf

TypeScriptとは

TypeScriptは、JavaScriptを拡張して「型」を使えるようにしたプログラミング言語です。JavaScriptと互換性がありながら、型注釈（型を明示すること）やクラス、インターフェースなどの構文を取り入れることで開発中に型エラーを検出でき、コードのミスを早期に発見しやすくし、保守性を高めることができます。

TypeScriptは、書いたコードを最終的にJavaScriptに変換（トランスパイル）して動作します。そのため、ReactやVueなどのフレームワークと組み合わせて使うことができ、既存のJavaScriptプロジェクトにも導入できます。

特にフロントエンド開発では、コンポーネントの型定義やpropsのチェックが明確になることで、チーム開発やリファクタリングがスムーズになります。

学習内容

JavaScriptの基礎

ReactやTypeScriptの前に、まずはJavaScriptの基礎をおさらいしました。
特に以下の点を重点的に確認：

• let / const の使い分け
• アロー関数、スプレッド構文、分割代入
• map, filter, reduce などの配列操作
• 非同期処理（async / await）

TypeScriptの基本文法

次に基礎的なJavaScriptの記述を踏まえ、少しずつTypeScriptの記述方法を学びました。
主な内容:

• 型注釈（string, number, boolean など）
• 型推論
• オブジェクトの型定義（インターフェース）
• 関数の戻り値の型指定
• ユニオン型・リテラル型・ジェネリクス

React + TypeScript で TODO アプリの作成

学習した基礎の記述方法を踏まえ、それを使ってTODOアプリの作成に挑戦しました！
Reactで開発自体初めてだったためまずは大まかの理解に向けTypeScriptを使用しないタイプの作成方法を動画で参照、次にTypeScriptを使用した記述を動画通りに写経→動画を参考にしながら自己記述という形で進めました。

Windsurf を使用してUI付きアプリを構築

TypeScriptによるToDoアプリの作成を経て、次のステップとして「AIを活用したアプリ開発」に挑戦しました。使用したのが、ローカルでLLMのプロンプト試行やAI機能のUI開発を効率化できる「Windsurf」です。
ノーコードに近い感覚で簡単にAIアプリのプロトタイプを作れました。

◼︎プロンプト記述

家計簿アプリを作成してください
↓
カテゴリー、日付を設定できるようにしてください
また取引履歴、カテゴリー別支出を円グラフで表示できるようにしてください
↓
オレンジをベースに下記サイトを参考にデザインを修正してください
https://service.kateinoigaku.jp/
↓
デザインを前述サイトを参考に修正してください
また、登録内容を更新時も保持できるようにしてください

画面作成の経過、プロンプトの詳細を記録し損ねてしまったため最終的に作成された画面とその際使用したプロンプトを簡単に記載します。

Windsurfを活用することで、コードをほとんど書かずに家計簿アプリの基本機能を素早く実装することができました。ファイル構成やUI設計などを自動生成してくれるため、開発初期の負担が大きく軽減されました。
ただし、複雑なUIや細かい仕様の反映には再生成や手動での修正が必要な場面もあり、プロンプトの精度や補助ツールの併用が成果に大きく影響すると感じました。
AIを活用した開発支援を効果的に取り入れながらもそのコードに手を加えることのできる設計力・実装力を併せ持つことが必要不可欠と感じました。

学んだこと/気づいたこと

• 初めは記述方法に少し苦戦したものの型の明示によって関数やオブジェクトの使い方が明確になり、自分で見たときにも理解しやすいコードが書けるようになった
• 記述は増えてもエラーがわかりやすく修正・追加時のミスが減った
• エディタの補完機能が大きくも記述が増えることにそこまで大きな苦労はなかった

今後取り組みたいこと

• 状態管理の実装（追加した要素を画面読み込みしても保持する形がうまく実装できず一旦スキップしたため）
• 今回は機能実装のみにフォーカスして学習したため、UI / UXのデザインを併せてコードで実装

まとめ

JavaScriptを学ぼうとした際、エラーの解消やデバッグで躓くことが多くありました。
TypeScriptで書くことで構成のわかりやすさやエラー発見の速さにより学習効率と開発体験が大きく向上しました。
今回の学習では一人で小さなアプリを作成するところから始めましたが、一人でもっと機能を拡張したアプリを作成することや複数人での開発への不安も軽減でき前向きに臨めるものと感じています。

参考リソース

JavaScript Primer : https://jsprimer.net/
サバイバルTypeScript : https://typescriptbook.jp/
TypeScript Deep Dive 日本語版 : https://typescript-jp.gitbook.io/deep-dive

参考動画 :
https://youtu.be/ig3GosWuKF0?si=Y0WVwUX8LIEzTKf7
https://youtu.be/GEMtGlBiua4?si=TeoCqTg3GensIzDX
https://youtu.be/nRCNL9T3J98?si=w_Hc6cxy05–3UYn
https://youtu.be/ANcopd8Bmao?si=yxdEELnMVeXc08Dn