これからJS沼に足を突っ込もうとしている方に贈る配列操作のいろはZennUbugeeei💮これからJS沼に足を突っ込もうとしている方に贈る配列操作のいろは2021/03/10に公開・約5,500字ツイートJavaScript初心者プログラミング入門#配列操作techはじめにJavaScriptには配列を操作するメソッドがたくさんあります。勉強し始めは色々ありすぎてごちゃごちゃしてよくわからなくなることがよくあると思います。実際身近にも、初学者の方で「JSの基本はなんとなくできてちょこちょこVueやReact触ってるけど配列操作苦手!」という方をよく見かけます。個人的にここが明確に理解できていないからかな?と思うポイントがいくつかあるのでまとめてみました。一概に操作をするといってもメソッドごとに若干考え方が変わります。そのそれぞれの違いをしっかり把握することで頭の中が整理されます。実際に抑えておきたいポイント整理してみてみましょう!メソッドを理解するときに重要なポイント(優先度高い順)何をするメソッドかメソッドの引数に何を渡すかメソッドの戻り値はなにか破壊的であるかどうか(とりあえずスルーでもOK)1~4を意識しながら具体的によく使うメソッドをみていきたいのですが、その前に聞き慣れない言葉もあると思うので軽く説明をしておきます。1.何をするメソッドかここは言わずもがな皆さん考えていると思います。削除するのか、追加するのか、絞り込むのかみたいな話です。おまけとしてはメソッド名の日本語訳など知っておくともっとイメージ湧きやすいかと思います!意外と意味がわかると何をするのかがわかりやすくなったりします。2.メソッドの引数に何を渡すかここは意識はしているもののそれぞれメソッドごとに色々あって迷いますよね。これに関しては最初から暗記する必要は無く、使っているうちに調べたりしているとおぼえます。忘れるたびにググりましょう。3.メソッドの戻り値はなにかここからが初学者の方がつまづきやすいポイントです。pushメソッドは配列の末尾に要素を追加します。4]とかって思ってしまいますが答えは5です。pushメソッドは戻り値として要素数を返します。このようにメソッドごとに実行したときの戻り値が異なる場合があります。ときには配列を返したり、時には要素数を返したり、、、MDNにはこんな感じで書かれていますね。ここも意識してこれからみていきましょう。破壊、的、、?初学者の方だと初めて聞く方ももしかしたらいるかも知れません。破壊的とは、もとの配列そのものを書き換えてしまう的なイメージでOKです。先程のコードでaはpushメソッドを使用してしまった後はもとのaは消えてしまって、新しく4が追加された配列になっています。破壊的なメソッドの操作には破壊せずに同じような機能を得る代替の実装が存在します。(記事の最後に紹介してます。)ここを意識するのはもう少し学習を進めた跡かもしれませんが、もしよくわからなければ一旦スルーしても問題ないです。4]メソッドをみていく前にこの記事では初学者の方に最低限なんとなく知っておいてほしいものだけを厳選してみていきます。その時のポイントや考え方の参考に慣れば幸いです。配列操作のメソッドはたくさんありますが、暗記をしていく必要はありません。「なんとなく知っておいてほしい」といったかというと、キーワードさえ覚えておけばググれるからです。使うやつはそうやって調べていくうちに自然と覚えます。これは配列操作に限ったことではないですが、調べて使っていれば覚えるので暗記しようとする必要はないです。破壊的その名の通り要素をプッシュします。破壊的spliceは日本語で”接合する”みたいな意味があります。開始位置を切り取り数を指定して切り取ってくっつけてるイメージですね。副産物として切り取った後の”切りくず”も手に入ります。このメソッドはいろんな使い方ができます。それもまとめておきましょう。追加する要素は渡さなくても使える。複数渡すこともできる。Eachなので”それぞれに同じ処理”的な意味合いで覚えておきましょう。みたいに書かれることもありますが、意味は同じ。8]よりよい配列操作ライフを贈るために。今回は本当に基本の操作のみを取り上げてみてみました。これ以外にも頻繁に使うものはたくさんあります。その都度ググってみてみましょう。<やりたい配列操作の内容>みたいにググれば大抵のものは出てきます。その時も考えることは同じでです。忘れても使うときにまた同じように調べればよいのです。やって繰り返し繰り返し配列の操作に慣れていきましょう。今日紹介したポイントを押さえればそう難しくはないはずです。何だかなれれば簡単そうに感じませんか?感じますよね?(威圧)こんな感じで気長に習得していきましょう。最後まで読んでいただきありがとうございました!おまけ冒頭の法で、破壊的なメソッドには代替する非破壊的な操作法があると言いましたが、それをわかりやすくまとめてくださっている記事があるので紹介させていただきます。https://noah.plus/blog/007/あわせてわかりやすい記事も破壊的?非破壊的?がパット見わかりやすいチートシートhttps://qiita.com/Shokorep/items/929e2e66908eaa915286よく使う配列操作まとめhttps://qiita.com/k-penguin-sato/items/a00f2d9df8cc1e9b7b23ツイートUbugeeeiRustとVueが好きみたい。計算論とか意味論とか言語処理系とかがマイブームらしい。)バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。約5,500字UbugeeeiRustとVueが好きみたい。計算論とか意味論とか言語処理系とかがマイブームらしい。)バッジを贈るバッジを贈るとは?目次はじめにメソッドを理解するときに重要なポイント(優先度高い順)メソッドをみていく前によく使う配列操作pushspliceforEachmapfilterよりよい配列操作ライフを贈るために。おまけ破壊的?非破壊的?がパット見わかりやすいチートシートよく使う配列操作まとめZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。