SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Astroで始める静的サイト作成入門

Webフレームワーク「Astro」とは? 開発初心者からベテランまで注目する理由

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載は、Web制作者である筆者が、Astro(アストロ)というフレームワークに出会って、爆速静的サイト構築に向けて歩き出すまでの物語です。第1回では、Astroの設計思想を紐解いていきたいと思います。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Web制作におけるフレームワークというと、ReactやVue.jsなど、エンジニアが効率的に開発を行うために必要なシステムの骨組み、という印象がありますが、Astroは筆者のような、どちらかというとデザイン寄りの制作者でも理解しやすい設計になっており、実体験としてデザインから静的サイトの構築までを一人で完結させるのに有効活用することができました。

 もちろん本職エンジニアの方にとっては、高パフォーマンスなWebフレームワークとして最近注目されているAstroを筆者以上に深く理解し、既存の開発プロセスを改善するヒントにも繋がるのではないかと思います。

現代におけるWebサイト構築のアプローチ

 一つのWebサイトを構築しようと思ったとき、現代ではさまざまなアプローチが存在します。

 単体、もしくは複数のページをHTMLコーディングする方法から、WordPressに代表される各種CMSをカスタムする方法や、画面遷移を意識させないシングルページアプリケーション(SPA)としてビルドする方法、最近ではAIを活用して、ほとんどコードを入力せずにWebコンテンツが構築できてしまうサービスなどもあります。

 そのためWeb制作者は、目的に合わせて、最も効率的にWebサイトを構築するための手段を適切に選択する必要があります。

 一方で、昨今のモダンブラウザにおける表現力の向上とCSSの進化、フロントエンド界隈における技術トレンドの変化は極めて早く、ライブラリやフレームワーク、開発言語の選定や、それらを含めた開発環境の構築には幅広い専門知識が要求され、デザインも実装も一人で完結させるのは年々難しくなってきています。

 開発経験豊富なコーダーやフロントエンドエンジニアの場合、デザインさえあればどのような手段でも制作に着手できるのかもしれません。しかし、デザインが本業で、基礎的なコーディングスキルのみを持つ人の場合、最初の時点で選択肢が限られてしまうこともあります。

 たとえば、最初に紹介したアプローチの中で、デザインデータを基にHTMLとCSS、そして少しのJavaScriptを用いて、静的サイトとしてコーディングする方法は、古くからある手法ですが、Webサイトを構築するすべてのアプローチのベースとして誰もが通る道でもあり、ランディングページ(LP)やプロモーションサイトなどに、今も尚多く使われています。

 このような静的サイトコーディングは、最新のフレームワークを使った方法に比べて時代遅れなのでしょうか?

 技術的な部分だけに着目すれば、答えは「イエス」なのかもしれません。

 しかし、Webサイトを訪れるユーザーにとっては、そのサイトがどのように作られているかの過程や方法などは実はどうでもよく、必要な情報がわかりやすい表現で快適に閲覧できるかどうかが重要だと言えます。

 顧客が本当に見せたかったもの、ユーザーが本当に見たかったものを正しく届けることができるのであれば、初学者にもベテランにとっても、静的サイトコーディングは安定した手段の一つであるとも言えるでしょう。

 ただ、静的サイトコーディングでは、JavaScriptフレームワークでは当たり前のように用いられる、再利用可能なコンポーネント設計が使えなかったり、CSSの影響範囲(スコープ)を常に意識しなければならなかったり、といったジレンマもあります。

 初学者でもベテランでも、便利なコンポーネント設計や最適化されたCSSスコープの恩恵を受けつつ、高いパフォーマンスの静的サイトを効率的に作ることができたら理想と言えますが、果たしてそんな夢のような方法はあるのでしょうか?

 そこで、筆者はAstroフレームワークを紹介したいと思います。

次のページ
Astroの設計思想とメリット

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Astroで始める静的サイト作成入門連載記事一覧

もっと読む

この記事の著者

池原健治(イケハラ ケンジ)

 ゲーム会社のUXデザイナー。デザイン、プロトタイピング、コーディングなどを担当する他、SNSでの情報発信や、登壇活動など、幅広く活動している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17883 2023/07/03 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング