0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Day5】お試し実装!ファイルをアップロードしてバックエンドで処理する

Posted at

はじめに

勉強とアウトプットを兼ねて、Webアプリ開発の記録を記事にしてみます。

個人のメモ的な側面が強いです。
Web開発初心者すぎて至らぬところだらけだと思いますが、暖かい目で見ていただければ幸いです。

↓ これまでの内容 ↓
【Day0】アプリが完成するまで毎日投稿
【Day1】開発環境を考える
【Day2】開発環境を構築する、、、はずでした
【Day3】まずはフロントだけ開発環境を構築する
【Day4】バックエンドの開発環境を整えつつ、マルチコンテナ対応のDevcontainerにする

前回のあらすじ

前回はバックエンド開発用のコンテナを作成して、フロントとバックのコンテナを切り替えて開発できる仕組みを整備しました。

今回やったこと

まずはフロントとバックでどんな感じで画像をやりとりするのかを知りたいので、Chat GPTにプロトタイピングしてもらいました。

フロント側で画像を選択してアップロードして、その画像をバックエンド側でグレースケール化してフロントに返して、ブラウザに表示させる機能を実装しました。

image.png

実装ソースはこんな感じです。(※ 2025/06/07時点では公開中)

今日は執筆にも実装にもあまり時間が取れないため、これでおしまいです!泣

おわりに

本日の実装はすべてChat GPTさんにやっていただきました!
頭が上がらない!!

ただ、本当にプロトタイピングなら生成AIで一撃でできてしまいますね、、、
改めて生成AIすごいなぁと思いました。

今日は写経しただけで終わってしまい全然ロジックの詳細まで理解しきれてないですが、まずは手を動かして前に進めた!ということでポジティブに考えます◎

明日もがんばるぞ!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?