Zenn
🦸‍♂️

ValueGlanceのインターン試験で作成した財務データフィルタリングアプリの開発体験🌟

2025/01/11に公開
Python
React
Vercel
render
海外企業
tech

はじめに👀

今回ValueGlance様のインターンの試験に挑戦したのでそこで作成した財務データフィルタリングアプリケーションについての記事を執筆いたします。

課題の概要🚀

目的

  • Appleの年間財務データをAPIから取得し、フィルタリングやソートを実装したアプリのを構築する

要件

1.APIからデータを所得し表示をする

  • Financial Modeling Prep APIを使用して年間財務データをテーブル表示

2.フィルタリング機能

  • 日付範囲、売上高、純利益の範囲でフィルタリング可能。

3.データのソート機能

  • 日付、売上高、純利益による明階順、降階順のソート。

4.レスポンシブデザイン

  • モバイルとデスクトップで見やすいデザイン。

開発構成⚒️

使用した技術スタック

  • フロントエンド: React, TailWindCSS, TypeScript
  • バックエンド: Fast API
  • API: Financial Modeling Prep
  • デプロイ: Vercel, Render

構成要素

1.FilterBar Component

  • フィルタリングのフォームインプットを構築し、使用者の条件に基づきデータを取得する
import React, { useState } from "react";

interface FilterBarProps {
  onFilterChange: (filters: {
    startYear: number | null;
    endYear: number | null;
    revenueMin: number | null;
    revenueMax: number | null;
    netIncomeMin: number | null;
    netIncomeMax: number | null;
  }) => void;
}

const FilterBar: React.FC<FilterBarProps> = ({ onFilterChange }) => {
  const [startYear, setStartYear] = useState<number | null>(null);
  const [endYear, setEndYear] = useState<number | null>(null);
  const [revenueMin, setRevenueMin] = useState<number | null>(null);
  const [revenueMax, setRevenueMax] = useState<number | null>(null);
  const [netIncomeMin, setNetIncomeMin] = useState<number | null>(null);
  const [netIncomeMax, setNetIncomeMax] = useState<number | null>(null);

  const handleSubmit = () => {
    onFilterChange({ startYear, endYear, revenueMin, revenueMax, netIncomeMin, netIncomeMax });
  };

  return (
    <div className="p-4 bg-gray-100 rounded-md">
      {/* Input Fields */}
      <button onClick={handleSubmit}>Filter</button>
    </div>
  );
};

export default FilterBar;

2.App Component

  • APIからのデータ処理、フィルタリング、ソート機能を貯めるロジックを実装。
import React, { useEffect, useState } from "react";
import FilterBar from "./FilterBar";
import Table from "./Table";

const App: React.FC = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(`https://financialmodelingprep.com/api/v3/income-statement/AAPL?apikey=YOUR_API_KEY`)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <FilterBar onFilterChange={(filters) => console.log(filters)} />
      <Table data={data} />
    </div>
  );
};

export default App;

学んだこと📚

  • BackendとFrontendの統合まで含めたアプリケーションのデプロイ
  • CORS問題の解決
    • Fast APIでのミドルウェアの設定

まとめ‼️

今回の案件の背景として、英語でrésuméを作成し、ひたすら海外スタートアップの応募にLinkdinを使用して投げつけまくっていたのですがまさか返事があると思いませんでした...!
初めて試験という場面でのコーディングを経験させていただいて実務の際と同じくらい慎重に、より可読性を高めたコードの生成に力を入れました。
今回の試験は、実務に即した知識を育むとてもいい機会になりました🙂‍↕️

Discussion