はじめに
25卒上智大学経済学部のAkiraです。
僕は、(当時大学1年)2021年6月からプログラミングの勉強をはじめ、POSSEという大学生プログラミングコミュニティで運営しつつ学習しながらハッカソンやチーム開発を行っています。
POSSEのリンク先
Instagram：https://www.instagram.com/posse_programming/
Twitter：https://twitter.com/posse_program
今回、2022/03~2022/06の3ヶ月間、プログラミン学習1年未満の文系大学生3人がチーム開発をして制作したWEBサイト「就活エージェントの比較サイト&管理者画面」というものを紹介していきます。また、最後の方にはチーム開発の観点から考えたことを述べています。
・プログラミング初学者
・エンジニア学生
・チーム開発に興味がある方
・JS,PHPに興味がある方
・ぶっちゃけ誰でもOK
目次
制作背景
制作背景としては、現在僕が所属しているPOSSEという大学生プログラミングコミュニティで行われたイベントで制作しました。
〜イベントの内容〜
- 2022/03~2022/06の3ヶ月間でチーム開発を行う。
- 現役のエンジニアさんがイベントの内容を作成。
- 「就活エージェントの比較サイト」(CRAFT)というサイト制作の依頼を案件者様からいただくという架空の設定のもとで開発。
- ビジネスモデルとしては、案件者様が各就活エージェント(duda、リクルートなど)と契約を結び、契約した就活エージェントの企業をサイト(CRAFT)に載せる。そして、就活生がそのサイトに訪問し、就活エージェントの企業を選択し申し込む。そこでマネタイズが発生。
- 実際に僕らが行った業務としては、案件者様からのヒアリング、要件定義、設計、開発、テスト、プレゼンです。実際の現場に近い感覚で幅広い経験をさせていただきました。
チームメンバーの紹介
チーム構成は3人。全員フロントエンドもバックエンドも担当ととして稼働。
3人の共通点
- プログラミングの学習を始めて半年と少しぐらい。
(当時学習していたもの：HTML, CSS, JavaScript, PHP, MySQL, Docker, Githubの扱い) - 経済学部出身
- イベント開始の当時は大学1年の終わり頃
3人の特徴
技術スタック
イベントなので基本的に使用言語は指定されていました。
業務フロー
ちょっと複雑なのでここ読み飛ばしていただいても構いません。🙏
（詳細が気になる方向け）
システム対象外の部分は開発していません。
工夫した要件定義
要件定義とは、簡単に言うと、システム開発の「目的」を明確にすること。めちゃ大事。
マネタイズ面をしっかり考慮
比較サイトとはいえ、案件者様と契約したエージェント企業の両方にとってマネタイズが生まれるように考慮する必要があると思いました。
契約を結んでマネタイズを発生させる今回のビジネスモデルに対し、案件者様から受けた依頼が「比較サイト」であるため、正直なかなか相性の悪い組み合わせでした、、！笑（企画者の意図があるのかな、、）
なぜなら、もし単純に比較して優劣が生まれてしまうと、CRAFTと契約するエージェント企業は人気企業だけに偏ってしまい、結果的に契約数の機会損失となりマネタイズが生まれないことになるからです。
よって、、、
工夫した点としては、サイト上で掲載中の各エージェント企業同士が優劣を生まないようなサイト設計にし、サイトを訪れた就活生にはフラットな視点でエージェント企業を選んでもらえるように公平性を持たせることでした。
以下、実際どのようにサイトに工夫して反映させたか。
- 掲載の順番を上から新規契約順にした。
- 優劣をつける絞り込み検索ではないこと。
ユーザーになるべく多くのエージェント企業に問い合わせてもらいたい
理由は単純で、マネタイズが多く発生することと、就活生にとって相性の合うエージェント企業を見つけやすくなるから。
以下、実際どのようにサイトに工夫して反映させたか。
- 情報量をなるべく最低限に抑えることで選択に疲労を感じさせない
- キープ機能によって一括問い合わせを実現
- サイトのfirst viewにキャッチコピーとして「気軽に複数のエージェント選びを」反映
実際に運用できそうなサイトを実装（←要件定義ではないが工夫した点）
管理者画面の利便性を高めることで、「実際に運用できそうなサイト」になるよう心がけて実装した。
制作物
こちらが実際に制作したWebサイトです。
↓ デモンストレーションした説明動画（Youtube）※ 動画編集しました
https://www.youtube.com/watch?v=UTJUeRpMnwc
動画のスピードが少し早いのでゆっくり見ていただけるとわかりやすかもです！
※ 実在するエージェントを例に載せていますが、内容は一切関係ありません。（特徴やタグ情報など）
サイト別
サイトは3つ
↓ gifではサイトの見た目だけ紹介しています。実際の動きや機能が気になる方はYoutubeへ
- ユーザー画面（就活生が訪問するHPページ）
↑申し込みフォームの入力の続きが気になる方はYoutubeへ - 契約を結んだ各エージェント会社向けの管理者画面(CMS)
- 上記二つの画面を管理するCRAFT管理者画面(CMS、主に案件者様が扱うサイト)
機能一覧
実際に運用できそうなサイトとして意識し作り、機能は盛り盛りに積んでます笑
ユーザー画面 (HP) ※レスポンシブ対応も実装済み
- タグによる絞り込み検索
- キープ機能、モーダルでキープ一覧表示
- 一括問い合わせ機能
- 問い合わせ後、自動で申込情報の確認メール受信と各エージェント企業へメール送信 (MailHog)
このサイトでは主にJavaScriptのスキルが問われます。
特に絞り込み検索を実装する際、ググって参考になる記事に沿ってコーディングしましたが、実際に自分が作るサイトに応用させるためには、配列と条件分岐に対してしっかりとした理解が求められます。
（さらにPHPの方ではforeachでやたらとidが回っているのでややこしくて大変でした、、！）
初心者にとっては難しかったですが、初心者こそfor文とif文に慣れると今後楽かもしれません。
余談：最近は競プロのAtcoderを始めましたが、for文とif文の扱い方をすごく鍛えられます！個人的にはプログラミングを始めたら競プロもすぐ一緒に始めるべきでした。。
各エージェント会社向けの管理者画面(CMS)
- 認証機能(ログイン、ログアウト)
- 問い合わせをしにきた学生情報の一覧表示
- 通報機能
- 学生の電話番号orメールアドレスが重複した場合、「重複」を表示
- 合計問い合わせ数の表示
- 合計請求金額の表示
通報機能以外は基本的にDBからの情報を反映させているだけです。
上記二つの画面を管理するCRAFT管理者画面(CMS・案件者様が扱うサイト)
- 認証機能(ログイン、ログアウト)
- HPに掲載中と非掲載中のエージェント一覧画面表示
- 新規エージェント企業の登録
- 各エージェント企業の編集(掲載期間、タグ、掲載内容など)
- タグ追加・編集
- 掲載期間外 or 申し込み上限到達 or タグ不足の場合、自動で掲載停止
- 各エージェント企業から学生に関する通報が届いた際、問い合わせを無効化にする機能
- 各エージェント企業の請求金額表示
ここがバックエンドの力を一番発揮しています。
特に「エージェント企業の掲載」、「タグ機能」に対してCRUD機能がしっかり積んであります。
CRUDとは：IT用語。Creat、Read、Update、Deleteの頭文字を表した言葉。
また、CRUDを扱うサイト制作をする場合、必然的にDBの操作を学習することになるので、PHPとDB(MySQLなど)は一緒に学びたいところ。（大体のWebサイトやアプリにはCRUD機能が付いてます。）
失敗&学んだこと
僕たちのチームは、イベントが始まってからの取り組み、いわゆる「初速」がかなり遅かったです。
イベントが始まってからの取り組みとは、やはりやるべきことはかなりあるんです。お互いが稼働できる時間帯の確認、コミュニケーションの取り方、早めの自己開示、要件定義など、これらをイベントが始まってからなんとなく惰性で取り組んでいたことが、後にチームの心理的安全性、モチベを下げることに響いてしまいました。これらの重要性を後から気づいて取り掛かっても、意外と不可逆的な要素が強いので気をつけたいところです。
心理的安全性が下がると、、
⇨ 失敗した時の周りの視線を不安に感じ取ってしまうため、技術的チャレンジをしにくい組織になる。
⇨ 言いたいことが言いづらくなる。（←チームとしてなかなか致命的です）
モチベが下がると、、
⇨ 頑張ることの理由をあちこちに求め始めてしまう。内発的に頑張れることが理想。
個人的には、もっと「バックエンド」の方のタスクもやるべきだったと感じています。当時、現状の自分自身の能力をわきまえて挑戦することを抑えてしまっていました。しかし、それではいつまでもその能力をわきまえた範囲以内でしか成長ができないと感じました。
エンジニアとして、この先触り慣れていない技術でも開発する上で扱う必要が多く出てくると思います。今回の僕の場合、PHPよりはJSに慣れていたからバックエンドのタスクを少ししか引き受けなかったこと。これによってせっかくのバックエンドを鍛えられる成長機会を逃したことが勿体なかったなと思っています。
⇨ 触り慣れている技術を増やすことよりも、触り慣れていない技術をいかに早く習得して活かせるか、の方が長期的にも考えて非常に大事な心構えかなと思いました。（置かれた環境に柔軟に対応できる人的な）
ただ、触り慣れていない技術にチャレンジして上手くいかなかった時、やはりチームに迷惑をかけてしまう申し訳なさや視線を不安に感じてしまうと思います。だからこそ、先ほど述べたように、チームの心理的安全性を築け上げることは怠ってはならないんです。
感想
今回のチーム開発経験は、エンジニアの「総合格闘技」だった
エンジニアとなると、やはりコーディングスキルやコンピューターサイエンスの知識なども重要ですが、今回はさらに加えて、心理的安全性の確保、案件者様からのヒアリング能力、要件定義をする上でチームとのコミュニケーション能力(会話をする上で重要なことは、話の「前提」の擦り合わせだと感じました)、プレゼン力。そして活動は3月から6月なので時期的にはもちろん大学に通いながら僕たちは経済学をやりつつとなるので、チーム内のモチベーション、時間や人との付き合いといったマネジメント能力も求められました。実際社会に出てエンジニアとなったら、これらのスキルは当然と求められると思うので早めに実感できてよかったなと思っています。
（約一年越しに記事にまとめているので、もっと早くからQiitaを始めるべきでした。）