はじめに

この度、2か月半ほどかけて作成したwebアプリケーションのデプロイが完了したので、ひとまず制作過程などをまとめてみます。

目次

はじめに
-対象読者
-自己紹介
 アプリケーション概要
 なぜ作ろうと思ったか
 使用技術
 制作過程と内容
-反省点
 ChatGPTについて
 おわりに

対象読者

この記事では、開発経験のない学生が3か月でアプリケーションを作成した経緯をまとめています。具体的な実装や技術的な話題はありませんのでご了承ください(これから書いていこうと思います！)。

成果物をこれから作ろうと考えている方の参考や励みになれば幸いです。

自己紹介

地方国立大工学部情報系学科3年で、25卒として就職活動を始めています。
プログラミングに関わる経歴は以下のような感じです。
・大学の講義でC,Java,Python,SQLを勉強
・Python3データ分析試験に合格(昨年夏)
・AtCoderをC++で始め,茶色になる(今年春~夏)
・Build@Mercariに参加し、web開発の基礎を学ぶ(今年5月)

成果物制作前のスキルとしては、
・実務経験、個人開発経験なし
・HTML/CSSは触ったことがある程度、JavaScriptの知識ゼロ

アプリケーション概要

長いので読み飛ばしたい方はこちら

https://github.com/chronoll/KaleidoView
コード等はこちらを参照してください。
READMEにも記載していますが、あらためて説明します。

私の制作したwebアプリケーション"KaleidoView"は、画像投稿型のSNSアプリケーションです。
このアプリの一番の特長は、ユーザーがフォローする対象がユーザーではなく、ユーザーが独自に作成したカテゴリであるという点です。少しわかりにくいと思うので、イラストで図解します。

ユーザーのプロフィール画面から、そのユーザーの持つカテゴリ一覧を見ることができます。自分のプロフィール画面では、新しいカテゴリも作成できます。

ここから、音楽カテゴリをクリックしてみます。

ここでは、音楽カテゴリの情報と投稿一覧が表示されます。自分のカテゴリの場合には新規投稿を作成でき、他人のカテゴリの場合にはフォローボタンがついています。
自分で背景画像を設定できるため、より自分の世界観を表現することができます。

投稿画像をクリックすると、各投稿ページに飛びます。投稿にはいいね機能とコメント機能がついています。
左にカテゴリ情報が表示されていることで、投稿がカテゴリに属していることをより表しています。(画像が途中で切れていますが、実際には画面の高さまで表示されます)

タイムラインでは、フォローしているカテゴリ一覧とその投稿が表示されます。

投稿、カテゴリ、ユーザーの検索機能も備わっています。

なぜ作ろうと思ったか

前述したように、このSNSの一番の特長は「フォローする対象がユーザーではなく、ユーザーが独自に作成したカテゴリ」であるという点です。
多くのSNSでは、フォローする対象がユーザーであり、投稿はそのユーザーに直接紐づいています。そのため、「フォローしているユーザーが興味のないジャンルに関する投稿をして鬱陶しい」「フォロワーから鬱陶しいと思われることを恐れて一つのジャンルの投稿しかできない」と思った経験をしたことがあり、その問題を解決するために今回のようなアプリケーションを作りました。

そもそも成果物としてSNSアプリケーションを選択したのは、複数の友人に利用してもらいたかったという動機によるものです。私は詳しくないのですが、周りの女子大生は聞いたこともないようなSNSアプリを複数利用し、常に友人に自分の情報を発信することを惜しみません。
「自己表現のためのツールの提案」というコンセプトを基に、機能を作成しました。

「自己表現のためのツール」としての特徴として、以下のポイントが挙げられます。
・一つのユーザーが複数の投稿カテゴリを作成できるため、多様な趣味やジャンルを持つことを表現できる
・各カテゴリページで背景画像や画像一覧が表示されるため、自由に画像で自己表現できる

使用技術

-PHP 8.0.29
-Laravel Framework 9.52.10
-Laravel/Breeze v1.19.2
-tailwindcss 3.3.2
-MySQL Ver15.1
-MariaDB 10.2.38

制作過程と内容

ざっくりですが、制作過程と期間を振り返ります。後半数週間以外は大学の講義やテストなどと同時進行している形になります。

PHP,Laravelの学習(2週間程度)
↓
成果物のアイデア出し、ワイヤーフレーム作成、テーブル設計(1週間)
↓
環境構築、データのマイグレーションやシーディング、リレーション(1週間)
↓
バックエンドとJavaScriptの機能開発(3週間)
↓
CSSの学習(3日程度)
↓
TailwindCSSとJavaScriptによるフロントエンド開発(1週間)
↓
細かい修正(3日程度)

反省点

改めて振り返った反省点としては、機能の数の割にバックエンド開発に時間をかけすぎたかなという印象です。初めての個人開発ということで、処理の記述の仕方に慎重になりすぎていたと思います。
逆に良かったと思うのは、最初のワイヤーフレーム作成やテーブル設計にしっかり時間を割いた点です。どのページに何を表示させるかを明確にしておかないと、開発時にその都度考える必要があり、スピード感がさらに悪くなっていたのではないかと思います。

ChatGPTについて

開発で分からない部分はとりあえずChatGPT(GPT-4)に聞いていました。
特にJavaScriptを使ったことがなかったため、「コメントに返信するときにテキストボックスを移動させる」「画像のトリミングをユーザー側で行う」などのフロントエンドの機能は、まるまる実装を任せました。

時間の制約がある中でいち早く成果物を作るという状況で、このように作りたい機能を実現するための手段として用いること自体は悪くないと思います。
しかし、結局苦手とするJavaScriptの体系的な知識を得ることはできなかったため、改めて学習しなおす必要があると感じました。

これからしたいこと

一旦完成としてみたものの、正直機能数としては少なく、改善点はまだたくさんあります。
これからも以下の開発を進めていきたいと思っています。

・レスポンシブ対応 ←至急！
・SNSとしての機能拡充(通知機能、メッセージ機能、外部アカウント認証、ランキング機能)
・外部APIを用いたコンテンツ共有機能
・Reactでの実装　←時間がかかりそう

おわりに

拙い文章ですが、最後まで読んでいただきありがとうございました。
技術力を示す成果物としてはまだ不十分な点も多いですが、温かく見守っていただけると幸いです。