Astroの紹介
Astroは最近非常に人気の出てきたフロントエンドフレームワークです。そしてRedix.uiやShadecn/uiのような既存のReactコンポーネントも使えるうえ更に、HTMLとCSSで作るような既存のコンテンツやマークダウンそのままでも、ちゃんとHTMLに変換してレンダリングするという、多用書き方にも対応しています。例えばアコーディオン型のFAQページを作るのに、あなたはCSSを１から書きますか？私は既存のUIコンポーネントを使います。タブでコンテンツが入れ替わるコンテナーを作るのにCSSを最初から書きますか？私はTailwindCSSやReactのコンポーネントを使います。フロントエンドフレームワークとは、このようにUIをコンポーネントの再利用と既存のコンポーネントの利用を可能にするTypeScriptで書かれたコードの集まり（ライブラリ）のことを言います。AstroはReactだけでなくVueやSvelateのコンポーネントにも対応しているうえ、サーバサイドレンダリングという予めJavaScriptでバックエンド(django, RubyOnRails, Laravelなどのアプリケショーンとデータベースを連携する機能を持ったフレームワークで作成されたアプリケショーンのこと）のAPIからデータを引き出してデータを反映した形でHTMLやCSSのキャッシュファイルを作成して、データをユーザーからリクエストがあった時に素早く提供する仕組み。このサーバーサイドレンダリングの効率的な利用で最も速く動作するフロントエンドフレームワークであることを売りにしています
多くのWebデザイナーとの差別化
Astroを使うとバックエンドとの連携が簡単に出来ます。バックエンドは自分達で作るけど、フロントエンドを奇麗にデザインして欲しいというニーズは人材市場に必ず存在すると思っています。多くの場合はデザイナーはFigmaのデザインまでで、フロントエンドエンジニアがコーディングを担当します。大規模な案件はそれで十分です。予算が多く人材の確保も容易でしょうから。でも小規模から中規模の規模のフリーランスが担当する案件を考えてみましょう。ログイン機能を実装して会員専用ページを表示したいといったニーズがあるとして、それぐらいのことはフロントエンドフレームワークで出来てしまいます。そしてデザイナーがフロントエンドフレームワークまで使えることで、Figmaのモックアップもフロントエンドフレームワークで実装しやすいようにUIデザインのパーツを上手に取り入れたものとなります。
AIの驚異
VercelがやってるV0というウェブアプリケーションのモックアップをAIが作成するサービスがあります。下手なデザイナーが作るよりもよっぽど優れたデザインとコードを生成します。デザイナーがこれらのサービスをデザインの下地として利用して、そこからデザインをブラッシュアップするのがベストプラクティスでしょう。ところがエンジニアがV0で作られたモックアップをそのままデザインに適用するようになったら、UIデザイナーの存在理由は失われていきます。デザイナーはAIが生み出すモックアップコード以上のデザインとコードを提供しなくてはいけないはずです。
フロントエンドエンジニアがデザインもすれば最も効率が良い
現在ではプロダクトデザイナーは3Dプリンターを使って、実際に使用できるモックアップまで作成します。Flashが全盛期だった頃には多くのデザイナーがActionScriptの実装までやっていました。多くのActionScriptのエキスパートはその後どうしたのでしょうか、私は詳しいことは知りません。恐らくはSwiftやJavaを勉強してモバイルアプリケショーンの作成に移行したか、フロントエンドフレームワークのエンジニアに移行したのでしょう。そうAcrionScriptのコーダーはActionScriptで何が可能になるかを繰り返し試して、それをデザインに反映させていました。どんな例えが最も良いでしょうか、デザインの発想とそれを可能にする技術とは多くの場合は密接に結びついています。
私はエンジニアを目指さない
私は46歳という年齢からエンジニアになって新しい技術を常に追いかけ続けることに限界を感じています。デザインという付加価値とエンジニアが最終的に仕上げるかもしれない、フロントエンドフレームワークの一般的な機能を理解して利用するだけです。HTMLとCSSだけでサイトを作るのは常に非効率です。全てのページにナビゲーションメニューをコピペして作成しても、変更が入ったら全てのページを更新しなければなりません。その代わりにナビゲーションメニューをコンポーネント化して、各ページのコンテンツが入る元になるレイアウトファイルに配置します。もしナビゲーションに変更が入ったら変更するのはナビゲーションコンポーネントだけです。そのため、フロントエンドフレームワークの利用はよっぽどクライアントがHTMLとCSSにこだわっているケース以外は常に正解です。だから私はフロントエンドフレームワークの技術もデザインの引出しを増やすことと同時に行っています。
