2025-3I プログラミング3 第01回 講義資料

2025年10月02日（木）5・6時限

1 ガイダンス

1.1 概要

本科目ではNext.jsをフレームワークとした「ウェブアプリ開発」を実践形式で学び、実際にオリジナルのブログシステム (ログイン機能、記事の閲覧と投稿機能を持つもの) をゼロから開発、デプロイ・公開することができる知識とスキルの修得を目標としています。

皆さんが、この授業で開発するウェブアプリは、来年度のインターンシップや、今後の就活のなかで、自分の能力と経験 (実績) を客観的に示すこと に利用できます。授業という枠に捕らわれずに、意欲的に取り組んで欲しいと思います (特にウェブ系エンジニアを将来の視野に入れているひとは頑張ってください)。

1.2 授業の位置づけ

この授業の位置づけは、次のようになります。

1.2.1 基本情報

学修単位

本科目は、前期の 情報3 や プログラミング2 と同じく「学修単位」の科目であり、「30時間 (相当) の対面授業」と「60時間 (相当) の授業時間外学習」が要求される科目となります。

授業については毎週90分を実施し、これを2時間と見なして全15回の講義によって「30時間相当の対面授業」を確保しています。これに加えて、皆さんは授業1回につき、授業時間外に 約4時間の自主的な学習 が求められます。

そして、この授業は、それらの授業時間外学習を前提にボリュームや難易度を設定しています。

1.2.2 関連科目

知能情報コースの専門科目は ソフトウェア系、ハードウェア系、応用情報科学系 の 3系統 から構成されています。ここでは、ソフトウェア系 と 応用情報科学系 のなかで本科目と特に関連がある科目を挙げています。

また、4年生以降は、次のような科目が展開されます。

1.3 本科目を通じて学べる知識・スキル

本科目ではNext.jsをフレームワークに採用した「ウェブアプリ開発」についてハンズオン形式で実践的に学び、最終的にオリジナルのブログシステム (記事の閲覧と投稿機能を持つもの) を ゼロから開発、デプロイ (公開) できる知識とスキルの修得 を目指します。

Next.js は Reactを基盤として、バックエンドも含めたウェブアプリ開発環境を提供する フルスタックフレームワークです。

具体的には、Next.js に加えて、次のような技術やウェブサービスについてハンズオン形式で学んでいきます。

「React」とは

React は、SPA (Single-Page Application) 型のウェブアプリの開発に特化した ユーザーインターフェイス構築ライブラリ (フロントエンドフレームワーク) です。

Reactは、ウェブアプリの開発者に対しては 高度な再利用性と優れた保守性を提供 し、ウェブアプリの利用者には 高速で応答性の高い快適なUI/UX を提供します。Meta社 (旧Facebook社) が開発・保守しているライブラリで、ウェブ版の Facebook や Instagram、メルカリ、LINE、Netflix、Dropbox、UberEats などでもガンガンに使われています。

ウェブアプリのフロントエンドフレームワークとしては、React の他、Vue.js(ビュージェイエス) やAngular (アンギュラーアンギュラー)、Svelte(スヴェルト) なども存在しますが、いまは React が最も人気で技術情報も豊富です。

1.3.1 前提とする知識とスキル

本科目は、概ね次のような学習経験を積んでいることを「前提」とした授業内容、授業スピード (展開速度) となります。

知識やスキルが不足していると感じる学生はProgeteなどを活用して補習しておいてください🚀

1.4 科目の達成目標

シラバスからの抜粋を次に示します。

  1. Next.jsとTypeScriptを用いて基本的なウェブアプリケーションの開発ができる。
  2. リレーショナルデータベースの設計とORMによるデータアクセス処理の実装ができる。
  3. 認証と認可の処理を備えたセキュアなウェブアプリケーションの設計と運用ができる。
  4. ホスティングサービスを利用してウェブアプリケーションのデプロイメントと公開ができる。

1.5 成績評価法

総合成績（年度末の最終成績）は、シラバスに記載したように次のように評価します。

中間試験や期末試験などの筆記形式の定期試験は実施しません。

小テストを欠席した場合

遅刻や欠席（公欠や出欠停止を含む）により、小テストを受験できず追試験を希望する者は 当該授業日を含めて2日以内 に、学生から和田宛に TeamsChat で追試験の実施依頼 をしてください。例えば、10月02日（木）に実施された小テストの追試験を希望する場合は、10月03日(金) の 23:59 までに連絡してください。

小テストの追試験は、公欠や忌引を含めて理由に関わらず 1人あたり最大3回まで対応します。4回目以降の欠席・遅刻による小テスト未受験に対して、追試は実施せず「0点」で評価します。

1.6 授業の進め方

「ウェブアプリ開発とは？」や「ウェブアプリ開発とウェブサイト制作の違いは？」といった座学的な内容は、今後の授業のなかで、順次、説明していきます。初回授業から、手を動かさずに話を聞いているだけでは実感も湧かず、眠くなってしまう🐏💤と思うので・・・。

