JavaScript では、文字列を数値に変換する方法がたくさんあります。それぞれコードではどのように書くのでしょうか？

この記事では、文字列を数値に変換する 11 の方法を紹介します。

こちらは、JavaScript で文字列を数値に変換する方法を示すインタラクティブなスクリーンです:

JavaScript で文字列を数値に変換する方法: Number() 関数を使用する

文字列を数値に変換する方法の一つは、Number() 関数を使用することです。

この例では、quantity という名前の文字列があり、その値は "12" です。

const quantity = "12";

typeof 演算子を quantity に使用すると、その型は string として返されます。

console.log(typeof quantity);

Number 関数を使って、quantity を次のように数値に変換できます:

Number(quantity)

再び typeof 演算子を使用して、それが数値になったことを確認できます。

console.log(typeof Number(quantity));

数値に変換できない値を渡そうとすると、返り値は NaN「Not a Number」になります。

console.log(Number("awesome"));

JavaScript で文字列を数値に変換する方法: parseInt() 関数を使用する

文字列を数値に変換するもう一つの方法は、parseInt() 関数を使用することです。この関数は文字列とオプションの基数 (radix) を受け取ります。

基数は、記数法の底を表す 2 から 36 の間の数値です。例えば、基数が 2 の場合は 2 進数を表し、基数が 10 の場合は 10 進数を表します。

先ほどの quantity 変数を使用して、その文字列を数値に変換することができます。

const quantity = "12";

console.log(parseInt(quantity, 10));

quantity 変数を "12.99" に変更した場合、parseInt() を使用して得られる結果は数値の 12.99 になるでしょうか？

ご覧のとおり、結果は丸められた整数になります。浮動小数点数を返したい場合は、parseFloat() を使用する必要があります。

JavaScript で文字列を数値に変換する方法: parseFloat() 関数を使用する

parseFloat() 関数は値を受け取り、浮動小数点数を返します。浮動小数点数の例としては、12.99 や 3.14 などがあります。

以前の例を修正して parseFloat() を使用すると、結果は浮動小数点数の 12.99 になります。

const quantity = "12.99";

console.log(parseFloat(quantity));

文字列に先頭または末尾の空白が含まれていても、parseFloat() はその文字列を浮動小数点数に変換します。

const quantity = "   12.99    ";

console.log(parseFloat(quantity));

文字列の最初の文字が数値に変換できない場合、parseFloat() は NaN を返します。

const quantity = "F12.99";

console.log(parseFloat(quantity));

JavaScript で文字列を数値に変換する方法: 単項プラス演算子 (+) を使用する

単項プラス演算子 (+) を使用すると、文字列を数値に変換できます。この演算子はオペランドの前に置かれます。

const quantity = "12";

console.log(+quantity);

単項プラス演算子 (+) を使用して、文字列を浮動小数点数に変換することもできます。

const quantity = "12.99";

console.log(+quantity);

文字列の値が数値に変換できない場合、結果は NaN になります。

const quantity = "awesome";

console.log(+quantity);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 と掛け算する

文字列を数値に変換する別の方法は、基本的な数学演算を使用することです。文字列の値に 1 を掛けると、数値が返されます。

const quantity = "12";

console.log(quantity * 1);

ご覧のとおり、quantity の値に 1 を掛けると、数値の 12 が返されます。しかし、これはどのように機能するのでしょうか？

この例では、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行しています。文字列が数値に変換できない場合、数学演算は機能せず、NaN が返されます。

const quantity = "awesome";

console.log(quantity * 1);

この方法は浮動小数点数にも適用できます。

const quantity = "10.5";

console.log(quantity * 1);

JavaScript で文字列を数値に変換する方法: 文字列を数値の 1 で割る

1 を掛ける代わりに、文字列を 1 で割ることもできます。JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "10.5";

console.log(quantity / 1);

JavaScript で文字列を数値に変換する方法: 文字列から数値の 0 を引く

別の方法として、文字列から 0 を引くこともできます。この場合も同様に、JavaScript は文字列の値を数値に変換し、その後に数学演算を実行します。

const quantity = "19";

console.log(quantity - 0);

JavaScript で文字列を数値に変換する方法: ビット単位の NOT 演算子 (~) を使用する

ビット単位の NOT 演算子 (~) はオペランドのビットを反転させ、その値を 32 ビット符号付き整数に変換します。32 ビット符号付き整数は、32 ビット (または 4 バイト) で表される整数値です。

数値に対して 1 つのビット単位の NOT 演算子 (~) を使用すると、以下の操作が実行されます: -(x + 1)

console.log(~19);

しかし、ビット単位の NOT 演算子 (~) を 2 回使用すると、文字列を数値に変換することができます。

const quantity = "19";

console.log(~~quantity);

この方法は浮動小数点数には適用できません。結果は整数になるためです。

const quantity = "19.99";

console.log(~~quantity);

この方法を数値以外の文字に対して使用した場合、結果はゼロになります。

const quantity = "awesome";

console.log(~~quantity);

この方法には制限があり、非常に大きな値の場合には動作が不安定になることがあります。数値が 32 ビット符号付き整数の範囲内に収まっていることを確認することが重要です。

const quantity = "2700000000";

console.log(~~quantity);

ビット単位の NOT 演算子 (~) について詳しく知りたい場合は、ドキュメントを参照してください。

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

文字列を数値に変換する方法として、他には Math.floor() 関数も使用できます。この関数は数値を最も近い整数に切り捨てます。

const quantity = "13.4";

console.log(Math.floor(quantity));

以前の例と同様に、数値以外の文字を使用しようとすると、結果は NaN になります。

const quantity = "awesome";

console.log(Math.floor(quantity));

JavaScript で文字列を数値に変換する方法: Math.floor() 関数を使用する

Math.ceil() 関数は、数値を最も近い整数に切り上げます。

const quantity = "7.18";

console.log(Math.ceil(quantity));

JavaScript で文字列を数値に変換する方法: Math.round() 関数を使用する

Math.round() 関数は、数値を最も近い整数に丸めます。

例えば、値が 6.3 の場合、Math.round() は 6 を返します。

const quantity = "6.3";

console.log(Math.round(quantity));

しかし、その値を 6.5 に変更すると、Math.round() は 7 を返します。

const quantity = "6.5";

console.log(Math.round(quantity));

結論

この記事では、JavaScript を使用して文字列を数値に変換する 11 の方法を紹介しました。

この記事で説明した 11 の方法は以下の通りです。

• Number() 関数を使用する
• parseInt() 関数を使用する
• parseFloat() 関数を使用する
• 単項プラス演算子 (+) を使用する
• 文字列に数値の 1 を掛ける
• 文字列を数値の 1 で割る
• 文字列から数値の 0 を引く
• ビット単位の NOT 演算子 (~) を使用する
• Math.floor() 関数を使用する
• Math.ceil() 関数を使用する
• Math.round() 関数を使用する

この記事を楽しんでいただけたなら幸いです。JavaScript の学習、頑張ってください！

JavaScript をある程度学習している方なら、「非同期」という言葉を聞いたことがあるかもしれません。

それは JavaScript が非同期言語だからなのですが、そもそも非同期とはどういう意味なのでしょうか？この記事では、非同期の概念をできるだけわかりやすく説明しようと思います。

同期 vs 非同期

本題に入る前に、同期と非同期という言葉にフォーカスしてみましょう。

デフォルトでは、JavaScript は同期的でシングルスレッドのプログラミング言語です。

つまり、命令は一つずつしか実行できず、並列には実行できません。

こちらのコードを見てみましょう:

let a = 1;
let b = 2;
let sum = a + b;
console.log(sum);

上記のコードはとてもシンプルです。二つの数値を合計し、その合計値をブラウザのコンソールに出力しています。インタプリタがこれらの命令を一つずつ順番に実行しているのです。

しかし、この仕組みにはデメリットがあります。例えば、何かサイズの大きいデータをデータベースから取得して、そのデータを画面上に表示するとします。インタプリタがデータ取得のコードまで到達した時、そのデータ取得が完了するまで他のコードの実行はブロックされてしまいます。

「データ取得の処理にそんなに時間がかかるわけがない」と思われたかもしれません。しかし、このようなデータ取得を複数箇所で行うことを想像してみてください。短時間の処理が積み重なった結果、ユーザーにとって無視できない遅延につながってしまうでしょう。

幸運なことに、JavaScript の同期処理の問題は、非同期処理の登場により解決されました。

非同期処理のコードは、今すぐ実行を開始し、後で実行を終了できるコードだと考えてください。JavaScript が非同期で実行される場合、必ずしも先ほどのコードのように命令が順番に実行されるとは限りません。

この非同期処理を適切に実装するために、開発者達が長年にわたって使用してきたいくつかの異なるソリューションがあります。それぞれの解決策は、その解決策以前の解決策を改良することで、コードをより最適化し、複雑になった場合でも理解しやすくしています。

JavaScript の非同期処理をさらに理解するために、コールバック関数、Promise、そして async と await について説明します。

コールバック関数とは？

コールバック関数とは、他の関数に渡され、その関数内で呼び出されてタスクを実行する関数のことです。

混乱してきましたか？実装しながら詳しく見ていきましょう。

console.log('fired first');
console.log('fired second');

setTimeout(()=>{
    console.log('fired third');
},2000);

console.log('fired last');

上記のコードは、ブラウザのコンソールにログを出力する小さなプログラムです。しかし、見慣れないコードがありますね。インタプリタは一つ目の命令を実行し、次に二つ目の命令を実行します。しかし、三つ目の処理はスキップし、四つ目の命令を実行します。

setTimeout は JavaScript の関数で、二つのパラメータを取ります。最初の引数は関数で、二番目の引数はその関数が実行されるまでの時間をミリ秒単位で指定します。これで、コールバック関数の定義が見えてきたのではないでしょうか。

この場合、setTimeout 内の関数は 2 秒後 (2000 ミリ秒後) に実行される必要があります。他の命令が実行され続けている間に、この関数がブラウザの別の場所で実行されることを想像してみてください。そして 2 秒後、関数の実行結果が返されます。

そのため、上記のコードを実行すると、次のようになります。

fired first
fired second
fired last
fired third

setTimeout 内の関数が結果を返す前に、最後の実行結果がログに出力されていることがわかります。この方法を使ってデータベースからデータを取得したとしましょう。ユーザーがデータベースからの取得結果を待っている間、実行中の処理が中断されることはありません。

