はじめに
おはようございます。HIROSHIです。株式会社スタイル・エッジ システム事業部所属のフロントエンドエンジニアです。ふだんはWebサイトの制作をしています。
今回は、弊社でWebサイトを制作する際に利用しているPHP製フレームワークを、Astroベースのフレームワークへ移植した話を書いていきます。ゴーゴー！
既存フレームワークの振り返りと改善の機会
弊社にはWebサイト構築のために内製されたPHP製フレームワークがあり、特別な事情がない限りはそれを利用して制作を進めています。
このフレームワークには、たとえば以下のような機能が実装されています。
- ルーティング
- フォーム入力内容のバリデーション
- メール送信
- 本番環境でのHTMLのminify
- ユーザーエージェントを基にしたデバイス判別
- webpackを中心としたフロントエンド開発用ボイラープレート
便利な機能がたくさん実装されている一方で、最初のリリースは約10年前。その後もアップデートはされてきたものの、現在のWebサイト制作・フロントエンド開発のトレンドとは少しずつ乖離が出てきました。
使い続ける中で、いくつかの改善点も見えてきました。
- サイト制作に着手する前にフレームワークのレクチャーが必要
- それでも一度では網羅しきれず、慣れるまでは都度確認することになりがち
- より直感的な開発体験があれば生産性が向上しそう
- 教える側の工数を減らしたい
また、事業の拡大に伴い、フロントエンドチームが手がけるWebサイトに求められる要件も変化してきました。それに伴い、たとえば、フレームワークでカバーしていないことを実現しようとする時、対応するメンバーのPHPへの理解度によって、工数の管理が難しくなってしまうようなこともしばしば発生するようになっていました。
これらの課題や改善点を解決し、さらに効率的で使いやすいフレームワークにするため、モダンなフロントエンド技術を活用した新しいアプローチを検討することになりました。
フロントエンドフレームワーク選定の悩み
「モダンなフロントエンド技術」と聞いたとき、まず思い浮かぶのはReactかもしれません。実際、このプロジェクトが始まった2024年9月頃、最初は社内でも「今どきのフロントエンド開発といえばReactだよね」という雰囲気がありました。
しかし、検討を進めれば進めるほど、どうにもReact採用がしっくりこないと感じるようになりました。
理由としては、主に次のようなものです。
- 私たちフロントエンドチームが制作するのは主に「Webサイト」
- Webサイト制作のためと考えた時、Reactは少し高機能すぎるように見える
.jsxや.tsxより、もっとHTMLに近い書き方ができる方が嬉しい
こうした観点から、Reactの対抗として挙げられる他のフレームワークたちも、私たちのニーズにはマッチしなさそうだと感じていました。
一方で、「Web制作の技術トレンドの変化に対応していく必要がある」というのは依然として解決すべき課題なので、PHPで培った知見を活かしつつ、現代的な開発手法により適したフレームワークを探すことになりました。
Astro、キミに決めた！
そんなときに出会ったのがAstroでした。
最初の印象は「なるほど、こんなフレームワークもあるのか」程度でしたが、ドキュメントを読み込み、「Astroはいいぞ」系の記事をひたすら読み漁っていくうちに、「私たちの求める『Webサイト制作のためのモダンなフレームワーク』はこれなんじゃないか？」という想いは強くなっていきました。
実際にローカル環境にインストールして試していく中で、その感覚は確信へと変わっていきました。
Astroの魅力
Astroに触れてみて感じた魅力は、以下のとおりです。
- HTMLに近い書き心地を保ちながら、モダンな開発体験を得られる
- 後で気付いたのですが、公式ドキュメントに「Astroコンポーネントの構文はHTMLのスーパーセットです」とありました
- マークアップ中心のエンジニアが、フロントエンド開発にステップアップする橋渡しとしてよさそうに感じた
さらに、
- 必要であればReactなど他のUIフレームワークも導入できる柔軟さ
- 頻繁にアップデートされており、開発の勢いがある
- 国内・国外ともに採用事例が増えており、今後も成長が期待できる
といった点も、「Astroを選ぶ決め手」になりました。
要件定義から実装まで
社内用フレームワークをAstroで作り直すにあたって、まず着手したのは既存のPHP版フレームワークの棚卸しでした。
長年の運用の中で積み重なった機能を整理し、今後も必要なもの、Astro側で代替可能なもの、そもそも現在では不要なものといった観点で分類していきました。
要件がある程度固まった段階で、次に設計を考えます。ここで重要だったのは、既存の仕組みをそのままAstroに移植するのではなく、モダンな開発手法に適した形に再設計することでした。例えば、これまでPHP版フレームワークの中で処理していたメール送信機能はべつのサービスと連携するように変更し、よりシンプルで運用しやすい構成にしました。
設計が固まったら、いよいよ実装フェーズです。実装では、主にCursorを活用して既存のPHPコードを分析し、Astro向けにTypeScriptで書き直すというサイクルを繰り返しました。ただし、単純な変換ではなく、Astroの流儀に則った形で書き換えていくことを重視しました。
今後の展望
新しいAstro版フレームワークは、まだまだ生まれたての段階です。
これから実際の案件で使っていくことで、
- PHP製フレームワークと比較して、どのあたりが改善されたのか
- 一方で、不便になってしまったところはないか
といったリアルなフィードバックが得られていくはずです。
また、今回の「Astro化」は、他にもさまざまな取り組みとセットで進めていきたいと考えています。
- CI/CDの改善
- Playwrightなどを利用したテスト導入
- 制作ガイドラインのアップデート
などなど、「やるべきこと」「やろうと思っていたけれど、まだできていないこと」は、まだまだたくさんあります。
「モダンなフロントエンドフレームワークを利用した社内向けフレームワークの更新」という当初の目標自体は達成しましたが、これはゴールではなく、長い旅の始まりです。
アップデートを怠らず、よりよいフレームワークに育てていきます。
おわりに
今回のAstro化の取り組みは、私たちにとって、
- 既存資産を棚卸しして見直すきっかけ
- 「Web サイト制作にちょうどよいモダンなフレームワークとは何か」を考える機会
- 「流行っているからReactを使おう」ではなく、目的にマッチしているかどうか検討する
にもなりました。
今後も、Astro版フレームワークを使っていく中で得られた知見を、またどこかで共有できればと思います。
最後までお読みいただき、ありがとうございました！
それでは、また！
一緒に働く仲間を募集しています！
スタイル・エッジでは一緒に働く仲間を募集中です。
ご興味をお持ちいただけた方は、ぜひ採用サイトもご覧ください！
recruit.styleedge.co.jp
