Open7

ChatGPTを使って、Go&Next.jsでの簡単なランチ情報アプリを作ってみる。

Yuto KataokaYuto Kataoka

基本的な構成

  • バックエンドはGo, フロントエンドはNext.js
    ※勉強のため

コンセプト

  • 社内のslackチャンネルにあるランチ情報を見れるようにする

基本機能MUST

  • ランチ情報一覧
  • ランチ情報検索(条件検索)

基本機能WANT

  • ログイン機能
  • ランチ情報追加機能
    などをつけたい

その他

  • ChatGPTを使えばキャッチアップを高速化出来そう。
  • 一旦取り組み時間は1.5h
Yuto KataokaYuto Kataoka

結果: 一旦最低限の一覧機能は出来た。

ChatGPT最強

https://chatgpt.com/share/df62a77c-6007-4499-8746-e8e0de09a5a3
※恥ずかしながらやりとり共有
(Next.jsとNust.js間違えてたけど、なんか途中でうまくChat-GPTの方が吸収してた。w)

  • DBに入っている一覧を取得するAPI /lunchesと
  • 一覧を取得して表示するフロントコード
    があるのみ(ローカル環境)
Yuto KataokaYuto Kataoka

学んだこと

  • Goの基本的な構成とコード(Hello Worldレベル)
  • Next.jsの基本的な構成とコード(Hello Worldレベル)

所感

  • Goはマジきっちりした言語。宣言したライブラリとか変数が使われていないだけでビルドすら通らない。逆にいうとコンパイル通ればちょっと安心?書き方がだいぶきれいになる?
  • Next.jsで確かに型があるのは良さそう。まだ状態管理とかちゃんとわかってないので学びたい
  • ChatGPTイイね。なんでも教えてくれる。(ただ、前のコードを忘れて前までちゃんと環境変数呼び出しだったのに、急に直書きしたり、結構おっちょこちょいなところもある。まるっとコピペしながら、コードはちゃんと理解する必要がありそう。)
  • ChatGPTでテストデータとかいれるのはいい
  • あとREADME.md作ってもらったらかなりいい感じで作ってくれた。
Yuto KataokaYuto Kataoka

NextAction

  • より詳しく勉強したいところ
    • Go
      • go.modとかgo.sumとかそこら辺のこと(module local.package/mainとかしてるけどここは何が最適なのか)
      • echoとか入れたときの、ディレクトリ構成とコード役割分担の仕方
    • Next.js
      • 状態管理周り
      • デザイン周り
      • 型周り
  • それぞれ、ライブラリのチュートリアルやってみるの良さそう
  • 機能追加したいところ
    • デザイン進化
    • 実データいれる
    • 検索、ログイン、追加などの機能追加
    • デプロイ周りの整備
Yuto KataokaYuto Kataoka

とりあえずデザイン入れてと言ったら少しだけマシになった。

Yuto KataokaYuto Kataoka

もうちょっと指示出しした。
区切りのアイコンちょっときになるが一旦これでdone。