この方法は特定条件下ではとても効率的です。しかし、開発者はコード内で一度に複数のリソース先へ処理の呼び出しをすることがあります。このような呼び出しを行おうとすると、コールバックは非常に読みづらく、保守しづらくなるまでネストされていきます。これはコールバック地獄と言われます。

この問題を解決するために、Promise が導入されました。

Promise とは？

人が約束をするのはよく聞く話です。無条件でお金を送ると約束したいとこ、クッキーの瓶を勝手に触らないと約束した子供…しかし、JavaScript における約束 (Promise) は少し違います。

JavaScript の文脈では、約束 (Promise) とは、実行するまでに時間がかかることです。Promise は以下の 2 種類のうちどちらかの結果を返します:

• 命令を実行し、Promise を解決する
• 命令の実行途中で何らかのエラーが発生し、Promise が拒否される

Promise は、コールバック関数の問題を解決するために登場しました。Promise は resolve と reject の 2 つの関数を引数として受け取ります。resolve は成功時、reject はエラー発生時と覚えておきましょう。

実際のコードで Promise を見てみましょう:

const getData = (dataEndpoint) => {
   return new Promise ((resolve, reject) => {
     // エンドポイントへのリクエスト;
     
     if(request is successful){
       // リクエスト成功後のコード;
       resolve();
     }
     else if(there is an error){
       reject();
     }
   
   });
};

上記のコードは、あるエンドポイントへのリクエストを実行する関数内にある Promise です。Promise は、前述したように resolve と reject を受け取ります。

例えば、API エンドポイントへリクエスト後、リクエストが成功すれば、Promise を resolve (解決) し、そのレスポンスを使って実行を続けます。しかし、エラーがあれば、Promise は reject (拒否) されます。

Promise は、プロミスチェーンと呼ばれる方法で、コールバック地獄によって引き起こされる問題を解決する最適な方法です。この方法を使えば、複数の API エンドポイントから順次、より少ないコードと簡単なメソッドでデータを取得することができます。

しかし、さらに良い方法があります！以下の方法は、JavaScript でデータや API 呼び出しをする際によく使われるので、ご存知の方も多いかもしれません。

async と await とは？

結局、コールバック関数のようにプロミスチェーンで Promise を繋げていくのはコードの肥大化や難読化を引き起こします。それを解決するために登場したのが async と await です。

以下のように async 関数を定義できます:

const asyncFunc = async() => {

}

async 関数を呼び出すと必ず Promise が返されることに注意してください。こちらを見てください:

const test = asyncFunc();
console.log(test);

上記のコードをブラウザのコンソールで実行すると、asyncFunc が Promise を返していることが確認できます。

コードを分解して、以下の小さなコードについて考えてみましょう

const asyncFunc = async () => {
	const response = await fetch(resource);
   	const data = await response.json();
}

前述した通り、async というキーワードは、非同期関数を定義するために使うものです。では、await はどうでしょう？await は、Promise が解決されるまで、response 変数に fetch メソッドの結果が代入されるのを遅らせます。Promise が解決されると、fetch メソッドの結果を response 変数に代入できるようになります。

同じことが三行目でも起きます。.json メソッドは Promise を返すため、await を使って Promise が解決されるまで代入を遅らせることができます。

コードをブロックするかしないか

「遅らせる」というと、async や await を実装することでコードの実行がブロックされるのではないか、リクエストに時間がかかりすぎるのではないか、と思うかもしれません。

実際はそうなることはありません。非同期関数の中にあるコードはブロックされますが、プログラム全体の実行には何の影響もありません。コードの実行はこれまで通り非同期です。こちらのコードを見てください。

const asyncFunc = async () => {
	const response = await fetch(resource);
   	const data = await response.json();
}

console.log(1);
cosole.log(2);

asyncFunc().then(data => console.log(data));

console.log(3);
console.log(4);

ブラウザのコンソールでの出力結果は以下のようになります:

1
2
3
4
data returned by asyncFunc

asyncFunc 関数が結果を返すまでは、他のコードが実行され続けたことがわかります。

まとめ

この記事では、各コンセプトを深く扱うことはしませんでしたが、JavaScript における非同期処理がどのようなものなのか、そして注意すべき点をいくつか紹介できたかと思います。

これは JavaScript の非常に重要な部分であり、この記事は表面をなぞったに過ぎません。とはいえ、この記事がこれらの概念を理解する助けになれば幸いです。

JavaScript は、動的でインタラクティブなウェブアプリケーションを作成するための多用途なプログラミング言語です。ウェブ開発における一般的なタスクの一つに、ページのコンテンツを更新したり特定のアクションをトリガーするための、ウェブページのリフレッシュ (再読み込み) があります。

この記事では、JavaScript でページをリフレッシュするさまざまな方法を探り、それぞれのアプローチの長所と短所を理解します。

JavaScript でページをリフレッシュする理由

ウェブページをリフレッシュすることは、さまざまなシナリオで役立ちます。例えば:

1. コンテンツ更新: ウェブページのコンテンツが動的で頻繁に変わる場合、最新のデータや情報を表示するためにページをリフレッシュする必要があるかもしれません。これはニュースサイト、株式市場のトラッカー、天気アプリなどでよく見られます。
2. フォーム送信: ウェブページでフォームを送信した後、成功メッセージを表示したり、新しい送信のためにフォームをリセットするためにページをリフレッシュしたくなるかもしれません。
3. 状態リセット: 場合によっては、ウェブページの状態をリセットしたり、特定のデータをクリアして再スタートしたいことがあります。ページをリフレッシュすることでこれを達成できます。

それでは、JavaScript でページをリフレッシュするさまざまな方法を探ってみましょう。

方法 1: location.reload() を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュする最も簡単な方法は、location.reload() メソッドを使用することです。このメソッドは、現在のウェブページをサーバーから再読み込みし、現在のコンテンツを破棄して最新のコンテンツを読み込みます。

// Refresh the page
location.reload();

location.reload() を使用する利点

• シンプルで使いやすい。
• サーバーからページ全体を再読み込みするため、最新のコンテンツを取得できる。

location.reload() を使用する欠点

• ページの現在のコンテンツが破棄されるため、ユーザーの入力やデータが失われる可能性がある。
• ページが再読み込みされる際にちらつきが発生し、ユーザーエクスペリエンスに影響を与えることがある。

方法 2: location.replace() を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュする別の方法として、location.replace() メソッドを使用する方法があります。このメソッドは現在のウェブページの URL を新しい URL で置き換えることで、新しいコンテンツでページを再読み込みします。

このコードをコンソールで試すと、現在の URL が表示されることに気付くでしょう。

console.log(location.href)

これは、location.replace() メソッドを使用して現在のウェブページの URL を新しい URL (同じ URL) で置き換えると、ページがリフレッシュされることを意味します。

// Refresh the page by replacing the URL with itself
location.replace(location.href);

location.replace() を使用する利点

• 新しいコンテンツでページを迅速にリロードする方法である。
• 現在のページのコンテンツを保持し、URL のみを置き換えるため、ユーザーの入力やデータの損失を回避できる。

location.replace() を使用する欠点

• ページの URL 全体を置き換えるため、現在のブラウジング履歴が失われる可能性がある。
• ウェブページが新しいウィンドウやタブで開かれている場合など、一部のシナリオで機能しないことがある。

方法 3: location.reload(true) を使用してページをリフレッシュする方法

location.reload() メソッドは、forceGet というブール型パラメータも受け入れます。これを true に設定すると、ページがキャッシュされていてもサーバーから強制的に再読み込みされます。

これは、ページがキャッシュされていても最新のコンテンツを確実に取得したい場合に便利です。

// Refresh the page and bypass the cache
location.reload(true);

location.reload(true) を使用する利点

• ページがキャッシュされていても、最新のコンテンツをサーバーから確実に取得できる。

location.reload(true) を使用する欠点

• ページの現在のコンテンツが破棄されるため、ユーザーの入力やデータが失われる可能性がある。
• ページが再読み込みされる際にちらつきが発生し、ユーザーエクスペリエンスに影響を与えることがある。

方法 4: location.href を使用してページをリフレッシュする方法

JavaScript でページをリフレッシュするもう 1 つの方法として、location.href プロパティを使用してウェブページの URL を同じ URL に再設定する方法があります。これにより、ページが新しい URL で再読み込みされ、ページのリフレッシュがトリガーされます。

// Refresh the page by setting the URL to itself
location.href = location.href;

location.href を使用する利点

• ページをリフレッシュするためのシンプルで効果的な方法である。
• 現在のページのコンテンツを保持し、URL のみを更新するため、ユーザーの入力やデータの損失を回避できる。

location.href を使用する欠点

• ページの URL 全体を置き換えるため、現在のブラウジング履歴が失われる可能性がある。
• ウェブページが新しいウィンドウやタブで開かれている場合など、一部のシナリオで機能しないことがある。

方法 5: location.reload() を遅延させてページをリフレッシュする方法

ページをリフレッシュする前に遅延を追加したい場合は、setTimeout() 関数を location.reload() メソッドと組み合わせて使うことができます。

これにより、ページがリロードされる前の遅延時間をミリ秒単位で指定でき、リフレッシュのタイミングを制御することができます。

// Refresh the page after a delay of 3 seconds
setTimeout(function(){
    location.reload();
}, 3000); // 3000 milliseconds = 3 seconds

location.reload() を遅延させて使用する利点

• 遅延を追加することでページリフレッシュのタイミングを制御できる。
• 特定のイベントやアクションの後にページをリフレッシュしたい場合に柔軟に対応できる。

location.reload() を遅延させて使用する欠点

• ページリフレッシュに遅延が発生するため、ユーザーエクスペリエンスに影響を与えることがある。
• 不安定なまたは遅いネットワーク接続のシナリオでは期待通りに動作しないことがある。

まとめ

この記事では、JavaScript でページをリフレッシュするさまざまな方法を学びました。それぞれの方法には利点と欠点があり、それらを考慮してウェブ開発プロジェクトに最適な方法を選ぶことができるようになりましたね。

ページをリフレッシュする際には、ユーザーエクスペリエンスやデータの損失、ブラウジング履歴への影響を考慮することが重要です。

この記事が JavaScript でウェブページをリロードする方法を理解し、特定のユースケースに適した方法を選ぶ手助けになれば幸いです。

