パソコンやスマートフォン、スマート家電など、私たちが生活の中で日々手にするものの多くで使われているプログラミング言語「JavaScript」。エンジニアにとっては、プログラミング技術を知る上では避けて通れないほどの存在感を持つ言語です。

そのJavaScriptの基本の一つである「配列」についてここでは解説します。

[【関連記事】「未経験だけどIT業界に転職する方法! 職種や仕事内容もご紹介」](https://mynavi-agent.jp/knowledge/it/762.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv08)

[【求人特集】「システムエンジニアの転職」](https://mynavi-agent.jp/it/systemengineer/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv08)

配列(Array)とは、プログラミングにおいて複数の値を1つのデータのように取り扱うデータ構造のことです。

一般的にプログラミングでは、文字列や数値を変数に代入して処理しますが、そのデータが10個や20個、さらには100個以上もある場合、一つひとつ変数に代入するのが大変であるため、この配列がよく用いられます。

プログラミング言語であるJavaScriptでも、配列を利用することができるようArrayオブジェクトが用意されています。このArrayオブジェクトを活用することで、配列の作成や追加・削除などが簡単に行えるようになります。

まずは、実際にJavaScriptで配列を利用するための基本的な手順について解説します。

JavaScriptの配列の宣言には、2種類の方法があります。

1つ目は、配列コンストラクタ「Array」を使う方法で、newでArrayの引数に格納したい値を設定します。

2つ目は、配列リテラルを使う方法で、配列に格納したい値を[]内に設定します。具体例として、それぞれコードの記述は次のようになります。

```
//配列コンストラクタ例
var array1 = new Array(‘東京’, ’大阪’, ’愛知’);

//配列リテラル例
var array2 = [‘東京’, ‘大阪’, ‘愛知’];
```

なお、数値を格納する場合は注意が必要です。例えば、配列コンストラクタで「new Array(3)」のように宣言すると、「3つの空の要素をもつ配列を宣言する」という命令になり、”3”という値は格納されません。配列リテラルではそのまま入力した数値が配列の要素として格納されるため、目的にあわせてうまく使い分けましょう。

配列を初期化するには、配列コンストラクタでも配列リテラルでも空の配列であることを宣言します。具体例として、次のようなコードになります。

```
//配列コンストラクタ例
var array1 = new Array();

//配列リテラル例
var array2 = [];
```

配列内の要素を取得する場合は、配列のインデックス番号を指定します。具体例として、次のようなコードになります。

```
var KantoArea = [‘東京’, ‘神奈川’, ‘千葉’, ‘埼玉’, ‘栃木’, ‘茨城’, ‘群馬’];

console.log(KantoArea［1]);　//実行結果は『神奈川』
```

注意点として、インデックス番号は0から始まります。したがってインデックス1を指定している上記の例では、2番目の要素である「神奈川」が実行結果として表示されます。

JavaScriptでは、配列内の要素を検索するためにindexOfメソッドが用意されています。

indexOfメソッドは、引数に指定した値が配列データに存在する場合、そのインデックスを返します。具体例として、次のコードを見てみましょう。

```
var city = [‘新宿’, ‘渋谷’, ‘池袋’];
var n = items.indexOf(‘渋谷’);

console.log(n);　//実行結果は『1』
```

この例では、配列cityに対してindexOfメソッドで文字列「渋谷」が存在するかを確認しています。配列city内で「渋谷」は2番目にあるため、インデックス番号の「1」がnに代入されたことになります。

## 3.pushメソッドを使って要素の追加

JavaScriptで配列に要素を追加したい場合は、pushメソッドを使用します。

pushメソッドは、引数に指定した値を配列の最後に追加します。具体例として次のコードを見てみましょう。

```
var curry = [‘じゃがいも’, ‘たまねぎ’, ‘にんじん’];
curry.push(‘豚肉’);
```

この例では、配列curry宣言時にあらかじめ「じゃがいも」「たまねぎ」「にんじん」の3つの要素が含まれていますが、その最後列に「豚肉」という要素を追加しています。

## 4.delete演算子を使って要素の削除

JavaScriptで配列の要素を削除したい場合は、delete演算子を使用します。

delete演算子は、指定したインデックス番号の要素を削除します。具体例として、次のコードを見てみましょう。

```
var fruits = [‘りんご’, ‘ぶどう’, ‘すいか’, ‘いちご’];
delete fruits［2];

console.log(fruits); //実行結果は『りんご,ぶどう,,いちご』
```

この例では、配列fruitsからdelete演算子によってインデックス番号2の値である「すいか」を削除しました。要素を削除すると空の要素になりインデックス番号は変化しない点に留意しましょう。

## 5.joinメソッドを使って配列の結合

JavaScriptで配列の要素を結合させたい場合、joinメソッドを使用します。

joinメソッドは、配列の各要素を結合させ、ひとつのString型の要素として出力します。具体例として、次のコードを見てみましょう。

```
var christmasValue = [2019, 12, 25];
var christmasDate = christmasValue.join(‘/’);

console.log(christmasDate);　//実行結果は『2019/12/25』
```

このように、joinメソッドは配列内の各要素を引数に指定した文字列で連結させることができます。なお引数に何も指定しなかった場合は、カンマ区切りの文字列となります。

## 6.sliceメソッドを使って配列の分割

JavaScriptで配列の要素を分割させたい場合、sliceメソッドを使用します。

sliceメソッドは、指定したインデックス番号を境目に、新たな配列要素として出力します。第1引数に境目の開始位置、第2引数に終了位置となるインデックス番号を指定します。なお、第2引数を指定しなかった場合は最後の配列要素まで分割されます。

具体例として、次のコードを見てみましょう。

```
var fruitsList = [‘りんご’, ‘ぶどう’, ‘すいか’, ‘いちご’];

var newFruitsList1 = fruitsList.slice(1);
console.log(newFruitsList1);　//実行結果は『ぶどう,すいか,いちご』

var newFruitsList2 = fruitsList.slice(1, 2);
console.log(newFruitsList2);　//実行結果は『ぶどう,すいか』
```

この例では、newFruitsList1では第1引数のみ指定しているためインデックス番号1以降の要素が、newFruitsList2では第1引数と第2引数を指定しているためインデックス番号1〜2の要素が、新たな配列データとして分割されています。

配列内のデータをループ処理するには、for文を利用するのが一般的です。for文は、指定した回数だけ処理を繰り返すための構文で、『for(初期値; 条件式; 増減値)』と記述します。具体例として、次のコードを見てみましょう。

```
var array = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];

for(var i = 0; i < 5; i++) {
　console.log(array[i]);
}
```

このコードでは、iが0以上5未満の場合にiを1ずつ増加して繰り返し処理をするため、実行結果としては配列lists内のデータが順に出力されます。

## 8.もっと配列を便利に扱う方法

応用編として、JavaScriptで配列データを扱うために覚えておくと便利な方法について解説します。

### 8.1.concatメソッドを使って配列をコピー

JavaScriptにおいて、作成済みの配列をコピーして別の配列として使用したい場合はconcatメソッドを使うと便利です。

concatメソッドは指定した配列を対象の配列に連結するためのものですが、対象の配列が空だった場合指定した配列と同一の内容になります。具体例として、次のコードを見てみましょう。

```
var array = [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];
var newArray = array.concat();

console.log(array);　//実行結果は『a,b,c,d,e』
console.log(newArray);　//実行結果は『a,b,c,d,e』
```

このように、引数を空にすることで元の配列データをそのまま新しい配列へコピーできます。

### 8.2.filterメソッドを使って要素の抽出

JavaScriptの配列内における特定の要素を抽出したい場合、filterメソッドを使います。

filterメソッドは、コールバック関数に取得したいデータの内容を指定し、任意のデータを抽出するためのメソッドです。具体例として、次のコードを見てみましょう。

```
var array = [2, 7, 3, 9, 8, 1, 5];
var result = array.filter(function(value) {
　return value < 5;　//5より小さい数値を抽出
}

console.log(result);　//実行結果は『2 3,1』
```

このコードでは5未満という条件を指定しているように、コールバック関数内に指定した条件だけをデータとして抽出できます。

なお、該当するデータが見つからない場合は空の配列が返ることになります。

### 8.3.lengthプロパティを使って要素数のカウント

JavaScriptの配列にて、要素数をカウントするにはlengthプロパティを使用します。具体例として次の例を見てみましょう。

console.log(array.length);　//実行結果は『5』
```

私たちが生活の中で日々手にするものの多くで使われているプログラミング言語「JavaScript」。エンジニアにとっては、プログラミング技術を知る上では避けて通れないほどの存在感を持つ言語です。そのJavaScriptの基本の一つである「配列」についてここでは解説します。

【初心者向け】JavaScriptの配列の基礎的な使い方！プログラミングに配列は必須！

## JavaScriptはフロントエンド開発に必要？

近年、WebサイトやWebアプリケーションは単なる情報提供の場から、動的なページ構成でユーザにインタラクティブな体験を与える存在となっています。

そのため、ユーザが快適にコンテンツを閲覧できるよう、動きのあるアニメーションやクリックに応じた視覚効果の変化など、様々な機能が求められるようになりました。フロントエンド開発は、このようなWebサイトやアプリケーションの表示・動作部分を担っています。

そして、フロントエンド開発において多く用いられているのがJavaScriptです。**JavaScriptはページに動的な機能を付与するプログラム言語として欠かすことができません。**

JavaScriptでできること6選！向いている人や学習方法も解説

## JavaScriptを習得してフロントエンド開発に役立てよう

フロントエンドエンジニアにとって、JavaScriptは必須のスキルです。*JavaScriptを活用することで、ボタンクリックに応じて要素のスタイルを動的に変更したり、スライダーやモーダルウィンドウなどの UIコンポーネントを実装したり、サーバとの非同期通信を行うことが可能です。*

フロントエンド開発で活躍したいプログラマーにとっては、ユーザが快適で使いやすいWebサイトやアプリケーションを構築するために、JavaScriptのスキルの習得が重要であると言えるでしょう。

この記事では、フロントエンド開発に携わりたい方のために、JavaScriptとフロントエンド開発の概要や、必要とされるスキル、JavaScriptフレームワークなどについて解説していきます。

<center>[エンジニア転職を成功させるため ぜひ*『マイナビIT エージェント』*をご活用ください！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)</center>

## JavaScriptによるフロントエンド開発の概要

ここでは、まずフロントエンド開発の仕事内容と、JavaScriptがどのような言語であるかを確認しましょう。また、JavaScriptを活用できる職種の年収についても解説します。

### フロントエンド開発の仕事内容

フロントエンド開発は、Webサイトやアプリケーションの表示・動作部分を担当する役割です。
*主な仕事内容は、Webデザイナーが作成したデザインをもとに、Webページの構造と見栄えを実装するとともに、ページの動的な機能を実現することです。*

Webサイトだけでなく、WordPressなどのCMSを使ったコンテンツ管理システムの構築やカスタマイズも、フロントエンド開発に含まれます。CMSデザインテンプレートのカスタマイズや、プラグインの導入・設定などを行います。

フロントエンドとは？バックエンドとの違いや使う言語について解説

JavaScriptはプログラミング言語の1つで、Webブラウザ上で動作するスクリプト言語です。HTMLに出力された結果を書き換えることで、ページに動きをつけることができます。

*例えば、ページ上の広告にアニメーションをつけたり、ボタンをクリックすると要素の色や形状が変化したりするなど、ユーザとのインタラクションを実現する言語として用いられます。*

JavaScriptは様々なWebブラウザに広く搭載されており、「js」と省略して表記されることも多くあります。

名前からプログラム言語のJavaと関係があると誤解されがちですが、実際にはJavaとは全く異なる独立した言語です。

JavaScriptとは？特徴・メリット・何ができるのかを解説

### フロントエンドエンジニアの年収とは

フロントエンドエンジニアの年収は「マイナビエージェント職業別年収ランキング」での平均年収は385万円（※2024年3月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のエンジニア/プログラマを参考にすると、平均年収592万円と分かりました。

国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりも、やや低めから高めであることが分かります。

*フロントエンドエンジニアで高収入を目指すためには、Web画面の構築に必須であるHTMLやCSSを深く理解し、JavaScriptのフレームワークやライブラリも使いこなせるよう、スキルを向上させることがポイントです。*

【参考】：[マイナビエージェント職業別年収ランキング](https://mynavi-agent.jp/helpful/income/category/creative_05.html?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)
※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方
【参考】：[IT関連産業における給与水準の実態① ~ 職種別（P7）](https://warp.da.ndl.go.jp/info:ndljp/pid/11623215/www.meti.go.jp/press/2017/08/20170821001/20170821001-1.pdf)
【参考】：[民間給与実態統計調査-国税庁](https://www.nta.go.jp/publication/statistics/kokuzeicho/minkan2020/pdf/002.pdf)

フロントエンドエンジニアとは？未経験から目指す効果的な転職方法を徹底解説！

## フロントエンド開発に必要なスキルとは

フロントエンド開発にはJavaScriptが欠かせませんが、ここではその理由を説明します。また、JavaScript以外に必要とされるスキルや、バックエンドとの違いについても解説します。

### JavaScriptがフロントエンド開発で人気の理由とは

JavaScriptは、Webページに動きを与えることができる言語です。イベントハンドリング、DOM操作、Ajax通信などの機能を提供し、利用者にインタラクティブな体験を与えることができるため、リッチなコンテンツのWebページを作るのに欠かせない存在です。

*また、JavaScriptがフロントエンド開発で広く活用される理由として、豊富なフレームワークやライブラリの存在も挙げられます。*

React.js、Vue.js、jQueryなどのフレームワークやライブラリの活用により、チーム開発における効率的な作業分担が可能になり、大規模なプロジェクトにも対応できます。

また、コードの品質を高め、保守性の良いアプリケーションを作り上げることにもつながります。

### フロントエンド開発で使われる言語

*Webページやアプリケーションのフロントエンド開発において、まず必須とされるのがHTMLとCSSです。*

HTMLは、Webページの構造と内容を定義する言語です。タグによって、テキスト、画像、リンクなどの要素を配置し、構造化されたドキュメントを作成します。WebサイトやWebアプリケーションの基礎となる重要な言語です。

CSSは、HTMLで作成された要素のスタイルを指定する言語です。フォント、色、レイアウト、アニメーションなどの視覚的な側面を細かく制御することができます。

また、JavaScript以外でWebページに動的な要素を追加できる言語として、JavaScriptに型付けを導入した言語であるTypeScriptもトレンドとして注目を集めています。

PHPも、動的なWebページを生成するのによく使用される言語です。主にサーバサイドのスクリプト言語として広く利用されていますが、WordPressなどのCMSがPHPで開発されているため、フロントエンドエンジニアにとっても馴染みのある言語です。

フロントエンドに使う言語とは？おすすめの勉強方法も詳しく解説

### フロントエンドとバックエンドの違い

*WebサービスやWebアプリケーションの開発では、フロントエンドとバックエンドの役割分担が行われています。*

フロントエンド開発は、ユーザが直接目にするインターフェースの構築を担当します。具体的には、HTMLでコンテンツの構造を組み立て、CSSでスタイルを整え、JavaScriptでインタラクティブな動作を実装することです。

一方、バックエンド開発はウェブアプリケーションの裏側の、ユーザから見えない部分の構築を担います。バックエンド開発者は、サーバ上でデータの処理やデータベースの管理、ユーザ認証など、様々な機能を実装します。

## フロントエンド開発におすすめのJavaScriptフレームワーク

JavaScriptが活用される理由として、フレームワークの存在が挙げられます。ここでは、フロントエンド開発に役立つ代表的なJavaScriptのフレームワークについて解説していきます。

React.jsは、Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。

JavaScript の構文の拡張であるJSXを使用することで、JavaScriptとUIを密接に結びつけることができます。

*Reactの大きな特徴は、1度Reactを習得すればWebアプリだけでなく、モバイルアプリの開発にも活用できる点です。*

【参考】：[React.js](https://ja.legacy.reactjs.org/)

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

Vue.jsはファイルサイズが小さく高速に動作することが特徴のフレームワークです。
柔軟性も高く、HTML、Javascript、CSSを1つのファイルにまとめて管理できる単一ファイルコンポーネントが便利です。

*また、シンプルで学習しやすいフレームワークでもあり、JavaScript初学者でも使いやすいのが特徴です。*

【参考】：[The Progressive JavaScript Framework](https://ja.vuejs.org/)

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

jQueryはJavaScriptの機能を拡張するライブラリです。ブラウザの互換性問題を解決し、DOM操作やイベント処理、Ajaxの記述を単純化することができます。

*シンプルな構文と、ブラウザ間の挙動の違いを吸収するクロスブラウザ対応の優れた機能性から、長らくフロントエンド開発の現場で広く利用されています。*

近年、React.jsやVue.jsなどのフレームワークへの移行が進んでいますが、jQueryのスキルは未だに重要視されています。

多くの企業で運用されているレガシーシステムの保守や改修に活かすことができるため、フロントエンド開発者にとって、jQueryの知識は必須と言えるでしょう。

【参考】：[jQuery](https://jquery.com/)

jQueryとは？特徴・できること・導入方法・使い方を解説！

### 多様なフレームワークを学ぶには

フロントエンド開発の現場では、使用されるフレームワークが異なる場合があります。
そのため、JavaScriptのフレームワークを学ぶには、様々な開発現場で実際に触れてみることが効果的です。

また、企業によってはJavaScriptやフレームワークの研修を行い、エンジニアのスキル向上をサポートする体制が整っている場合もあります。

*自らのスキルアップを目指すなら、様々な現場で働ける企業や、研修が手厚い企業を探して転職するのも良い手段と言えるでしょう。*

JavaScriptに関するフレームワークについて徹底解説！

<center>[あなたに合った企業選びをサポート致します。 エンジニア転職のご相談はぜひ *『マイナビIT エージェント』*へ！](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)</center>

## JavaScriptを学んでフロントエンド開発で活躍しよう

ここまで、フロントエンド開発では動的なWebページを実現するとともに、開発の効率化や高品質化を目的にJavaScriptが活用されていることを説明しました。

*JavaScriptを習得することでWebサイトやアプリを構築できます。*JavaScriptを習得したら、フロントエンドエンジニアとして活躍できる企業へ転職を考えるのも良いでしょう。

しかし、1人で転職活動を行うのは大変なものです。自分に合った企業を見つけるためには、多くの企業について調べる必要があります。また、面談でもスキルシート作成や自己PRなど、1人で準備するのは大変です。

そこで利用を推奨するのが[マイナビIT エージェント](https://mynavi-agent.jp/it/?utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)です。

マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。

IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。

アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。

未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。

<center>[*『マイナビIT エージェント』*なら、 IT業界に精通した専任アドバイザーと豊富な求人で、 あなたの転職活動を丁寧にサポートします。](https://mynavi-agent.jp/entry/?genre=26&utm_source=and-engineer&utm_medium=content-text&utm_campaign=acv07_2)</center>

フロントエンド開発はWebページの表示や動作部分を担当し、JavaScriptはWebページに動的な機能を与えるために不可欠な存在です。この記事では、フロントエンド開発で活躍したい方のために、JavaScriptの役割や便利なフレームワークについて解説します。

フロントエンド開発は、Webサイトやアプリケーションの表示・動作部分を担当する

JavaScriptでフロントエンド開発に必要な、動きのある機能やUIコンポーネントをWebページに実装できる

フロントエンド開発ではJavaScriptのフレームワークやライブラリの習得が重要である

JavaScriptはフロントエンド開発に必須？その理由やフレームワークを解説

言語・開発の記事（113ページ目）