半文系学生がエンジニアの良きパートナーたちとの出会いを促進するためのアプリを作りました！

始めに

この度エンジニアやエンジニア志望の方々が希望に沿ったパートナーを見つけ、実際に出会い協力して学習を進めることで独学にまつわる種々の課題を解決するためのアプリケーションを作成しました！
良きメンターを探している学習者、共通の技術を通じてプライベートに寄った人脈を広げたいエンジニアのみなさんぜひ一度本アプリをご利用してみてくださいm(__)m

1. プロジェクト概要

基本情報

• プロジェクト名: スキルシェア
• 開発期間: 2024年11月初頭～2025年2月末
• 公開URL: https://skill-share-git-main-yuji1123-hyogos-projects.vercel.app/
• PCのみ対応

機能説明

・一部不完全な機能がありますがご容赦ください。

デモ動画

• 新規登録/ログイン
  
  

• プロフィール編集（興味のあるタグを登録）
  
  *プロフィール写真/名前/興味のある技術タグ(イベント参加やMVP獲得でレベルアップ)の登録を行うことができます
  tagの選択システムの仕様について
  *提案タグではすでに既存のユーザーまたはクラブに登録しているタグが提案されます(提案タグをクリックで追加)
  *まだ登録されていない新規のタグは入力フィールドにタグ名を入力したのち[タグを追加]ボタンでタグを登録します。

• 検索とフォロー
  
  
  *タグのみ、ユーザー名のみでの検索も可能。タグレベルでソートやフィルタリングも可能
  *フォロー中のローディングUIの表示を失念しており混乱を与えてしまうUIになっていたため後程修正を行います

• クラブ作成
  
  

*クラブにはメインの活動場所の登録が必須となります

• クラブ詳細画面
  
  *クラブ管理ページの参加クラブ一覧からクラブ情報が記載されているカードの[クラブ詳細へ]を押すことで遷移が可能となります。
  *クラブ詳細画面の機能
  *「掲示板」「イベント一覧・作成」「クラブメンバー一覧の表示」「クラブ情報の表示」
  *「クラブ編集」(作成者またはもっとも経歴の長いメンバーのみ)

• 掲示板とイベントの作成・開始
  　

*イベント終了時に開催クラブ、参加者のにイベントに登録したタグと同名のタグに経験値が付与されます。

• 開催中のイベントの操作(MVP投票/技術記事共有)
  
  *イベントの学習テーマの手助けとなる技術記事を各自で共有することで効率的なリサーチが可能になり、また他の学習者のリサーチ方法を学べます。

• イベントの事前学習として参考となる記事/イベントの振り返りとしてのフィードバックの共有！
  

• 終了済みイベントに対する操作（フィードバックの共有/MVP確定/経験値分配）
  
• 近くのクラブを探す機能
  
  どうしても実装したい機能であったことと
  時間的制約から地図コンポーネントに生成AIを利用しましたがコードが追いきれていないといった事情で現在距離にかかわらずすべてのクラブの表示が行われてしまっています

タグシステム

①イベントに技術タグを登録

②イベント参加者からMVPを決定(MVPには経験値ボーナス)


③経験値を分配

④イベント参加ユーザーのタグレベルと開催クラブのタグレベルアップ！

主要機能

①ユーザー関連機能

• ユーザー認証（サインアップ、ログイ）
• ユーザープロフィール管理
• 投稿機能（
• コメント機能
• フォロー管理

②クラブ関連機能

• クラブ作成・編集
• イベント作成

③イベント機能

• MVP投票
• 開始前の学習記事共有
• 終了後のフィードバック共有
• 参加者、開催クラブのタグへの経験値分配(イベントに登録したものと同名タグ)

④検索機能(クラブ・ユーザー)

• タグ検索
• 名前検索
• 名前＋タグ検索
• タグレベルでのソーティング

⑤位置情報/地図表示(近くのクラブを検索)

開発経緯

「プログラミング学習、難易度バグってない？」 🤔

