ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

### 例外処理
try, catch(e), finallyで書く
以下のスクリプトでは

const f = (arr?:any[]): void => {
    let res = 'Array: '
    for(let i of arr){
        res += String(i) + '\t'
    }
    console.log(res)
}

try {
    f(['ok', 'NG'])
    f([10, 20, 30])
    f()
} catch(e){
    console.log(e.message)
}

“arr is not iterable”

### 例外を発生させる関数

const f = (n:number):[number, Error?] => {
    if (n < 0){
        return [n, Error("negative number")]
    }
    let total = 0
    for(let i = 1; i<= n; i++)
        total += i
    return [total]
}

let[res1, err1] = f(100)
if(err1 == undefined)
    console.log(res1)
else console.log(err1)

let[res2, err2] = f(-100)
if(err2 == undefined)
    console.log(res2)
else console.log(err2)

### Errorをthrowする
throw Error

const f = (n:number):number => {
    if (n < 0){
        throw Error("negative!")
    }
    let total = 0
    for(let i = 1; i<= n; i++)
        total += i
    return total
}

let re1 = f(100)
console.log(re1)
let re2 = f(-100)
console.log(re2)

### ジェネリクス
定義の段階では型を指定せず、利用する場合に特定の型を使う
function 関数 （）引数:戻り値

function getRnd<T>(values: T[ ]): T {
    const r = Math.floor(Math.random() * values.length)
    return values[r]
}

const data1 = [0, 2, 4, 5, 6, 10]
const data2 = ['グー','チョキ','パー']
const data3 = [true, false]

for(let i = 0; i < 10; i++){
    const re1 = getRnd(data1)
    const re2 = getRnd(data2)
    const re3 = getRnd(data3)
    const res = re1 + '(' + typeof(re1) + ')\t'
        + re2 + '(' + typeof(re2) + ')\t'
        + re3 + '(' + typeof(re3) + ')'
    console.log(res)
}

### ジェネレーターと遅延評価
呼び出すごとに新しい値を取り出す関数
function* と　yield(待ち状態)を作ります
nextで次の数字を呼び出す

function* fibo(n:number){
    let n1 = 0
    let n2 = 1
    for(let i = 0; i <= n; i++){
        yield n1
        let n3 = n1 + n2
        n1 = n2
        n2 = n3
    }
}

const n = 10
let fb = fibo(n)
for(let i = 0; i <= n + 3; i++){
    let ob = fb.next()
    console.log(ob.value)
}

### 非同期処理とpromise
処理を開始すると、待ち続けることなく次の処理に進んでいく
promiseは事後処理を呼び出して必要な作業を行う

function 関数(引数): Promise {
	return new Promise ((関数) => {


		関数()
	})
}

const f = (n:number, d:number): Promise<number> => {
    console.log("start:" + n)
    return new Promise((f) => {
        let total = 0
        for(let i = 1; i <= n; i++)
            total += i
        setTimeout(() => {
            f(total)
        }, d)
    })
}

const cb = (n:number) => {
    console.log("result:" + n)
}

f(10, 300).then(cb)
f(100, 200).then(cb)
f(1000, 100).then(cb)

プロミスを理解しないといけないことはわかった

### 無名関数
– 関数名がないもの

const f = function(name:string):void {
    console.log("hello, " + name)
}

f("taro")
f("hanako")

### アロー関数
(引数): 戻り値 => 実行する処理

const f = (name:string):void => {
    console.log("hello, " + name)
}

console.log(typeof(f)) とすると “function” がreturnとなる

### 内部関数
関数の中でしか使えない関数

const f = (n:number)=> {
    const inF = (n:number):void => {
        console.log("value:" + n)
    }
    let total = 0
    for (let i = 1; i<= n; i++){
        total += i
        inF(total)
    }
}
f(10)

### 引数に関数を使う

const func = (n:number, f:Function):void => {
    let res = f(n)
    console.log("Result:" + res)
}

const double = (n:number) => n * 2
const total = (n:number) => {
    let total = 0
    for (let i = 1; i <= n; i++)
        total += i
    return total
}

const num = 100
func(num, double)
func(num, total)

### 数値とテキストの関数を引数にする
charAtは「●文字目」を得るもの

