JavaScriptのArray型におけるsliceの利用方法について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのArray型データにおけるsliceメソッドの利用方法について解説しています。sliceメソッドは配列から指定のデータを取り出すときに使用します。今回はsliceの使い方、実行結果を見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptのArray型データにおけるsliceメソッドの利用方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Array型データにおけるsliceメソッドの利用方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Array型データとは

Array型データとは、配列を表すデータのことです。

配列は、同じ型式をもつデータを並べるために用います。

例えば、複数の値をまとめて扱うリストのようなオブジェクトを配列と呼びます。

配列の作成方法を1つとして[(ブラケット)で囲い、データをカンマで区切ることで複数のデータを配列にできます。

 

下記では、3つの文字列がnameArrayという変数に配列として格納されている状態です。

let nameArray = ['あああ', 'いいい', 'ううう'];

データを取り出す場合は、配列の後に[(ブラケット)で0から始まる要素数を指定しましょう。

 

そして、nameArrayから配列の1つ目のデータを取得する場合、下記のように記述します。

nameArray[0]; //あああ

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

sliceとは

sliceとは配列であるArrayオブジェクトのメソッドです。

sliceメソッドを使うことで、配列から指定したデータをコピーして取り出せます。

 

sliceの使い方

配列を格納した変数、もしくは[(ブラケット)で囲った配列データに.slice()と記述しましょう。

引数は2つでどちらもオプショナル(省略可能)です。

 

第1引数は、データを取り出し位置を指定します。

例えば、2つ目のデータから取り出したい場合は、第1引数に1を指定しましょう。(要素数は0から始まるので2つ目は1となる)

また、第1引数を省略した場合は0を指定しのと同義です。

 

第2引数は、取り出しを終える直前の位置を指定する数です。

例えば、3つ目までとしたい場合は、第2引数に3を指定します。(要素数は0から始まるので3の前の2までとなる)

また、第2引数を省略した場合は配列の最後まで(Array.length)指定したタイミングと同様の動作が可能です。

 

sliceを利用して配列データの一部を取得してみよう

5つの文字列を格納した配列をnameArrayという変数に格納しています。

この配列にsliceメソッドを使って、結果をコンソールに出力するプログラムです。

出力結果をコードのとなりにコメントで記述しているため、引数の指定と結果を合わせて確認しましょう。

let nameArray = ['あああ', 'いいい', 'ううう', 'えええ', ' おおお'];

console.log( nameArray.slice() ); // ["あああ", "いいい", "ううう", "えええ", " おおお"]
console.log( nameArray.slice(1) ); //["いいい", "ううう", "えええ", " おおお"]
console.log( nameArray.slice(1, 3) ); //["いいい", "ううう"]

 

まとめ

配列のArrayオブジェクトのsliceメソッドを紹介しました。

引数の指定方法を把握することで自在にデータを取り出せます。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptのArray型データにおけるsliceメソッドの利用方法がよく分かりやすくて良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。