「アプリ作りたい！」って思ったのに、何から始めればいいのか分からん…

ググっても情報バラバラ、公式ドキュメントは難しすぎ、ちょうどいい資料が見つからん。

コードは書けるようになったけど、「これって実務で通用するの？」 って不安になる。

特に、非情報系の学生や独学勢 はめちゃくちゃ共感してくれるはず。

周りにプログラマー志望の仲間がいないと、どこでつまずいても誰にも聞けず、詰むポイント多すぎん？

例えば、こんな悩み

• 「まずアプリ開発って何から始めたらええん？」
• 「ググっても情報バラバラ、何を信じればいいの？」
• 「基礎は分かったけど、実際にどうやってアプリに落とし込むん？」
• 「動くアプリは作れたけど、これって実務で通用する？」
• 「イベント参加したいのに、学校やバイトで時間が合わん…」
• 「企業主催の勉強会、怖すぎ。初心者が行ったらボコられそう…」

これらの悩みはプログラミングに限った話ではなく周りに精通した人がいない技術を学ぼうとしたとき多くのケースでついて回る問題だと思います。

この「学びの壁」をもっとスムーズに乗り越えられたら、プログラミングはもっと楽しくなる！

そこで考えたのが、「学習をもっと実践的に、もっと続けやすくする環境」 を作ること。

「じゃあ、どうやって解決する？」

この問題、どうにかならんの？って考えた結果、行き着いたのが「学習をもっと実践的に、もっと続けやすくする環境を作ること」でした。

プログラミングを独学してると、情報の多さに埋もれて「何をすればいいのか分からん」状態に陥りがち。でも、実際の開発って、「ググる力」だけじゃなくて、「実際にコードを書いて試す力」や「周りと相談しながら進める力」 がめっちゃ大事。

そこで、こんな仕組みがあれば、もっとスムーズに学習できるんじゃないか？と考えました。

---

自分に合った技術を見つけやすくする

「何から始めたらいいん？」問題を解決するために、ユーザーやクラブ、イベントが興味のある技術タグを登録 する仕組みを作りました。

これで、自分のレベルや目的に合ったイベントや学習リソースを探しやすくなります。

例えば…

• 「フロントエンドを学びたい！」 → ReactやVueのもくもく会をチェック
• 「サーバーサイドも触ってみたい！」 → Node.jsのハンズオンに参加
• 「デザインも興味ある！」 → FigmaやUI/UX勉強会を発見

---

参考になる情報を整理して、学びやすくする

公式ドキュメントは難しすぎるし、ネット記事は情報がバラバラ。

じゃあ、学習者同士で「この資料わかりやすかった！」を共有できる場があればよくない？ と思って、技術記事のシェア機能を用意しました。

イベント前には事前に学べる記事を共有し、イベント後には復習のためのフィードバックを残せる。「適切な学習リソースがない問題」を解決！

---

「基礎はわかったけど、実際にどう使うん？」解消

初心者向けの学習サイトで学んだことってすぐにアプリ開発に使えるわけじゃないよね？

「if文書けるけど、じゃあ実際にどこで使うの？」みたいな。

これを解決するために、オフラインで出会い複数人で協力しあって実践型の学習を行えるイベントを開催するためのプラットフォームの提供

• 「チーム開発体験会」 → 実務の流れを体験できる！
• 「小さなアプリを作るワークショップ」 → 短期間で形にできる！
• 「コードレビュー会」 → 他の人の視点を学べる！
• 「エンジニアと雑談できるオープンイベント」 → ガチガチの面接じゃなく、フランクに話せる場！
• 「小規模チーム開発体験」 → 実務っぽい開発を体験できる！

「学んだ知識をどう活かすのか？」を体験しながら学べる環境を用意しました。

またこれなら「実際に使われてる技術」や「どんなスキルが求められるのか」を肌で感じられる。

---

自身や他の個人主導の柔軟なイベント開催

既存のイベントは「主催者が決めた日程ありき」であることが、自分のスケジュールに合わせた学習機会を作るのが難しさにつながっていると思います
そこで考えたのが、「じゃあ、自分でもイベント開けるようにしたらよくない？」 という解決策。

