Bash スクリプトは、コマンドラインのタスクを自動化できる便利な方法です。

Bash を使用すれば、他のスクリプト言語やプログラミング言語と同じようなことがたくさんできます。変数の作成と使用、ループの実行、条件論理の使用、配列へのデータの格納が可能です。

機能をよく知っていても、Bash の構文は扱いにくいものです。この記事では、配列の宣言方法と、それをコード内で使用する方法について学びます。

Bash で配列を宣言する方法

Bash で配列を宣言するのは簡単ですが、構文に注意してください。他の言語でのプログラミングに慣れていると、見慣れたコードに見えるかもしれません。しかし、見逃しがちな微妙な違いがあります。

配列の宣言は、以下の手順で行います。

1. 配列に名前をつけます。
2. その変数名の後にイコール記号を付けます。記号の周りにはスペースを入れてはいけません。
3. 配列を丸括弧で囲みます。(JavaScript のような角括弧は使いません)
4. 文字列を引用符で囲み、間にカンマを入れずに入力します。

配列の宣言は以下のようになります。

myArray=("cat" "dog" "mouse" "frog")

これだけです！とてもシンプルです。

Bash で配列にアクセスする方法

配列をループする方法には 2 種類あります。要素そのものをループさせるか、インデックスをループさせます。

配列の要素をループする方法

配列の要素をループするには、次のようなコードになります。

for str in ${myArray[@]}; do
  echo $str
done

簡単に説明すると、これは JavaScript で forEach を使うようなものです。配列 (myArray)の中の各文字列 (str) に対して、その文字列をプリントします。

このループの出力は以下のようになります。

cat
dog
mouse
frog

注意: 角括弧内の @ 記号は、配列の全要素をループしていることを表しています。もし、これを省いて for str in ${myArray}  と書くと、配列の最初の文字列だけが表示されます。

配列のインデックスをループする方法

あるいは、配列のインデックスをループできます。これは JavaScript の for  ループのようなもので、各要素のインデックスにアクセスしたい場合に便利です。

この方法を使用するには、以下のようなコードが必要です。

for i in ${!myArray[@]}; do
  echo "element $i is ${myArray[$i]}"
done

出力は以下のようになります。

element 0 is cat
element 1 is dog
element 2 is mouse
element 3 is frog

注意: 変数 myArray の先頭にある ! は、要素そのものではなく、配列のインデックスにアクセスしていることを示しています。これは、! が否定を示すのに慣れていると混乱することがあるので、十分注意してください。

注意2: Bash では通常、変数には波括弧が不要ですが、配列には必要です。つまり、配列を参照するときは ${myArray} という構文になります。しかし、文字列や数値を参照するときは単に $i というドル記号を使用するだけです。

まとめ

Bash スクリプトはコマンドラインの動作を自動化するのに便利です。そして、配列は複数のデータを格納するために使用できる素晴らしいツールです。

宣言して使用することは難しくありませんが、他の言語とは異なるので、間違えないように細心の注意を払いましょう。

JavaScript では何をするにも様々なやり方があります。以前 JavaScript で pipe/compose を書く 10 の方法についての記事を書きましたが、今回は配列について説明します。

1. スプレッド構文 (シャローコピー)

ES6 が公開されて以来、これが最も人気のある方法です。簡潔な構文で、React や Redux のようなライブラリを使うときにその便利さがわかるでしょう。

numbers = [1, 2, 3];
numbersCopy = [...numbers];

注意: この方法は多次元配列を安全にコピーするものではありません。要素が配列やオブジェクトの場合、値ではなく、参照によってコピーされます。

こちらは問題がありません。

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers 配列はそのままです。

こちらは問題があります。

nestedNumbers = [[1], [2]];
numbersCopy = [...nestedNumbers];

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// 両方の配列内の数値が変化しました。どちらも同じ参照を共有しているからです。

2. 古き良き for() ループ (シャローコピー)

関数型プログラミングが流行っていることを考えると、これは１番人気がない方法でしょう。

純粋型でも非純粋型でも、宣言型でも命令型でも実行できます。

