TypeScript 入門の記録（５６）プロを目指す人のためのTypeScript入門（４０）第4章「関数」の力試し

2023年6月4日 22:18

前回は、「変数のスコープ」について学習しました。今日は「プロを目指す人のためのTypeScript入門」第4章「関数」のまとめとして、力試しの問題にチャレンジします💪

「関数」の力試し

第４章で TypeScript の関数について学習してきたので、自力で関数を作る課題にチャレンジします。

簡単な関数の練習

第２章の力試しで出題された FizzBuzz 問題の for 文の部分を、関数 getFizzBuzzString() として抜き出します。

// 次のように呼び出して使える関数 getFizzBuzzString() を実装する
for ( let i = 1; i <= 100; i++ ){
    const message = getFizzBuzzString(i);
    console.log(message);
}

// 実装
function getFizzBuzzString( num: number): string {
    if ( num % 3 === 0 && num % 5 === 0){
        return "FizzBuzz";
    } else if ( num % 3 === 0 ){
        return "Fizz";
    } else if ( num % 5 === 0 ){
        return "Buzz";
    }
    return String(num);
};

さらに、「for-of 文で sequence(1, 100) と呼び出して100要素の配列を返却する関数 sequence」を作ってみます。getFizzBuzzStringを改良して、"Fizz", "Buzz", "FizzBuzz" または numberを返却する関数にしてみます。

// 次のように呼び出して使える関数 getFizzBuzzString() を実装する
for ( const i of sequence(1, 100) ){
    const message = getFizzBuzzString(i);
    console.log(message);
}

// 指定範囲の整数の配列を返却する
function sequence( from: number, to: number): number[] {
    let result: number[] = [];
    for (let i = 0; i <= 100; i++){
        result.push(i+1);
    }

    return result;
}

// getFizzBuzzString 改良版
function getFizzBuzzString(num:number): number | "FizzBuzz" | "Fizz" | "Buzz" {
    if ( num % 3 === 0 && num % 5 === 0) {
        return "FizzBuzz";
    } 
    else if ( num % 3 === 0 ) {
        return "Fizz";
    } 
    else if ( num % 5 === 0 ) {
        return "Buzz";
    }
    return num;
};

現在の学習レベルで sequence を実装したのですが、こちらの解説記事を参考に、mapで表現するとかなりスマートにできました。こういうコードがサクッと書けるようになりたい！！！

function sequence2( from: number, to: number): number[] {
    return [...Array(to - from)].map((_,num) => num + 1);
}

コールバック関数の練習

「配列に対する map関数を作ってみる」という練習問題にチャレンジします。

// コールバック関数の練習
function map(array: number[], callback: (value: number) => number) : number[] {
    let result_map : number[] = [];
    for (const element of array ){
        result_map.push(callback(element));
    }
    return result_map;
}

const data_46 = [1, 1, 2, 3, 5, 8, 13];
const result_46 = map(data_46, (x) => x * 10);
console.log(result_46);

更に、コールバック関数をジェネリクスを使って書き換えてみます。

// コールバック関数の練習（ジェネリクスを使う）
function map<T, U>(array: T[], callback: (value: T) => U) {
    const result: U[] = [];
    for (const element of array) {
        result.push(callback(element));
    }
    return result;
}
const data_46 = [1, 1, 2, 3, 5, 8, 13];
const result_46 = map(data_46, (x) => x * 10);
console.log(result_46);

こちらは、サクッと書けなかったので、改めてジェネリクスの復習をしないといけません。map関数の最初のTは、引数の型を表し、２番めの型Uは戻り値の型を表すんですね。ジェネリクスは使うのには慣れているけど、自分で作る機会があまりなかったな～と思いました。

まとめ

TypeScriptの第4章「関数」のまとめとして、力試しの問題にチャレンジしました。手も足も出ないっていうほどでもなかったのは良かったのですが、何をしたいか？をすぐにコードにできないので、まだまだです。さて、今日の学習はここまでにします。この続きは、次の週末の予定です。次はTypeScriptのクラスについて学習します。