このアプリでは、「個人で気軽にイベントを開催できる」仕組みを導入しました

• 「ちょっとしたもくもく会」 → 友達と1時間だけ集まって作業
• 「深夜のコーディングセッション」 → 夜型エンジニアも学べる場を作る
• 「朝活プログラミング」 → 朝のスキマ時間で学習

「時間が合わないなら、自分でイベントを作ればいい！」 という発想で、学習のチャンスを逃さない仕組み を作りました。

---

⑥ 初心者でも安心して参加できる場を作る

自分のレベルに合ったイベントを簡単に見つけられる！

アプリでは、クラブやユーザーの各技術タグごとにスキルレベルが可視化できるようにしました。

なので「初心者歓迎とは書いてるけどこのイベント、ほんまに自分のレベルで大丈夫かな？」と悩むことなく、自分に合った学習の場を選べる！

例えば…

• 「React Level.1」のクラブの開催するイベントなら、基礎から学べる！
• 「Vue.js Level.30」のクラブの開催するイベントなら、応用的な話が聞ける！

「難しすぎる」「簡単すぎる」問題をなくして、ちょうどいい学びの場を提供を目指しました

---

「結局、何がしたいの？」
シンプルです。

「プログラミングを学びたい人が、もっとスムーズに、もっと楽しく学べる環境を作りたい！」

せっかく学び始めたのに、情報の海で迷子になったり、一人でモチベーションを保つのは大変すぎる。
自分に合った学習ルートを見つけて、実際に手を動かして、仲間と一緒に成長できる！そんな気持ちから本アプリの開発に取り組みました。

2.アプリケーションの特徴:

コンセプト:イベントを中心にした技術学習の支援

「オフラインの技術共有×継続的な学習の支援×ニーズに沿ったレベルの技術を持つ学習パートナーの発見」

• 技術タグを軸にした学習サポート

  • ユーザーやクラブが関心のある技術タグを登録し、それに基づいた学習機会や仲間を見つけられる。

• スキルの可視化と成長の実感

  • 自分の登録したタグと同じタグを持つイベントを完了することで技術タグのレベルをアップさせることができる(イベントMVPはボーナス経験値あり)。

• オフラインイベントと学習の連携

  • クラブが技術タグを設定してイベントを開催し、参加者はスキル向上の機会を得られる。

• 予習・復習のサポート機能

  • イベント中に技術記事を共有して学習を促し、終了後にはフィードバックを通じて学びを整理・定着できる。

• ユーザーのニーズに沿った技術×レベルをもった学習パートナーの検索

  • タグ×レベルでの検索によってクラブやユーザーの検索が可能に

3.ターゲットユーザー

①独学でプログラミングを学んでいる初心者
②学習仲間や技術コミュニティを探しているエンジニア
③技術イベントを企画・運営したいコミュニティ・クラブ運営者
④新たなコミュニティに参加し交流や知識を広げたいエンジニア

4.他の類似サービスとの差別化ポイント

既存の学習コミュニティの問題点

①イベント後の継続的つながりの希薄さ　

　　⇒原因

• 既存の勉強会やハッカソンは、イベント終了後に参加者同士のつながりが途切れやすい。
• イベント後に質問や相談をしたくても、連絡手段がなくなってしまうことが多い。
  学習は「継続」が大事なのに、「一度きりの出会い」で終わってしまうことが多い。

⇒解決策

イベント後もフォローやクラブでつながる「学習SNS機能」

• イベントに参加した人同士が、技術タグを通じてつながりを維持 できる仕組みを提供。
• イベント後に「フィードバック」を残せるようにし、学びの定着を促す。

②個人が「自分の学習目的」に合わせて参加できる場が少ない。
⇒原因

• 既存の学習イベントの多くは 企業が主催し、自社サービスの宣伝がメイン になっていることが多い。　****

⇒解決策

• 個人が主導できる学習イベントの場を提供
  企業ではなく、個人やコミュニティ単位でイベントを開催できる仕組み を整える。
  特定の企業技術に依存せず、広い技術領域を学べる場を作る。
• 学習ニーズに応じたイベント検索機能
  技術タグを基に、自分に合ったイベントを検索しやすくする。
  「個人の学び」を最優先にしたイベント設計を促進する。

5. 技術スタック

フロントエンド

• ライブラリ: React v18.3.1
• 状態管理: Redux Toolkit v2.5.1, Redux Persist v6.0.0
• ルーティング: React Router v7.1.5
• UI/スタイリング: Tailwind CSS v3.3.0, React Icons v5.5.0
• フォーム管理: React Hook Form v7.54.2, Yup v1.6.1
• APIクライアント: Axios v1.7.9
• 地図機能: Leaflet v1.9.4, React Leaflet v4.2.1
• その他主要ライブラリ: React Toastify v11.0.3, React Modal v3.16.3

**生成AI
**地図機能に関するコンポ―ネント:cluaud3.7
**アイコンなどの高度な詳細スタイリング:v0

バックエンド

• 使用言語: JavaScript (Node.js)
• フレームワーク: Express v4.21.1
• データベース: MongoDB (Mongoose v8.7.2)
• 認証: JWT (jsonwebtoken v9.0.2), bcryptjs v2.4.3
• ファイルストレージ: Cloudinary v1.21.0
• バリデーション: Yup v1.6.1

＊＊アプリは開発過程や詳細な技術内容については本記事のみでまとめると長くなりすぎてしまうため後程リンクを追加して別記事でまとめまさせていただきますm(__)m

問題報告や改善提案、その他ご要望があればお手数ですがお聞かせいただける多幸いです

自己紹介

• プログラミングとの出会い

3歳からサッカーを始め、中学・高校・大学では陸上競技に取り組み(大学入学直後から故障続きで走れずほとんどをサポートとして過ごしましたが、、、)、大学時代には陸上スクールのコーチとしてのアルバイトにも努めてきました。

長年熱を入れ努力した陸上、大学入学直後からの故障を機に始めたパワーリフティング、いずれにしてもアスリートとして実業団やプロになる事をあきらめきれず、かといってそこに届くまでの実力も持っておらず明確に将来像をもてずにおり、昨年9月に本格的にプログラミングと出会うまで自分の中でエンジニアとして就職活動を行う将来像は持っていませんでした。

そんな中昨年の夏休み、友人たちと大学2年の授業ぶりにpythonを使って簡単なチンチロゲームを開発して遊ぶ中で授業で学んでいたプログラミングとは違い「実際に苦労して考えて動くものを作る達成感」を味わいプログラミングに興味を持ちました。

そこから友人たちと作成したチンチロゲームのような文字列だけの簡単なアプリケーションではなく、webサイトを作成したいと思いたちセイト先生のyoutubeをはじめ、HTML,CSS,Javascriptについて学習していく中で自分の頭の中にあるイメージがさらに綺麗な形で具現化できることに楽しさを覚え、web開発に魅了されました。

• 本アプリの開発につながった個人的理由

プログラミングの学習を進めていく中で、これまで陸上やパワーリフティングの中で自分が知識を獲得していったプロセスとは異なりプログラミング学習特有の難しさを実感することがありました。

社会情報科学部という学部に在籍していましたが必修のプログラミング授業は1回生にpythonを使って配列やオブジェクト、for文やwhile文といった基礎の学習にとどまりその他の授業もプログラミングやコンピュータサイエンスを多く学べるものが存在せず、実社会とインターネットの関係に関する授業が多くアプリ開発に必要な知識を持った友人が周囲に存在せずかといって一人暮らしでの家賃生活費で手一杯な状況ではスクールに通う費用の捻出が難しいため独学で進める必要があり周りに質問できる機会がありませんでした

そこで前述の課題に直面し、初心者でも簡単にプログラミングを学べる環境を整えたいという思いから本アプリの開発に取り組みました