numbers = [1, 2, 3];
numbersCopy = [];

for (i = 0; i < numbers.length; i++) {
  numbersCopy[i] = numbers[i];
}

注意: この方法は多次元配列を安全にコピーするものではありません。=  演算子を使っているので、配列やオブジェクトについては値ではなく、参照がコピーされます。

こちらは問題がありません。

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers 配列はそのままです。

こちらは問題があります。

nestedNumbers = [[1], [2]];
numbersCopy = [];

for (i = 0; i < nestedNumbers.length; i++) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// 両方の配列内の数値が変化しました。どちらも同じ参照を共有しているからです。

3. 古き良き while() ループ (シャローコピー)

for と同じく、純粋型でも非純粋型でも、なんとかかんとか…とにかく動きます！

numbers = [1, 2, 3];
numbersCopy = [];
i = -1;

while (++i < numbers.length) {
  numbersCopy[i] = numbers[i];
}

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

こちらは問題がありません。

numbersCopy.push(4);
console.log(numbers, numbersCopy);
// [1, 2, 3] and [1, 2, 3, 4]
// numbers 配列はそのままです。

こちらは問題があります。

nestedNumbers = [[1], [2]];
numbersCopy = [];

i = -1;

while (++i < nestedNumbers.length) {
  numbersCopy[i] = nestedNumbers[i];
}

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);
// [[1, 300], [2]]
// [[1, 300], [2]]
// 両方の配列内の数値が変化しました。どちらも同じ参照を共有しているからです。

4. Array.map (シャローコピー)

現代の分野に戻ると、map  関数があります。map とは、数学用語に由来し、ある集合の構造を保ったまま別の種類の集合に変換する概念です。

平易な言葉で言うと、つまり Array.map は毎回同じ長さの配列を返すということです。

数値のリストを 2 倍にするには、map と double 関数を使用します。

numbers = [1, 2, 3];
double = (x) => x * 2;

numbers.map(double);

クローンするんじゃなかったの？？

そうですね、この記事は配列のクローンについてです。配列を複製するには、呼び出された map 関数の中で、その要素をそのまま返します。

numbers = [1, 2, 3];
numbersCopy = numbers.map((x) => x);

もう少し数学的に言うと、(x) => x は恒等関数と呼ばれます。これは与えられたパラメータが何であれ、それを返します。

map(identity) はリストのクローンを作成します。

identity = (x) => x;
numbers.map(identity);
// [1, 2, 3]

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

5. Array.filter (シャローコピー)

この関数は map と同じように配列を返しますが、同じ長さであることは保証されません。

もし偶数の値をフィルターする場合、どうなるでしょうか？

[1, 2, 3].filter((x) => x % 2 === 0);
// [2]

入力された配列の長さは 3 でしたが、結果の長さは 1 です。

しかし filter の条件式が常に true を返すようにすれば、配列を複製できます！

numbers = [1, 2, 3];
numbersCopy = numbers.filter(() => true);

どの要素もテストに合格しているので、そのまま返されます。

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

6. Array.reduce (シャローコピー)

本来 reduce は遥かに強力なことができるので、配列のクローンを作成するためだけに使うのは心苦しく感じます。でも、やってみましょう。

numbers = [1, 2, 3];

numbersCopy = numbers.reduce((newArray, element) => {
  newArray.push(element);

  return newArray;
}, []);

reduce は、リストをループしながら初期値を変更します。

ここでは、初期値は空の配列で、その中に各要素を詰めていきます。この配列は、次の反復処理で使用するために関数から返されなければなりません。

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

7. Array.slice (シャローコピー)

slice は、指定した開始 / 終了インデックスに基づいて、配列のシャローコピーを返します。

もし、最初の 3 つの要素が必要な場合は次のとおりです。

[1, 2, 3, 4, 5].slice(0, 3);
// [1, 2, 3]
// Starts at index 0, stops at index 3

すべての要素が欲しい場合は、パラメータを指定しないでください。

numbers = [1, 2, 3, 4, 5];
numbersCopy = numbers.slice();
// [1, 2, 3, 4, 5]

注意: これはシャローコピーです。つまり、この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

8. JSON.parse と JSON.stringify (ディープコピー)

JSON.stringify はオブジェクトを文字列に変換します。

JSON.parse は文字列をオブジェクトに変換します。

これらを組み合わせて、オブジェクトを文字列に変換し、それから逆の操作をすることで、データ構造を新しく作成できます。

注意: この方法であれば、深くネストしたオブジェクトや配列を安全にコピーできます！

nestedNumbers = [[1], [2]];
numbersCopy = JSON.parse(JSON.stringify(nestedNumbers));

numbersCopy[0].push(300);
console.log(nestedNumbers, numbersCopy);

// [[1], [2]]
// [[1, 300], [2]]
// この 2 つの配列は完全に分離されています！

9. Array.concat (シャローコピー)

concat は、配列を値や他の配列と結合します。

[1, 2, 3].concat(4); // [1, 2, 3, 4]
[1, 2, 3].concat([4, 5]); // [1, 2, 3, 4, 5]

何も指定しなかったり、空の配列を指定した場合は、シャローコピーが返されます。

[1, 2, 3].concat(); // [1, 2, 3]
[1, 2, 3].concat([]); // [1, 2, 3]

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

10. Array.from (シャローコピー)

これは、任意の反復可能なオブジェクトを配列に変換することができます。配列を渡すと、シャローコピーが返されます。

numbers = [1, 2, 3];
numbersCopy = Array.from(numbers);
// [1, 2, 3]

注意: この方法も、配列やオブジェクトについては値ではなく参照がコピーされます。

結論

楽しんでいただけましたか？

今回は 1 ステップで配列をクローンする方法を紹介しました。複数のメソッドやテクニックを使えば、もっといろいろな方法が見つかるはずです。

配列の要素に何かしらの処理を適用して、要素を変更した新しい配列を取得したい場合があります。

ループを使って繰り返し処理をわざわざ書く代わりに、標準で用意されている Array.map() メソッドを使うことができます。

Array.map() メソッドを使用すると、コールバック関数を使用して配列に反復処理を行い、その要素を変更できます。コールバック関数は、配列の各要素に対して実行されます。

例えば、以下のような要素を持った配列があります。

let arr = [3, 4, 5, 6];

そして、配列の各要素に対して、3 を掛ける必要があるとします。for を使用して、以下のようなループ処理を行うことを考えるかもしれません。

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

しかし、実は Array.map() メソッドを使用して、同じ結果を取得できます。以下に例を記載します。

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

Array.map() メソッドは、要素に対して変更を適用するためによく使用されます。上記コードのように、特定の数字を掛けることもできますし、自身のアプリに応じて必要な処理を行うこともできます。

オブジェクトの配列に対して map() メソッドを使用する方法

例えば、以下のように友達の firstName と lastName を値に持つオブジェクトの配列があるとします。

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

以下のように、map() メソッドを使用して、配列をループし、firstName と  lastName の値を結合できます。

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

map() メソッドでは、要素以外の値も使用できます。map() メソッドによってコールバック関数に渡される全ての引数を確認していきましょう。

map() メソッドの引数を省略しない構文

map() メソッドの構文は以下のようになります。

arr.map(function(element, index, array){  }, this);

コールバック関数である function() が配列の各要素に呼ばれます。map() メソッドは引数に、現在処理している要素の値である element、添字である index、また処理を実行している配列自体である array を渡します。

引数 this はコールバック関数の中で使用されます。デフォルトでは、その値は  undefined となっています。

例えば、this の値を数値 80 に変更する方法を以下に記載します。

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

console.log() を使用して、他の引数の確認もできます。

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

以上が Array.map() メソッドに関する必要な情報です。大抵、コールバック関数で使用される引数は element だけで、残りの引数は省略されることが多くあります。私が普段取り組んでいるプロジェクトでもそうなっています。

このチュートリアルをお読みくださりありがとうございます。

