概要
フロントエンド（Front-end）とは、ウェブサイトやアプリケーションの中で、私たちユーザーが直接目で見て、ボタンをクリックしたり文字を入力したりする「表側」の部分のことです。
ブラウザ（Google ChromeやSafariなど）に表示されているデザインや文字、アニメーションなどはすべてフロントエンドの技術で作られています。
詳しい説明
ウェブサイトができる仕組みは、よく「レストラン」にたとえられます。
- フロントエンド： 接客をするホールや、きれいに盛り付けられた料理、メニュー表のことです。お客さん（ユーザー）が直接触れる部分を指します。
- バックエンド： 注文を受けて料理を作るキッチンや、食材を保管する倉庫のことです。裏側で見えない処理を行います。
フロントエンドを作るためには、主に3つの道具を使います。
- HTML（エイチティーエムエル）: サイトの「骨組み」を作ります。「ここにタイトルを書く」「ここに画像を置く」といった指示を出します。
- CSS（シーエスエス）: サイトの「見た目」を整えます。色を変えたり、ボタンの形を丸くしたり、レイアウトをきれいに並べたりします。
- JavaScript（ジャバスクリプト）: サイトに「動き」をつけます。ボタンを押したらメニューが開く、画像が切り替わる、といった仕組みを作ります。
最近では、これらをより効率よく組み立てるために Astro や React などの「フレームワーク」と呼ばれる道具セットが使われるのが一般的です。
詳しくは MDN Web Docs（フロントエンドWeb開発） を参照してください。
まとめ
フロントエンドは、ウェブサイトの「顔」となる部分です。見た目の美しさだけでなく、ユーザーがいかに迷わず、気持ちよく操作できるか（これをUI/UXと呼びます）を考えるのがフロントエンド開発の役割です。
このサイトでの使われ方
このサイトのフロントエンドは、Astro というフレームワークを使って構築されています。
具体的には、webapp/src/pages/ 配下にあるファイルが各ページの構造を決め、webapp/src/components/ にある部品（コンポーネント）を組み合わせて画面を作っています。ユーザーがタイムラインを見たり、記事を読んだりする際の表示スピードを速くするために、最新のフロントエンド技術が活用されています。