気になる人は以下を参考にしてください (内容としては、キャリア形成の観点で極めて重要です)。

(プロンプト例)

業務内容と、スキル・キャリアの観点から「Web制作」と「Web開発」について、高校生にも分かりやすく解説してください。

本日 (第01回) から 第05回講義 までは「開発環境の構築・設定」「モダンTypeScriptの学習」「Reactを使った「Todoアプリ」の開発」を目標に進めていきます。ここでの「Todoアプリ」は フロントエンドだけで完結するウェブアプリ (ウェブブラウザを実行環境とするアプリ) として開発します。

その後、データベース (SQLite3) や、各ウェブサービス (microCMS/Supabase) との連携、Next.js によるウェブAPI開発などの「バックエンドの領域」について学びながら「オリジナルのブログシステムの開発」に挑んでいきます。

後期中間ぐらいまでの流れ

  1. モダンTypeScript基礎学習のための環境構築
  2. TypeScript基礎学習
  3. Reactを使ったTodoアプリのための環境構築
  4. Todoアプリ開発（Reactによるフロントエンド開発）のチュートリアル
  5. Todoアプリのカスタマイズや作り込み

詳細なフローは、昨年度の講義資料を参照してください。

2 最初の目標「Todoアプリの開発」

後期の中間試験前ぐらいまでは、次のリンクに示すような「Todoアプリ」をReactという モダンなJavsScriptライブラリ (フロントエンド開発フレームワーク) を使って開発できるようになること (= ある程度の意味や内容を理解して実装できるようになること ) を目標にします。

img

以上のようなTodoアプリの開発に要求されるのが TypeScript言語 (JavaScript言語) の基礎 であり、そのために必要となるのが 開発環境の構築 (IDEの設定を含む) になります。なお、IDE (Integrated Development Environment、統合開発環境) については、皆さんも使い慣れているハズの「VSCode」を使用していきます。

「フロントエンド」と「バックエンド」

ウェブアプリは、画面をつくる「フロントエンド」と、裏で処理を支える「バックエンド」の大きく2つに分けて開発します。

3 JavaScript/TypeScriptの概要

TypeScript (タイプスクリプト) は、JavaScript (ジャバスクリプト) に「静的型付け」や「クラスベースのオブジェクト指向」など導入して拡張したプログラミング言語です。Microsoft によって開発・保守され、最近の中規模以上のフロントエンド開発では、TypeScript が事実上の標準言語 (ほぼ唯一の選択肢) となっています。

この授業で学ぶ React や Next.js のほか、Angular や Vue.js などのウェブアプリ開発の主要フレームワークも TypeScript による開発を推奨しており、実際に多くのウェブ開発現場で TypeScript が採用されています。プログラミング言語別の求人ランキング (参考) においても上位を陣取る言語となっています。

なお、TypeScript プログラムは、「トランスパイラ」というものを使って JavaScriptプログラムに変換できるので、基本的には 「TypeScriptが使える」＝「JavaScriptが使える」 と考えて問題ありません。

トランスパイラによる「TypeScript」から「JavaScript」への変換

prac00.ts という TypeScriptプログラム があるとき、tsc --target es6 prac00.ts というコマンドで prac00.js という JavaScriptプログラム に変換できます。今回の授業後半で開発環境が構築できたら、実際にトランスパイルをしてもらいます。

function greetAndCalculate(name: string, a: number, b: number): string {
  const sum: number = a + b;
  return `Hello, ${name}! The sum of ${a} and ${b} is ${sum}.`;
}

const userName: string = "Alice";
const x: number = 10;
const y: number = 20;

const result: string = greetAndCalculate(userName, x, y);
console.log(result);
function greetAndCalculate(name, a, b) {
    const sum = a + b;
    return `Hello, ${name}! The sum of ${a} and ${b} is ${sum}.`;
}
const userName = "Alice";
const x = 10;
const y = 20;
const result = greetAndCalculate(userName, x, y);
console.log(result);

3.1 JavaScript (\(\neq\) TypeScript) の実行環境

もともと JavaScript はNetscapeというウェブブラウザにおいて、HTML要素に対して動的な視覚的効果を与えたり、ダイアログを表示したりするために開発された言語であり、JavaScript の (基本的な) 実行環境 は ウェブブラウザ (Chrome、Edge、Safari、Firefox など) となります。

「JavaScript」は、当初「LiveScript」という名前でした。しかし、当時の Java の爆発的人気にあやかって JavaScript に改名しています。念のために「Java」と「JavaScript」は メロンとメロンパンぐらい違う (有名な「たとえ」ですね) ので注意してください。完全なる別物です。

JavaScriptが「ウェブブラウザを実行環境として動作する」というのは、Python や C言語 などのネイティブアプリ開発用の言語と比較して大きな特徴 となります。

例えば、自分が作成した「Pythonプログラム」を誰かに使ってもらおうとしたら、その利用者の PC に Python の実行環境をインストールしてもらって、さらに必要なパッケージを pip でインストールしてもらって…という非常に高いハードルがありました (PythonコードをEXEファイル化して配付するという手段もありましたが、ファイルサイズも非常に大きく起動も遅いアプリになってしまいました) 。

