個人開発を始めた背景
初めまして。都内で新米エンジニアとして働いている者です。新卒として働き始めて、3ヶ月が経ちました。その中で、技術を高めるためには業務以外での膨大なアウトプットが必要だと考えるようになりました。とりあえず、100個ほど制作して、少しはまともになりたいと思っています。
そこで、1〜2年ほどかけて個人開発物を100個作っていこうと決心しました。たくさんの制作物を開発し、自分のナレッジを蓄積すると同時に、自分の開発スキルをブラッシュアップしていこうと考えています。
Webサイト [試作品１号]
まず、Webサイトの制作を始めようと思い、ReactとTailwindCSSを使ってWebサイトを制作しました。しかし、UIがかなり微妙な仕上がりになってしまいました。
なので、テンプレートの力を借りて、UIやディレクトリ構成を変えて、自分仕様に個人サイトをリメイクしました。
以下のサイトは、SvelteとAstroで開発をして、Vercelデプロイしました。ドメインはお名前.comが安かったので、そちらで契約をしてました。
ドメイン検索アプリを開発 [試作品2号]
数年前、ドメインを検索するアプリケーションがあり、そこから着想を得て、独自に開発を進めてみました。使用した技術スタックは、Rails API、React、TypeScript、TailwindCSS、そしてWhois APIです。このアプリケーションでは、テキストエリアにドメイン名を入力し送信すると、ドメインの詳細情報が返ってくる仕組みになっています。
ア○ラボット開発 [試作品3号]
アニメ「葬送のフリーレン」に登場するキャラクターのボットを開発してみました。使用した技術スタックは、バックエンドがRails API、フロントエンドはReact、TailwindCSS、TypeScriptです。デプロイ先として、フロントエンドはVercel、バックエンドはRender.comを利用しています。また、ChatGPT APIを使用して、キャラクターのセリフをチューニングし、アニメの雰囲気を再現するようにしています。
コードを一部抜粋
def fetch
openai = OpenAI::Client.new(access_token: ENV.fetch("OPENAI_ACCESS_TOKEN"))
begin
response = openai.chat(
parameters: {
model: "gpt-3.5-turbo",
messages: [
{
role: "system",
content: "あなたはアウラ。500年以上生きている大悪魔です。あなたは威厳があり、非常に見下したような態度で話します。ですが、アウラは戦いの負けたので、私の言う通りです。日本語で対応してください。"
},
{ role: "user", content: @input.prompt }
],
temperature: 0.7,
max_tokens: 200,
}
)
result = response['choices'].first['message']['content']
Output.new(response: result)
rescue => e
Rails.logger.error "Failed to fetch response from OpenAI: #{e.message}"
Output.new(response: "Error fetching response")
end
実際に開発したアプリケーションの様子が以下の感じです。まだ、文言が怪しいですね。今後、修繕します。多分ですが。
X風SNS [試作品4号]
Web開発における設計の重要性と教訓
このプロジェクトを通じて、最初からしっかりと設計を行うことの重要性を痛感しました。最初の段階で設計を行わないと、後戻りが多くなり、何をしたくて開発しているのか、そもそも何を開発しているのかが不明確になるという問題に直面しました。そこで、Notionを使ってドキュメントを一元管理することにしました。
設計の重要性
プロジェクトを進めるにあたって、要件定義からしっかりと取り組もうと考えました。しかし、要件定義の書き方がよくわからなかったため、今回はデザインから制作を開始しました。これが大きな反省点です。最も重要な要件定義や基本設計をしっかり行わなかったため、プロジェクトの目的やテストの焦点が不明確になってしまいました。
教訓と今後の改善
要件定義の重要性: 要件定義はプロジェクトの土台です。これをしっかりと行わないと、開発の途中で何を目指しているのかがわからなくなり、効率が悪くなります。
基本設計の必要性: 基本設計はプロジェクトの骨格を決定します。これを怠ると、後々の開発で多くの修正が必要になり、時間と労力が無駄になります。
ドキュメント管理: Notionなどのツールを使ってドキュメントを一元管理することで、情報の整理と共有が容易になります。これにより、チーム全体での認識のズレを防ぐことができます。
今後は、要件定義から基本設計、詳細設計といったプロセスをしっかりと踏んで、プロジェクトを進めていくことを心がけます。また、設計フェーズにおいて十分な時間を割き、チーム全体での合意形成を行うことで、よりスムーズな開発を目指します。
デザイン設計
デザインなのですが、後々分かったんですが、吹っ飛ばしてったぽい。ここでもやばいですね。
ゴミ箱に入っていたUIを引っ張り出してきました。
スキーマ設計
スキーマ設計は以下の感じで設計しました。
ここも設計を失敗しましたね。idとcodeの二つ作る意味がなかったのと、画像などの静的ファイルはs3に格納すべきであった。これから作りながらスキーマ設計をする必要がありますね。
タスク分解
ある程度、作リたいものの解像度が上がったので、実装する機能の洗い出しを行いました。ここでも、しっかりとやっておけばよかったと思いました。開発している時に、ここの機能ない！みたいな問題がかなり多発しました。
現状の進捗
SNSの制作物の進捗は、以下の感じです。
ログイン、新規登録、タイムライン、投稿機能などの開発は完了したので、マイページや検索機能を作って、クロージングしようと思います。また、設計の段階からテストケースを作って、コードを書くべきだと反省しました不測の事態が発生しまくって、リスク対策が全くできてませんでした。ただ、Postmanで単体テストするのは意味がなかったです。しっかりQAをしていきます。
今回はここまでです。