この「FinTech Valley」の賑やかなスタートアップシーンを舞台にした実験では、急速に成長するテック企業の金融追跡システムを強化することが課題となっている若手ソフトウェアエンジニアのアレックスになりきります。同社の財務チームは、組織全体の財務状態を動的に把握する方法を求めています。あなたの目標は、既存のウェブベースの会計アプリケーションに、総収入、総費用、純残高を計算して表示する機能を実装し、リアルタイムでの財務洞察を提供することです。
ポイント：
JavaScript のArray.prototype.filter()とArray.prototype.reduce()メソッドは、配列操作の強力なツールであり、データ処理を効率的かつ簡潔にすることができます。これらのメソッドは、それぞれ配列内の要素をフィルタリングしたり、配列要素の値を集計したりするために使用されます。
filter()メソッドは、提供された関数によって実装されるテストに合格するすべての要素を持つ新しい配列を作成します。元の配列は変更されず、新しい配列が返されます。
構文：
let result = array.filter(function (element, index, array) {
// テスト条件
return true; // または false
});element：配列内で現在処理されている要素。index（省略可能）：現在の要素のインデックス。array（省略可能）：filterが呼び出される配列。たとえば、10 より大きい数をフィルタリングする場合。
let numbers = [5, 12, 8, 130, 44];
let filtered = numbers.filter(function (number) {
return number > 10;
});
console.log(filtered); // 出力：[12, 130, 44]
reduce()メソッドは、配列の各要素に対してリデューサ関数（あなたが提供する）を実行し、単一の出力値を生成します。
構文：
let result = array.reduce(function (
accumulator,
currentValue,
currentIndex,
array
) {
// 集計結果を返す
return accumulator + currentValue;
}, initialValue);accumulator：コールバックの返却値を集計します。これは、コールバックの前回の呼び出しで以前に返された集計値であり、指定されている場合はinitialValueです。currentValue：配列内で現在処理されている要素。currentIndex（省略可能）：現在処理されている要素のインデックス。array（省略可能）：reduceが呼び出された配列。たとえば、配列内のすべての数の合計を計算する場合。
let numbers = [5, 12, 8, 130, 44];
let total = numbers.reduce(function (accumulator, number) {
return accumulator + number;
}, 0);
console.log(total); // 出力：199
この 2 つのメソッドを使って、次のステップは収入と支出の合計を計算することです。
このステップでは、総収入、総支出、および残高を計算するロジックを実装します。これには、取引記録を反復処理し、収入と支出を合計し、純残高を計算する JavaScript 関数を追加する必要があります。
script.jsに次のコードを記述します。
document.addEventListener("DOMContentLoaded", function () {
const updateSummary = () => {
const totalIncome = records
.filter((record) => record.type === "income")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const totalExpense = records
.filter((record) => record.type === "expense")
.reduce((acc, record) => acc + parseFloat(record.amount), 0);
const balance = totalIncome - totalExpense;
totalIncomeEl.textContent = `Total Income: ${totalIncome}`;
totalExpenseEl.textContent = `Total Expense: ${totalExpense}`;
balanceEl.textContent = `Balance: ${balance}`;
};
// 記録を localStorage に保存して UI を更新する関数
const saveRecords = () => {
localStorage.setItem("records", JSON.stringify(records));
renderRecords();
updateSummary();
};
renderRecords();
updateSummary();
});この JavaScript 関数であるupdateSummaryは、records配列から総収入と総支出を計算し、残高を更新します。その後、要約セクションのそれぞれの HTML 要素のテキストコンテンツを更新します。
この実験では、「FinTech Valley」にあるスタートアップ企業の金融状況を通じた旅に出ました。あなたはアレックスの役割を演じ、ウェブベースの会計ツールを強化して、リアルタイムの財務要約を提供しました。動的な要約機能を統合することで、財務チームが会社の財務状況を即座に把握できるようになり、HTML、CSS、JavaScript を組み合わせてインタラクティブで情報豊富なウェブアプリケーションを作成する力を示しました。この経験を通じて、JavaScript を使って DOM を操作する方法を学び、現実世界のアプリケーション開発の理解を深めました。
