本授業では、システムエンジニアとして必要な「フロントエンド開発」の基礎から応用までを学び、ユーザーインターフェースの設計・実装・改善に必要なスキルを習得することを目指します。HTML、CSS、JavaScriptを中心に、モダンなフレームワークや開発ツールの活用方法を学び、ユーザー体験を意識した開発力を養います。
授業内容
1. フロントエンド開発の基礎理解
- フロントエンドとバックエンドの違い
- Webブラウザの仕組みとレンダリングプロセス
- HTML/CSS/JavaScriptの役割と関係性
- UI/UXの基本概念と重要性
2. HTMLとCSSの基礎
- HTMLの構造とセマンティックタグ
- CSSによるスタイリングとレイアウト（Flexbox、Grid）
- レスポンシブデザインとメディアクエリ
- モダンCSS（変数、カスタムプロパティ、アニメーション）
3. JavaScriptの基礎とDOM操作
- JavaScriptの基本文法とデータ型
- イベント処理とDOMの操作
- フォームのバリデーションとユーザー入力の処理
- 非同期処理（Promise、async/await）
4. フロントエンドフレームワークの活用
- React/Vue/Angularの概要と選定基準
- コンポーネントベース開発の考え方
- 状態管理（useState、Vuex、Reduxなど）
- ルーティングとSPA（Single Page Application）
5. 開発ツールとワークフロー
- モジュールバンドラー（Webpack、Vite）
- パッケージ管理（npm、yarn）
- バージョン管理（Git/GitHub）
- Lint、Prettier、テストツール（Jest、Cypress）
6. 実践演習
- ミニWebアプリの設計と実装（ToDoリスト、天気アプリなど）
- UIコンポーネントの作成と再利用
- GitHubを使ったチーム開発演習
- コードレビューとフィードバック
7.期待される成果
- HTML/CSS/JavaScriptを用いたWebページの構築ができる
- モダンなフレームワークを活用したUI開発ができる
- ユーザー視点を意識した設計・改善ができる
- チームでのフロントエンド開発に貢献できる
