スポーツ大会のHP製作を振り返ってみて

tim_daik
·

お品書き

  • 前菜

  • 技術

  • 頑張ったこと

  • 反省

  • 最後に

イイモノできたんじゃない??

(若干回想)

突然だが、今まで我々はHTML/CSS/JSのシンプルな環境で開発してきた。Git環境なんかも無し!アニメーションは勿論jQwery!!メンバーは部分部分のコーディングをしてこれらをPMが合体してまとめる。ちょっとしたバグ修正なんかはXserverで直接編集したりしていた。

個人開発でReactやらNext.jsやらを使っている僕やQwertは正直不満だったが、開発はほぼ問題なく回っていたのでぶっちゃけこのままでえーねん状態が続いていた。というかメンバーが望んでいないのに無理やり推し進めるのが面倒くさかったし、本当に必要なのか疑問だったし、独りよがりになりそうで恐かった

しかし今回は思い切ってAstroとGitでのチーム開発に挑戦してみた。理由はいろいろあるけど、

  • PMじぞうが皆のHTMLをまとめるのがしんどい

  • メンバーもコードが激長すぎてよく分かんなくなっちゃった

  • メンバーの進捗度が把握しずらい

  • モダン環境で開発したい!!(だって僕たち3年がメインで担当するのは今回がラストやもん!!)

他にはjQweryを禁止なんかもやってみた。バニラJSに慣れていないメンバーは結構焦っていたwごめんよ🙏

高専祭のHP後すぐにプロジェクトが始まってドタバタだった中、僕とQwert、同級生と後輩は今できる最高の仕事をしてくれたと思う!ありがとう&お疲れ👏

使用技術&サービス

  • ✨Astro

    • 少し前に別のHP製作で使った

    • ほとんどのメンバーは初めて触った

  • ✨Git&GitHub

    • 全体で使ったのはこれまた初めて

    • 自分にとっても10人以上でのチーム開発は初めて

  • スプレッドシート

    • CMSとして大活躍

    • お知らせ、遅延情報、トーナメントなどで使用

    • 実は去年も使っていたけどお知らせと順位くらいしか使えていなかったから、今年は幅が広がった

  • Figma

    • メインはQwert

    • デザインの調整を担当

    • 弊部でデザインツールとしてようやく浸透してきた感じ

  • Slack

    • 基本この子

    • GitHubの通知や質問部屋の設置など

  • LINE

    • ちょいちょい

    • 明らかにLINEのほうが反応良いので悩みどころ

    • 実はDiscordに移動しようか検討中。。

  • Teams

    • Web会議用

頑張ったこと

デザイン

秋をイメージした配色やデザインをこころがけた。そこまでデザイン面では凝ってない分、統一感が出たり見やすさが向上したんじゃないかな

デザイン初期段階では木の葉を降らすアニメーションは考えていなかった。後々追加した。これ良かった

PM

  • Node.js&Git環境構築

    • Qwertと講習会を開いた

    • 部員の集まりが悪かったためスライドを作ったりSlackやMS Teamsを使って全員に布教した

    • メンバーは初めてが多すぎて大変だったろうけど、開発体験は良かったみたいでホッとした

  • シフト決め

    • LINEで投票。あとは微調整

  • メンバーのサポート

    • Git質問部屋とAstro質問部屋をSlackで用意した

    • 意外と質問が多かったので安心した

    • Git関連はエラー原因を文面で把握するのが大変だったのでTeams会議開いていた

    • 新しい技術をメンバーに強いているのにサポート手薄はありえへんやろ!!精神で臨んでいた

1コーダーとして

  • ぶっちゃけ前半はコードを一切書いていなかったけど、これは他メンバーの育成のためであって。。

  • トーナメントのCMS連携

    • いちばん頑張った

    • スプレッドシートの勝敗情報からトーナメントSVGを変更するっていう実装

    • 情報を取ってきてSVGに反映させるのは意外と普通だったが、コード構造がぐちゃぐちゃになりそうだったので、これを工夫した

  • バグ修正

    • 主に当日

    • これはなんやかんや多かった感

反省

  • Astro&Gitの必要性を伝えきれなかった

    • ほとんどのメンバーは理解してくれたけど「???」な人も居たのでもうちょい説明の準備をするべきだった

    • 具体的にはAstroのslotやコンポーネントが理解しにくかった感じ

    • たとえ話が効果的だったので、たとえ話力をアップさせる

  • デザインもうちょい凝れよ

    • これは1人の人間に言われたことだけど、Web研ならもっとあっと驚くHPを制作できたのではないか

    • いや、これは視認性を上げるためにシンプルに。。こっちはこっちで話し合って決めてるねん。。ちょっと高専祭直後で時間なくて。。

    • こんな言葉を並べて真摯に受け止められなかった。伝えたいことをもっと自信もって伝えられるように精進します

  • Astroの勉強不足

    • ビルド時のフェッチデータを使ってSSGしていると知らなかったので部分的に変更の度ビルドする必要が出てしまった

    • Reactを使うか迷ったけどバニラで統一したかったので使わなかった

    • 今度からは使おうかな

    • その他細かい仕様については曖昧な理解であったため、今後の個人製作で使い理解度を上げたいかな

  • SVG直書きしんどすぎ問題

    • マップなどでSVGにJSアニメーションを追加する必要があったため、SVGをastroの中身に直書きした結果、該当ファイルを開いている間にVScodeの拡張機能が1分に1回落ちてしまう

    • 自分の担当部分では回避策を使って乗り越えた。別記事で紹介しようかな

最後に

チームにGitを導入するのが一番大変だろうなあと思っていたが、案の定そうやった

ブランチルールは設定したんやけど、コミットルールは今回なしにした。ちょっと息苦しかっただろうし、コミットメッセージにほどよい抜けがあると少し雰囲気が和らいでいた印象

Astroは個人的に使うの2回目くらいやったけど、体験はかなり良かった

ふと思ったのが、Astroのバグ解決記事やテクニック紹介記事が以上に少なかったこと。ブロガーやメディアはみんな紹介記事ばかり書いていて、「技術記事なのか、これは??」唖然とした

英語圏の記事はたくさん発掘したので、日本のAstro技術記事を増やしたいな~と思った。ちょいと知見も溜まったので書き書きしまーす

さて、高専祭・スポーツ大会のHP製作が終わり、Web研の活動は来年5月の文化発表会までほぼお休み

これから何を作ろうかな?

@tim_daik
魚好きな高専生 フロントエンドを触っています