「プロダクト開発の進め方」セミナー
1215プロダクト開発の進め方.jpg
広報担当
2023/12/15


2023年12月15日（金）に鹿児島工業高等専門学校（鹿児島県霧島市）にて、スタートアップ教育整備事業
インキュベーションプログラム『SPARK』の『プロダクト開発の進め方』を開催しました。

本プログラムの実施経緯や目的・展望については1つの記事に記載いたしましたので、以下のリンクをご参照ください。
SPARKプログラム始動！


また今回のイベントでは、プロダクト開発をする際の流れや役割分担について学んでいただくために、ゲストの方にお話しいただきました。


日時：2023年12月15日（金）16:45~18:15

場所：鹿児島工業高等専門学校　情報工学科棟１F　合併教室

ゲスト：岩丸 慎平（いわまる　しんぺい）氏

参加人数：7名


まず岩丸氏から自身についての紹介と講演内容の流れについて説明がありました。北九州高専の制御系から鹿児島大学の情報系に編入学され、機械系や制御・情報の分野まで幅広く経験されたとのことでした。1社目ではAI・Webアプリケーションの開発や運用を担当し、学生時代からブログなどを通じて300弱ほど様々なジャンルの記事を書いていたそうです。 また、趣味はダンスで、高専祭にて1年生のときからダンスをしており、その延長線上でダンスに関する開発もされてきたとのことでした。

スクリーンショット2024-06-020.09.58.png

スクリーンショット2024-06-020.10.10.png

ほかにも、高専生時代の制作物や、インターンの経験、鹿児島大学の美男美女SNAPのHPにおけるデザインや設立の経験を話されました。

スクリーンショット2024-06-020.10.25.png
また、本日の内容はすでにwebサイトにアップされているため、気になったときに調べてもらえたらと話されました。

プロダクト開発はどのような流れで進むのか

スクリーンショット2024-06-020.11.13.png

プロダクト開発の流れには主に「ウォーターフォールモデル」と「アジャイルモデル」の2パターンがあり、参加者の理解を高める為に、実際の流れを講義の実習に当てはめて説明されました。

スクリーンショット2024-06-020.11.23.png
↑プロダクト開発を「ロボットの回路」を作成する実習に当てはめた場合、先生がロボットの回路の「要件定義・設計」をして、学生が「実装」を行っている事になる。

スクリーンショット2024-06-020.11.39.png
プロダクト開発の流れと聞くと難しい事をしているように見えるが、実際には学生達がしている実習の中にも、プロダクト開発に必要な流れが含まれていると話されました。

スクリーンショット2024-06-020.11.55.png

Webアプリケーションにおける役職に関して

次に、Webアプリケーションにおける役職に関してのお話をしていただきました。
スクリーンショット2024-06-020.12.10.png

参加者の中でアプリケーション開発に触れてきた人が少なかったので、まず始めにWebアプリケーションがどのように動いているものなのか、「アミュプラザのサイトにアクセス」する場合を例として説明されました。

ユーザーがサイトにアクセスした際の流れは以下の通りです。

  1. ユーザーがブラウザにアクセスする
  2. ブラウザがWebアプリに対して表示を要求する
  3. Webアプリがサーバーから必要なデータを取得してくる
  4. Webアプリがサーバーから手に入れてきたデータをブラウザに渡す
  5. ブラウザがデータを表示してユーザーが欲しい情報を見ることができる

スクリーンショット2024-06-020.13.46.png
そして、岩丸氏からこの流れは飲食店で注文をする時の流れと似ていると説明がありました。(今回はスターバックスでの注文を例に出されてました。)
これらにより、概念的に見ると〇〇が欲しいといった伝言ゲームをする仕組みは変わらないと話されました。
スクリーンショット2024-06-020.12.24.png

その後、本題であったアプリケーション開発における役職に関して説明されました。役職に関しては主に「フロントエンド(クライアント)」、「バックエンド(サーバーサイド)」、「インフラ/アーキテクチャ」の3種類に分類され、この用語に関しては対比の仕方や時代背景によって変わる場合があると述べられました。
スクリーンショット2024-06-020.14.19.png

その後、各役職毎の詳細な説明がありました。

  1. フロントエンド(クライアント)
    フロントエンド(クライアント)は主にユーザーがアクセスする画面に関する事を担う。
    スクリーンショット2024-06-020.15.18.png
    実装例：ユーザー操作画面、ログイン機能、ページ遷移 等
    利用技術(一例)：React.js / Next.js 、Veu.js / Nuxt.js 等

  2. バックエンド(サーバーサイド)
    バックエンド(サーバーサイド)は基本的にフロントエンドで行わない事を担う。
    画面に出てくるデータの取得・加工をする。
    スクリーンショット2024-06-020.15.50.png
    実装例：データベースのデータの更新 等
    利用技術(一例)：Java / Kotolin ＋ Spring Boot 、PHP ＋ Laravel 等

  3. インフラ/アーキテクチャ
    フロントエンドやサーバーが動く環境提供を担う。環境に関わる事全般をする。
    スクリーンショット2024-06-020.16.04.png
    実装例：サーバーを用意する、ログインユーザーを管理する 等
    利用技術(一例)：AWS、Google Cloud 等

最後に参加者に向けて、1つのプロダクトを作るためには様々な役職が存在し、多くのエンジニアが協力することでプロダクトが作成されている事を話されました。

まとめ

全体のまとめとして、岩丸氏から講演内容の簡単な振り返りと、今回の内容に関しては今後気になった時・気になった箇所から調べてみて欲しいと伝えられ、講演を終了しました。

ビジネスが成立するための要素から、目指していくべき課題とソリューションの組み合わせ、目的別の市場でのポジショニングなど、プロダクトアウトで考えている学生たちの最低限考えるべき項目といったこれまで深く考えてこなかったそもそもビジネスとして成立するのか？という根本的な部分を考える機会になりました。
２日目は開発の際に出てくる悩みをどのように解決すべきかを教わります！