Happy coding!

そしてさらなる学習の旅に出かけましょう！私のブログでも他の記事をご覧いただけます。

JSON、または JavaScript Object Notation は、私たちの身の回りにあります。ウェブアプリを使用したことがあれば、そのウェブアプリがデータを構造化したり、保存したり、サーバーとデバイス間で送信したりするために JSON を使用している可能性が非常に高いでしょう。

この記事では、まず JSON と JavaScript の違いについて簡単に説明し、次にブラウザと Node.js プロジェクトで JSON を解析するさまざまな方法について説明します。

JSON と JavaScript の違い

JSON は通常の JavaScript のように見えますが、JSON はテキストファイルと同様のデータ形式と考える方が良いでしょう。JSON は JavaScript の構文を基にしているため、非常に似ています。

JSON オブジェクトと JSON 配列を見て、それらを JavaScript の物と比較してみましょう。

JSON オブジェクトと JavaScript オブジェクトリテラルの違い

まず、こちらが JSON オブジェクトです:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

JSON オブジェクトと通常の JavaScript オブジェクト (オブジェクトリテラルとも呼ばれます) の主な違いは、引用符に関係しています。JSON オブジェクトのすべてのキーと文字列型の値は、ダブルクォーテーション (") で囲まれている必要があります。

JavaScript のオブジェクトリテラルはもう少し柔軟です。オブジェクトリテラルでは、キーや文字列を必ずしもダブルクォーテーションで囲む必要はありません。代わりに、シングルクォーテーション (') を使用するか、キーに関しては引用符を使用しないことも可能です。

上記のコードを JavaScript のオブジェクトリテラルとして表すと、次のように書くことができます:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

キー 'favorite-game' がシングルクォーテーションで囲まれていることに注意してください。オブジェクトリテラルでは、単語がダッシュ (-) で区切られているキーは引用符で囲む必要があります。

引用符を避けたい場合は、キーをキャメルケース (favoriteGame) に書き直すか、単語をアンダースコアで区切る (favorite_game) ことができます。

JSON 配列と JavaScript 配列の違い

JSON 配列は、JavaScript の配列とほぼ同じように動作し、文字列、ブール値、数値、および他の JSON オブジェクトを含むことができます。たとえば次のような配列があるとします:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

これを素の JavaScript で書き直した例がこちらです:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

文字列としての JSON

JSON にオブジェクトと配列があるのなら、それらをプログラム内で通常の JavaScript のオブジェクトリテラルや配列のように使用できるのではないかと思っているかもしれません。

それができない理由は、JSON は実際には単なる文字列であるからです。

たとえば、上記の jane-profile.json や profiles.json のように、JSON を別のファイルに書き込むと、そのファイルは実際には JSON オブジェクトや配列の形をしたテキストを含んでいます。その形式がたまたま JavaScript のように見えるだけです。

そして、API にリクエストを送信すると、次のようなものが返ってきます:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

テキストファイルの場合と同様に、プロジェクトで JSON を使用したい場合は、これを解析して、プログラミング言語が理解できる形式に変更する必要があります。たとえば、Python で JSON オブジェクトを解析すると、辞書型のデータが作成されます。

その理解をもとに、JavaScript で JSON を解析するさまざまな方法を見てみましょう。

ブラウザで JSON を解析する方法

ブラウザで JSON を扱う場合、たいていは API を介してデータを受信または送信します。

いくつかの例を見てみましょう。

fetch を使用して JSON を解析する方法

API からデータを取得する最も簡単な方法は、fetch を使用することです。fetch には .json() メソッドが含まれており、JSON レスポンスを使用可能な JavaScript オブジェクトリテラルや配列へと簡単に解析できます。

以下は、Chuck Norris Jokes API から開発者向けのジョークを取得するために、fetch を使用して GET リクエストを行うコードです:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

ブラウザでそのコードを実行すると、コンソールに次のような内容がログされます:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

これは JSON オブジェクトのように見えますが、実際には JavaScript のオブジェクトリテラルであり、プログラム内で自由に使用できます。

JSON.stringify() を使用して JSON を文字列に変換する方法

しかし、API にデータを送信したい場合はどうすれば良いでしょうか？

たとえば、他の人が後で読めるように Chuck Norris のジョークを Chuck Norris Jokes API に送信したいとします。

まず、ジョークを JavaScript のオブジェクトリテラルとして書きます:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

API にデータを送信するので、newJoke オブジェクトリテラルを JSON 文字列に変換する必要があります。

幸いにも、JavaScript にはそのための非常に役立つメソッド、JSON.stringify() が含まれています:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

この例では、オブジェクトリテラルを JSON 文字列に変換していますが、JSON.stringify() は配列にも使えます。

あとは、JSON 文字列化されたジョークを POST リクエストで API に送信するだけです。

Chuck Norris Jokes API には実際にはこの機能はありません。しかし、もしこの機能があるとしたら、コードは次のようになるでしょう:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

これで、fetch を使用して受信した JSON を解析し、JSON.stringify() を使用して JavaScript のオブジェクトリテラルを JSON 文字列に変換できました。

ブラウザでローカル JSON ファイルを操作する方法

残念ながら、ブラウザでローカルの JSON ファイルをロードすることはできません (またはお勧めしません)。

fetch は、ローカルファイルを読み込もうとするとエラーをスローします。たとえば、いくつかのジョークが含まれている JSON ファイルがあるとします:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

そして、それを解析して、シンプルな HTML ページ上にジョークのリストを作成したいとします。

以下のようなページを作成して、ブラウザで開くとします:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

コンソールには、次のように表示されます:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

デフォルトでは、ブラウザはセキュリティ上の理由からローカルファイルへのアクセスを許可しません。これは良いことであり、この動作を迂回しようとしてはいけません。

代わりに、最善の方法はローカル JSON ファイルを JavaScript に変換することです。幸いなことに、JSON の構文は JavaScript と非常に似ているため、簡単に変換できます。

必要なのは新しいファイルを作成し、JSON を変数として宣言することだけです:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

そして、それを別個のスクリプトとしてページに追加します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

これで、jokes 配列をコードで自由に使用できるようになります。

または JavaScript モジュールを使用することもできますが、これはこの記事の範囲外です。

では、Node.js を使用してローカル JSON ファイルを操作したい場合はどうすれば良いでしょうか？それを見てみましょう。

Node.js で JSON を解析する方法

Node.js は、ブラウザの外で JavaScript を実行することができる JavaScript ランタイムです。Node.js についてはこちらで詳しく説明されています。

Node.js を使用してローカルのコンピューター上でコードを実行するか、サーバー上で完全な Web アプリケーションを実行するかに関わらず、JSON を操作する方法を知っておくと良いでしょう。

以下の例でも、同じ jokes.json ファイルを使用します:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

require() を使用して JSON ファイルを解析する方法

最も簡単な方法から始めましょう。

ローカルの JSON ファイルがある場合、require() を使用して、他の Node.js モジュールと同様にロードするだけで使用できます:

const jokes = require('./jokes.json');

JSON ファイルは自動的に解析され、プロジェクトで使用できるようになります:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

これは同期的な方法であることに注意してください。つまり、プログラムは続行する前にファイル全体を解析し終わるまで停止します。非常に大きな JSON ファイルはプログラムの遅延を引き起こす可能性があるため、注意が必要です。

また、この方法で JSON を解析すると、全体がメモリに読み込まれるため、この方法は静的な JSON ファイルに使用するのが最適です。プログラムが実行中に JSON ファイルが変更されると、プログラムを再起動して更新された JSON ファイルを解析するまで、それらの変更にアクセスできません。

fs.readFileSync() と JSON.parse() を使用して JSON ファイルを解析する方法

これは、Node.js プロジェクトで JSON ファイルを解析するどちらかというと古典的な方法 (他に適切な言い方がないので) です。ファイルを fs (ファイルシステム) モジュールで読み取り、次に JSON.parse() で解析します。

fs.readFileSync() メソッドの使い方を見てみましょう。まず、プロジェクトに fs モジュールを追加します:

const fs = require('fs');

次に、jokes.json ファイルの出力を保存する新しい変数を作成し、それに fs.readFileSync() を割り当てます:

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync() にはいくつかの引数があります。最初の引数は読み込みたいファイルへのパスです:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

しかし、この状態で jokesFile をコンソールにログ出力すると、次のようになります:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

これは、fs モジュールがファイルを読み取っているものの、ファイルのエンコーディングや形式がわかっていないことを意味します。fs は JSON のようなテキストベースのファイルだけでなく、ほとんどのファイルを読み込むために使用できるため、ファイルがどのようにエンコードされているかを指定する必要があります。

テキストベースのファイルの場合、エンコーディングは通常 utf8 です:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

今度は jokesFile をコンソールにログ出力すると、ファイルの内容が表示されます。

しかし、これまでのところ、単にファイルを読み取っているだけで、それはまだ文字列です。jokesFile を使用可能な JavaScript オブジェクトや配列に解析するために、別のメソッドを使用する必要があります。

そのために、JSON.parse() を使用します:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

その名前が示すように、JSON.parse() は JSON 文字列を受け取り、JavaScript のオブジェクトリテラルまたは配列に解析します。

require メソッドと同様に、fs.readFileSync() は同期メソッドであり、JSON でも他の種類のファイルでも、大きなファイルを読み込む場合、プログラムを遅くする可能性があります。

また、それはファイルを 1 回読み取り、メモリに読み込みます。ファイルが変更された場合、いずれかの時点でファイルを再度読み込む必要があります。この処理を簡単にするために、ファイルを読み込むための簡単な関数を作成すると良いでしょう。

次のようになります:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

fs.readFile() と JSON.parse() を使用して JSON を解析する方法

fs.readFile() メソッドは fs.readFileSync() に非常に似ていますが、非同期で動作します。これは、読み取るべき大きなファイルがあり、その処理が他のコードをブロックするのを避けたい場合に便利です。

基本的な例を以下に示します:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

これまでのところ、fs.readFileSync() と似ていますが、jokesFile のような変数には割り当てていません。非同期なので、fs.readFile() の後のコードはファイルの読み取りが完了する前に実行されます。

代わりに、コールバック関数を使用して、その内部で JSON を解析します:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

これにより、次のようにコンソールに出力されます:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

fs.readFileSync() と同様に、fs.readFile() もファイルをメモリに読み込みます。つまり、ファイルが変更された場合は、ファイルを再度読み込む必要があります。

また、fs.readFile() は非同期ですが、最終的には読み込んでいるファイル全体をメモリに読み込みます。巨大なファイルの場合は、Node.js のストリームを検討する方が良いかもしれません。

Node.js で JSON.stringify() を使用して JSON を文字列に変換する方法

最後に、Node.js で JSON を解析する場合、API の応答として JSON を返す必要があるかもしれません。

幸いなことに、これはブラウザと同じように機能します。JavaScript のオブジェクトリテラルや配列を JSON 文字列に変換するには、単に JSON.stringify() を使用します:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

以上です！ブラウザと Node.js プロジェクトで JSON を操作する際に知っておくべきことについて、ほぼすべて説明しました。

さあ、思うままに JSON を解析したり文字列に変換したりしてください。

この記事に不足している点を見つけましたか？あなたのプロジェクトではどのように JSON を解析していますか？Twitter で教えてください。

freeCodeCamp から世界中のデベロッパー・コミュニティへ、クリスマスプレゼントをお届けします。

No. 1: 新バージョンの「JavaScript のアルゴリズムとデータ構造」認定講座。ブラウザ上でコードを書いて学べる 21 のプロジェクトを用意しました。プロジェクトに取り組みながら学ぶプロジェクトベース形式の講座で、1,000 以上のステップに細分化されたコーディングチャレンジで段階的に学習できます。

No. 2: 新バージョンの「Python を用いた科学計算」認定講座。ブラウザ上で Python のコードを書いて、12 のプロジェクトに取り組みながら学べます。

No. 3: かの有名な The Odin Project のインタラクティブ版。The Odin Project とは、私 (Quincy) の友人であり freeCodeCamp サポーターでもある Erik Trautman によって 2013 年に作成されたコーディング・カリキュラムです。

No. 4: そして私が個人的に最も楽しみにしていたのが「開発者のための英語」カリキュラムです。今年はまず CEFR A2 レベルの講座をリリースしました。B1、B2、C1 レベルの講座も 2024 年から 2025 年にかけてリリース予定です。開発者として働く上で役立つ表現を中心に学べる講座です。

なぜ freeCodeCamp はこんなにたくさんの教材を一度にリリースしたの？

なぜなら freeCodeCamp コミュニティにふさわしいクリスマスプレゼントだと思ったからです。🎄

freeCodeCamp ではこの数年間をかけて JavaScript カリキュラムのアップデートに取り組んできました。

そして英語カリキュラム、Python カリキュラムの作成にも 2023 のほとんどを費やしました。

残りの認定講座についても、プロジェクトを通して学ぶ形式にアップデートすることを目指しています。

この取り組みには少なくとももう 1 年かかると見込んでいます。いつものことですが、サポーターとして支援していただくことで、追加の人材を採用できるようになり、開発のスピードアップにつながります。

新バージョンの Python カリキュラムと認定講座

freeCodeCamp では先日、Python を用いた科学計算認定講座のメジャーアップグレードを公開しました。Python プログラミングの基礎を、ブラウザ上で 15 のプロジェクトを作成しながら学ぶことができます。

以下が全 15 プロジェクトの一覧です。

1. 文字列操作の学習: 暗号プログラムを作成する
2. 数値と文字列を扱う学習: Luhn アルゴリズムを実装する
3. ラムダ式の学習: 経費記録ツールを作成する
4. リスト内包表記の学習: ケース変換プログラムを作成する
5. 正規表現の学習: パスワード生成プログラムを作成する
6. アルゴリズムデザインの学習: 最短経路アルゴリズムを作成する
7. 再帰処理の学習: パズル「ハノイの塔」を解く
8. データ構造の学習: マージソートアルゴリズムを作成する
9. クラスとオブジェクトの学習: 数独ソルバーを作成する
10. 木構造の走査の学習: 二分探索木を作成する
11. 認定プロジェクト: 計算の縦書き整形プログラム
12. 認定プロジェクト: 時刻計算プログラム
13. 認定プロジェクト: 予算アプリ
14. 認定プロジェクト: 四角形の面積計算プログラム
15. 認定プロジェクト: 確率計算プログラム

これは 500 問以上のコーディング・チャレンジに相当します。そして 5 件の認定プロジェクトでは、数十件の自動テストをパスするように、洗練されたプロジェクトを作成します。

freeCodeCamp では、Python をブラウザでスムーズに実行できるようにするため尽力してきました。結果として非常にスムーズな動作を実現できました。どこかにあるサーバーで Python のコードが実行されて結果が返ってくるまで待つ必要はありません。

ミリ秒未満でテスト結果が返ってくる freeCodeCamp の JavaScript 講座での体験が気に入っているなら、きっとこの新しい Python 講座も気に入ることでしょう。

freeCodeCamp カリキュラムで Python プログラミングを始めましょう。

新バージョンの JavaScript アルゴリズムとデータ構造認定講座

以下がこの講座で作成する全プロジェクトの一覧です。

1. JavaScript 基礎の学習: ロールプレイングゲームを作成する
2. フォームバリデーションの学習: カロリー計算機を作成する
3. 文字列と配列の基礎的なメソッドの学習: 音楽プレイヤーを作成する
4. Date オブジェクトの学習: 日付フォーマッターを作成する
5. 認定プロジェクト: 回文チェッカー
6. モダンな JavaScript メソッドの学習: サッカーチームカードを作成する
7. localStorage の学習: Todo リストを作成する
8. 再帰処理の学習: 十進数・二進数変換ツールを作成する
9. 認定プロジェクト: ローマ数字への変換
10. アルゴリズム的思考の学習: 数値ソートを作成する
11. 文字列と配列の応用的なメソッドの学習: 統計計算機を作成する
12. 関数プログラミングの学習: スプレッドシートを作成する
13. 正規表現の学習: スパムフィルターを作成する
14. 認定プロジェクト: 電話番号の検証
15. 基礎的なオブジェクト指向プログラミングの学習: ショッピングカートを作成する
16. 中級オブジェクト指向プログラミングの学習: 横スクロールゲームを作成する
17. 中級アルゴリズム的思考の学習: ダイスゲームを作成する
18. 認定プロジェクト: キャッシュレジスター
19. Fetch と Promise の学習: freeCodeCamp 著者ページを作成する
20. 非同期プログラミングの学習: freeCodeCamp フォーラムリーダーボードを作成する
21. 認定プロジェクト: ポケモン検索アプリ

新バージョンの JavaScript アルゴリズムとデータ構造認定講座についての詳細情報と実際に動作する様子は、freeCodeCamp スタッフの Jessica によるプロジェクトの解説記事で見ることができます。

開発者のための英語カリキュラム

CEFR (Common European Framework of Reference) に馴染みのない方のために、こちらの画像を作成しました。

freeCodeCamp がスタートしてから 9 年間、私たちは主に数学、コンピューターサイエンス、プログラミングの教育に注力してきました。なぜここで急に英語を教えることにしたのでしょうか？

それは、何百万人もの開発者が、自分のキャリアの可能性を最大限発揮するために英語力の向上を必要としているからです。

国際的に、英語がテクノロジー業界の主要言語となっており、多くの重要なテクノロジーが英語圏から生まれている状況です。

また、英語は多くの国でビジネスに使われる言語でもあります。英語圏以外の国に住んでいても仕事で英語を使っているという人が、私の友人にも多くいます。

つまり、多くの人にとって、英語を上手く話せるようになるために時間を費やす価値があるということです。そして freeCodeCamp はそのような人々の力になりたいと考えています。もちろん無料でです。

カリキュラムの前半では、多数の実践的練習を通して、英語の文法や使い方に慣れることを目指します。自己紹介、雑談、仕事についての話し合いなどの基礎的な内容を学びます。

後半では、ソフトウェア開発特有の語彙を練習します。コードを説明したり、テクノロジーのトレンドについて議論したり、スタンドアップ・ミーティングに参加したりする方法を学びます。

この A2 レベルカリキュラムには 105 種類のダイアログが含まれます。それぞれのダイアログは、語彙力を強化し、テクノロジーのプロとしての環境で自信をもって話せるようになることを目指して設計されています。

ぜひ開発者のための英語カリキュラムを試してみてください。そして周りに英語を学んでいる人がいたら勧めてあげてください。

大学学位プログラムの最新情報 (数学準学士、コンピューターサイエンス学士)

大学学位取得プログラムについても着実に進めており、作成中の全 40 のコースのうち 2 番目のコースが完成間近となっています。

まだやるべきことがかなり残っているように聞こえますね。

幸い、私たちがあらゆる開発者に学習を推奨するトピックについての一連の認定講座である freeCodeCamp コアカリキュラムのアップグレードが完了次第、より多くの講師陣が学位取得プログラムの作業にまわる予定です。

私たちの計画は変わりません。2020 年代中頃に全 40 のコースの完成、2020 年代後半に最初の学生の入学、そして卒業生から 5 年間の長期的なデータが得られ次第正式な認定を得ることを目指しています。

これは非常に長い期間に渡る取り組みです。スタートアップ企業がこのような事業に取り組むことを許してくれる投資家はほとんどいないでしょう。その点、私たちはパブリック・チャリティーです。私たちには投資家も株主もいません。私たちにあるのはボランティアとサポーターのグローバル・コミュニティだけです。

freeCodeCamp はいなくなったりしません。世界中の教育制度は多くの問題に溢れ、新しいスキルを学ぶ必要に駆られている多忙な社会人が多数存在しています。freeCodeCamp を始めとする教育機関の力が必要とされているのです。🏕️

従来の JavaScript および Python 認定講座はどうなりますか？

従来の認定講座・認定証も引き続きご利用いただけます。従来の認定講座は freecodecamp 学習プラットフォームの最下部に移動しました。旧カリキュラムはそちらに保管されています。

新しい JavaScript、Python、英語カリキュラム、The Odin Project のセクションはいつまでベータ版ですか？

こうしてこの記事を書いている間にも、引き続きプルリクエストをマージしている状況です。freeCodeCamp の講師陣は、この教材のリリースをクリスマスに間に合わせるため尽力してきました。

今後数週間に渡って、「coming soon」のラベルが付いたセクションをリリース予定です。来年中にはベータ版のラベルを外し、正式版としてリリースすることを目指しています。

freeCodeCamp が初めての場合、どこからスタートするのが良いですか？

これまで通り、freecodecamp 学習プラットフォームの一番上から順に取り組むことをおすすめします。何千時間にもおよぶ学習内容が含まれるので、2024 年中ずっと退屈しないでしょう。率直に言えば、プログラミングをしっかりと学ぶにはそれだけの時間がかかるのです。

コアカリキュラムでは、何百ものプロジェクトを通して大量の演習に取り組みます。そして今後リリース予定の数学・コンピューターサイエンス学位プログラムでは理論を学ぶことができます。

長い期間をかけて、あなたの学習をサポートします。千件以上の YouTube 動画講座、1 万件以上のチュートリアル記事も公開しています。1 冊の本に相当するようなボリュームの記事も複数あります。すべて無料で利用可能です。

2014 年に freeCodeCamp をスタートした時には、私たちの教材がこれほど包括的なものになるとは予想していませんでした。しかし私たちは今、オープンソースの力、無料の教育を支援したいという何千人もの講師・開発者達の力を目の当たりにしています。

私たちは今、数学、プログラミング、そして英語について地球上で最も詳しいだけでなく、桁違いに詳しいと言える学習リソースとなることを目指しています。

freeCodeCamp はまだ 9 歳です。

毎日百万人以上の人々が freeCodeCamp で学んでいるという、freeCodeCamp コミュニティの現在の姿には驚かされるばかりです。

この 1 年だけでも、freeCodeCamp コミュニティは以下のことを成し遂げました。

• YouTube にて長編講座を 114 件投稿
• プログラミングチュートリアル記事を 1,045 件、freeCodeCamp Press として無料の電子書籍を 20 冊投稿
• GitHub にて 2,753 件のコードコントリビューションをマージ
• カリキュラムとチュートリアル記事の多言語化において 200 万ワード以上を翻訳

そしてこれはまだほんの始まりです。この先やるべきことがもっとあります。

再度になりますが、サポーターとして支えていただければ幸いです。

すでに月次サポーターの方でも、当チャリティーのために年末のギフトをご検討いただけるのであればぜひお願いいたします。

当チャリティー団体の使命を支援する方法についての質問や、単に寄付の領収書が必要な場合でも、直接 quincy@freecodecamp.org までお問い合わせいただいて構いません。

あなたが良いクリスマスを過ごしながら、新しいスキルを学ぶ時間を持てることをお祈りします。Happy coding! 🎅⌨️

インターネットを使うかたなら、おそらくドロップダウンメニューを使ったことがあるでしょう。ドロップダウンメニューは主に 2 つの目的で使用されます。1 つはウェブフォームでユーザーの入力を収集するため、もう 1 つはウェブアプリケーションにアクションやナビゲーションメニューを実装するためです。

ドロップダウンは、似たようなの要素の集まりに対して多数のオプションを提供する最良の方法の 1 つです。これにより、アプリケーションの一般的なレイアウトの流れを崩さずに多くの選択肢を提供することができます。ウェブアプリ以外にも、ドロップダウンメニューはスタンドアロンのソフトウェアやオペレーティングシステムなどでも使用されています。

このガイドでは、HTML、CSS、JavaScript を使用してドロップダウンナビゲーションメニューを作成する方法を学びます。

以下は、これから作成するもののスクリーンショットです。このガイドの最後に、CodePen ファイルを提供しているので、それを使って実際に試してみることができます。

ドロップダウンメニューの基礎についての説明を終えたので、次はその作成手順について説明します。

ステップ 1 – ドロップダウンのマークアップを追加する

このガイドではアイコンを使用するため、まず初めにアイコンをインポートしなければなりません。その分かりやすさから、Boxicons という無料のライブラリを使用します。他にもあるので、ぜひお好きなライブラリを使ってみて下さい。

Boxicons を設定する方法はいくつかありますが、最も簡単な方法は、次のように HTML ファイルの head で script タグを定義することです。

<head>
   <link 
     href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" 
     rel="stylesheet"
    />
 </head>

アイコンをインポートした後、クラス名が container の div 要素を作成します。この要素内に、ボタンとドロップダウンメニューを入れていきます。

コンテナ内でボタン要素を作成し、それに btn というクラスと ID を与えます。そのボタンに、テキストと矢印アイコンを渡します。

ボタンのマークアップは以下のとおりです。

<button class="btn" id="btn">
  Dropdown
  <i class="bx bx-chevron-down" id="arrow"></i>
</button>

次に、ドロップダウンメニュー自体のマークアップを追加します。button タグの下に div 要素を作成し、それに dropdown というクラスと ID を与えます。div 要素内で、個々のドロップダウン項目ごとに a タグを作成し、それぞれのアイコンとテキストを渡します。

マークアップは以下のようになります。

<div class="dropdown" id="dropdown">
  <a href="#create">
    <i class="bx bx-plus-circle"></i>
    Create New
  </a>
  <a href="#draft">
    <i class="bx bx-book"></i>
    All Drafts
  </a>
  <a href="#move">
    <i class="bx bx-folder"></i>
    Move To
  </a>
  <a href="#profile">
    <i class="bx bx-user"></i>
    Profile Settings
  </a>
  <a href="#notification">
    <i class="bx bx-bell"></i>
    Notification
  </a>
  <a href="#settings">
    <i class="bx bx-cog"></i>
    Settings
  </a>
</div>

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

このままではまだ見栄えがよくないので、メニューのスタイリングをしましょう。

ステップ 2 – ドロップダウンメニューのスタイルを設定する

まず、ページ上のすべての要素のデフォルトのマージンとパディングをリセットし、いくつかの値を変数に保存して、CSS ファイル全体で再利用できるようにします。次に、body 要素にグローバルなスタイルを適用します。

@import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  --shadow: rgba(0, 0, 0, 0.05) 0px 6px 10px 0px,
    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px;
  --color: #166e67;
  --gap: 0.5rem;
  --radius: 5px;
}

body {
  margin: 2rem;
  background-color: #b3e6f4;
  font-size: 0.9rem;
  color: black;
}

次のステップでは、ボタンとドロップダウンコンテナー自体のスタイリングを行います。作業をスピードアップするため、重要なスタイリングの部分のみを説明します。

以下のマークアップをコピーして、CSS ファイルに貼り付けてください。

.btn {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--gap);
  padding: 0.6rem;
  cursor: pointer;
  border-radius: var(--radius);
  border: none;
  box-shadow: var(--shadow);
  position: relative;
}

.bx {
  font-size: 1.1rem;
}

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
}

.dropdown a {
  display: flex;
  align-items: center;
  column-gap: var(--gap);
  padding: 0.8rem 1rem;
  text-decoration: none;
  color: black;
}

.dropdown a:hover {
  background-color: var(--color);
  color: white;
}

ドロップダウンメニューは通常、要素の上に重なるように表示されるため、ボタンを相対的 (relative) に、ドロップダウンメニューを絶対的 (absolute) に配置しています。これにより、両方の要素が近くに配置され、ドロップダウンメニューが他の要素の上に表示されることが保証されます。こうすることで、切り替え時にページのフローに影響を与えなくなります。

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

ドロップダウンのスタイルが設定されたので、即座に表示されるのではなく、ボタンがクリックされたときにのみドロップダウンが表示されるようにしたいと思います。非表示にするには CSS を使用します。

以前 JavaScript でモーダルを作成する方法という記事では、最初にビューポートからモーダル要素を非表示にするために、display: none を使用しました。しかし、MDN Docs によると、このプロパティを利用する場合の欠点は、アニメーション化できないことです。

したがってこのガイドでは、別の方法を用いてドロップダウンメニューを非表示にしたいと思います。これには、visibility と opacity のプロパティを組み合わせることで、達成することができます。そしてこの方法は、GitHub がドロップダウンメニューを実装している方法です。

前に作成したドロップダウンクラス内に、visibility プロパティを追加し、値を hidden に設定したら、不透明度を 0 に設定します。そうすることで、ページからドロップダウンメニューが非表示になります。

ドロップダウンメニューを表示するために、show という別のクラスを作成します。このクラスは、visible の値と不透明度 1 の visibility プロパティを保持します。そして、後ほど JavaScript を使用してこのクラスをドロップダウンメニューに追加します。

コードは以下のとおりです。

.dropdown {
  position: absolute;
  width: 250px;
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  margin-top: 0.3rem;
  background: white;
  transition: all 0.1s cubic-bezier(0.16, 1, 0.5, 1);
    
  transform: translateY(0.5rem);
  visibility: hidden;
  opacity: 0;
}

.show {
  transform: translateY(0rem);
  visibility: visible;
  opacity: 1;
}

.arrow {
  transform: rotate(180deg);
  transition: 0.2s ease;
}

ドロップダウンメニューの要素を非表示にするスタイルに加えて、ドロップダウンボタンをクリックしたときに矢印アイコンを回転させる、別のクラスも追加しました。

ステップ 3 – ドロップダウン機能を追加する

まず、それぞれの要素を変数に保存して再利用できるようにしましょう。

const dropdownBtn = document.getElementById("btn");
const dropdownMenu = document.getElementById("dropdown");
const toggleArrow = document.getElementById("arrow");

次のステップでは、ボタンがクリックされたときにドロップダウン要素の show というクラスの切り替えと、ドロップダウンの矢印の回転を行う関数を作成します。この関数の名前を toggleDropdown とします。

const toggleDropdown = function () {
  dropdownMenu.classList.toggle("show");
  toggleArrow.classList.toggle("arrow");
};

そして、addEventListener メソッドを使用して、ドロップダウンボタンでこの関数を呼び出すことができます。そうすれば、ボタンをクリックするたびにドロップダウンメニューの表示と非表示を制御する関数が起動されます。

dropdownBtn.addEventListener("click", function (e) {
  e.stopPropagation();
  toggleDropdown();
});

もうお気づきかもしれませんが、ドロップダウン関数内に stopPropagation() メソッドを追加しました。これにより、ボタン要素の機能が親要素に伝達されるのを防ぎ、関数が 2 回実行されるのを防ぐことができます。次のセクションでこれについて詳しく説明します。

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

DOM 要素をクリックしたときにドロップダウンメニューを閉じる方法

ドロップダウンメニューは通常、次の 4 つの異なる方法で閉じられます。

• ドロップダウンメニューを有効にするボタンをクリックすること
• 子要素のいずれかをクリックすること
• メニューの外側 (ボディ部分) をクリックすること
• Esc キーまたは下矢印キーを押すこと