const func = (n:number, f:(n:number)=>number|string):void => {
    let res = f(n)
    console.log("Result:" + res)
}

const double = (n:number) => n * 2
const word = (n:number):string => {
    const w = ['〇','一','二','三','四','五','六','七','八','九']
    const s = String(n)
    let res:String[] = []
    for(let i = 0; i< s.length; i++){
        let c = s.charAt(i)
        res.push(w[Number(c)])
    }
    return res.join('')
}

const num = 1230
func(num, double)
func(num, word)

### 戻り値に関数を使う

const f = (tax:number):(n:number)=> number => {
    return (n:number)=> n * (1 +tax)
}

const f1 = f(0.1)
const f2 = f(0.8)

const price = 123400
console.log(f1(price))
console.log(f2(price))

### クロージャー
定義された環境を保ち、その中で動く関数をクロージャという

const f = (n:number):() => number => {
    let count:number = 0
    return ():number => {
        count += n
        return count
    }
}

const f1 = f(1)
const f2 = f(2)
const f3 = f(3)

for(let i = 0; i < 10; i++){
    console.log(f1() + '\t' + f2() + '\t' + f3())
}

ちょっと難しくなってきた

function hello(name:string) {
    console.log("Hello " + name + "!")
}

hello("taro")
hello("hanako")

引数に型を指定する

### 変数のスコープ
varは全体で利用可、letは宣言した構文内
– var

function total(max:number){
    var num = 0
    for(var i = 1; i < max; i++){
        num += i
    }
    console.log("total:" + (num + i))
}

total(100)
total(200)
total(300)

– letにするとエラーになる

let num = 0
    for(let i = 1; i < max; i++){
        num += i
    }
    console.log("total:" + (num + i))

Cannot find name ‘i’.

### 戻り値
– 関数の処理実行後に返される値を戻り値という
– 何も戻さない場合はvoidを指定する

function total(max:number):number{
    let num = 0
    for(let i = 1; i < max; i++){
        num += i
    }
    return num
}

function printTotal(n:number):void {
    let res = total(n)
    console.log(n + "までの合計:" + res)
}

printTotal(123)
printTotal(1234)
printTotal(12345)

### 複数の値を戻す
タプルを使って複数の値の型を記述する

function calcTax(price:number):[price:number, tax:number]{
    const p = price / 1.1
    const t = price - p
    return [p, t]  
}

function printTax(price:number): void {
    const [pr, tx] = calcTax(price)
    console.log(price + "の本体価格:" + pr + ", 税額:" + tx)
}

printTax(2750)
printTax(3080)

### 引数に条件型

function printPerson(id:number | string, name:string, age:number):void{
    switch(typeof(id)){
        case 'string':
        console.log('your id is "' + id + '".')
        break
        case 'number':
        console.log("No," + id)
        break
        default:
        console.log('wrong id ...')
    }
    console.log('Name:' + name + '(' + age + ')')
}

printPerson(10, "taro", 39)
printPerson("flower", "hanako", 20)

### オプション引数の関数
オプション引数はnullを許容する

function printPerson(name?:string, age?:number):void{
    const nameval = name ? name : "no-name"
    const ageval = age ? String(age) : '-'
    console.log('Name:' + nameval + '(' + ageval + ')')
}

printPerson("taro", 39)
printPerson("hanako")
printPerson()

– 引数に初期値を入れる方法も一般的

### 可変長引数

const f = (...data:number[]):number => {
    let total = 0
    for (let i of data){
        total += i
    }
    return total
}

console.log(f(1,2,3,4,5))
console.log(f(10,20,30,40,50,60,70))
console.log(f(123,456,67,89))

なるほど、この数時間でプログラミングの理解がかなり進んだ

### 配列
– 配列の作り方は[valu1, value2, …] と new Array()がある

const data = [10, 20, 30]
const total = data[0] + data[1] + data[2]
console.log('total:' + total)

– 変更不可の配列

let data2:readonly number[] = [10, 20, 30]
data2[0] = 100

Index signature in type ‘readonly number[]’ only permits reading.

– 配列の場合は for(let variables of value) を使う

const data = [100, 98, 76, 59, 87]
let total = 0
for (let item of data){
    total += item
}

