web初心者が一週間で作成したサイトの改修に骨が折れた話
お久しぶりです。ブログを更新するのは8ヶ月ぶりです。ブログを更新しない間、Unityを触ったりwebを触ったり組込系のソフトウェア開発をやってたり就職活動に虐殺されたりしてました。内定募集中です。今回は最近よく触ってたweb周りの話をしようと思います。
注意書き
VTuberや勘に頼った適当な実装がお嫌いな方はブラウザバック推奨です。
また知識が浅いため誤った内容を書いてる部分があるかもです。そういった部分とか誤字脱字があればコメントなどで教えていただけると助かります。
目次
- 概要
- 一週間で作成した背景
- リファクタリングの動機
- リファクタリングの内容
- なぜ改修に骨が折れたのか
- 今後の展望とか
- 最後に
概要
内容としては今年の9月末に一週間で作成した非公式ファンサイトを改修するのに3ヶ月ほどかかった話です。改修は以下のような内容をやってました。
- レスポンシブ対応
- Atomic Components導入
- バグ修正
非公式ファンサイトの内容としては観てもらうことを目的としたものとなってます。なので状態管理とかサーバーサイドの実装とかはしてないです。firebaseにデプロイしているのでよろしければ見てもらえると製作者及び1ファンとして冥利に尽きます。(デプロイ先)
ソースコードは公開してます。公開先(github)
一週間で作成した背景
そもそも初心者が一週間でwebサイトを作ろうとする部分がおかしいと思いませんか？僕はそう思います。なので背景を書きます。ざっとまとめると、
- 締切日(1.5周年の日)の存在を勘違いしてた
- インターンに参加していたため製作期間の確保が出来なかった
の2つです。１つ目としては、デビュー日が3/30でその半年後を12/30と勘違いしてた感じです。数学の単位が取れない人間が足し算なんて出来ないので仕方ないですよね。この勘違いに気づいたのが締め切り1週間前でした。もともと1.5周年をお祝いすることは自分の中で決めていたので1週間で作る羽目になりました。死。
2つ目としては9/1 ~ 9/25までインターンに参加してたため時間が取れなかった話です。期間中は毎日12時間ぐらい作業してたためこっちの開発に時間が回せなかったです。インターンのお話とか毎日12時間ぐらい作業していた理由については今後書くかもしれない。
リファクタリングの動機
リファクタリングの動機としてはとても簡単で、
スマホ・タブレットからの表示に対応していなかった
これだけです。色々な人に観てもらうことを目的としていたサイトなのにスマホからアクセス出来ないなんてお話にならないと思ったためレスポンシブ対応をやろうと思い立った感じです。そしてレスポンシブ対応しようと思った時過去の自分が書いたコードが読めなかったのでリファクタリングも決心しました。
リファクタリングの内容
やった内容としては、
- スマホ版のUIモックをfigmaで作成した
- Atomic Componentsを導入してコンポーネントの再利用性を高めようとした
- CSSの影響範囲に気をつけたコンポーネント作成・修正
- レスポンシブ対応(メディアクエリ?)
です。言い換えると1からほぼ書き直しました。
スマホ版のUIモックをfigmaで作成した
スマホ版のUIモックが存在しなかったので作りました。PC版のUIモックよりかは多少はマシ程度の出来具合です。
Atomic Componentsを導入した
慣れない中導入しました。恩恵はあまり受けることは出来なかった感じです。
CSSの影響範囲を制限した
縦横の大きさとかが無茶苦茶なので整理して制限しました。極力外枠の大きさに依存して文字とかのサイズを調整することによって外枠のサイズを変更するとそれに合わせて中身も変わるようにしてます。多分これが一番やりやすいと思います。
レスポンシブ対応
スマホとかタブレットからの表示に対応してなかったので、先程のUIモックを元に作りました。タブレットもスマホとして扱ってた(1024px以下と以上で分けてた)感じです。
なぜ改修に骨が折れたのか
「一週間で作成するために無理をした部分の修正がしんどかった」が答えです。具体的にどんな無理をしたのかは、
- 再利用性を捨て去ったコンポーネント作成
- 勘と勢いで書いたCSS
- サンプルコードをコピペしてた部分があった
- Atomic Componentsが難しかった
- UIモックがゴミだった
などが挙げられます。一つ一つ書いていきます。
再利用性をを捨て去ったコンポーネント作成
製作期間が非常に短かったのでとりあえず動けばヨシとbabelの隣に現場猫を配置して開発していました。その結果が以下のウンコードです。
色々突っ込みたい部分はあると思いますが、注目してほしい部分としては1ファイルにButtonコンポーネントとArchiveコンポーネントがくっついている部分です。このようなファイルが大量にありました。普通の開発環境だとこのような内容は弾かれると思いますが自分の開発環境では現場猫がプルリク管理していたため無事？masterに取り込まれました。
勘と勢いで書いたCSS
原因2つめとしてはCSSの部分です。今までCSSを自前で書いた経験がない(CSSフレームワークに頼ってた)状態でCSSを書いたのでぐちゃぐちゃになりました。ぐちゃぐちゃの例としては、
例1: CSSModuleの利点を全て破壊するような命名
例2: 複数のjsファイルで使いまわされるパンドラの箱と化したscssファイル
他にも気分で考えたz-indexの値やposition: absoluteの濫用など沢山ありました。CSSの修正が一番しんどかった記憶があります。
サンプルコードをコピペしてた
経験も時間も無いため一部の機能をサンプルコードをコピペして対応してました。
例: 画面表示のアニメーション部分
Atomic Componentsが難しかった
これは単純にどういう風にコンポーネントを割ればいいのかよく分からなかった感じです。結果としては以下のように分けました。多分もっといい分け方あると思います。
- ページ: pages
- 画面とロジック: ecosystem
- Atomsがくっついたもの: molecules
- その他最小単位: atoms
Atomic Componentsを導入した理由としては、たまたま導入記事を見かけたからというのもあって利点を理解しないまま導入しようとした点は火種になりました。
UIモックがゴミだった
UIモックは作成したのですが、それが全く当てにならなかったです。スマホ版は後から作ったのもあって何とかなったのですがPC版は1週間で開発した時に作成したものを使いまわしました。figmaを使って作成したのですが、初めてfigmaを使ったのもあってUIモックからは雰囲気しか分からないという状態になり開発やリファクタリングに苦労しました。
今後の展望
今後としては、TypeScriptを経由してNext.jsに移行したいです。面白そうなので。その作業が終われば新しい何かを作ろうと思ってます。
最後に
さんばかはいいぞ！
読んでいただきありがとうございました。それでは良いお年を。
コメント
コメントを投稿