ただし、このガイドでは、最初の 3 つに焦点を当てましょう。

まず、document.documentElement を使用してルート要素 <html> を選択します。そうしたら、先ほどと同様に toggleDropdown() 関数を渡します。

しかし、今回はドロップダウンメニューが show というクラスを持っているかどうかをチェックする条件を設定したいと思います。show というクラスを持っている場合にのみ、ドロップダウンメニューを閉じる関数を実行したいからです。

document.documentElement.addEventListener("click", function () {
  if (dropdownMenu.classList.contains("show")) {
    toggleDropdown();
  }
});

その結果が、最終的にこのようになります。

これが JavaScript でドロップダウンメニューを作成する方法です。以下は、このドロップダウンメニューをテストするための CodePen ファイルです。

まとめ

この投稿が興味深かったり、役に立ったと感じていただければ幸いです。今後の投稿を見逃さないよう、お友達と共有するか、私のブログを読者登録してみてください。読んでくださりありがとうございます。

GitHub | Twitter | Blog | Portfolio

JavaScript の forEach メソッドは、配列をループするいくつかの方法の 1 つです。それぞれの方法には独自の機能があり、目的に応じて、どの方法を使用するかを決めるのはあなた次第です。

この投稿では、JavaScript の forEach メソッドを詳しく見ていきます。

まず、以下の配列があるとします。

const numbers = [1, 2, 3, 4, 5];

従来の「for ループ」を使用して配列をループすると、次のようになります。

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

forEach( ) メソッドが特別な理由。

forEach メソッドも配列をループするために使用されますが、従来の「for ループ」とは異なる方法で関数を使用します。

forEach メソッドは、コールバック関数を次のパラメーターと共に配列の各要素に渡します。

• 現在の値 (必須) - 現在の配列要素の値
• インデックス (オプション) - 現在の要素のインデックス番号
• 配列 (オプション) - 現在の要素が属する配列オブジェクト

これらのパラメーターを一つずつ説明していきます。

まず、forEach メソッドを使用して配列をループするには、コールバック関数 (または無名関数) が必要です。

numbers.forEach(function() {
    // code
});

この関数は、配列のすべての要素に対して実行されます。配列の要素を少なくとも 1 つ、パラメーターとして受け取る必要があります。

numbers.forEach(function(number) {
    console.log(number);
});

配列をループするために必要なことはこれだけです。

代わりに、コードを簡素化するために ES6 の、アロー関数表現を使用することもできます。

numbers.forEach(number => console.log(number));

オプションのパラメーター

インデックス

それでは、オプションのパラメーターも見てみましょう。1 つ目は「インデックス」パラメーターで、各要素のインデックス番号を表します。

基本的に、2 番目のパラメーターとしてインデックスを含めることで、それぞれの要素のインデックス番号を確認できます。

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

配列

配列パラメータとは、配列そのものを表します。これもオプションであり、必要に応じてさまざまな用途で使用することができますが、基本、呼び出した場合には、配列の要素数と同じ回数だけ印刷されます。

numbers.forEach((number, index, array) => {
    console.log(array);
});

このビデオで forEach( ) メソッドの使用例を見ることができます。

ブラウザーのサポート

Array.forEach メソッドは、IE バージョン 8 以前を除くすべてのブラウザでサポートされています。

ウェブ開発についてもっと詳しく知りたい方は、ぜひ私の YouTube チャンネルにアクセスしてみて下さい。

最後まで読んでいただきありがとうございます！

JavaScript の配列は筆者のお気に入りのデータ型です。動的で、使いやすく、多数の組み込みメソッドが提供されているからです。

しかし選択肢が多ければ多いほど、どれを使うべきか分かり辛くなることもあります。

この記事では、JavaScript の配列に要素を追加する一般的な方法をいくつか解説します。

配列への追加方法のインタラクティブな Scrim

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

push メソッド

1 つ目の、そしておそらく最もよく見かけるであろう JavaScript 配列のメソッドは push() です。push() メソッドは、配列の末尾に要素を追加するために使われます。

ではここである配列を例に考えます。配列の各要素は、あなたがやらなければならないタスクを表す文字列になっているとしましょう。先にあったタスクから順に完了できるように、新しい要素は配列の末尾に追加するのが良いでしょう。

この例をコードで見てみましょう。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

push のおかげで、シンプルな構文で配列の末尾に要素を追加できました。

では一度に 2 つや 3 つの要素を追加したいとしましょう。その場合はどうしたらいいでしょうか？実は、push() は一度に複数の要素を受け取って追加することができます。

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

では配列にいくつかタスクを追加できたところで、次は抱えているタスクが多すぎないかチェックするために、配列に要素がいくつあるか数えたいと思います。

幸いなことに、push() は戻り値として、要素を追加した後の配列の長さを返します。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.push('Fourth item', 'Fifth item');

console.log(arrLength); // 5 
console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

unshift メソッド

すべてのタスクは平等に造られているとは限りません。配列にタスクを追加していく中で、突然他より緊急性の高いタスクが出てくることもあるでしょう。

そんな時に強い味方となる unshift() を紹介します。unshift() を使うと、配列の先頭に要素を追加することができます。

const arr = ['First item', 'Second item', 'Third item'];

const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2');

console.log(arrLength); // 5 
console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

上記の例を見て気付いたかもしれませんが、push() メソッドと同様に unshift() も、追加後の配列の長さを返します。また、2 つ以上の要素を一度に追加することも可能です。

concat メソッド

concatenate (連結) の略である concat() メソッドは、2 つ以上の配列を連結するために使われます。

上で説明したように、unshift() メソッドと push() メソッドは追加後の配列の長さを返します。一方、concat() は真新しい配列を返します。

これは重要な特徴で、このため concat() は、変更 (mutate) したくない配列 (例えば React の state に保存されている配列) を扱う場合にとても便利です。

シンプルな使用例は次のようになります。

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // ["?", "?", "?", "?"] 

では連結したい配列が複数あるとしましょう。心配いりません。この場合も concat() が助けてくれます！

const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];

const arr4 = arr1.concat(arr2,arr3);

console.log(arr4); // ["?", "?", "?", "?", "?", "?"]

理解を深めるためのインタラクティブな Scrim

concat を利用したクローン

concat() は既存の配列を変更したくない場合に役立つと言ったのを覚えていますか？この特徴を活用して、ある配列の中身を新しい配列へとコピーする方法を見ていきましょう。

const arr1 = ["?", "?", "?", "?", "?", "?"];

const arr2 = [].concat(arr1);

arr2.push("?");

console.log(arr1) //["?", "?", "?", "?", "?", "?"]
console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

素晴らしい！このように、concat() を使って配列を "クローン" することができます。

しかし、この方法にはちょっとした落とし穴があります。新しい配列は、コピー元の配列の「シャローコピー (shallow copy)」です。つまりオブジェクトはすべて参照コピーで、実体のあるオブジェクトではありません。

もっと分かりやすく説明するために、例を見てみましょう。

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}]

const arr2 = [].concat(arr1);

// arr1 と arr2 両方が変更される
arr2[1].food = "!";
// arr2 だけが変更される
arr2.push({food:"*"})

console.log(arr1) // [ { food: '?' }, { food: '!' }, { food: '?' } ]

console.log(arr2) // [ { food: '?' }, { food: '!' }, { food: '?' }, { food: '*' } ] 

元の配列を直接変更していないにもかかわらず、クローン後の配列に加えた変更によって、元の配列も影響されています。

配列を適切に "ディープクローン" する方法は複数ありますが、この記事では解説しませんので調べてみてください。

TL;DR

配列の末尾に要素を追加したい場合、push() を使います。配列の先頭に要素を追加する場合には unshift() を使います。そして複数の配列を連結するには concat() を使います。

もちろん、配列に要素を追加する方法は他にもたくさんあります。ぜひ自分でも調べて、便利な配列メソッドを見つけてください！

筆者の Twitter もありますのでお気軽にご連絡ください。要素の追加に使うお気に入りの配列メソッドなどもぜひ教えてください。

JavaScript で日付をフォーマットする必要がある時、筆者は長いこと Date-fns のようなライブラリを利用してきました。しかし JavaScript がデフォルトで提供しているシンプルな日付形式だけを必要とするような、小規模なプロジェクトでこれをやるのは気持ち悪く感じます。

他の開発者も同じことをしているのをよく見かけます。そして筆者もこれがベストな方法だと思っていましたが、最近になって、JavaScript の日付の整形には必ずしもライブラリを使わなくてもよいと気が付きました。

こちらのコードで試すことができます👇

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short", day:"numeric"})
// "Friday, Jul 2, 2021"

動作を確認したら、次はなぜこれでうまくいくのかと、JavaScript の日付を一行のコードでフォーマットする方法をいくつか学びましょう。

JavaScript の日付を一行のコードでフォーマットする方法についてのインタラクティブな Scrim

(訳注: Scrimba というサイトの機能で、インタラクティブなエディタと動画がセットになっています。)

JS で日付をフォーマットする方法

JavaScript では日付の取得は問題なくできることが多いですが、その日付をプロジェクトに合わせてフォーマットするのは、初心者にとって難しい場合があります。それで多くの人が結局ライブラリを使うことになるのです。

JavaScript で日付を取得するために最もよく使われる方法は new Date() オブジェクトです。

デフォルトでは、ターミナルで new Date() を実行すると、ブラウザのタイムゾーンを使用した日付が Fri Jul 02 2021 12:44:45 GMT+0100 (British Summer Time) というようにフルテキストの文字列で表示されます。

しかしこのままウェブページやアプリケーションに表示したのでは、読みづらく、技術的にも拙く見えることでしょう。そこで、このような日付をフォーマットする方法を探そうと思うはずです。

では、Date オブジェクトに作用するメソッドをいくつか見ていきましょう。

JavaScript の日付関連メソッド

Date オブジェクトに使えるメソッドは多数あり、これを使って Date オブジェクトから情報を取得できます。その一部を紹介します。

• getFullYear() – 年を 4 桁の数字で取得する (yyyy)
• getMonth() – 月を数字で取得する (0-11)
• getDate() – 日を数字で取得する (1-31)
• getHours() – 時を取得する (0-23)

他にもたくさんあります。

残念ながら、日付を希望の形式に変換するためには、これらのメソッドに多くのコードを付け加える必要があることがほとんどです。

