【JavaScript】 JavaScriptの配列を使ってみよう!
  • facebookページ
  • twitterページ
  • 2017.10.10

    【JavaScript】 JavaScriptの配列を使ってみよう!

    はじめに

    JavaScript言語はかなり古い言語ですが、現在でもその重要度は増すばかりで、もともとフロントエンド専用の言語であったにもかかわらず、jQueryというライブラリが登場してからさらに使い勝手が良くなりました。その上現在ではサーバーサイドやWebフレームワークなどでも利用できる言語になっています。
    JavaScriptはこのようにどんどん便利になり、おそらく今後もその流れは加速していくことでしょう。

    そこで、ここでは非常に使用頻度の高いJavaScript言語の配列について説明していきます。

    JavaScript言語の特徴

    JavaScriptの歴史

    JavaScriptは、スクリプト言語の一種です。Javaという名前を使っていますがJava言語とはあまり関係がありません。名前にJavaがつく理由は、もともとJavaScriptの前身であるLiveScriptという言語を作っていたNetScape社という会社が、当時Javaを作っていたSunMicrosystems社と業務提携したことに由来します。
    JavaScriptはWebのフロントエンドで行う処理を記述するのに用います。

    JavaScriptの特徴

    JavaScript言語の特徴は、Javaなどの言語とは違い型指定をする必要がありません。また、オブジェクト指向言語であり、基本的にすべてはObjectクラスの派生からなりたっています。

    そのため、配列自体の一つのオブジェクトであり、Arrayというオブジェクトで操作することができるようになっています。普通、JavaやC#のような言語は、配列とArrayクラスは明確に分けており状況に応じて使い分けます。

    しかし、JavaScriptでは、もともと配列がArrayに属するオブジェクトになっているのです。

    JavaScriptの配列

    配列の基本的な使い方

    まずは、基本的なJavaScriptの配列の記述方法を見てみましょう。
    以下は、整数値および文字列の配列の初期値の設定と、その表示のサンプルです。まずは実行してみてください。

    実行結果は以下の通りです。

    これだけを見ると、ほかの言語の配列と変わらないように見えます。基本的に、JavaScriptの配列は他の言語の配列と同じ使い方をすることができます。
    配列を生成したのち、[]の中に添字(そえじ)もしくはキーと呼ばれる値を入れてデータにアクセスします。

    しかしJavaScriptでは、後からデータを追加したり、削除したりということが簡単にできるのです。

    データの削除と追加

    では次に、配列にデータを追加したり削除したりするサンプルを見てみましょう。

    以下のように、もともとあるデータに簡単に配列を追加することが可能です。データを削除する方法はいろいろありますが、ここでは先頭と末尾を削除する方法を見てみましょう。

    実行結果は以下の通りです。

    多くの言語では一度配列のサイズを決めてしまったら変更することはできません。
    その点、JavaScriptは大きさを変えることは簡単にできるのです。

    配列の結合

    また、配列同士を結合することも簡単です。以下のサンプルでは、二つの配列を分割し、結合しています。JavaScriptに限らず配列を結合しなくてはならないようなケースにしばしば遭遇します。JavaScriptでは、以下のサンプルのようにそれを簡単に実現できるのです。

    実行結果は以下の通りになります。

    この方法は非破壊的結合と言い、二つの配列を結合して新たな配列を作る処理です。これに対し、pushメソッドを用いると破壊的結合という処理を行うことができます。
    これは、一方の配列に他方の配列を結合するというものです。

    これらはまだJavaScriptの配列の機能の一部ですが、JavaやC#の言語のプログラマーから見ると、実に柔軟な構造を持った配列の操作ができることがわかります。

    まとめ

    以上のようにJavaScriptは、非常に柔軟な仕組みの配列が用意されています。

    このような仕組みになっている理由は、JavaScriptがWebのフロントエンドを操作するのを主な目的にしているのが理由です。なぜなら、WebではHTML内にデータを追加しり、逆に削除したり、さらには結合したりする操作が良く行われるからです。

    そのような操作が楽にできるようにJavaScriptは言語にあらかじめ柔軟な構造の配列を用意しているのです。ただ、JavaScriptの配列は非常に高機能であり、ここですべてを説明しつくすことはできませんでした。ここで取り上げたものはあくまでも主要なものです。興味を持たれた方はほかにもいろいろなサイトや書籍などを調べてみてください。

    こういった言語の柔軟性とため、フロントエンドのみならずサーバーサイドでもJavaScriptを使いたいと願う技術者が増え、Node.jsのような技術が開発されました。
    このように、JavaScriptは非常に便利な言語であることは、配列の例だけをとってみてもよくわかります。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料10万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテキャンバナー ポテキャリバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア

    関連ワード

    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE