前回
今回やったもの
名前付き関数
関数を作るときは function キーワードを使用する。これは他の言語でも同じような形式で、何度か使用したこともあるので大丈夫そう。
function addNumbers (x: number, y: number): number {
return x + y;
}
addNumbers(1, 2);
匿名関数
関数名のない関数で、直接中身を実装することができる。C# でいうところの Func<T> 的なやつかな。
let addNumbers = function (x: number, y: number): number {
return x + y;
}
addNumbers(1, 2);
アロー関数
匿名関数を定義しなくても、そのまま略式形式で処理を書くことができる。これはラムダ式と一緒。
// 匿名関数
let addNumbers1 = function (x: number, y: number): number {
return x + y;
}
// アロー関数（ラムダ式）
let addNumbers2 = (x: number, y: number): number => x + y;
合計値を求める関数
関数の練習として。
function sum(input: number[]): number {
let total: number = 0;
for (let count = 0; count < input.length; count++) {
if(isNaN(input[count])){
continue;
}
total += Number(input[count])
}
return total;
}
let myNum: Array<number> = [1, 2, 3, 4, 5];
console.log(sum(myNum));
パラメータ
インターフェイスだけでなく関数にもパラメータを指定することができる。要は ? で任意パラメータにしたり、代入演算子で予め値を入れておくことができる。
// 必須パラメータ
function addNumbers (x: number, y: number): number {
return x + y;
}
// 省略可能パラメータ
function addNumbers (x: number, y?: number): number {
if (y === undefined) {
return x;
} else {
return x + y;
}
}
// 既定値を持つパラメータ
function addNumbers (x: number, y = 25): number {
return x + y;
}
rest (... 演算子) を使うと複数のパラメータを1つの配列として受け取る事もできるらしい。
let addAllNumbers = (firstNumber: number, ...restOfNumbers: number[]): number => {
let total: number = firstNumber;
for(let counter = 0; counter < restOfNumbers.length; counter++) {
if(isNaN(restOfNumbers[counter])){
continue;
}
total += Number(restOfNumbers[counter]);
}
return total;
}
このようにすると、関数の引数に複数の値を代入して利用することができる。また、「分解オブジェクト」というものをパラメータにすることができるみたい。インターフェイスを引数にして、実引数にオブジェクトパラメータを入れて使う。
interface Message {
text: string;
sender: string;
}
function displayMessage({text, sender}: Message) {
console.log(`Message from ${sender}: ${text}`);
}
displayMessage({sender: 'Christopher', text: 'hello, world'});
演習1
とりあえず MS Learn の演習をやってみる。
// 必須パラメータ
let addThreeNumbers = (x: number, y: number, z: number): number => x + y + z;
console.log(addThreeNumbers(1, 2, 3));
// 省略可能パラメータ
let addThreeNumbers2 = (x: number, y: number, z?: number): number => {
if(z === undefined) {
return x + y;
}
return x + y + z;
}
console.log(addThreeNumbers2(4, 5, 6));
// 既定のパラメータ
let substractThreeNumbers = (x: number, y: number, z: number = 64): number => x - y- z;
console.log(substractThreeNumbers(256, 128));
これで三種類のパラメータを利用した関数の定義ができるようになったかも？
演習2
次は関数を宣言するやつ。関数の型を予め決めておいて、用途に合わせて機能（処理）を変更できる。
// 関数型を定義 type 版
// type calculator = (x: number, y: number) => number;
// インターフェイス版
interface calculator {
(x: number, y: number): number;
}
// 関数型から関数を作る
let addNumbers: calculator = (x: number, y: number): number => x + y;
let substractNumbers: calculator = (x: number, y: number): number => x - y;
console.log(addNumbers(1, 2));
console.log(substractNumbers(1, 2));
// 関数から別の関数を呼び出す
let doCalculation = (operation: "add" | "sub"): calculator => {
if (operation === "add") {
return addNumbers;
} else {
return substractNumbers;
}
}
console.log(doCalculation("add")(1, 2));
console.log(doCalculation("sub")(1, 2));
ちなみに、関数パラメータ名はなんでもいい。
課題
最後に MS Learn の課題問題をやって終了。
function buildArray(items: number, sortOrder: "ascending" | "descending"): number[] {
let randomNumbers: number[] = [];
let nextNumber: number;
for (let counter = 0; counter < items; counter++) {
nextNumber = Math.ceil(Math.random() * (100 - 1));
if (randomNumbers.indexOf(nextNumber) === -1) {
randomNumbers.push(nextNumber);
} else {
counter --;
}
}
console.log("before: " + randomNumbers);
if (sortOrder === "ascending") {
return randomNumbers.sort(sortAscending);
} else {
return randomNumbers.sort(sortDescending);
}
}
type compareFunctionType = (a: number, b: number) => number;
let sortDescending: compareFunctionType = (a, b) => {
if (a > b) {
return -1;
} else if (b > a) {
return 1;
} else {
return 0;
}
}
let sortAscending: compareFunctionType = (a, b) => {
if (a > b) {
return 1;
} else if (b > a) {
return -1;
} else {
return 0;
}
}
let myArray1 = buildArray(10, "ascending");
console.log("after: " + myArray1 + "\n");
let myArray2 = buildArray(10, "descending");
console.log("after: " + myArray2);
実行結果
before: 22,43,98,73,53,35,9,15,21,31 after: 9,15,21,22,31,35,43,53,73,98 before: 69,18,34,92,47,12,1,29,46,5 after: 92,69,47,46,34,29,18,12,5,1
適当な配列を昇順と降順でソートするプログラムができた。
イベントのお知らせ
2022年4月24日（日）に MS Tech Camp #14 を開催します。今回は私「たくのろじぃ」主催で、Blazor を使ったポートフォリオサイト製作と Azure Static Web Apps へのデプロイをやります。 興味がある方は（社会人、学生問わず）ぜひご参加ください！ Youtube での配信ですので、休日はごろごろしながらご覧いただければと思います。もちろん、一緒にやっていただいても結構です！