たとえば、new Date().getMonth() は July (7 月) を表す「6」を出力します。プロジェクトで「July」という文字を使うには次のような長いコードが必要で、煩わしくなることもあるでしょう。

const currentMonth = new Date();
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log(months[currentMonth.getMonth()]);

それでは、もっと便利に日付をフォーマットできる 2 つのメソッドを見ていきます。

JavaScript の toDateString() メソッド

JavaScript の toDateString() メソッドは、Date オブジェクトの日付の部分を次の形式の文字列で返します。

1. 曜日の最初の 3 文字
2. 月名の最初の 3 文字
3. 必要に応じて左側がゼロ埋めされた 2 桁の日付
4. 必要に応じて左側がゼロ埋めされた最低 4 桁の年

new Date().toDateString();
//"Fri Jul 02 2021"

このメソッドの大きな欠点の 1 つは、日付の出力形式を希望に合わせて変更できないことです。たとえば、日付を英語以外の言語で表示することができません。

では、筆者が最も良いと思うもう 1 つのメソッドを見ていきましょう。

JavaScript の toLocaleDateString() メソッド

このメソッドは、Date オブジェクトを地域ごとの書き方に合わせた文字列にして返します。また引数でオプションを指定でき、関数のふるまいをカスタマイズできます。

構文:

toLocaleDateString()
toLocaleDateString(locales)
toLocaleDateString(locales, options)

例と出力をいくつか見てみましょう。

const currentDate = new Date();

const options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };

console.log(currentDate.toLocaleDateString('de-DE', options));
//Freitag, 2. Juli 2021

console.log(currentDate.toLocaleDateString('ar-EG', options))
// الجمعة، ٢ يوليو ٢٠٢١

console.log(currentDate.toLocaleDateString('en-us', options));
//Friday, Jul 2, 2021

また、ロケールとオプションを指定しないことも可能です。

new Date().toLocaleDateString()
// "7/2/2021"

そしてロケールだけを指定することも可能です。この場合、ブラウザのタイムゾーンを基に、一つ前の例と同じ情報を出力します。

new Date().toLocaleDateString('en-US')
// "7/2/2021"

また、必要に応じてオプションを組み合わせることもできます。基本的な 4 つのオプションは次の通りです。

• weekday – 曜日を表示形式の指定 (short または long) に合わせて出力する
• year – 年を数字で出力する
• month – 月を表示形式の指定 (short または long) に合わせて出力する
• day – 日を数字で出力する

new Date().toLocaleDateString('en-us', { weekday:"long", year:"numeric", month:"short"})
// "Jul 2021 Friday"

new Date().toLocaleDateString('en-us', { year:"numeric", month:"short"})
// "Jul 2021"

まとめ

Date オブジェクトにはフォーマット用メソッドが 7 種類ほどあります。それぞれのメソッドで所定の値が得られます。

1. toString() では Fri Jul 02 2021 14:03:54 GMT+0100 (British Summer Time)
2. toDateString() では Fri Jul 02 2021
3. toLocaleString() では 7/2/2021, 2:05:07 PM
4. toLocaleDateString() では 7/2/2021
5. toGMTString() では Fri, 02 Jul 2021 13:06:02 GMT
6. toUTCString() では Fri, 02 Jul 2021 13:06:28 GMT
7. toISOString() では 2021-07-02T13:06:53.422Z

さらに高度な日付形式を使いたい場合は、カスタムフォーマットを自作する必要があります。カスタム日付フォーマットの作成方法については、下記のリソースを参考にしてください。

役に立つリソース

• Everything You Need to Know About Date in JavaScript
• JavaScript - How to Format Date in JavaScript
• How to format a date in JavaScript
• The Definitive Guide to DateTime Manipulation

JavaScript には HTTP リクエストを実行できる優れたモジュールやメソッドがあり、サーバー側のリソースにデータを送受信するために使えます。この記事では、JavaScript で HTTP リクエストを実行する方法のうち、よく使われるものをいくつか紹介します。

Ajax

Ajax は非同期の HTTP リクエストを行う古典的な方法です。データは HTTP POST メソッドを使って送信され、HTTP GET メソッドを使って受信されます。GET リクエストの実行方法を見てみましょう。ここでは、ランダムなデータを JSON 形式で返してくれる、開発者向け無料オンライン REST API「JSONPlaceholder」を使用します。

Ajax で HTTP リクエストを実行するには、まず XMLHttpRequest() で新しくオブジェクトを初期化して、次に URL エンドポイントと HTTP メソッド (この例では GET) を指定します。最後に、open() メソッドを使って HTTP メソッドと URL エンドポイントを結び付け、send() メソッドを呼び出してリクエストを実行します。

この例では XMLHTTPRequest.onreadystatechange プロパティを使用して、HTTP レスポンスをコンソールログに出力します。このプロパティには readystatechange イベントが発生した時に呼び出されるイベントハンドラーを含めます。

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

ブラウザーコンソールを確認すると、データの配列が JSON 形式で返されているのが分かります。では、リクエストが完了したかどうかを知るにはどうしたらいいのでしょうか？言い換えれば、Ajax でレスポンスを扱うにはどのようにしたらいいのでしょうか。

onreadystatechange プロパティには readyState と status という 2 つのメソッドがあります。これを使ってリクエストの状態が確認できます。

readyState が 4 の場合は、リクエストが完了したことを意味します。readyState プロパティには 5 種類のレスポンスがあります。詳しくはこちらを参照してください。

JavaScript で直接 Ajax を呼び出す以外にも、HTTP 呼び出しの実行に便利なメソッドには、jQuery メソッドの $.Ajax などがあります。次はそちらを紹介します。

jQuery メソッド

jQuery には HTTP リクエストの扱いを楽にする多くのメソッドがあります。このメソッドを使えるようにするには、プロジェクトに jQuery ライブラリを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.ajax

jQuery Ajax は、HTTP 呼び出しを行う最もシンプルなメソッドの一つです。

$.ajax メソッドには多くのパラメーターが指定でき、必須の物もそうでない物もあります。その中には、受け取ったレスポンスを扱うための success と error という 2 種類のコールバックオプションがあります。

$.get メソッド

$.get メソッドは、GET リクエストを実行するために使われます。このメソッドは 2 つのパラメーターを受け付けます。エンドポイント (URL) と、コールバック関数です。

$.post

$.post メソッドはサーバーにデータを POST する方法です。これは 3 つのパラメーターを受け付けます。URL、POST したいデータ、そしてコールバック関数です。

$.getJSON

$.getJSON メソッドは、JSON 形式のデータのみを取得します。これは 2 つのパラメーターを受け付けます。URL とコールバック関数です。

jQuery にはこのように、リモートサーバーにデータを要求したり送信したりする各種メソッドが備わっています。しかし、これらのメソッドは実は $.ajax メソッドだけで実行できます。その例が下記です。

fetch

fetch は、非同期リクエストを実行できる新しい強力なウェブ API です。実のところ、HTTP リクエストの方法としてベストな、筆者のお気に入りでもある方法の 1 つが fetch です。fetch は、ES6 の特徴である「プロミス」を返します。ES6 に馴染みがないなら、こちらの記事 (英語) で詳しく解説していますので参考にしてください。プロミスを使うと、非同期リクエストをスマートに扱うことができます。では fetch がどのように動作するか見ていきましょう。

fetch 関数は、1 つ必須のパラメーターとしてエンドポイントの URL をとります。その他にも下記の例のように、オプションのパラメーターがあります。

fetch には多くの利点があります。詳しくはこちらを参照してください。また、fetch の他にもサーバーへのリクエスト送受信を可能にするモジュールやプラグインがあります。例えば Axios です。

Axios

Axios は、HTTP リクエストを実行するためのオープンソースのライブラリで、たくさんの便利な機能を備えています。使い方を見ていきましょう。

使用方法:

まず、Axios を追加します。プロジェクトに Axios を追加する方法は 2 種類あります。

1 つ目は、npm を使う方法です。

npm install axios --save

上記コマンドを実行後、Axios をインポートします。

import axios from 'axios'

2 つ目は、CDN を使って Axios を追加する方法です。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios でリクエストを実行する:

Axios でサーバーに対してデータの送受信を行うには GET と POST を使用します。

GET:

axios は 1 つの必須パラメーターと、オプションで 2 つ目のパラメーターを取ることができます。上の例ではシンプルなクエリーのデータを渡しています。

POST:

Axios は「プロミス」を返します。プロミスについて詳しい人は、プロミスを使うと複数のリクエストを実行できることをご存じかもしれません。Axios でも同じように、複数のリクエストを同時に実行できます。

Axios では他にも多くのメソッドやオプションがサポートされています。こちらを参照してください。

Angular HttpClient

Angular には、Angular アプリで動作する独自の HTTP モジュールがあります。非同期リクエストの処理には RxJS ライブラリが使用され、HTTP リクエストを実行するための多数のオプションが提供されています。

Angular HttpClient を使用してサーバーと通信する

Angular HttpClient を使用してリクエストを実行するには、Angular アプリ内でコードを実行する必要があります。そのためのサンプルアプリを作成しました (訳注: リンクは後述)。Angular に詳しくない方は、筆者の記事 Learn how to create your first Angular app in 20 minutes を参考にしてください。

まず、app.module.ts で HttpClientModule をインポートします。

次に、リクエストを扱うためのサービスを作成します。Angular CLI を使用すれば、簡単にサービスを生成できます。

ng g service  FetchdataService

次に、fetchdataService.ts サービスで HttpClient をインポートし、コンストラクターで注入 (inject) します。

そして app.component.ts で fetchdataService をインポートします。

//import
import { FetchdataService } from './fetchdata.service';

最後に、サービスを呼び出して実行します。

app.component.ts:

サンプルアプリのデモは Stackblitz で確認できます。

まとめ

この記事では、JavaScript における HTTP リクエストの実行方法で最もよく使われる物を見てきました。

ここまでお読みいただきありがとうございました。この記事を気に入っていただけましたら筆者の Twitter までご連絡ください。

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

この度、新たに JavaScript 入門講座を YouTube チャンネル freeCodeCamp Japanese にて公開しました。

この講座では、JavaScript の学習を始めるにあたって知っておきたい基礎として、コードの実行方法やコメント、簡単な四則演算、if 文や for 文などの基本的な文法から、近年主流となっている ES6 のアロー関数、クラス、import/export などの新しい文法まで段階を追って学習します。

