【要約】学習アプリをTypeScriptで作成しました。 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
学習者が、JavaScriptからTypeScriptへ移行する過程で、型定義の厳格さに直面した。
- ・JavaScriptでは値の型を意識せずに実装が可能であった。
- ・TypeScriptでは変数や関数の型を明示的に定義する必要がある。
- ・ReactのuseStateを使用する際にも型指定が求められる。
- ・ChakraUIの独自のプロパティや記述方法に慣れる必要があった。
- ・これらにより、実装初期の学習コストが発生した。
// Approach
学習者が、開発効率と安全性を高めるために、TypeScriptとChakraUIを導入した。
- ・TypeScriptを用いて、変数や関数の型を明確に定義した。
- ・ReactのuseState<string>()のように、Hooksに型を指定した。
- ・ChakraUIのコンポーネントを活用し、CSSを直接書かずにUIを構築した。
- ・モーダルなどの複雑なUI要素を、ライブラリの機能を用いて実装した。
- ・学習と実装を並行して進めるスタイルを採用した。
// Result
学習者が、開発の効率化とデザインの容易さを実現した。
- ・型定義により、予期しない値の代入を防止できるようになった。
- ・ChakraUIにより、少ないコード量で効率的なUI実装が可能となった。
- ・デザインと機能実装を並行して進めるスピードが向上した。
- ・自身の成長を実感し、学習のモチベーション向上につながった。
- ・会社での業務理解にもポジティブな影響を与えた。
Senior Engineer Insight
> 本記事は初学者の学習記録であり、実戦的な技術選定の根拠は示されていない。型定義による安全性向上やUIライブラリの活用は基本である。しかし、大規模開発では型定義の設計方針やライブラリのバンドルサイズが重要となる。