const av = total / data.length
console.log('total:' + total)
console.log('average:' + av)

– 配列の要素の操作
L 最初に追加
data.unshift(value)
L 最初を削除
data.shift()
L 最後に追加
data.push(value)
L 最後を削除
data.pop()

let data:any = [10, 20, 30, 40, 50]

console.log(data)
for(let i = 0; i < 5; i++){
    data.pop()
    data.unshift('⭐️')
    console.log(data)
}

### タプル
変数の型を指定することで、異なる型も入れることができる

let me:[string, number]
let you:[string, number]

me = ['taro', 39]
you = ['hanako', 'hanako@gmail.com']

### enum
{}に用意した値しか設定できない。それ以外の値は使えない

enum janken {goo, choki, paa}

const you = janken.goo

switch(you) {
    case janken.goo:
    console.log('あいこ')
    break
    case janken.choki:
    console.log('win')
    break
    case janken.paa:
    console.log('lose')
    break    
}

### 型エイリアス
型に別名を入れることでタプルをわかりやすくする

type name = string
type age = number

let me:[name, age]
let you:[age, name]

me = ['taro', 39]
you = [29, 'hanako']

console.log(me)
console.log(you)

typeで型を指定

type name = string
type mail = string
type age = number
type person = [name, mail, age]

const taro:person = ['taro', 'taro@gmail.com', 39]
const hanako:person = ['hanako', 'hanako@gmail.com', 24]
const sachiko:person = ['sachiko', 'sachiko@gmail.com', 17]

const data:person[] = [taro, hanako, sachiko]

for(let item of data){
    console.log(item)
}

リテラル型
L リテラルとは直接ソースコードに書かれる値
L 指定した値しかない型

type hello = "hello"
type by = "bye"
type name = string

const taro:name = "taro"
const msg1:hello = "hello"
console.log(msg1 + ", " + taro)
const hanako:name = "hanako"
const msg2:by = "bye"
console.log(msg2 + ", " + hanako)

conditional types
L “|”を使うことで、enumと同じような使い方ができる

type msg = "hello" | "bye"
type name = string

const taro:name = "taro"
const msg1:msg = "hello"
console.log(msg1 + ", " + taro)
const hanako:name = "hanako"
const msg2:msg = "bye"
console.log(msg2 + ", " + hanako)

### 型チェック
– typeofで型チェックを行う

type id = number | string

const idA:id = "taro"
const idB:id = 123

const tp = idA

switch(typeof(tp)){
    case "number":
    console.log(tp + " is number")
    break
    case "string":
    console.log(tp + " is string")
    break
    default:
    console.log("type is undefined")
}

### ユーティリティ型
性質を付加する特殊な型
Readonly<●●>は総称型と呼ばれる機能

type data = [string, number]
type ReqData = Readonly<data>

const x:data = ["taro", 39]
const y:ReqData = ["hanako", 28]

x[1] = 28
y[1] = 17

Cannot assign to ‘1’ because it is a read-only property.

### シンボル
全ての値がユニークであることを保証される型
variable = Symbol(value)

const a1:string = "ok"
const b1:string = "ok"

console.log(a1 == b1)
console.log(a1 === b1)

const a2:unique symbol = Symbol("ok")
const b2:unique symbol = Symbol("ok")

console.log(a2 == b2)
console.log(a2 === b2)

This condition will always return ‘false’ since the types ‘typeof a2’ and ‘typeof b2’ have no overlap.
This condition will always return ‘false’ since the types ‘unique symbol’ and ‘string’ have no overlap.

### nullかも知れない値
値がないことを許容するために”?”をつける
絶対にnullではない場合、”!”をつける

type data = [name:string, age?:number]

const taro:data = ["taro", 39]
const hanako:data = ["hanako"]
console.log(taro)
console.log(hanako)

大分味が出てきた

– number, string, boolean, privateがある
– 定数は最初の値を変更できない、変数は変更できる
– varはプルグラム全体、letは宣言された構文の中のみ

let x:number
x = 123
console.log(x)
x = "ok"
console.log(x)

Type ‘string’ is not assignable to type ‘number’. でエラーになる

– let xはlet x:anyと同じでこれであれば型が異なってもOK
– null, undefined, NaNなどの特殊な値も

