タイトル
基礎に戻って配列の処理をやり直したPart1 ChatGPT .length編。
開発環境
"react": "^18.2.0",
"typescript": "^4.9.5",
何故この記事を書こうと思ったのか。
エンジニアとして、調べながらの実装はできて当たり前のスキルです。（全然出来てないんですけどね）
実際に独学を始めた時点でも、「暗記は必要ない」との考えを聞くことが大多数でした。
果たして本当にそうなんだろうか？ 例えば、
let const for () => {} なんかがおおよそ大半のJSエンジニアの方が考えずとも書けるでしょう。
考えずともかける＝暗記だろうと。 また、「暗記無くしてクリエイティブは生まれない」という考えもあるようです。
経験談になるのですが、JSで存在しているメソッドを割と覚えておくと、他の言語でも調べ方なんかで応用が効くため、やはり「基本」は暗記してもいいんじゃないかと思います。
今回からしばらく、ChatGPTを使用して、生成された問題に対しての解決を記事にしたいと思います。
問題の形式
ChatGPTを使用して以下の文言を各毎回投げるとします。
問題自体を自動生成してくれるのでテンプレートだと楽ですね。
「以下のコードの基本的な処理から応用的な処理の問題を4個出して欲しい、
言語 javascript typescript
問題として使用したいメソッド 「 」
こちらから使用するメソッドを指定するからこれで問題出してほしい、特にヒントはいらない、問題だけ4個出して欲しい。
オブジェクトと配列に関してはサンプル程度のを問題と一緒に用意して欲しい。
詰まるか答え合わせが必要になった時はまた送信するからレビューして。」
ここでマイルール。
毎回ただconsole.logだとTSの勉強にならんなぁと考えたので、
関数化までしっかり書いてから実行したいと思います。
まずは今回実行してみたコード一覧。
上記テンプレートで、今回は.lengthを指定してみました。
網羅的な出題だったため、こんな感じで使えるんだと参考になるかなと思います。
この中でつまづいたメソッドを次にまた学ぶというループで、結構身につきそうな感じがしました。。reduceが個人的に苦手。
自分がこの中でつまづいたポイントと一言感想書きました。
問題①
文字列の長さを返す与えられた文字列の長さを返す関数を書いてください。
const sampleString = "Hello, World!";
const lengthCount = (t: string): number => {
const v = t.length;
return v;
};
console.log(lengthCount(sampleString)); // 結果13
.lengthプロパティは、文字列の場合は文字数を返却してくれて、配列の場合は配列内の要素の数を返却してくれる。
問題②
配列内で最も長い文字列を探す与えられた文字列の配列から、最も長い文字列を見つけて返す関数を書いてください。
const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
const findLongStrInArr = (arr: string[]): string => {
const reduceVal = arr.reduce((acc, current) => {
const val = acc.length < current.length ? current : acc;
return val;
}, "");
if (reduceVal === "") {
return "該当の文字列が存在しません";
}
return reduceVal;
};
console.log(findLongStrInArr(fruits)); // 結果 elderberry
出題内容としては意外と2問目から突っ込んだ内容だなぁといった印象...
現場での実装でも割と出てきたreduceなんですが、これに限ってはちょっと難しかった。
acc = 累積変数
current = 各配列の要素が順番に来る（mapなんかと同じ）
第二引数として初期値を設定。
問題③
特定のプロパティを持つオブジェクトの数を数える。オブジェクトの配列が与えられた時、特定のプロパティ（例えばtypeが"fruit"）を持つオブジェクトの数を数える関数を書いてください。
type Items = {
name: string;
type: string;
};
const items = [
{ name: "apple", type: "fruit" },
{ name: "carrot", type: "vegetable" },
{ name: "banana", type: "fruit" },
{ name: "orange", type: "fruit" },
{ name: "cucumber", type: "vegetable" },
];
const filterArray = (base: Items[], typeKeyWord: string): number => {
const filter = base.filter((b) => b.type === typeKeyWord);
return filter.length;
};
console.log(filterArray(items, "fruit")); //結果 3
今回は、type Itemsが出現しました。
最初typeを用意せずにこのような形で書いてしまったのですが
const filterArray = (base: object[], typeKeyWord: string): number => {
引数などでオブジェクトを使用する際は、明示的にtypeを使用してobject内の型を示しましょうということで少しTSに怒られてしまいました。ここで型をしっかり書いてあげていないと、後に書いてある「b.type」のプロパティ指定の箇所で入力補完が効かなくなってしまいます。
警告を無視するのはもうやめたんだ！！！！！！！
問題④
二次元配列の全要素の長さの合計を計算する。二次元配列（文字列の配列の配列）が与えられた時、含まれるすべての文字列の長さの合計を計算する関数を書いてください。
const arrayOfArrays = [
["apple", "banana"],
["cherry", "date"],
["elderberry", "fig"],
];
const countStringArray = (base: string[][]): number => {
const bondingArray = base.map((v) => v.join(""));
const v = bondingArray.reduce((acc, current) => {
return acc + current.length;
}, 0);
return v;
};
console.log(countStringArray(arrayOfArrays)); //結果34
多次元配列ってまだ現場で使ったことなかったな...笑
一応配列の中に配列があるということ。
引数の型としても、(base: string[][])と書いた。 これは、stringを持つ多次元配列ですよ。というのを表している。
今後使う機会が来るのかは不明...笑
ここのreduceは第2問のものと比べてシンプルでした。
join()メソッドでは、各配列内の文字列を結合。（引数が""の場合はシンプルな結合。 /なんかを指定すると結合した文字列の間に/が入ります）
mapでは、各配列に対して処理（今回は文字列の結合）を行い、配列を返却しています。
感想
まだまだ人の役に立てる記事とは思ってないんですが、「人に教えるつもりでインプットは行え！！」という教えを基に書きました！！