go_svelte_todo_app

Go_svelte_todo_app

REST API開発の勉強のため、Go言語でTodoアプリを作りました。フロント実装はSvelteで作っています。

TODOアプリ( Svelte + Go + Docker )

学習を目的としたSvelteとGoによるTODOアプリです。Svelteはフロントエンド処理を担当させ、GoはTODOを管理するAPIを提供しています。双方のコンテナを作成しDockerのコンテナ間通信を行わせる。

Svelte

フロントエンドフレームワークとして、Svelteを触ってみたかったので選択。かなり直感的に書けるのとReactよりVueに近いみたい(Vueを触ったことがない)なので、Reactよりとっつきやすいと思った。

ただ、大規模なアプリケーションになると、1つのファイルが縦に長くなってしまって辛くなりそうな感じ。普段Reactを触っているせいでそう感じるのかも。Next触ったことない上、ReactはReact Nativeばかり触っているのでWeb API系に対する型の付け方が全然わからなかった。(FormDataとかFetch APIとか)

あと、やっぱり新しいフレームワークを触るのはおもしろい。しかし、SvelteKit使う必要はなかった。

事前学習

本格的に触り始める前に結構事前にさわったこと

実践Svelte入門はとくにオススメ

Go

Goは今回の製作で一番苦労した。なぜなら、これまでフロントエンド系の言語・環境しか触ってこなかったので知識ゼロからのスタートだった。

難しかったポイント

  • Go言語自体の理解
  • Go言語のパッケージ管理
  • httpリクエスト関連
  • サーバーサイドでのデータの取り回し
  • Go言語の設計

業務でJavaでも触っていれば苦労しないんだろうけど、どれもこれもはじめてで久しぶりにプログラミングの難しさを感じ、いい意味で焦りを感じることができた。

本当はタスク管理もDBサーバーもたてて、mySQLとかしたかったけど今回はそこまでいけなかった。個人的にはDBサーバーも大きな壁のひとつだ。今回のTODO管理はインメモリで再起動したら消える仕様で妥協した。クライアントサイドに持たせるのは何度もやってきたのでもういいかなと思った。

流石にインメモリだと意味ないと思い始めたので、詳解Go言語Webアプリケーション開発を参考にしながらmysqlのRDBMSと連携させてデータ永続化させた。正直内容の理解ができていないのであまり意味はないかもしれない。チャレンジ課題としてタスクの削除を追加実装した。

この本はまず動くものを実装→リファクタリングみたいな形式で進んでいくのでわかりやすい方だと思うのだが、個人的にはそれでも難しく感じだ。このリファクタリングをすることに何が嬉しいのかというのが理解できないままコードが短くなっていく感じ。知識と経験が足りていないのをヒシヒシと感じだ。

クリーンアーキテクチャの本とか読んでも素晴らしさが理解できなかったけど、今回の実装をおこなった上で再読すれば少しは理解できるのかもしれないと思った。

事前学習

正直Goは完全初心者向けのドキュメントがかなり少ないから優良なものが少ない。今の自分のレベル(サーバーサイド何も知らない)にマッチしている参考書を見つけることができなかった。

Docker

Dockerは今回かなり理解できたように思う。完全には理解できていないけど、初歩的なところを体感しながら理解できたのは良かった。

Docker imageに必要なもの詰め込んで、Docker Composeで動かす程度の理解だが・・。開発するには環境構築が必要なのは変わりないけど、プロダクトの環境をそのままDockerに乗っけることができたので、今回はまんぞく。

Dockerとデプロイ周りのことがさっぱりなので、今後触れる機会があれば触ってみたい。サーバーサイドコードを本番環境にデプロイする日は来るのだろうか。

事前学習

とくになし。公式ドキュメントが結構充実している。

開発

docker compose build --no-cache
docker compose up -d
docker compose down

フロントエンド

SvelteによるTODOアプリ(なぜかSvelteKitではじめてしまったがとくに意味はない)

バックエンド

Goで実装されたインメモリTODO管理APIサーバー

エンドポイント 機能 IF
/task/list タスクのリストを取得 -
/task/add タスクのリストを取得 {"title":"タスク名"}
/task/remove タスクのリストを取得 {"id": 0}

機能

MUST

  • TODOの表示
  • TODOの追加
  • TODOの削除

WANT

  • TODOの編集
  • ドラッグ&ドロップで並べ替え
  • ログイン機能
    • ユーザー毎のTODO管理

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes