きり丸の技術日記

技術・エンジニアのイベント・資格等はこちらにまとめる予定です

第2回web1weekに参加しました

1週間でテーマに沿ったWebサービスを作る #web1weekという企画に参加しました。
今回は第2回目でお題は「Like」でした。

謝辞

企画していただいた@dala00さん。
フロントの実装方式が分からなくて相談に乗ってもらった@mottox2さん。
よさこいアプリを作るきっかけの発言をくれた@yoshitaku_jpさんありがとうございました。

何を作成したアプリか

よさこいの隊列表を作成するためのアプリです。
隊列表なので、よさこいに関係しない通常の踊りだったり、組体操でも扱えます。

デプロイ先

https://web1week-e0f93.web.app/#/
※ web1week後も継続して改造する予定なので、リンク先がどこかのタイミングで新しくなります。

使い方

デフォルトで4つの駒(踊り子)が表示されています。

f:id:nainaistar:20200523173013p:plain

隊列の移動

移動させたい踊り子の正式名称が下に表示されているので、選択します。
選択後、画面下部に座標を変更できるので、座標を変更できます。

f:id:nainaistar:20200523173048p:plain

踊り子の追加

+ボタンをクリックすることで新しい踊り子を追加できます。
IDが重複するとその他の動作で動かなくなるので、重複しないIDを振り分けてください。

バリデーションは現在かけてません。

f:id:nainaistar:20200523173035p:plain

踊り子の削除

削除したい踊り子に×ボタンがついていますので、クリックすることで削除できます。
確認メッセージは出ません。

その他できること

  • 同一端末であれば、再表示できます。

できないこと

  • DnDでの座標保存
  • 複数隊列の保存(場所交換しない演舞のみ対応)

使用した技術

  • vue.js
  • vuetify
  • typescript
  • firebase
  • Github Actions

ソースコード

https://github.com/hirotoKirimaru/yosakoiApp/releases/tag/web1week
※ このタグ以降のコミットは成果に含めてません。

使用時間

12時間15分(コーディングのみ)
企画考慮していた時間も含めると、だいたい15時間で実装しました。

f:id:nainaistar:20200523172413p:plain


なお、ここまでの記載はこちらのアプリ紹介ページでも記載しています。

なので、ここから先以降はアプリ紹介では載せなかったもの。
例えば、実装時のメンタル的なものとか、そういうものを書いていこうと思います。


時系列とメンタル

1日目(2020/05/18)

「Like」というお題が出された。
この日は実装するものを特に考えてませんでした。

とりあえず、CI/CD環境を整えてました。
1日目には、GitHubにpushしたら自動でfirebaseにホスティングできるようにしました。

2日目(2020/05/19)

何を作るか、というのを3時間くらいかけて悩んでいました。
最初は、よさこい練習参加率を表示して、隊列決定時の補助で使えるアプリ作ろうとしてました。

しかし、地方によっては練習参加が難しいとか、練習の定義をどうするか…。 - 演舞動画を見るは練習?  - 1分しか練習しなくても練習?  - 時間が長ければいいの? 

とか色々悩んでると自分にとって気持ちいいアプリが作れないということに気づきました。

そして、色々と経緯を得て、隊列表がWebで見れて保存できれば非常に便利ではないか、という想いから隊列表をアプリ化することを決定しました。
(今まで配られた紙の隊列表とか、pdfもわりとロストしてます…)

想定していたアプリの概要画像

f:id:nainaistar:20200523172336p:plain

f:id:nainaistar:20200523172354p:plain

3日目(2020/05/20)

ここから5日目まで同じ悩みで苦しむことになります。

隊列を移動させたいなら、踊り子をドラッグ&ドロップ(以降DnD)で移動させられると便利だよね。
ということで、DnDを実装しようと思いました。

が、DnDで移動させ、順番を変更するようなライブラリは世間にはあふれているものの…
単純なDnDで移動させるようなものは見つかりませんでした。
(あっても、Star数が非常に少なかった)

とりあえず、参考になりそうなvuetifyのコンポーネントを見つけてはいました。
が、自分は拡張子vueでやる方法しか知らなかったので、tsファイルが非常に見づらい…。

正直なところ、vue拡張子だとちゃんとコード補完してくれないので、tsファイルで覚えた方がいいとは思っています。
ただ、tsとかで見るのに慣れるようであれば、reactを使ったほうがいいと思うので、ちょっと悩みどころ…。

結局、この日はvuetifyのコードを頑張って追って、丸い駒を表示させるためのCSSのclassを見つけて終了しました。

4日目(2020/05/21)

この日にもっともっとさんに協力してもらって、DnDの実装を教えてもらいました。

それまで、1mmも動作しなかったので、進捗がグンっと上がって非常に助かりました。
教えてもらったのはReact + tsの状態だったので、それを自分用のvue.js + tsに書き直して、4日目は終了です。

5日目(2020/05/22)

4日目に教えてもらったDnDの実装はしていたものの、react + tsの書き方の差なのか、なぜかDnDするたびに変な位置に移動してしまうバグが…。

初期移動が変なところに飛んでしまうのは相変わらずの挙動ですが、とりあえずマウスは追従してくれるようになったのでヨシとしました。

そして、気づいてしまいます。 DnDってオプションであって、必須じゃないんじゃね? と。

6日目(2020/05/23)_事実上のきり丸の最終日

機能数だけで見ると一番進捗上がりました。

  • ソース分割
  • 駒の追加・修正・削除
  • ローカルの保存

また、3-5日目をオプションのはずのDnDで時間を潰してしまったことにより、色々と無視するメンタルを身に着けました。
バリデーションは必須じゃないとか、保存はfirebaseで永続化せずにlocalstrageで保存するとか。

参加してみて

正直しんどかったです。
WFHだから、通勤時間が無い分開発に当たられてはいるものの、一度詰まると1週間という短い中でのゴールができなくなります。

1週間という短い期間だからこそ、自分ができることのみに絞って進めるのか、それとも挑戦するのか。
挑戦するのであれば、どこを分水嶺にして引き返そうか。

あんまり個人サービス開発やったことない自分としてはいい経験になりました。

苦手で避けていたDnDとか、挙動が期待値と違った際にそれは致命的なのか、(自分が)許容可能なのかをちゃんと自問自答できるようになったのは大きな成長だと思います。


最近は妹が
「何もわからないからしんどい。」
と言っていたのを、上から目線のイキリ兄太郎になっていたのが、
「俺も何も分からないからしんどい」
と同じメンタルになれたので、優しい心を身に着けることが出来そうです。

未経験の分野って、伸びしろがあるから楽しいけど、やっぱり分からないっていうのは辛いですね。


今後も、よさこいの隊列表アプリは改善していく予定ですが、web1weekとしてはこちらで完了とさせていただきます。