3.1.1 ウェブブラウザで実行されるJavaScript

JavaScriptの実行環境が「ウェブブラウザ」であることを実際に確認してみます。

次の2つのファイルをテキストエディタで作成・保存 (拡張子に注意) し、index.html のほうをダブルクリックして Chrome を起動してください。さらに、Chrome で [F12] を押下して デベロッパーツール (開発者ツール) を起動し「コンソール」タブを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <p>"F12"で「コンソール」を開いて結果を確認してください。</p> 
  <script src="hoge.js"></script>
</body>
</html>

上記 index.ts の 第09行目 で、以下のJavaScriptプログラムを呼び出しています。

function add(a, b) {
  const c = a + b;
  console.log(`${a} と ${b} を足すと ${c} です。`);
}
add(10,20);
add(50,-30);

デベロッパーツールのなかの「コンソールタブ」から、次のように ウェブブラウザを実行環境として JavaScriptプログラム が動くこと が確認できたと思います。

img

なお、ウェブブラウザで JavaScript を実行するためには HTMLファイル の内部から JavaScriptプログラム を呼び出す必要 があります。

注意

ウェブブラウザでは「TypeScript」で書かれたプログラムコードを直接実行することはできません。ウェブブラウザで実行するためには トランスパイラ を使って、あらかじめ「TypeScript」を「JavaScript」に変換・配置し、HTMLファイルから呼び出すことが原則となります。

なお「トランスパイラ (Transpiler)」とは、あるプログラミング言語で書かれたソースコードを、別のプログラミング言語のソースコードに変換するツールのことで「トランスレート (Translate)」と「コンパイル (Compile)」を組み合わせた造語です。

皆さんは、既に「Pyhthon」「C」「Arduino」を学んできているので推測はつくと思いますが hoge.js に記述されるプログラムは、Python で書けば以下のようなものとなります。

def add(a, b):
  c = a + b
  print(f'{a} と {b} を足すと {c} です。')
add(10, 20)
add(50, -30)

Pythonプログラムは、覚えてますよね🤔

3.2 もうひとつの JavaScript の実行環境

先のセクションで「JavaScripthはウェブブラウザ上で実行される」と解説しましたが、実は、もうひとつ Node.js という「ウェブブラウザとは異なる JavaScript 実行環境」が存在します。

Node.js (ノード・ジェーエス) は、Windows や Linux などの OS にインストールして利用するJavaScript実行環境です。Node.jsがインストールされている環境では、先ほどの hoge.js を次のようにターミナル (PowerShellやコマンドプロンプト) から JavaScript を実行できます。HTMLの内部から呼び出すことなく直接的に実行できる点に注意してください。

PS C:\Users\xxxx\Desktop> node hoge.js
10 と 20 を足すと 30 です。
50 と -30 を足すと 20 です。

ウェブブラウザを使えば手軽に実行できる JavaScript を、わざわざ Node.js 環境を構築して、実行するような需要はどこにあるのでしょうか。需要は「大きく2つ」あります (ここから非常にややこしい話になるので注意してください)。

まず、1つは、ウェブアプリの バックエンド (サーバサイド) の実行環境 としての需要があります。既に皆さんは、前期の「知能情報実験実習1」のなかで Flask (Python) を使ってウェブアプリのバックエンド開発を体験していますが、それと同様に、Node.js を使えば JavaScript/TypeScript でもバックエンド開発 ができます。

具体的にはExpress.jsやKoa.jsといったフレームワークを利用して JavaScript/TypeScript 言語でバックエンド開発が可能です。そして、その実行環境として Node.js が使われます。フロントエンドと同じ言語でバックエンドを開発できるのは、開発者サイドにとっては大きなメリットです。

参考

PythonではFlaskを用いて次のようにウェブアプリ (バックエンド) を構築できました。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
  return 'hello'

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=8000)

JavaScriptではExpress.jsというフレームワークを使って、次のようにウェブアプリのバックエンドを構築できます。このプログラムは、Node.js がインストールされた環境で node app.js といったコマンドで実際に実行できます。逆に、ウェブブラウザ上では実行できないタイプの JavaScriptプログラム となっています。

const express = require('express');
const app = express();
const port = 8000;

