Campusmate

シラバス参照

年度

2025

講義コード

12807201

講義名

Webコンテンツ制作

担当教員

遠藤　拡

配当年次

２年

単位数

講義期間

前期

授業形態

演習/対面型

ナンバリング

IM-SFC-CC-212

授業の概要

　この授業では、Webアプリのうちユーザーが操作する表舞台の開発に焦点を当てる。ユーザーと対話するプログラムは、ボタンのクリックなどユーザーの操作に対して、実行したい処理を記述する。
　また、ユーザー体験を好ましいものにするために、ボタンがクリックされた時は、直ちに画面が変化することが望まれる。画面が変わらないとユーザーが混乱しボタンを複数回クリックしたり、動作が止まったと勘違いしたりする。そのため時間がかかる処理を行う場合は、処理中を示す必要がある。このようなプログラミング方法を、Webアプリの開発を題材として学ぶ。
　Webブラウザー上でユーザーが操作する部分は、HTMLとCSSを使用して画面を作成する。そしてJavaScriptによって記述したプログラムが、HTMLを操作して画面を書き換える。しかしJavaScript言語は、予測が難しい振る舞いをするため、大規模なアプリを開発するのはなかなか難しい。そのため、JavaScript言語を拡張して、エラーやバグの発見を容易にし、より開発効率の良い言語が開発されている。この授業では、そのうち最も代表的なTypeScript言語を使用して、プログラミングを行う。
　また本授業では、TypeScript言語と既存の再利用が可能な部品をいろいろと組み合わせて使用する。これにより直接HTMLを操作するよりも、簡単に画面の書き換えとページの切り替えができる。
　授業の前半では、TypeScript言語によるプログラミングを中心に学ぶ。授業の後半では、画面を更新するための部品を組み合わせて、Webアプリを開発する方法を学ぶ。シンプルな例題からはじめ、講義と演習を繰り返して、一歩一歩理解を深めていく。

この科目の到達目標

・サーバーとクライアントから構成されるWebアプリの基本的な構造を理解した上で、HTML/CSSとJavaScriptがどのように連携しているかを把握し、簡単なWebアプリのクライアント側を作成できる。
・配列とオブジェクトの組み合わせ方、関数の作成方法、およびユーザー入力を処理する方法を理解し、アイデアをプログラミングによって実現できる。
・必要となる技術的仕掛けを自ら見つけ、利用することができる。
・ TypeScriptやReactを使ったWebアプリ開発の手法が説明できる。

成績評価の方法


授業出席、授業外学習、提出課題、および定期試験で評価する。 Webアプリの基本的な事項、 JavaScript/TypeScript言語の基本的な文法、配列とオブジェクトの使用方法、関数の作成方法に関する理解度と、既存の部品を活用したプログラミング能力を評価する。

評価方法	割合	評価のポイント

授業出席	20 %	授業への意欲・参加度を評価する。

授業外学習	20 %	各回に課される復習課題への取り組みを評価する。授業外学習の指示・提出はmanabaで行う。

小テスト	0 %

提出課題	20 %	JavaScript/TypeScript言語と既存の部品を組み合わせて、指示通りにプログラムが作成できているかを評価する。

定期試験	40 %	授業内容の理解度を確認するため、授業外学習・提出課題・小テストの類似問題を出題する。

（合計）	100 %	_

授業項目


	週	授業項目

	1.	Webアプリの構成を理解し、Webアプリ開発のための環境を構築して、始めの一歩を踏み出す

	2.	HTMLとReactコンポーネントを使用してWebブラウザーに表示する画面を作成する

	3.	JavaScript/TypeScript①: 配列とオブジェクトの生成方法と、読み込み方と書き込み方

	4.	JavaScript/TypeScript②: ひとまとまりの処理を作る

	5.	JavaScript/TypeScript③: 配列とオブジェクトに対する操作を記述する

	6.	JavaScript/TypeScript④: 非同期処理を理解する

	7.	JavaScript/TypeScript⑤: サーバーにリクエストを送信する

	8.	JavaScript/TypeScript⑥: 様々なプログラム

	9.	React: ステートとコンテキスト

	10.	ReactとNext.js①: コンポーネントの作成

	11.	ReactとNext.js②: フォームの作成

	12.	ReactとNext.js③: ページの作成1

	13.	ReactとNext.js④: ページの作成2

	14.	Webアプリの開発をもっと知ろう