概要
現在、SNSから行政サービスに至るまで様々な分野でWebサービスが利用されており、ある種の社会基盤となりつつある。しかし、例えば簡単なSNSサービスを作ろうとするだけでも「アカウントや投稿などの情報をどう保存するか」「保存した情報をどう表示するか」「自分で作ったシステムをどう世の中に公開するか」といった多くの課題を解決する必要があり、コードが書けるだけではサービスを作れない。本講義はすでにプログラミングに触れたことがある人を主な対象とし、実際に手を動かしながら実践的な課題に取り組むことで、世の中にサービスを提供していくために必要な技術を一通り学んでいく。
科目名
| 科目名 | 学期 | 科目番号 |
|---|---|---|
| 創造的ものづくりプロジェクトIT -実践のためのWebプログラミング- | 学部3年生S1S2 | FEN-CO3g13P2 |
| 創造的ものづくりプロジェクトⅡT -実践のためのWebプログラミング- | 学部3・4年生A1A2 | FEN-CO3g13P2 2023年度開講 |
| 創造的ものづくりプロジェクトⅢT -実践のためのWebプログラミング- | 学部4年生S1S2 | FEN-CO3g13P2 |
| 創造性工学プロジェクトIT -実践のためのWebプログラミング- | 大学院修士・博士S1S2 | 3799-520 |
| 創造性工学プロジェクトIIT -実践のためのWebプログラミング- | 大学院修士・博士A1A2 | 3799-550 2023年度開講 |
※最新の開講状況はシラバス・便覧でご確認ください。
指導教員
鳴海紘也
活動内容
本講義「実践のためのWebプログラミング」は、2023年度のA1A2タームに駒場Ⅰキャンパスの情報教育棟およびオンラインで開講された。本講義の内容は、例えば単純な「HTML / CSSの文法」などの入門というよりも、Git / TypeScript / Node.js / 自動テスト / コンテナなど、Webサービスを開発していく上で必要となる実践的な技術である。授業の実施にあたっては、創造的ものづくりプロジェクトⅡ / 創造性工学プロジェクトⅡの別の講義である「0から始めるWebプログラミング」（吉田塁先生）と事前調整を行い、履修者のスキルに応じて「0から始める」と「実践のための」の一方または両方を選択できるようにした。全学自由研究ゼミナールと同時開講していたこともあり、学部1年生から博士課程の学生まで197人が本講義を履修した。
環境
講義では、スライドによる講義と、ウェブアプリProgate Path (https://path.progate.com/)による演習を実施した。Progate Pathは株式会社Progateが提供するウェブアプリであり、ユーザがローカル環境またはGitHub Codespaces上でコーディングした結果を自動でテストし、達成状況を管理することができる。本講義を実現するにあたり、Progate CTOの島津真人氏に協力を仰ぎ、講義として有益と思われるトピックの選定を行った。
上図はProgate Pathの画面の例。ユーザは画面左側の説明を読みながらローカル環境などで実装を行う。実装結果はテストされ、ウェブブラウザから達成状況を確認できる。
詳細
各回の授業内容は以下の通り
| 第01回 | イントロダクション | 授業全体の計画を概観する。 |
| 第02回 | コマンドライン | 各自の開発環境を用意し、基本的なコマンドによる操作方法を学ぶ。 |
| 第03回 | GitとGitHub | チーム開発を行うためのバージョン管理システムについて学ぶ。 |
| 第04回 | TypeScriptとNode.js | 動的なWebページに使用されるTypeScriptという言語を学ぶ。また、Node.jsを使って実際にWebアプリケーションを起動し、これまで学んだ知識を組み合わせて課題に取り組む。 |
| 第05回 | HTML・CSS | HTMLやCSSというWebサイトの見た目を構築するための方法を学ぶ。 |
| 第06回 | データベース | 実務でデータベースを活用するために、架空のSNSサービスについてさまざまな種類のクエリを書いたり、データベースの設計を行ったりする。 |
| 第07回 | Webアプリケーション1 | 架空のSNSサービスに機能を追加する。 |
| 第08回 | Webアプリケーション2 | 架空のSNSサービスに機能を追加する（続き）。 |
| 第09回 | 自動テスト | ソフトウェアが動作しているか継続的に確認するためのテストを書く。 |
| 第10回 | フロントエンド | フレームワークを用いずに、簡易的なTODOアプリを実装する。 |
| 第11回 | アルゴリズムとデータ構造 | 実務で必要になるアルゴリズムとデータ構造に関する課題を解く。 |
| 第12回 | コンテナ・デプロイ | 実際に世の中にサービスを提供するために必要な要素であるDockerについて紹介し、これを用いて実際に Web アプリケーションを公開する。 |
| 第13回 | Webセキュリティー基礎・ 全体の振り返り |
世の中のWebサービスを堅牢にするための技術について、有名なものを紹介しながら解説する。 |
評価
成績評価は、各回のタスクをこなした数に基づいて行われた。授業評価に影響のあるタスクは数十個存在したが、参加者のスキルに幅があることが予想されたため、意図的に基礎的で簡単なタスクと実践的で難しいタスクを含めた。結果的に、多くの学生は基礎的な技能を習得できた、同時に意欲のある学生は実際のウェブアプリ公開などの発展的課題に取り組むことができたと考えられる。
上図はタスクごとのクリア者数（2023年12月時点）。多くの履修者が基礎的なタスクに取り組み、意欲ある学生はサーバの起動やアプリの実装など発展的タスクもこなした。
交流
その他、授業の後半では受講生同士の交流なども行った。前述の通り、学部生から博士課程学生まで幅広い受講生が参加したため、受講生はお互いの存在に刺激を受けたと思われる。