私が書いた他の JavaScript チュートリアル how to sum an array of objects (配列のオブジェクトの値を足す方法) や methods to find a palindrome string (回文の文字列を探すためのメソッド) も役に立つかもしれません。これらは、JavaScript でたびたび質問される問題に関する記事です。

また、Web 開発のチュートリアル (主に JavaScript 関連) について無料ニュースレターを配信しています。

※この記事は 2020 年 6 月時点の内容になっています。

apt パッケージマネージャを使って最新版の Node.js をインストールしようとすると、v10.19.0 になってしまいます。これは Ubuntu App Store にある最新版ですが、Node.js の最新版ではありません。

これは、あるソフトウェアの新バージョンがリリースされた場合、Ubuntu チームがテストして、公式の Ubuntu App Store でリリースするまで数ヶ月かかることがあるためです。その結果、どんなソフトウェアでも最新版を入手するためには、開発者が公開しているプライベートパッケージを使用しなければならない場合があります。

このチュートリアルでは、Node.js の v12.18.1 (LTS - Long Term Support: 長期サポート) または v14.4 のいずれかを取得します。最新版を取得するには、NodeSource または nvm (Node Version Manager) のいずれかを使用することができます。両方の使い方を紹介します。

ここでのコマンドはすべて Ubuntu の CLI (ターミナル) を使用して実行されます。

NVM の使用 - 私が推奨する方法

nvm を使用すると、プロジェクトごとに異なるバージョンの Node.js を使うことができるので気に入っています。

時には、異なるバージョンの Node.js を使っている人とプロジェクトで共同作業をしていて、プロジェクトで使われている Node.js のバージョンに切り替える必要があるかもしれません。そのような際、nvm は最適なツールです。

NVM のインストール

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

nvm がインストールされているか確認するには、nvm --version と入力します。 0.35.3 のようなバージョンの番号が返ってくれば、nvm は正常にインストールされています。

変更内容を反映するために、ターミナルを再起動してください。

NodeJSのインストール

次に、バージョン 14.4 の Node.js をインストールしましょう。

nvm install 14.4.0 と実行するだけです。

同様のコマンドを使用し、任意のバージョンの Node.js をインストールすることもできます。(例: nvm install 12.18.1)

このコマンドは Node.js と最新の npm バージョン (v6.14.5) を自動的にインストールします。

Node.js のバージョンを切り替える必要がある場合は、nvm use <バージョン番号>  を実行するだけです (例: nvm use v12.18.1)。

nvm でインストールした異なるバージョンの Node.js の一覧を表示するには、 nvm ls を実行します。

NodeSourceのインストール

以下のコマンドを実行して、Ubuntu に Node.js をインストールすることを伝えます。パッケージを NodeSource から取得します。

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

注意: v14.4.0 は Node.js の最新バージョンですが、現在 LTS は提供されていません。最新の LTS 版の Node.js をインストールするには、上記のコマンドの 14 を 12 に変更してください。

root ユーザーのパスワードを入力するよう促される場合があります。その場合、入力して Enter を押下してください。

NodeJSのインストール

NodeSource の設定が終わったら、次は v14.4 の Node.js をインストールします。

sudo apt-get install -y nodejs を実行してください。

インストールが完了したら、最新バージョンの Node.js がインストールされているか確認します。

ターミナルに nodejs -v と入力すると、v14.4.0 が返ってくるはずです。

この時点で、npm が自動的にインストールされているはずです。npm のバージョンを確認するには npm version を実行します。npm の最新バージョン 6.14.5 を含むオブジェクトの { npm: '6.14.5' } が表示されない場合は、以下のコマンドを実行して、手動で npm を更新することができます。

npm install -g npm@latest

npm がインストールされていないためにアップデートできないという問題が発生した場合は、sudo apt-get install -y npm で先に npm をインストールした後、上記のコマンドを実行してアップデートすることが可能です。

また、ある種の npm パッケージを実行するためには、以下のコマンドも実行する必要があります。

sudo apt install build-essential

以上です。

これであなたの Ubuntu 環境に最新バージョンの Node.js と NPM がインストールされた状態になりました。

素晴らしい作品を作ってください 😊