app.get('/', (req, res) => {
  res.send('hello');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

なお、Pythonで本格的なバックエンド開発を際には、Flask ではなくDjango (ジャンゴ)という多機能な (フルスタックな) フレームワークが利用されます。

次に、2つめですが「ウェブブラウザを実行環境として動作するフロントエンドのJavaScriptプログラム」を開発するときに、そのビルド (TypeScript から JavaScript へのトランスパイルを含む) や、開発ツールの実行のために Node.js 環境が使われます。

たとえば、React を使ったフロントエンド開発 が典型的な Node.js の利用シーンとなります。Reactは「ウェブブラウザを実行環境として機能するフロントエンド用のJavaScriptライブラリ」ですが、その React を使った JavaScriptプログラム を効率的に開発するために Node.js という JavaScriptの実行環境 が必要になってきます (ややこしいですよね💦)。

簡単にまとめると、Reactを利用したフロントエンドのウェブアプリはウェブブラウザで動作するが、開発中のビルドやツールの利用のために Node.js が必要になる ということです。

・・・とはいえ、いまの段階で、上記の文章だけを読んでイメージを掴むことは極めて難しいと思います。これらは、この先の授業のなかで実例を示しながら解説していきます。いますぐ解決したいときは、生成AIを活用してください。

(プロンプト例)

Reactはウェブブラウザで動作するフロントエンドのライブラリなのに、その開発に何故 Node.js が必要なのですか？Node.jsを使わずに開発はできないのですか？

なお、後半 (第06回講義以降) で登場する「Next.js」は、上記で説明した 2つの Node.js の用途を統合したようなフレームワーク になっています。つまり、Node.jsによって「フロントエンド開発の効率化」と「バックエンド機能の提供」を同時に実現し、総合的なフルスタック開発・実行環境を提供しています (ここの部分も現段階で理解する必要はありません)。

3.2.1 定着確認

4 Node.js のインストール

理由はさておき、React や Next.js を使用したウェブウェブアプリの開発 (TyepScript から JavaScriptへの変換を含む) には Node.js 環境が事実上必須である ことが分かったと思います。

ここでは、Windows PC に Node.js をインストールする手順について示します。なお、この講義資料に記載するプログラムは Node.js v24 (LTS) で動作確認をしています。特段の理由がない限り v24 のバージョンを使用してください。

なお、既に Node.js をインストール済みの場合、再インストールする必要はありません。

4.1 インストーラのダウンロード

Node.js の公式ページ (https://nodejs.org/en/download/prebuilt-installer) から Node.js の v24 をダウンロードしてインストールしてください。

img

2025年9月25日現在、Node.js v24 系列の最新リリースは v24.8.0 です。もし、より新しいマイナーバージョンが公開されている場合は、そちらを利用してください。また、講義資料に記載されているバージョン番号を読み替えてください。

4.2 インストーラの実行

ダウンロードしたインストーラ node-v24.8.0-x64.msi を実行してください。インストーラからの要求があれば管理者権限を与えてください。インストールに関する設定は「全てデフォルトのまま」で問題ありません (特に変更必要とする項目はありません)。

4.3 インストールできたことの確認

PowerShell から以下のコマンドを実行し「Node.js が問題なくインストールされていること」「Node.js に パス (path) が通っていること」を確認してください。コマンドプロンプト (cmd) を使用すると、一部の操作やレスポンスが違ってくるので注意してください。

PS C:\Users\xxxx> node -v
v24.8.0

なお、以下のコマンドで node のパス (=Node.jsの本体が配置されているフォルダ位置) が確認できます。

PS C:\Users\xxxx> where.exe node
C:\Program Files\nodejs\node.exe

5 npm 関連の初期設定

Node.js では「npm (Node Package Manager)」というツール使ってパッケージ (ライブラリ) の管理をします。ここでのパッケージとは「JavaScript でアプリの開発するために使用する各種ライブラリのこと」と考えてください。なお、パッケージは、ウェブ経由で取得するので npm を実行するときにはインターネットに接続している必要があります。

Node.js における npm は、Python における pip のようなもの と考えてください。

5.1 npm のバージョンアップ

次のコマンドで、グローバル環境での npm の最新版へのアップグレードと、そのバージョン確認を実行してください。 2025年9月25日現在、npm の最新リリースは 11.6.1 です。

PS C:\Users\xxxx> npm install -g npm
PS C:\Users\xxxx> npm -v
11.6.1

ここで npm install は、npmパッケージをインストールするコマンドです。-g オプションは「グローバル環境」を指定しています。上記のコマンドは複数回実行しても問題ありません。

なお、グローバル環境には 最低限のパッケージだけをインストールすることが推奨 されます。個別の開発で必要なパッケージは、後述する方法でプロジェクトフォルダのなかの node_modules フォルダに ローカルインストール することが推奨されます。

明示的に -g (または --global) オプションを付けない限り、npm を実行したときはプロジェクトフォルダ内のローカル環境にインストールされます。

5.2 TypeScript のインストール

次のコマンドにより、TypeScript をグローバル環境にインストールしてください。これにより、TypeScript を JavaScript にトランスパイルする tsc などのコマンドが使用可能になります。

PS C:\Users\xxxx> npm install -g typescript

ここが、うまくいかないときは、Volta などの他のパッケージマネージャがインストールされている可能性があります。Volta をアンインストールするか、あるいは、以降のパッケージ管理を全て Volta に読み替えるなどで対応してください。

5.3 グローバル環境にインストールされたパッケージの確認

グローバル環境にインストールされたパッケージの一覧は、npm list -g --depth=0 コマンドで確認できます。以下は、実行結果の一例です。

PS C:\Users\xxxx> npm list -g --depth=0
C:\Users\xxxx\AppData\Roaming\npm
+-- @anthropic-ai/claude-code@2.0.0
+-- @google/gemini-cli@0.6.1
+-- @openai/codex@0.42.0
+-- npm@11.6.1
`-- typescript@5.9.2

5.4 トランスパイルとJavaScriptプログラムの実行

ここまでの環境構築により、Node.js環境で「トランスパイル」と「JavaScriptプログラムの実行」ができるようになりました。実際に、これらを試していきます。

以下のTypeScriptプログラムを test.ts という名前でデスクトップ (C:\Users\xxxx\Desktop>) に保存してください。

function greetAndCalculate(name: string, a: number, b: number): string {
  const sum: number = a + b;
  return `Hello, ${name}! The sum of ${a} and ${b} is ${sum}.`;
}

const userName: string = "Alice";
const x: number = 10;
const y: number = 20;

const result: string = greetAndCalculate(userName, x, y);
console.log(result);

デスクトップ画面で [Shift] を押下しながら右クリックして「ターミナルで開く」を選択して PowerShell か コマンドプロンプト を開いてください。ls か dir のコマンドで test.ts が存在することを確認してください。

img

以下のコマンドで test.ts を test.js にトランスパイルしてください。ここで --target es6 オプションは、ES6 (ES2015) の使用に準拠した JavaScript (ECMASCript) に変換することを明示したものです。

PS C:\Users\xxxx\Desktop> tsc --target es6 test.ts

デスクトップに test.js (JavaScriptプログラム) が生成されているので、適当なテキストエディタで開いて内容を確認してください。

次に、以下のコマンド (node test.js) で実行してください。

PS C:\Users\xxxx\Desktop> node test.js
Hello, Alice! The sum of 10 and 20 is 30.

ここで失敗する場合は「PowerShellから、スクリプトが実行できるように設定されていない可能性」があります。以下のコマンドでスクリプトの実行設定を変更して、ターミナルを開きなおして tsc ... を再実行してみてください。

C:\Users\xxxx> Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

5.4.1 演習

--target e6 のようにオプションを指定しない場合、「ES5」という古い仕様に準拠した JavaScriptプログラム (= Internet Explorer 11 のようなレガシーなブラウザでも動作する JavaScript プログラム) が出力されます。実際に確認してみてください。

また、そのプログラムでも、同様の実行結果 (=Hello, Alice! The sum of 10 and 20 is 30.) が得られることを確認してください。

5.4.2 定着確認

6 TypeScriptの基礎学習のための環境構築

TypeScriptの基礎学習用のプロジェクトフォルダを作成して「環境の構築」を行ないます。次回以降の授業でも継続的に使用していく予定なので (課題として提出してもらう可能性もあるので)、プロジェクトフォルダの位置や名前などには、十分に注意してください。

6.1 プロジェクトフォルダの作成

適切な位置 (OneDrive管理下はお勧めしません) に、learn-ts-basics というプロジェクトフォルダを作成して VSCode で開いてください。なお、必ず learn-ts-basics が VSCodeのワークスペースのトップフォルダ（ルートフォルダ） となるようにしてください。

img

ターミナルから実行するのであれば、以下のようにしてください。この方法であれば、learn-ts-basics が確実に VSCodeのワークスペースのトップフォルダになります。

mkdir learn-ts-basics
cd learn-ts-basics
code .

6.2 TypeScriptの設定 (1)

実際のReact開発に近しい環境を構築して、そこで TypeScript の基礎学習をしていきます。具体的には npm によるパッケージ追加や、ファイル変更を監視してのホットリロード設定 (=自動的にトランスパイル、ビルドして再読み込みして実行すること) などを行なった環境を構築して、TypeScript の基礎を学んでいきます。

まずは、TypeScript に関する基本設定 から行なっていきます。

VSCodeで [Ctrl]+[j] のショートカットでターミナル (PowerShell) を開いて、以下のコマンドを実行してください。

tsc --init

tsc は先ほどのトランスパイルに使ったコマンドです。tsc --init のようにオプションをつけて実行すると、トランスパイルに関する各種設定が記述された tsconfig.json という雛形ファイルが作成されます。

もし、VSCode のターミナルで tsc が見つからない旨のエラーがでた場合は、VSCodeを再起動して試してください。解決しないときは PC を再起動してください。

コマンド実行後、プロジェクトフォルダに tsconfig.json が作成されているはずなので、VSCode上で開いてください。大量の設定が羅列されていますが、大半がコメントアウトで無効になっています。

コメントアウトを含んでいると分かりずらいので コメントされた文は全て「削除」して保存 してください。以下のような設定だけが残ると思います。これらは tsc コマンドによるトランスパイル (コンパイル) のオプション設定となります。

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "types": [],
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  }
}

JSONファイルでは 最後の項目以外には、末尾にカンマ (,) が必要です。これを忘れるとエラーの原因となるので注意してください (VSCodeでエラーを表す波線が表示されます)。

6.2.1 演習

tsconfig.json の各項目が意味することを「生成AI」を利用して簡単に把握してください。詳細に理解する必要はありません、ざっくりと理解してください。

(プロンプトの例)

TypeScript の設定ファイル tsconfig.json を以下に示します。各項目の意味について TypeScript 初心者向けに概要を説明してください。

6.3 TypeScriptの設定 (2)

Typescriptの基礎学習用に tsconfig.json を次のようにカスタマイズしてください。

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "outDir": "./dist" /* 追加 */,
    "rootDir": "./src" /* 追加 */,
    /* "types": [], // 削除 */
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "strict": true,
    /* "jsx": "react-jsx", // 削除 */
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  } /* ここにカンマをつけないとダメ!!! → */,
  "include": ["src/**/*"] /* 追加 */
}

ここで追加・削除した設定が項目の意味は次のとおりです。

6.3.1 定着確認

6.4 フォルダの作成

現時点でプロジェクトフォルダのなかに src と dist のフォルダが存在していません。新規作成してください。

img

なお、VSCodeの フォルダアイコン や ファイルアイコン をいい感じにしたいときは、拡張機能の Material Icon Theme (識別子:pkief.material-icon-theme) をインストールしてください。プログラミング1の授業でも紹介ずみです。

6.5 TSファイルの作成とトランスパイルによるJSファイルの出力と実行

ここまでの環境構築が問題なくできているかを確認していきます。src フォルダに prac00.ts というファイル (Practiceの略語) を作成して、以下の TypeScriptプログラム を貼り付けて保存してください。

function greetAndCalculate(name: string, a: number, b: number): string {
  const sum: number = a + b;
  return `Hello, ${name}! The sum of ${a} and ${b} is ${sum}.`;
}

const userName: string = "Alice";
const x: number = 10;
const y: number = 20;

const result: string = greetAndCalculate(userName, x, y);
console.log(result);

次に、トランスパイルして動作確認します。VSCodeのターミナル ([Ctrl]+[J]でオープン) から以下のコマンドを実行してください。

tsc

この tsc コマンドによって、src/prac00.ts がトランスパイルされて、dist/prac00.js 出力されているはずです。VSCode で確認してください。

TypeScriptコンパイル時の出力ファイル

tsc を実行するすると、dist には prac00.js 以外にも prac00.js.map、prac00.d.ts、prac00.d.ts.map というファイルが同時に出力されていると思います。これらのファイルの内容が気になるときは、生成AIを使って深堀してください。

(プロンプト例)

TypeScript ファイル prac00.ts を作成して、tsc でトランスパイルしたら、prac00.js の他に、prac00.js.map、prac00.d.ts、prac00.d.ts.map というファイルも生成されました。各ファイルの意味や役割について教えてください。

つづいて、トランスパイルによって生成された dist/prac00.js を実際に動作させてみます。以下のコマンドを実行してください。

node dist/prac00.js

ここで Hello, Alice! The sum of 10 and 20 is 30. のような文字列が出力されれば、ここまでの設定が正しくできています。

6.6 開発を効率的に行なうためのパッケージの追加

ここまでの設定で、TypeScriptを書いて実行する「最低限の環境」が構築できました。

ここからは 効率的にTypeScript開発を進めるための環境構築や設定 を進めていきます。React や Next.js を開発するときにも関係してくる内容となります (package.jsonなど)。

まず、効率的なTS開発に必要なパッケージ (ライブラリ) として typescript、tsx、@types/node を、プロジェクトのローカル環境にインストールしていきます。なお、typescript については既にグローバル環境にインストール済みですが、改めてローカル環境にもインストールしておきます。

以下のコマンドで 3つのパッケージをまとめてインストールすること ができます。

npm i -D typescript tsx @types/node

また、以下のコマンドでも同じことができます。

npm install --save-dev typescript tsx @types/node

ここで i または install はパッケージの「インストール操作」を意味します。-D または --save-dev は、開発のときだけに使うパッケージ (=プロダクトとしての出力には含めないパッケージ) としてインストールすることを意味します。

コマンド実行後、プロジェクトフォルダのなかに node_modules フォルダと、package.json と package-lock.json という2個のファイルが自動作成されたことを確認してください。

img

node_modules フォルダには、npm install (=もしくは npm i) コマンドで インストールされたパッケージ (本体) と、そのパッケージと依存関係にあるパッケージ (本体) が格納されています。基本的に、皆さんがこの node_modules フォルダを操作することはありません。

package.json と package-lock.json は 自分のプロジェクトが依存するパッケージ (=外部ライブラリ) を管理するため のファイルになります。Pythonでいうところの requirements.txt \(+\ \alpha\) が記述されたファイルと考えてください。

6.6.1 定着確認

6.7 TypeScriptの直接実行

以上の環境構築により、トランスパイルせずに TypeScript を直接実行できるようになりました。次のようにコマンドを実行してみてください。npx をつけることを忘れないようにしてください。

npx tsx src/prac00.ts
img

また、以下のように watch オプションを指定すると、src/prac00.ts を監視して、ファイルの保存を検出するたびに即座に再実行してくれます。終了したいときは、ターミナルで [Ctrl]+[C] を入力します。

npx tsx watch src/prac00.ts

(プロンプト例)

Node.js の文脈で、npx ってなんですか？ npm とは何が違うのですか？初学者向けに解説してください。

6.7.1 定着確認

6.8 開発を効率的に行なうための設定

6.8.1 package.json の編集

package.json を以下のように変更してください。各ライブラリのバージョンは、各自の環境に読み替えてください。

{
  "devDependencies": {
    "@types/node": "^24.5.2",
    "tsx": "^4.20.5",
    "typescript": "^5.9.2"
  }
}
{
  "name": "learn-ts-basics",
  "version": "1.0.0",
  "type": "module",
  "devDependencies": {
    "@types/node": "^24.5.2",
    "tsx": "^4.20.5",
    "typescript": "^5.9.2"
  }
}

6.8.2 tasks.json の新規作成

次のようにプロジェクトフォルダのルートに .vscode/tasks.json を新規作成してください。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Current TypeScript File",
      "type": "shell",
      "command": "npx",
      "args": ["tsx", "${relativeFile}"],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "always",
        "panel": "dedicated",
        "echo": true
      },
      "problemMatcher": []
    }
  ]
}

上記の設定を行うと、VSCode 上で アクティブなTypeScriptファイル を対象に [Ctrl]+[Shift]+[B] を押下するだけで npx tsx コマンドを実行できるようになります。[B] は Build (ビルド) の意味です。

img

6.9 練習

コンソール (標準出力) に Hi, Bob! のような文字列を出力するプログラム (src/prac00a.ts) を作成して、実際に実行してください。

7 Git/GitHub管理

ここまで作成してきたプロジェクトフォルダについてGit管理を有効化し、さらに GitHub に公開していきます。Git / GitHub 基本設定は既に完了しているものとします。未設定の場合はPG1の講義資料を参照して設定してください。

7.1 .gitignore の設定

プロジェクトフォルダのトップ階層に .gitignore を作成して node_modules フォルダを Gitの管理対象外 に設定します。node_modules には (パッケージのインストール状況によっては) 何千ものファイルが含まれるため、必ず .gitignore に含めるようにしてください。

以下のように .gitignore を作成して保存してください。

/node_modules

現状で以下のようなプロジェクトフォルダの構成になっているはずです。

img

以下の手順で、このプロジェクトフォルダを GitHub に Public なリポジトリとして発行してください。

img
img

問題なく発行できれば、以下のようにウェブブラウザからリポジトリが確認できるハズです。

img

あとは、定期的にファイルの変更、ステージング、コミット、プッシュを行なってください。

7.1.1 演習

開発環境の構築は、一度操作しただけでは理解も定着もしないので (授業時間外に) 再度構築してみてください。

ローカル環境 (ローカルリポジトリ) は、エクスプローラから .git を削除すれば完全に消去できます。GitHubリポジトリはウェブブラウザから操作して削除することができます。

7.2 補足： フォーマッタのインストール と おまけ

TypeScript/JavaScript および HTML/CSS の コード整形 (フォーマット) のために Prettier (識別子: esbenp.prettier-vscode) という VSCode の拡張機能をインストールしておいてください。

img

vscode-pets (識別子: tonybaloney.vscode-pets) は、役に立ちませんがおすすめです。ペットの種類や背景は、VCCodeの設定項目の ここから 変更できます。

img

8 モダンTypeScript入門

TypeScript の 開発環境が構築できたので、ここから (本格的には次週の講義から) モダンTypeScript について学んでいきます 。

8.1 コンソールメソッド

コンソールメソッドは console.log("Hello, World!") のように使用するもので 主にデバッグや開発時の情報出力 に利用します。Python の print 関数、C言語の printf 関数 に相当するものと考えてください。

コンソールメソッドには console.log()、console.error()、console.warn()、console.info()、console.debug() などが存在します。これらは、C言語の fprintf(stdout, ...) や fprintf(stderr, ...) のように使い分けます。

実行環境によっては、ログレベル (log, error, warn…) に応じて「色分け」や「装飾付き」で出力されたり、フィルタリング機能 (=特定のレベル以上のメッセージのみを表示する機能) が提供されます。しかし、最初のうちは細かな使い分けは考えずに console.log() だけの使用 (もしくは console.error() との2つの使い分け) で十分です。

例えば、name と priority という2つの変数の値を出力したいときは、以下のように カンマ区切り で記述します (可変長引数としてコンソールメソッドに与えます)。src/prac01.ts というファイルを新規作成して、コードを記述し、実際に実行して結果を確認してください。

// 文字列型 (string type) の変数 name の宣言と初期化
let name: string = "TypeScriptの勉強";
// 数値型 (number type) の変数 priority の宣言と初期化
let priority: number = 3;
console.log(name, priority); // console.log は可変長引数を受け取り可能

(すこし分かりづらいですが) 以下のようにスペースで区切られて name と priority の値が出力されます。

TypeScriptの勉強 3

8.1.1 演習1 (5分)

src/prac01.ts に、次のような Date型 (日付・日時型) の変数 deadline を追加して、コンソールメソッドで出力してください。

// Date型の変数 deadline の宣言と初期化
// 2025年10月2日 14:15 で初期化したつもり
let deadline: Date = new Date(2025, 10, 2, 14, 15);

上記の prac01.ts は、次のようなC言語プログラムに相当します。C言語では 型名 変数名 = 初期値; のように変数宣言しましたが、TypeScriptでは 変数名 : 型名 = 初期値; のようにするので注意してください (順番が逆になることに慣れてください)。

#include <stdio.h>
int main() {
  char name[50] = "TypeScriptの勉強";
  int priority = 3;
  fprintf(stdout, "%s, %d\n", name, priority);
  return 0;
}

8.2 変数宣言キーワード

TypeScript において、変数宣言のキーワードとしては let、const、var が使用できます。このうち、var の使用は推奨されていません (この背景や理由は「ウェブ検索」もしくは「生成AI」で解決してください)。

(プロンプト例)

モダンTypeScriptでは、変数のキーワードとして var の使用は推奨されていない、と聞きました。なぜですか。

また、初期化後、書き換えの予定のない変数 (定数) については const を使用してください。

この科目で扱う範囲のウェブアプリ開発では、9割以上の変数は const で対応可能です。さきほどの prac01.ts においても name と priority は、初期化以降、書き換えられる予定がないので、以下のように記述することが強く推奨されます (モダンTypeScript においてコード品質や可読性を高めるためのガイドラインとなっています)。

const name: string = "TypeScriptの勉強";
const priority: number = 3;
console.log(name, priority);

小テストや課題においても、変更されることがない変数 (定数) については const で宣言してください。let や var による冗長な変数宣言は誤答または減点とします。

8.3 テンプレート文字列

TyepScriptにおける「テンプレート文字列」とは、Pythonにおける f文字列 に相当するものです。バッククォートで囲んで「$マーク」と「波括弧」を組わせて使用します。

テンプレート文字列の使用例を以下に示します。

const name: string = "TypeScriptの勉強";
const priority: number = 3;
console.log(`Todo 1 => ${name}（優先度:${priority}）`); // テンプレート文字列

以下のような出力が得られます。

Todo 1 => TypeScriptの勉強（優先度:3）

Pythonとは異なり、$マークをつけなければいけない点に、十分に注意してください。

8.3.1 演習2 (10分)

8.4 オブジェクトのコンソール出力 (1)

ウェブアプリ開発では 複数の変数をオブジェクトにまとめて扱うこと が非常に多いです。ここでのオブジェクトとは、プログラミング1で「オブジェクト指向プログラミング」を学んだときの「オブジェクト」と同じものです。

ただ、TypeScript (特にフロントエンド開発) では クラス は定義・使用せずに オブジェクトを直接記述してプログラムのなかで使うケース が多いです。その場合、メソッドを持たないプロパティ(属性)のみで構成されるオブジェクトになることが多いです (その意味では、C言語の「構造体」に近いと思います)。

さきほどの prac01.ts は、以下のような オブジェクトリテラル記法 (オブジェクトを直接的に記述する方法) で、以下のように書き換えることができます。

const todo = {
  name: "TypeScriptの勉強", // name = "..." ではない点に要注意
  priority: 3, // priority = "..." ではない点に要注意
};
console.log(`Todo 1 => ${todo.name}（優先度:${todo.priority})`);

オブジェクトリテラル記法では = ではなく : で値を与えること に注意してください (初心者がよく間違える/混乱するところです)。

また、オブジェクトのプロパティ (属性、フィールド) には、第06行目 のようにドット (.) を使ってアクセスができます。

8.5 オブジェクトのコンソール出力 (2)

オブジェクト全体を出力したいとき (オブジェクトの内容確認したいとき) は console.log(todo); のようにします。例えば、上記の todo は以下のように出力されます。

{ name: 'TypeScriptの勉強', priority: 3 }

ただし、オブジェクトが 多数のプロパティを持つとき や 配列を含むとき、console.log() にオブジェクトを与えるだけでは非常に見づらくなります。このようなときは console.log(JSON.stringify(todo, null, 2)); のようにすることで、次のように整形された出力が得られます。

{
  "name": "TypeScriptの勉強",
  "priority": 3
}

ここで、JSON.stringify() は、オブジェクトをJSON文字列 (=JavaScript Object Notation 文字列) に変換するメソッドです。第1引数にオブジェクトを与え、第2引数を null、第3引数を 2 を与えると、上記のように改行とインデント (スペース2文字で字下げ) された文字列を得ることができます。

なお、JSON文字列に変換するとプロパティ (例えば name ) が ダブルクォーテーションで囲まれて出力される など、直接出力した場合と差異があるので注意してください。

8.5.1 定着確認

9 授業時間外学習