タイトル

基礎に戻って配列の処理をやり直したPart2　ChatGPT .slice編。

開発環境

"react": "^18.2.0",
"typescript": "^4.9.5",

何故この記事を書こうと思ったのか。

前回の記事を参照ください。
https://qiita.com/nuhaha_2023/items/c1f7bb9796b08af60a5b

問題の形式

ChatGPTを使用して以下の文言を各毎回投げるとします。
問題自体を自動生成してくれるのでテンプレートだと楽ですね。

「以下のコードの基本的な処理から応用的な処理の問題を4個出して欲しい、
言語　javascript typescript
問題として使用したいメソッド　「　　　」
こちらから使用するメソッドを指定するからこれで問題出してほしい、特にヒントはいらない、問題だけ4個出して欲しい。
オブジェクトと配列に関してはサンプル程度のを問題と一緒に用意して欲しい。
詰まるか答え合わせが必要になった時はまた送信するからレビューして。」

ここでマイルール。

毎回ただconsole.logだとTSの勉強にならんなぁと考えたので、
関数化までしっかり書いてから実行したいと思います。

まずは今回実行してみたコード一覧。

上記テンプレートで、今回は.sliceを指定してみました。
網羅的な出題だったため、こんな感じで使えるんだと参考になるかなと思います。

自分がこの中でつまづいたポイントと一言感想書きました。

問題①

与えられた配列から、指定された範囲の要素を抽出して新しい配列を作成する関数を書いてください。

  const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const sliceMaker = (
    target: string | string[] | number[],
    start: number,
    end: number = target.length
  ) => {
    return target.slice(start, end);
  };
   console.log(sliceMaker(numbers, 0, 4)); //結果: [0, 1, 2, 3] 開始index[0]〜終了index[4]まで返却
// -------------sample-----------------
  console.log(sliceMaker(numbers, 0)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  console.log(numbers.slice(0)); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]開始index[0]のため全部返却
  console.log(numbers.slice(1)); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]開始index[1]のため0が消える
  console.log(numbers.slice(-1)); //[10] 開始indexが最後のindexとなるため、[10]が返却される
  console.log(numbers.slice(numbers.length)); //[] 開始indexが指定した配列のindex数（11）となり、配列の末尾を超えているため該当なしとして、空の配列の[]が返却される

まずは第一問として、配列のサンプルの配列であるnumbersを用意。
関数化したsliseMakerの関数では、ターゲットとなる配列
開始indexと終了indexを指定できるようになっています。

若干とっつきづらいsliceについてのこと、

slice()メソッドは配列の一部を浅くコピーして新しい配列を作るために用いられ、元の配列を変更しません。負のインデックスを使用することで配列の末尾からの要素を簡単に取得でき、startとendの引数によって抽出する範囲を柔軟に指定できるのが特徴です。

sliceの中で、第一引数は開始index, 第二引数は終了のindexとなっている。
終了indexが未入力の場合でも実行可能（引数が１個の場合）　この際は、開始indexとして扱われる。

問題②

文字列の部分文字列を抽出する。与えられた文字列から、指定された範囲の部分文字列を抽出する関数を書いてください

const text = "Hello, world!";
const sliceMaker = (
    target: string | string[] | number[],
    start: number,
    end: number = target.length
  ) => {
    return target.slice(start, end);
  };
console..log(sliceMaker(text, 0, 3)); // 結果　Hel

配列のindexとしても使用可能ですが、lengthのように文字列を直接取得することも可能。
Hello, worldの開始位置0がH、終了位置が3で、lとなるため結果はHelとなりました。

問題③

配列の末尾の要素を除外する。与えられた配列から、最後のN個の要素を除外した新しい配列を作成する関数を書いてください。

  const fruits = ["apple", "banana", "cherry", "date", "elderberry"];
  const exclusionLastIndex = (target: string[]): string[] => {
    const v = target.slice(0, -1);
    return v;
  };
  console.log(exclusionLastIndex(fruits));　//結果　['apple', 'banana', 'cherry', 'date']

開始indexは0〜終了indexまでを指定。
この場合は、-1に設定した値の前までが抜き取られるため、関数の結果としては"elderberry"が削除された配列が返却される。

sliceメソッドは第二引数の終了設定にちょっと慣れない癖を感じる。

slice() メソッドの第二引数（end引数）は、抽出する新しい配列に含める範囲の終端を指定しますが、この終端の値自体は※含まれません※。つまり、slice(start, end)を実行した場合、startインデックスの要素からendインデックスの直前の要素までが抽出されます。

今はメリットが感じられてないけれど多分pagenationの実装とかしてたらそのうちわかるようになるんだろうな。

問題④

配列の先頭の要素を除外する与えられた配列から、最初のN個の要素を除外した新しい配列を作成する関数を書いてください

  const colors = ["red", "green", "blue", "yellow", "purple"];
  const exclusionFirstIndex = (target: string[]): string[] => {
    const v = target.slice(1, target.length);
    return v;
  };
  console.log(exclusionFirstIndex(colors)); //結果　['green', 'blue', 'yellow', 'purple']

あくまでも先頭を除外するものです。先頭はindex 0　のため
開始をindex[1]として、最終indexは使用する配列のlength値。length値の１個手前までが抽出された値となるため、最終のpurpleが含まれています。
最終indexを仮にtarget.lengthから-1に設定してしまうと、最終のindexをターゲットにしてその直前までが抽出されるため、"purple"が消えてしまいます。

感想

「人に教えるつもりでインプットは行え！！」という教えを基に書きました。
書くぞおおお

基礎に戻って配列の処理をやり直したPart2 ChatGPT .slice編。