じぶん対策

日々学んだことをアウトプットして備忘録にしています。

ToDoリスト作成の振りかえり

はじめに

WEBエンジニアになってすぐに作り始めたリポジトリがある程度まで動作するようになったので今回はそこから得られた学びをまとめておきたいと思います。
以前も少し触れましたが、このブログを書き始めて一年間がたちました。かなり気合を入れて毎週記事を書いてきたのですが、そろそろアウトプットを中心とした記事も混ぜていこうかなと思います。
例えば今回は、技術についてだけでなく、いろいろ自分で手を動かしてみて感じたことや反省点をまとめてみます。

作ったもの

LaravelとNuxt2を使用して簡単なToDoアプリを作成しました。 Trello風にカードの追加、更新、削除や移動ができるようになっています。

難しかったところ

作成するにあたってつまづいたところをあげてみます。

技術選定

そもそも作ろうと思った時点では入社してすぐだったため、完成イメージこそありましたが完成までの道筋は一切見えていませんでした。
知識ゼロからの取り組みのため、とりあえず業務で触る機会のあったLaravel + Vueの構成を選択しました。

環境構築

まずつまづいたのは環境構築でした。
LaravelのインストールとVueのインストールという最低限の構成で特にLinterや静的解析の類のツールは導入していませんでした.
開発環境自体は見よう見まねでDockerでの環境構築をしましたが度々ハマることがありました。
今思えばこの時はコンテナ自体への理解が明らかに足りておらずコンテナによるメリットも一切わからないままDocker環境で開発してました()。
最初にDockerのチュートリアル周りをしっかり読み込めていればなと今になって思いますが当時はクリーンアーキテクチャやDDDがどういうものか考えることに必死で手が回っていなかったと思います。
というかWEBエンジニアになってかなり早い段階でクリーンアーキテクチャを意識したのは結構頑張っていたような気もします。

デザイン

業務での開発と違って大きくつまづいたのはデザイン面でした。
業務ではデザイナーさんがある程度デザインを固めてくれますが個人開発ではそうはいかないので、いろんなことを試しました。
大きく分けるとUI/UX面と見た目に分かれます。

  • UI/UX面

ほかのひとが作った個人開発ToDoアプリを触ってみる
既存のSaasアプリを参考にする

  • 見た目

カラーピッカーで適当に色を選択して作ってみるも色がどぎつい感じがして微妙.
デザイン用のWEBサイトなどのカラーパレットから良さげなのを選んだ.

設計

作り始めた当初は設計が全然わからない状態でした。
業務で設計について学ぶにつれて都度書き直していました。
業務で学んだことの復習や予習の材料としてかなり役立ったと思います。
クリーンアーキテクチャ、DDDを自分なりに噛み砕いて好きにコードを書くことで自分の解釈がかなり明確に言語化できるようになりました。

反省点

  • バックエンドから書き始め、とりあえずでCRUDを作成したため、フロントが欲しいデータと一致しなかった
    WEBエンジニアになってまず担当したタスクがバックエンドのものが多く、まずは簡単なCRUD機能をクリーンアーキテクチャを意識しながら作ることから着手しました。
    なんとなく掴めてきた段階でフロントエンドに着手したのですが、バックエンドから返すデータの形とフロントが使いたいデータの形とのギャップで苦労することが多かったです。
    RESTfulなAPIをどこまで保ち、どういうふうにフロントに表示するかを初めから想像できていればもう少し早く作れたという学びを得られました。

  • 自身の成長速度に合わせて開発できなかった WEBエンジニアになって最初の一年ということもあって、書けば書くだけ成長できた気がしています。が、それに合わせてTODOリストを開発できなかったのでみるたびに直したくなる現象が発生してしまいました。
    数ヶ月かけてバックエンドのCRUDをひたすら直し続ける作業をしていたので何かを作るという観点では反省点かなと思いますが、勉強にはなりました。

  • 定期的な作業時間を確保できなかった 個人開発における一番の障害は時間の確保でした。
    週一ペースでのブログ記事の執筆に力を入れていたのもあって開発に割ける時間が取りにくかったです。
    週何時間のように定期的な時間の確保をすることと、何かを作りたい時は企画から開発終了までスピード感を持って取り組むとスイッチングコストやモチベーションといったコストをかなり抑えることができそうだなと思っています。

  • 開発環境の整備が微妙 フレームワークの導入自体はできていたのですが、静的解析やLinterといった自動ツールは早い段階で導入しておくとより開発効率を上げられたかなと思いました。
    また、先述したようにかなり時間をかけてしまったので、久々にIDEを開いたときに何をしようとしているのか忘れてしまうことも多々ありました。
    プロトタイプを一気に作り上げた上で、issue管理していくのが現状解決策かなと思っています。

これから

いくつか改善したい仕様を修正しつつ、勉強のための土台としてこのリポジトリを引き続きメンテナンスしていこうと思います。

  • Nuxt3へのアップデート
  • PHP8.2、およびLaravel10へのアップデート

所感

手を自分で動かすことで得られる知見は非常に大きかったです。特に業務においてはたいてい整備されていることの多い開発環境周りの知識や、技術選定、開発のためのツール類についてもこれからより考えてみたいと思います。

手を動かした系のブログどう書けばいいのかあまりわかってないんですが、コードこれからはインプットよりアウトプットを中心に学習していきたいと思います。