個人開発でタスク管理ツールを作った話
1.2K Views
January 18, 24
スライド概要
個人開発者集会でLT
エンジニア集会をやっています
関連スライド
各ページのテキスト
個人開発でタスク管理ツールを作った話 個人開発者集会LT 慕狼ゆに
自己紹介 慕狼（しのがみ）ゆに Webフロントエンドエンジニア 技術スタック： React, TypeScript, Rails @YYa0928 VRSNSが大好き VRChatとclusterをよく 遊んでいるよ
自己紹介 毎週金曜日に、VRChatで 「エンジニア作業飲み集会」 というイベントをやっているよ！ 2021年の11月から始めて、だい たい一年半ぐらい続けているよ。
今日話すこと タスク管理ツールを作った話
タスク管理ツール：yak
タスク管理ツール：yak このアプリを作った目的 タスクの着手時間を計測したい ついでに 勉強のためにつかえるサンド ボックス環境が欲しい 普段使ったことがないライブ ラリやFWを使ってみたい 盆栽的にメンテナンスできる 自作アプリが欲しい
使っている技術 フレームワーク：Next.js デザインシステム：chakra ユニットテストツール： Jest、Storybook データベース：IndexedDB ホスティング：Vercel
使っている技術 ユニットテストツール以外全部初めて触る技術 フレームワーク：Next.js デザインシステム：chakra ユニットテストツール： Jest、Storybook データベース：IndexedDB ホスティング：Vercel
新しくチャレンジしたこと Next.js Reactを普段から利用しているので、 Next.jsのFWの使い方をドキュメントで学 びながら利用した IndexedDB NoSQLを利用するのが今回が初めてだっ た。MDNのドキュメントを読みながらコー ドを書いた chakura UI 普段はMaterial UIを使っている。同じノリ で使えた
学んだこと アプリの名付けをこだわると良い！ ヤックシェービング対策になるタスク管理 ツールにしたい あれやって、これやって・・・が無限 に続く前に気づきになって欲しい アプリ名をヤックシェービングから取って 「yak」と命名 名付けによってアプリに愛着が生まれて、 モチベーションが結構上がった
学んだこと アプリの名付けをこだわると良い！ NodeJSのLTSにも、コードネームがあったり とかするし、作っているアプリに名前を付け る活動は色々なところで行われていそう Vue.jsとか、マイナーバージョンのコードネ ームにアニメの名前を割り振っているし 積極的に名付けしていこう
躓いたところ ページ可視性 API (Page Visibility API) setIntervalを使って時間を更新する ブラウザをバックグラウンドにすると、経過 時間がズレる問題が起きていた 調べてみると、setIntervalなどのタイマーは バックグラウンドでは遅延されるという仕様 になっていた →タスクの開始時間を元に経過時間を計算す る仕様に変更
躓いたところ 設計 例えばタイマーのコンポーネント
躓いたところ 設計 例えばタイマーのコンポーネント タイマーのロジック タイマーのView
躓いたところ 設計 例えばタイマーのコンポーネント タイマーのロジック Viewとロジックが密結合に なっているってやつ タイマーのView
躓いたところ 設計 ロジックをmodulesに切り分けようかな と頑張っている。 どんな風に分けると綺麗かなーって考え ている。
躓いたところ テスト 設計が上手くできてないということは、 テストもなんかやり難い リファクタリングしたいけど、作っ た機能を壊しそうでリファクタリン グし辛い とりあえずUIのテストを書いて、 Storybookを書いたけど、現時点で はイマイチ開発のしやすさに貢献し ていない・・・。
躓いたところ テスト とりあえずテストを書こう！と思っ て、単体テストから書き始めた テスト書きながら、「これなんのた めにテストを書いてるんだ・・・」 という気持ちになった。 テスティングトロフィー的には、イ ンテグレーションテストを書くと良 いらしい 実際に、機能が動作するのか？を主 眼に置いたテストを書くべきだった
結論 設計なんもわからん あと個人開発楽しい！
宣伝 誰でもアクセスできるので、良かったら使ってみてね！ URL変更したらデータ吹き飛ぶので、あまり忘れたくな いものは登録しないでね！ https://yak-nextjs-xwl5-89qs0wukd-yuya-0928.vercel.app