【障がい者福祉】Reactで作成したB型事業所マップアプリ

こんにちは、M'sLABの後藤です！今回は、Reactを使用してB型事業所検索アプリを作成しました。

このアプリは、所属したいB型事業所を探す際に、各事業所が得意とする業務を簡単に確認できる機能を提供します。利用者の方々からの「どのような業務が得意な事業所なのか？」という声にお応えし、事業所ごとに得意な業務をタグで設定しました。さらに、それぞれの事業所の特徴や売りポイントをキーワードで検索できるため、ニーズに合った事業所を見つけやすくなっています。

このアプリを通じて、手作業系や事務系など、多様なニーズに応じた事業所とのマッチングを実現できれば幸いです。2024年11月2日現在、サンプルデータを掲載していますので、ぜひご覧ください！

1. 概要

このアプリは、B型事業所の情報を地図上に表示し、得意な作業や事業所名、売りポイントで検索できる機能を提供します。ReactとLeafletを使用して、インタラクティブなマップを実現しました。

2. 使用技術

• React: UIの構築に使用

• Leaflet: 地図の表示とマーカーの配置に使用

• CSS: スタイルを整えるために使用

3. 主な機能

• マップ表示: 事業所の位置を地図上にマーカーで表示

• 検索機能:

  • 得意な作業での検索: チェックボックスを使ったタグによるフィルタリング

  • 事業所名での検索: 入力フィールドからの検索

  • 売りポイントでの検索: 売りポイントのテキストによるフィルタリング

4. データ構造

データは以下のように定義されています：

export const locations = [
  {
    name: "事業所A",
    coordinates: [35.6895, 139.6917],
    tags: ["清掃", "調理"],
    sellingPoint: "迅速で丁寧な清掃サービスが特徴です"
  },
  // 追加の事業所...
];

5. コード構成

• App.js: アプリ全体の構成を管理し、検索機能を実装

• BTypeMap.js: Leafletを使ったマップ表示のコンポーネント

• data.js: 事業所の情報を保持するデータファイル

6. スタイル

アプリのスタイルはCSSで整え、ユーザーが使いやすいインターフェースを実現しました。

B型事業所マップ

M'sLABの投稿ぜひ次回もご覧ください！！