![見出し画像](https://assets.st-note.com/production/uploads/images/163948172/rectangle_large_type_2_7398fb0e429061b07b2e84d1cf74cf2f.png?width=1200)
精神障害や発達障害のある方向けのスキルポートフォリオアプリを作成しました
はじめに
このアプリは、精神障害や発達障害がある方々が、自分の持っているスキルを整理し、ポートフォリオを作成する手助けをすることを目的としています。スキルや能力を視覚的に整理することで、自信を持ち、就職活動などの場面で自己アピールしやすくなることを目指しています。障害を持つ方々が自分をもっと理解し、自分の強みを最大限に活かせるようサポートしたいと思い、このアプリを作成しました。
ターゲットユーザー
精神障害や発達障害がある方々は、自己理解が難しい場合があります。このアプリは、日々のスキルやできることを記録し、視覚的に整理することによって、自己理解を深めることができるように設計されています。自分のスキルを一覧化することで、就職活動や自己評価を支援し、生活の質を向上させる手助けになります。
アプリの主な機能
新規登録: ユーザーはメールアドレスとパスワードで簡単にアカウントを作成できます。登録後、ログインすることで自分の情報を安全に管理できます。
スキル登録: ユーザーは、自分ができるスキルを簡単に入力することができます。スキルの追加は簡単で、オフィス系スキルから日常生活のスキルまで幅広く対応しています。
スキル一覧: 登録したスキルは一覧として表示され、自分ができることを一目で確認することができます。スキルを整理することで、自信を持ってアピールできる材料になります。
ポートフォリオの作成: 登録したスキルをポートフォリオとしてまとめることができます。自分のスキルを可視化することで、より具体的に自分の能力を伝えることができます。
開発過程
このアプリは、Reactを使用して開発しました。Reactは、コンポーネントベースのUIライブラリで、動的なユーザーインターフェースを効率的に構築できるため、今回のようなスキル管理アプリにぴったりでした。
アーキテクチャの設計: アプリは基本的に、ユーザーがスキルを登録し、それを一覧表示し、ポートフォリオを作成するという流れで動作します。各ページのコンポーネントを分け、状態管理にはReactのuseStateを使用しました。スキル情報は、アプリ内で一時的に保持され、後にデータベースに保存できるようにしました。
Firebaseの認証機能の実装: ユーザー認証には、Firebase Authenticationを利用しました。FirebaseはGoogleが提供するクラウドサービスで、認証機能を非常に簡単に実装できるため、ユーザー登録やログイン機能を短期間で組み込むことができました。メールアドレスとパスワードを使って新規登録を行い、ログイン後にはユーザー固有のデータにアクセスできるようにしています。
FirebaseのcreateUserWithEmailAndPasswordメソッドを使い、ユーザーを新規登録し、その後、ユーザーID(uid)を取得して、アプリ内で使用することができます。
スキルの管理: スキルは、ユーザーが入力する形で簡単に追加・管理できるようにしました。スキルの情報は、ReactのuseStateで管理され、ユーザーが新しいスキルを登録するたびに、状態が更新されます。スキル一覧を表示する際には、登録されたスキルをmap関数でリストとして表示し、見やすく整理しています。
データベースの使用(Firestore): FirebaseのFirestoreを使用して、スキル情報を保存し、後で参照できるようにしました。Firestoreはリアルタイムでデータを更新することができ、例えばユーザーがスキルを追加した際、即座にその情報をデータベースに保存し、他のユーザーが同じ情報を見れるようにしています。
今後は、データベースに保存したスキルを、ユーザーごとに管理できるよう、より細かい管理機能を追加していきたいと考えています。
使用した技術
React: アプリのフロントエンドにはReactを使用しました。コンポーネントベースの構造でUIを効率的に開発でき、状態管理も簡単に行えるため非常に便利でした。
Firebase Authentication: ユーザーの認証機能には、Firebase Authenticationを利用しました。これにより、メールアドレス・パスワードでの認証をシンプルに実装できました。
Firestore: ユーザーのスキル情報を保存するためにFirestoreを使用しました。Firestoreはリアルタイムでデータが更新され、スケーラブルで高速なデータベースを提供してくれます。
Tailwind CSS: デザインには、Tailwind CSSを使用しました。TailwindはユーティリティファーストなCSSフレームワークで、短期間で美しいUIを構築できるため、非常に役立ちました。
今後の展望
現在、アプリはスキルの追加、表示、ポートフォリオ作成の基本的な機能を実装しましたが、今後はさらに多機能化を図りたいと考えています。
スキル評価機能: ユーザーが自分のスキルに対して評価をつけることができる機能を追加する予定です。これにより、自分の得意分野や向上が必要な分野を可視化でき、より効果的な自己改善が可能になります。
ポートフォリオのカスタマイズ機能: 現在はシンプルなポートフォリオ作成機能しか実装していませんが、今後はレイアウトやデザインをカスタマイズできる機能を追加することで、ユーザーが自分の個性を反映させやすくします。
ユーザー間のシェア機能: 作成したポートフォリオを他の人とシェアできる機能を実装したいと考えています。これにより、就職活動や自己アピールの場面でより活用しやすくなります。
まとめ
このアプリを通じて、ユーザーが自分のスキルをしっかりと認識し、自信を持って社会に参加できるようになることを願っています。技術的にまだ発展途上ではありますが、今後もユーザーのフィードバックを基に、より使いやすく、効果的なツールを提供していきます。
精神障害や発達障害を持つ方々が自分をもっと理解し、ポートフォリオを通じてできることを増やし、自分の強みを生かせる社会を目指していきます。