デザイン工学部Faculty of Enginneering and Design
COT200ND（計算基盤 / Computing technologies 200）コンテンツプログラミング演習Y（２０２３年度以降入学生）Contents Programming
馬場 祐人Yuto BANBA
授業コードなどClass code etc
| 学部・研究科Faculty/Graduate school | デザイン工学部Faculty of Enginneering and Design |
| 添付ファイル名Attached documents | |
| 年度Year | 2024 |
| 授業コードClass code | B3836 |
| 旧授業コードPrevious Class code | B2724 |
| 旧科目名Previous Class title | プログラミング演習Y |
| 開講時期Term | 秋学期前半/Fall(1st half) |
| 曜日・時限Day/Period | 木3/Thu.3,木4/Thu.4 |
| 科目種別Class Type | |
| キャンパスCampus | 市ヶ谷 |
| 教室名称Classroom name | 各学部・研究科等の時間割等で確認 |
| 配当年次Grade | 2～4 |
| 単位数Credit(s) | 1 |
| 備考（履修条件等）Notes | |
| 他学部公開科目Open Program | |
| 他学部公開（履修条件等）Open Program (Notes) | |
| グローバル・オープン科目Global Open Program | |
| 成績優秀者の他学部科目履修制度対象Interdepartmental class taking system for Academic Achievers | |
| 成績優秀者の他学部科目履修（履修条件等）Interdepartmental class taking system for Academic Achievers (Notes) | |
| 実務経験のある教員による授業科目Class taught by instructors with practical experience | |
| SDGsCPSDGs CP | |
| アーバンデザインCPUrban Design CP | |
| ダイバーシティCPDiversity CP | |
| 未来教室CPLearning for the Future CP | |
| カーボンニュートラルCPCarbon Neutral CP | |
| 千代田コンソ単位互換提供（他大学向け）Chiyoda Campus Consortium | |
| 選択・必修Optional/Compulsory | 選択必修 |
| 入学年度Admission year | |
| カテゴリー（2023年度~）Category (2023~) |
システムデザイン学科 専門科目 基礎科目 |
| カテゴリー（2019~2022年度）Category (2019~2022) |
システムデザイン学科 専門科目 基礎科目 |
| カテゴリー（招聘学科）Category | ＳＤ |
すべて開くShow all
すべて閉じるHide All
Outline (in English)
In this course, we will cover interactive programming using HTML 5 and JavaScript. We will learn the JavaScript programming language and interactive programming techniques through creating games.
Assessment will be made as follows: In-class contributions 30%, in-class-hours practices 30%, final presentation 40%.
Before/after each class-hours, students will be expected to spend two hours to understand the course content.
授業で使用する言語Default language used in class
日本語 / Japanese
授業の概要と目的（何を学ぶか）Outline and objectives
本講義では、インタラクションデザインを主体としたプログラミング基礎について学ぶ。Webの主要プログラミング言語であるJavaScriptおよびHTML5を利用してインタラクションプログラミング技術やオブジェクト指向プログラミングを学んでいく。
到達目標Goal
演習を通じて「JavaScript言語の構文」や「オブジェクト指向プログラミング」,「統合開発環境(IDE)」といったプログラミング言語の基礎的な技術、また「インタラクションデザイン」や「メディアアート」を表現するために必要な実現方法や設計方法を演習を通して習得する。
この授業を履修することで学部等のディプロマポリシーに示されたどの能力を習得することができるか（該当授業科目と学位授与方針に明示された学習成果との関連）Which item of the diploma policy will be obtained by taking this class?
デザイン工学部システムデザイン学科ディプロマポリシーのうち、「DP2」に関連
授業で使用する言語Default language used in class
日本語 / Japanese
授業の進め方と方法Method(s)（学期の途中で変更になる場合には、別途提示します。 /If the Method(s) is changed, we will announce the details of any changes. ）
各回の授業では、前半にその日のテーマを示し、演習に当たって理解する必要があるプログラミング知識を学び、実現したい処理をロジックとして組み立てる。後半は、実際にロジックをもとにプログラムを制作する。与えられた演習課題のプログラムを実装しデバッグ作業をすることで習熟度を高める．
アクティブラーニング（グループディスカッション、ディベート等）の実施Active learning in class (Group discussion, Debate.etc.)
なし / No
フィールドワーク（学外での実習等）の実施Fieldwork in class
なし / No
授業計画Schedule
授業形態/methods of teaching：対面/face to face
※各回の授業形態は予定です。教員の指示に従ってください。
1[対面/face to face]：JavaScript入門・開発環境のインストール
開発のためのVisual Studio Codeの環境設定，プログラムのデバック環境の整備を行う．
2[対面/face to face]：HTMLプログラミング①
HTML文書の構造を学び，簡単なHTMLプログラムを作成する
3[対面/face to face]：HTMLプログラミング②
HTMLによる表の作成と画像の表示をお行う．また，CSSを使ったHTMLプログラミングを学ぶ
4[対面/face to face]：簡単な図形の描画
HTMLのcanvas要素にJavaScriptを使って簡単な図形の描画を行う．
5[対面/face to face]：JavaScriptプログラミング①
JavaScriptの文法の基本を学習し，条件文と繰り返し処理について簡単なプログラムを作成する
6[対面/face to face]：タイマーとイベント
タイマーとイベント処理について学び，簡単なJavaScriptプログラムの作成を行う
7[対面/face to face]：JavaScriptプログラミング②
DOMの概念と配列の基本的な使い方を学習し，プログラムでの利用方法を学ぶ
8[対面/face to face]：DOMと配列を使ったプログラム
イベント処理，DOM，配列を使ったプログラムとして，モグラ叩きゲームを作成する
9[対面/face to face]：オブジェクト指向プログラミング
JavaScriptにおけるインスタンスの生成と関数定義を実際にコーディングする
10[対面/face to face]：アニメーション
アニメーションの原理について学ぶ，JavaScriptを使って簡単なアニメーションを作成する
11[対面/face to face]：マップゲームの作成
マップゲームの作成を例として，イタラクティブなプログラムを作成するための基本的な考え方，プログラム作成手順を学習する
12[対面/face to face]：作品プログラム制作
ゲームやメディアアート作品を作るに当たって構想，設計を考える。また検討した設計を元に必要なロジックや素材を用意する
13[対面/face to face]：制作作品のプレゼンテーションとデモンストレーション
これまでの学習をベースに各自の最終作品をプレゼンテーションする
14[対面/face to face]：作品の評価と総合討論
これまでの学習をベースに各自の最終作品をプレゼンする．作品について意見交換を行う
授業時間外の学習（準備学習・復習・宿題等）Work to be done outside of class (preparation, etc.)
ノートPCの基本操作を習得しておくこと．
(基本操作とはファイルとフォルダの管理操作, Zipファイルの作成・展開, PowerPoint等による発表スライド資料作成)
本授業の準備学習・復習時間は、各2時間を標準とする．授業時に与えられた演習課題についてプログラムを作成するが，時間内で終了しない場合，指定期日までに独習し提出することとなる．
テキスト（教科書）Textbooks
初回授業時にテキストを配布．また，毎授業ごとに資料を配布（授業支援システムよりダウンロード）．
参考書References
特に指定しない
成績評価の方法と基準Grading criteria
オリジナルのアイディアを盛り込んだメディアアート作品をプログラムできることを達成目標とする．
成績評価は、平常点(出席，講義内演習等での貢献・取り組み態度)(30%), 各授業ごとの演習課題提出(30%)，最終作品と発表(40%) を基準として，総合的に判断し評価する．
最終作品についてはプレゼンテーション形式の発表を実施する．
学生の意見等からの気づきChanges following student comments
前年度の提出課題を精査し、また授業改善アンケートの回答を確認し、本年度の授業に活かすことに努めている．
学生が準備すべき機器他Equipment student needs to prepare
ノートPC (貸与PC もしくはWindows パソコン使用を推奨)．各自のノートPCに，Visual Studio Codeをインストールして演習を行なう．毎授業ごと，ノートPCを持参すること．資料配布，課題の提出などに，授業支援システムを利用する．
その他の重要事項Others
急遽、講義をオンライン(Zoom)で実施する可能性がある．その場合受講のための安定したインターネット環境を各自で確保すること．