プログラミング〈新〉作法 9. JavaScript: web アプリケーション開発
759 Views
March 10, 25
スライド概要
- JavaScriptとは
- webの仕組み
- JavaScriptの基本
- TypeScript
- JavaScrip/TypeScript のコーディングパターン
機械学習や音声認識に関する書籍を執筆しています。
関連スライド
各ページのテキスト
プログラミング 新 作法 これからプログラムを書く のために ～ 9. JavaScript: web とは webの仕組み JavaScriptの基本 アプリケーション開発 人 〉 〈 ～ JavaScript TypeScript JavaScrip/TypeScript のコーディングパターン 1
とは 9.1 JavaScript JavaScript の歴史 のクライアント側での処 理のためにブラウザで動く⾔ 語として開発された ‧サーバ側での実⾏ web 標準化 ECMAScript 5 ‧strictモード ブラウザ毎の 規格の乱⽴ 1995 Ajax ‧UIの作成 ECMAScript 6 (ES2015) ‧クラス構⽂ ‧トランスパイラ HTML5 2009 React 2015 TypeScript ‧JSにコンパイルできる AltJS が流⾏ 2020 2
とは 9.1 JavaScript の歴史 1995年頃に，ブラウザ上で動作するスクリプト言語として登場 2009年にサーバ側の動作環境として Node.js が登場 2015年に ECMAScript 6 として標準化される 2020年以降，新しいプログラミングパラダイムに基づいた言語設計で， JavaScript に変換できる AltJS がいくつか発表される 例）TypeScript : Java に近いクラスの概念や静的型付けの機能を持つ JavaScript 3
の仕組み 9.2 web の基本的な構成要素は HTML, CSS, JavaScript ベースとなる技術はハイパーテキスト 電子文書間にリンクを設定する機構 web Item 1-1 Title ‧section 1 ‧ This is long text generated by the authority. Do not click this. * item 1-1 * item 1-2 section 2 * item 2-1 next document This is another document. Item 1-2 access Item 2-1 ‧FAQ * page 1 * page 2 4
の仕組み
9.2 web
HTML (HyperText Markup Language)
電子文書間にリンクを設定する機能と，電子文書に見出し・段落・箇条書
き・図表の表示などの構成を与える機能を，マークアップによって実現
HTML
ファイル
<!DOCTYPE html>
Title
<html lang="ja">
ヘッダ部
付加情報
<head>
<meta charset="UTF-8">
http://www.example,com/index.html
<title>Title</title>
</head>
<body>
<h1>Title</h1>
<ul>
箇条書き
<li>section 1
<ul>
ブラウザで表⽰
Title
‧section 1
<li> <a href="..."> item 1-1 </a> </li>
本体部
構造化⽂書
<li> <a href="..."> item 1-2 </a> </li>
</ul>
</li>
‧
* item 1-1
* item 1-2
section 2
* item 2-1
<li>section 2
<ul>
<li> <a href="..."> item 2-1 </a> </li>
</ul>
</li>
</ul>
ハイパーリンク
</body>
</html>
5
の仕組み 9.2 web の主要なタグ HTML タグ <html> <head> <body> <h1> - <h6> <div> <a> <ul> <li> <img> <table> 説明 HTML文書のルート要素 メタデータを含む文書のヘッダ部分 文書の本文 見出し（レベル1-6） ブロックレベルの範囲指定 ハイパーリンク 順序なしリスト リストの各項目 画像 表 主要な属性 lang : 文書の言語（日本語は ja ） class , id : CSS href : や JavaScript 用 リンク先の URL - 順序つきリストでの番号 src : 画像の URL, alt : 代替テキスト border : ボーダーの幅 value : 6
の仕組み
9.2 web
CSS (Cascading Style Sheets)
文書の見た目をセレクタと プロパティ:値 の組み合わせで指定する
フォントの種類や大きさ・色・背景・余白・レイアウトなどを指定
HTML
h1 {
color: red;
font-size: 24px;
}
指定する内容
色
フォント
レイアウト
プロパティの例
color , background-color
font-family , font-size , font-weight , font-style
width , height , margin , padding , border
7
の仕組み 9.2 web クライアント側での処理 JavaScript による動的な処理 DOM (Document Object Model) プログラム中のオブジェクトと HTML の要素を結びつける仕組み HTML で記述された web ページを木構造として表現し，その要素に対し て処理を記述する 8
の仕組み
9.2 web
入力された数値に対して平方根を計算して表示する web ページ
<input type="number" id="num" />
<input type="button" value="Calc" onclick="clickBtn()" />
<p><span class="output" id="result"></span></p>
<script>
function clickBtn() {
const num = parseFloat(document.getElementById("num").value);
document.getElementById("result").textContent =
"Square root of " + num + " is " + Math.sqrt(num);
}
</script>
9
の仕組み 9.2 web codepen.io での動作確認 10
の仕組み 9.2 web サーバ側での処理 : 静的な web システム ユーザのリクエストに対して，事前に用意された HTML ファイルを返す 事前にすべてのページを作成しておく必要がある HTTP request HTTP response ユーザ クライアント （web ブラウザ） HTML HTML CSS Java Script web サーバ CSS Java Script ファイルサーバ 11
の仕組み 9.2 web サーバ側での処理 : 動的な web システム ユーザのリクエストに応じて，プログラムで HTML 文書を生成してユーザに 返送する リクエストの内容は，URL の後に ? で始まるクエリ文字列で送信 例） http://example.com/page?name=John&age=20 サーバプログラムの主流は Perl から Java, PHP を経て Node.js に至る 主流の開発フレームワーク サーバ側 : Express クライアント側 : React 12
の仕組み 9.2 web サーバ側での処理 : 動的な web システム HTTP request http:// ... ?id=1001 HTTP response ユーザ クライアント （web ブラウザ） HTML CSS Java Script CSS web サーバ Java Script ファイルサーバ HTML サーバプログラム 検索 data データベース 13
の仕組み 9.2 web サーバ側での処理 : SPA (Single Page Application) 最初にクライアント側にページの構造を表す HTML が送られる 表示内容はクライアント側が JavaScript によってサーバと通信することで， 必要な部分のみ生成する クライアント側とサーバ側の通信方法 Ajax (Asynchronous JavaScript and XML) web socket 14
の仕組み 9.2 web サーバ側での処理 : SPA HTML HTTP request アプリケーション フレームワーク HTTP response HTML CSS Ajax, web socket Java Script などの⾮同期リクエスト JSON Ajax, web socket などの⾮同期リクエスト JSON クライアント （web ブラウザ） web サーバ サーバプログラム 検索 data データベース 15
の基本 9.3 JavaScript 変数の宣言 イミュータブル let : ミュータブル スコープはブロックスコープ 動的型付けなので，代入される値によって変数の型が決まる const : const tax = 0.1; let price = 200; 注） var を使って変数を宣言すると，関数スコープまたはグローバルスコー プになるが， var は古い文法なので使用は推奨されていない 16
の基本 9.3 JavaScript 入出力 出力 : console オブジェクトの log() 関数 ブラウザのデバッグコンソールに出力される Node.js ではターミナルに出力される 入力 : prompt() 関数 ブラウザで入力欄を持つダイアログボックスをポップアップ表示して， ユーザが入力した値を返す Node.js では使えない 正の整数を入力してください。"); 入力された値は ${x} です。`); const x = prompt(" console.log(` 17
の基本 9.3 JavaScript 制御構造 による条件分岐 for , while , do-while による繰り返し break , continue によるループの制御 if , else if , else 18
の基本
9.3 JavaScript
正の数値が入力されるまで繰り返す例
let x;
while (true) {
let input = prompt('Enter positive number: ');
if (input === null) {
// ===
console.log('
');
break;
}
x = parseFloat(input);
if (isNaN(x)) {
console.log(`${input}
`);
continue;
} else if (x <= 0) {
console.log(`${input}
`);
continue;
}
console.log(x);
break;
}
は型変換を行わない比較
入力がキャンセルされました
は数値に変換できません。
は正の数値ではありません。
19
の基本 9.3 JavaScript 関数 キーワードを使って定義する デフォルト引数の設定も可能 無名関数 アロー関数という形式を用いて，仮引数並びを丸括弧で囲った後に => を書き，その後に関数の処理を書く function function add(a, b=0) { return a + b; } // 通常の関数定義 const calcPrice = (a, b=1.1) => a * b; // アロー関数による無名関数の定義 20
の基本
9.3 JavaScript
クラス定義
キーワードを使って定義する
コンストラクタは constructor メソッドで定義する
toString() , valueOf() など特定の状況で自動的に呼び出されるメソッド
がある
継承は extends キーワードを使って行う
オブジェクトリテラル
クラス定義なしにオブジェクトを生成する方法
例） const s2 = {name: "Hiro", score: 85};
class
21
の基本 9.3 JavaScript クラス定義の例 class Student { constructor(name, score) { this.name = name; this.score = score; } toString() { return `Student{name=${this.name}, score=${this.score}}`; } } const s1 = new Student("Masa", 70); console.log(s1); // Student{name=Masa, score=70} 22
の基本 9.3 JavaScript JSON (JavaScript Object Notation) のオブジェクトを表現するための軽量なデータ交換フォーマット JSON の構文規則 全体は1つのオブジェクトで， {} で囲む。オブジェクトの中身はキーと 値のペアで表現する キーと値は : で区切り，キーと値のペアは , で区切る キーは文字列に限定され，ダブルクォートで囲む 値は文字列，数値，真偽値，オブジェクト，配列， null のいずれか 配列は [] で囲み，要素は , で区切る JavaScript 23
の基本
9.3 JavaScript
文字列
JSON
JSON.parse()
JSON
文字列
メソッド
JSON.stringify()
メソッド
文字列をオブジェクトに変換
// JSON
const jsonStr = '{"name": "Masa", "score": 70}';
const obj = JSON.parse(jsonStr);
24
9.4 TypeScript にクラスの概念や型付けの機能を持ち込んだプログラミング言語 JavaScript の上位互換で，トランスパイラによって JavaScript に変換される 静的型付け言語であり，変数や関数の型を明示的に指定することで，コードの安 全性と可読性を向上させることができる 型ヒント，型推論，型エイリアスといった機能を用いて柔軟に型を扱うことがで きる JavaScript 25
9.4 TypeScript 型ヒントと型推論 型ヒント : 変数宣言時に「 : 型名 」という形式で型を明示的に指定すること ができる 型推論 : コンパイラが変数の初期化式から型を推論する機能 型ヒントを用いた変数宣言 // let name: string = "Masa"; 26
9.4 TypeScript
型エイリアス
既存の型に新しい名前をつける機能
型の別名を定義
//
type CompanyName = string;
const name: CompanyName = "Kyoto Corporation";
複数の型を組み合わせて型を定義
//
type User = {
id: number;
userName: string;
};
const u1: User = {id: 1, userName: "Masa"};
27
9.4 TypeScript
型
型を縦棒 | で区切って並べることで，複数の型のいずれかをとりうる型
例） string | number は，文字列または数値のいずれかの型
Union
ユーザからの入力を処理
型推論を使えば
//
//
const userName = prompt("Input name:");
const userName: string | null = prompt("Input name:");
if (userName !== null) {
console.log(`Hello, ${userName}`);
} else {
console.log("Canceled");
}
でも可
28
9.4 TypeScript
タグ付きUnion型
Union型の各部分型に共通のプロパティを持たせることで型の安全性を高める
type Circle = {type:"circle"; radius:number};
type Rect = {type:"rect"; width:number; height:number};
type Shape = Circle | Rect;
function getArea(shape: Shape): number {
switch (shape.type) {
case "circle":
return Math.PI * shape.radius **2;
case "rect":
return shape.width * shape.height;
}
}
let a: Shape = {type:"rect", width:10, height:5};
console.log(getArea(a))
// 50
29
9.4 TypeScript 型の互換性 名前的型システム : Java などが採用 型の互換性は型の名前とその継承関係によって決まる 例）Java で class B extends A としたとき， A 型の変数に B 型のイ ンスタンスを代入することができる -構造的部分型 : TypeScript の考え方 型の互換性は，型の名前ではなく，その構造によって決まる 例） {id: string; permission: string} 型と {id: string} 型は，前 者が後者のすべてのプロパティを持っているため，互換性があるとみな される 30
9.4 TypeScript
構造的部分型の例
const adminUser: {id: string; permission: string} = {
id: "Yamada",
permission: "admin",
};
const user: {id: string} = adminUser;
console.log(`
ID: ${user.id}
`);
ユーザ
です。
//
ユーザID: Yamada です。
31
9.5 JavaScript/TypeScript のコーディングパターン の利用 JavaScript から web API を呼び出す手順 fetch() で HTTP リクエストを送信し，レスポンスを取得する then() メソッドで非同期処理の完了後に実行する処理を記述する catch() メソッドでエラー処理を記述する web API 32
9.5 JavaScript/TypeScript
web API
のコーディングパターン
の利用 : 気象庁の web API から京都府の気象情報を取得
const url = 'https://www.jma.go.jp/bosai/forecast/data/overview_forecast/260000.json';
非同期処理の呼び出し
呼び出し成功
エラーコードが返ってきた場合
接続エラー: ' + response.statusText);
// JSONに変換し，次の then へ
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('
});
//
//
//
呼び出し失敗
データが取得できません:', error);
//
33
9.5 JavaScript/TypeScript のコーディングパターン 生成AIを用いたバックエンドのコーディング web API はサーバ側（バックエンド）とクライアント側（フロントエンド） の両方で利用可能。 サーバ側で API を呼び出すと、API キーをクライアントに公開する必要がな い イントラネット経由でバックエンドを利用すると、アクセス管理が容易でセ キュリティ向上につながる Node.js のフレームワーク Express を使うと、HTTP GET リクエストの処理 を記述できる EJS (Embedded JavaScript) を用いると、HTML 内に JavaScript を埋め込ん で動的なページを作成可能 34
9.5 JavaScript/TypeScript
のコーディングパターン
サーバ側のコーディング例 Listing 9.3: 生成AI (LLM) の呼び出し
async function completion(forecast) {
const completion = await openai.chat.completions.create({
messages: [{
role: "system",
content: prompt_for_comment + forecast
}],
model: "gpt-4o",
});
return completion.choices[0].message.content;
}
35
9.5 JavaScript/TypeScript
のコーディングパターン
サーバ側のコーディング例 : 画像生成の呼び出し
async function genarateImage(keywords) {
const imageResponse = await openai.images.generate({
model: "dall-e-3",
prompt: prompt_for_image + keywords,
n: 1,
size: "1024x1024",
});
return imageResponse.data[0].url;
};
36
9.5 JavaScript/TypeScript EJS テンプレートの例 のコーディングパターン <!DOCTYPE html> <html> <head> <title> </title> </head> <body> <p> : <%= forecast %></p> <p> : <%= comment %></p> <p> : <img src="<%= image %>" width="300" /></p> </body> </html> 今日の天気 予報 コメント 画像 37
9.5 JavaScript/TypeScript 実行例 のコーディングパターン 38
9.5 JavaScript/TypeScript のコーディングパターン 生成AIを用いたフロントエンドのコーディング React React はコンポーネント単位で UI を構築し、HTML・CSS・JavaScript を統合できる State とイベントハンドリングにより、表示と JavaScript の変数が同期され る JSX (JavaScript XML) を使うことで、HTML・CSS・JavaScript を混在させて 記述できる 39
9.5 JavaScript/TypeScript
のコーディングパターン
ローカルLLMを用いたフロントエンドのコーディング例 Listing 9.5 : 生成AI (LLM)
の呼び出し
try {
const session = await window.ai.createTextSession();
const result = await session.prompt(prompt);
setAdvice(result);
} catch (error) {
console.error("Error generating advice:", error);
setAdvice("
");
}
アドバイスの生成中にエラーが発生しました。
40
9.5 JavaScript/TypeScript 実行例 のコーディングパターン React App http://localhost:3000/ 41
9.6 まとめ は web アプリケーション開発の中心的な言語であり，その動的かつ弱 い型付けの特性からプロトタイピングに適している JavaScript のサーバサイドでの実行環境 Node.js JavaScript の発展型 TypeScript 生成AI を活用した web アプリケーションの開発においてもこれらの知識は重要 JavaScript 42