本動画は、英語版 freeCodeCamp.org チャンネルで公開されている「Learn JavaScript - Full Course for Beginners」を元にした日本語版として作成されました。

日本語版動画は freeCodeCamp コントリビューターの Besshy さんにより作成されました。Besshy さんは慶應義塾大学の大学院生で、「KCS :: Keio Computer Society」という YouTube チャンネルも運営されています。

freeCodeCamp Japanese チャンネルの第一弾動画「Python 入門: 基礎から始める集中講座」に続き、今回は JavaScript の入門講座を作成してくださいました。

この講座では以下のトピックを学習します。

• JavaScript の環境構築、実行
• コメントアウト
• データ型と変数
• 代入演算子 (=)
• 四則演算 (足し算、引き算、掛け算、割り算)
• インクリメント・デクリメント
• 浮動小数点
• 余りの計算
• 複合代入演算子 (+= -= *= /=)
• エスケープシーケンス
• 文字列の連結
• 文字列の長さの取得
• 文字列の要素を取り出す (ブラケットノーテーション)
• イミュータブルな文字列
• 配列、多次元配列
• インデックスを使った配列の要素へのアクセス
• 配列の操作 (push() pop() shift() unshift())
• 関数
• 引数
• スコープ (グローバルスコープ、ローカルスコープ)
• 真偽値 (Boolean)
• if 文を使った条件分岐
• 比較演算子 (== === != !== > <)
• 論理演算子 (&& ||)
• switch 文
• JavaScript のオブジェクト
• オブジェクトの値の変更、追加、削除
• while ループを使った繰り返し処理
• for ループを使った繰り返し処理
• do...while 文を使った繰り返し処理
• 乱数を発生させる
• parseInt() 関数
• 条件 (三項) 演算子
• var、let、const
• オブジェクトが変更されることを防ぐ
• アロー関数
• 関数の default 引数
• Rest 演算子
• Spread 演算子
• 分割代入
• テンプレートリテラル
• オブジェクトの簡潔な作り方
• オブジェクト内での関数の定義の仕方
• コンストラクタ関数とクラス
• getter と setter
• require と import

本講座は YouTube で全編無料公開されています。(全 4.5 時間)

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

ループを使って繰り返し処理をわざわざ書く代わりに、標準で用意されている 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 関連) について無料ニュースレターを配信しています。

筆者は毎週だいたい 18 回くらいは JSON データを扱うことがあると思います。それでもまだ、目的に合わせてデータを操作する方法をほぼ毎回 Google で検索しています。その答えが常に見つかるような究極のガイドがあれば良いと思いませんか？

この記事では、JavaScript でオブジェクトの配列を操作するための基本を紹介します。

JSON 形式のデータを使用したことがあれば、JavaScript オブジェクトを使用したことがあると言えるでしょう。JSON とは JavaScript Object Notation の略です。

オブジェクトの作成はとてもシンプルです。次のように書くだけです。

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

上記のオブジェクトは車を表現しています。車にはさまざまな種類や色があり、各オブジェクトは特定の車を表します。

さて、多くの場合、このようなデータを外部のサービスから取得します。しかし、オブジェクトとその配列を自身で作成することもあるでしょう。筆者がこのオンラインショップを作成した時もそうでした。

このカテゴリー一覧の各アイテムが、HTML で書くと下記のようになっていると考えてみてください。

このコードを 12 回繰り返して書きたくはありませんでした。メンテナンスが困難になるからです。

オブジェクトの配列を作成する

では車の例に戻りましょう。この車のセットを見てください。

これは、次のように配列で表現することができます。

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

オブジェクトの配列は、ずっと同じ状態とは限りません。ほとんどの場合、何かしらの操作をする必要が出てきます。では、既存の配列にオブジェクトを追加する方法を見てみましょう。

オブジェクトを最初に追加する - Array.unshift

配列の最初の位置にオブジェクトを追加するには、Array.unshift を使用します。

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

オブジェクトを最後に追加する - Array.push

配列の最後の位置にオブジェクトを追加するには、Array.push を使用します。

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

オブジェクトを途中に追加する - Array.splice

配列の途中の位置にオブジェクトを追加するには、Array.splice を使用します。この関数はアイテムを取り除くこともできるため、とても便利です。引数の取り方には少し注意が必要かもしれません。

Array.splice(
  {変更の開始位置のインデックス},
  {取り除くアイテムの数},
  {追加するアイテム}
);

したがって、赤いフォルクスワーゲンのカブリオ (Cabrio、オープンカー) を 5 番目の位置に追加したい場合には、次のようになります。

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

オブジェクトの配列をループして操作する

ここで質問があります。あなたはなぜオブジェクトの配列をループしたいのでしょうか？

なぜそのようなことを聞くかというと、ループすること自体が最終的に達成したい目的であることはほとんどないからです。

JavaScript では、ループを使って自分でロジックを実装しなくても問題を解決できるように多くの関数が用意されています。では見ていきましょう。

配列内のオブジェクトを値で検索する - Array.find

例として、赤い車を見つけたいとしましょう。そのためには Array.find という関数を使うことができます。

let car = cars.find(car => car.color === "red");

この関数は最初に一致した要素を 1 つ返します。

console.log(car);
// 出力:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

また、複数の値を条件にして検索することもできます。

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

この例では配列内の最後の車が取得されます。

配列から条件に当てはまる複数のオブジェクトを取得する - Array.filter

Array.find 関数はオブジェクトを 1 つだけ返す関数でした。赤い車をすべて取得したい場合には Array.filter を使う必要があります。

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// 出力:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

配列内のオブジェクトを変換する - Array.map

これはよく必要になる操作です。あるオブジェクトの配列を異なるオブジェクトの配列へと変換します。これは Array.map の役割です。では、車をサイズに基づいて 3 つのグループに分類する例を考えましょう。

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// 出力:
// ['large','medium','medium', ..., 'small']

サイズ以外の値も必要であれば、新しいオブジェクトを作成することも可能です。

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// 出力:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

配列内の全オブジェクトにプロパティを追加する - Array.forEach

では、車にサイズの情報を追加したい場合はどうしますか？その場合、元のオブジェクトに新しいプロパティ size を追加して拡張できます。これは Array.forEach 関数が役に立つ場面です。

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

配列をプロパティでソートする - Array.sort

オブジェクトの変換が完了したら、次はオブジェクトを何らかの方法で並べ替えたいことがよくあります。

ソートは通常、すべてのオブジェクトが持っているプロパティの値に基づいて行います。ソートには Array.sort 関数が使用できますが、並べ替えのメカニズムを定義する関数を用意する必要があります。

例えば車を定員 (capacity) に基づいて降順に並べ替えたいとしましょう。

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// 出力:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

Array.sort は、2 つのオブジェクトを比較し、もし並べ替え用の関数の実行結果が正の数であれば、1 番目のオブジェクトを 2 番目の位置に動かします。つまり、並べ替え用の関数は「1 番目のオブジェクトを 2 番目に配置すべきですか？」という質問だと考えることができます。

不要な位置交換を避けるために、両方のオブジェクトの値が同じだった場合を示す 0 (ゼロ) のケースを加えることを忘れないでください。

配列内のオブジェクトが条件を満たすかチェックする - Array.every, Array.some

Array.every と Array.some は、各オブジェクトが特定の条件を満たすかのチェックだけを行いたい場合に便利です。

例えば、配列内に赤いカブリオがあるでしょうか？すべての車に最低 4 人が乗車できるでしょうか？もっとウェブに関連した例で言うと、ショッピングカート内に特定の製品があるでしょうか？

cars.some(car => car.color === "red" && car.type === "cabrio");
// 出力: true

cars.every(car => car.capacity >= 4);
// 出力: false

もしかしたら、Array.some によく似た関数の Array.includes を覚えているかもしれません。しかし、Array.includes はプリミティブ型の配列でのみ動作します。

まとめ

この記事では、オブジェクトの配列を作成、操作、変換、ループする基本的な関数について説明しました。つまずきがちなケースのほとんどをカバーしているはずです。

より高度な機能を必要とするユースケースがあれば、こちらの配列についての詳細なガイド (英語) や W3Schools のリファレンス (英語) を参照してください。

または筆者にご連絡ください。また別の記事を用意します :-)

解説

偽値とは、例えば変数を確認する際に、FALSE と評価されるもののことです。JavaScript には主に以下の 6 つの偽値があります: undefined、null、NaN、0、"" (空の文字列)、そしてもちろん、false です。

変数の値が偽値であるか確認する

次のような単純な条件文で、変数の値が偽値であるか確認できます:

if (!variable) {
  // When the variable has a falsy value the condition is true.
}

一般的な例

var string = ""; // <-- 偽値

var filledString = "some string in here"; // <-- 真値 (truthy)

var zero = 0; // <-- 偽値

var numberGreaterThanZero // <-- (ゼロよりも大きな数値は) 真値

var emptyArray = []; // <-- 真値, これについてはこのあと詳しく説明します

var emptyObject = {}; // <-- 真値

配列の興味深い挙動

if ([] == false) // <-- 真値, if ブロック内のコードは実行されます

if ([]) // <-- 真値, こちらも if ブロック内のコードは実行されます

if ([] == true) // <-- 偽値, if ブロック内のコードは実行されません

if (![]) // <-- 偽値, こちらも if ブロック内のコードは実行されません

注意事項

値をブーリアンコンテキストで評価する際は、データ型を意識してください。

値のデータ型として数値を期待している場合、真値／偽値の評価は予期しない結果をもたらすことがあります:

const match = { teamA: 0, teamB: 1 }
if (match.teamA)
  // 偽値と評価されるため、以下のコードは実行されません
  console.log('Team A: ' + match.teamA);
}

上記のユースケースでは、代わりに typeof を用いて、評価する値のデータ型が number であるかどうかを次のように評価します:

const match = { teamA: 0, teamB: 1 }
if (typeof match.teamA === 'number')
  console.log('Team A: ' + match.teamA);
}

関連情報

• truthy | Blog Post - Truthy & Falsey 『ブログ記事 - 真値 と 偽値』
• 偽値 | 用語集 | MDN
• Truthy and Falsy: When All is Not Equal in JavaScript 『真値 と 偽値: JavaScript で完全にイコールでない 2 つのものを比較する場合について』