久しぶりにフロントエンドのボイラープレートを作ってみた話
なぜ今更フロントエンドのボイラープレートを作ったのか？
最近、友人からペライチのサイト制作案件をもらったのですが、これが思った以上に時間を要してしまいました。
原因として以下が挙げられます。
- 昔作ったボイラープレートが何年も放置されていたため動かなくなっていた
- 環境構築に時間がかかった
- WordPressの書き方を完全に忘れていた
- 純粋にUIを作るのに時間がかかった
こういった事情から制作にかなり時間を使ってしまいました。
個人的にこのような案件はそれほど時間をかけずに、かつクオリティの高い制作をしたいと思っています。
そこで、またこのような依頼が来た時にサクッと開発ができるよう、久しぶりにボイラープレートを作ることにしました。
作成時に達成したい目標
- 開発環境を毎回一から作らなくて済むようにする
- まだWordPressを使ったCMS案件も多いため、それも考慮して作成する
- パッケージのバージョン管理を手動でするのは辛いため、自動で更新できるようにする
- UIを作るのに時間がかかるため、あらかじめUIを作っておいてStorybookで確認できるようにする
正直なところ、ユーザビリティを高くしたりSEOも考慮できるようにすべきですが、まずは上記の項目を達成できるように作成しました。
開発環境の構成
今回はpnpmのモノレポ構成を採用しました。
構成は以下のようになります。
パッケージ構成
-
web
- Vite + React
- 静的なWebサイトを作成するメインパッケージ
-
ui
- React + Storybook
- 汎用性の高いコンポーネントライブラリ
-
wordpress
- Docker Compose
- WordPress環境でREST APIとして使用
技術選択の背景
開発当初はWordPressとの統合を考慮してPug + Scssで作ろうと考えていました。しかし、HTMLとScssを別々に書くことで保守性が悪くなることが懸念されたため、Reactに切り替えてWordPressのREST APIを使用する構成に決定しました。
Renovateによる依存関係の自動管理
ボイラープレートを作成しても、時間が経つにつれて管理が疎かになりがちです。そこで、Renovateを導入してパッケージのバージョンを自動で更新できるようにしました。
実装した機能
- パッケージの自動更新
- 更新時にエラーが発生した場合のSlack通知
これにより、依存関係を常に最新の状態に保ちながら、問題が発生した際には素早く対応できる体制を整えました。
UIコンポーネントの作成
MUIやTailwind CSSなどの既存のUIライブラリもありますが、以下の理由から自作することにしました。
自作した理由
- 要件に応じた細かなカスタマイズがしやすい
- レスポンシブデザインでem単位を使用したスタイリングを実現したい
- プロジェクト固有のデザインシステムを構築したい
技術選択
- Styled-componentsを使用してCSS-in-JSでスタイリング
- 空き時間を活用してコンポーネントを段階的に作成
- 実務でも再利用できるよう汎用性を考慮して設計
実務でもコンポーネントを自作する機会があるため、ここで作成したものを使い回せることで開発効率が大幅に向上しています。
完成したボイラープレート
成果と今後の展望
今回のボイラープレート作成により、Web制作を1営業日以内で完成できるようになりました。
現状の特徴
- 効率性: 環境構築からUI作成まで大幅に時間短縮
- 保守性: Renovateによる自動依存関係管理
- 再利用性: モノレポ構成による柔軟な開発体制
制限と改善点
デザインは自分が担当することを前提として作成しているため、汎用性はそれほど高くありません。また、以下のような改良の余地があります。
- SEO対策の強化
- アクセシビリティの向上
- より多様なデザインパターンへの対応
それでも、同じような課題を抱えている方の参考になれば幸いです。
まとめ
久しぶりのボイラープレート作成でしたが、最新の技術スタックとツールチェーンを活用することで、効率的な開発環境を構築することができました。特にモノレポ構成とRenovateの組み合わせは、長期的な保守性を考慮した良い選択だったと感じています。
Discussion