### 型変換

let x = 123
console.log(x)
let y = "456"
x = +y // x = Number(y)
console.log(x)

テキストを数値にするには、+かNumber()

### 演算

let price = 12500
let withTax = price * 1.1
let woTax = price / 1.1
console.log("price:" + price)
console.log("税別:" + withTax)
console.log("税込" + woTax)

### 制御構文

const num = 12345
const result = num % 2
if (result == 0){ 
    console.log(num + ":偶数")
} else {
    console.log(num + ":奇数")
}

== は等しい、===は型も等しい

const month = 7

if(month <= 0)
    console.log("不明")
else if(month < 3)
    console.log(month + ":冬")
else if(month < 6)
    console.log(month + ":春")
else if(month < 9)
    console.log(month + ":夏")
else if(month < 12)
    console.log(month + ":秋")
else if(month < 13)
    console.log(month + ":冬")
else
    console.log("不明")


三項演算子

const num = 12345

const result = num % 2 === 0 ? '偶数' : '奇数'
console.log(num + ' is ' + result)

switch

const month = 7

switch(month) {
    case 1: console.log(month + " winter"); break
    case 2: console.log(month + " winter"); break
    case 3: console.log(month + " spring"); break
    case 4: console.log(month + " spring"); break
    case 5: console.log(month + " spring"); break
    case 6: console.log(month + " summer"); break
    case 7: console.log(month + " summer"); break
    case 8: console.log(month + " summer"); break
    case 10: console.log(month + " fall"); break
    case 11: console.log(month + " fall"); break
    case 12: console.log(month + " winter"); break
    default: console.log("不明")
}

do while

const max = 100
let total = 0
let count = 0

while(count <= max) {
    total += count++
}
console.log(max + " sum is " + total)

for

const max = 100
let total = 0

for(let i = 1; i <= max; i++){
    total += i
}
console.log("total is " + total)

for(let var in value) と　for(let var of value) がある

うむ、ここはどの言語でもだいたい同じ

$ npm init -y
$ npm install typescript @types/node –save-dev
$ tsc –init
L tsconfig.jsonはtypescriptに関する設定情報ファイル

– webpack設定ファイルの作成
$ npm install webpack ts-loader @webpack-cli/generators
$ npx webpack-cli init
Typescript, Y, Y, Y, none, Y, npm, Y, Y, Y, Y

package.config.json

host: "192.168.34.10",

index.htmlとindex.tsを書き換える
$ npm run build
L distフォルダが作成される
$ npm run serve

なるほど、なかなかやりおる

$ npm install typescript
$ tsc –V
Version 4.4.3

sample.ts

console.log("Welcome to TypeScript!")

$ tsc sample.ts

console.log("Welcome to TypeScript!");

webでtsを使用する

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	<script src="sample.js"></script>
</head>
<body>
	<h1 class="bg-primary text-white p-2">Sample page</h1>
	<div class="container py-2">
		<p class="h5" id="target">wait...</p>
	</div>	
</body>
</html>

sample.ts

window.addEventListener('load', (event) => {
	let p = document.querySelector('#target')
	p.textContent = "This is message by typescript."
})

なるほど

型指定

var onigiri: string = 'onigiri',
	calories: number = 200;

function todaysMeal(food: string, energy: number): string {
	return `my ${food} has ${energy} calories`
}

todaysMeal(onigiri, calories)

インターフェイス
L オブジェクトがある構造に合っているかの型チェックに使用

interface Person {
	name: string;
	age: number;
}

function intro(person:Person): string {
	return `My name is ${person.name}. I am ${person.age}`
}

var ken = {
	name: 'Ken',
	age: 20
}

intro(ken)

クラス

class Menu {
	items: Array<string>;
	pages: number

	constructor(item_list: Array<string>, total_pages: number){
		this.items = item_list;
		this.pages = total_pages;
	}

	list(): void {
		console.log("out menu for today:");
		for (var i=0; i<this.items.length; i++){
		console.log(this.items[i]);
		}
	}
}

var sundayMenu = new Menu(["pancakes","waffles","orange juice"], 1);

sundayMenu.list();

$ node hello.js
out menu for today:
pancakes
waffles
orange juice

なるほど、型付言語だとGoと近いな