【ふろんとえんど】

フロントエンド とは?

💡 ユーザーの目に映るすべてが、フロントエンドの仕事。
📌 このページのポイント
フロントエンド と バックエンド ユーザー フロントエンド (ブラウザ側) HTML(構造) CSS(見た目) JavaScript(動き) ユーザーの目に見える部分 API バックエンド (サーバ側) サーバ処理 データベース 認証・セキュリティ ユーザーから見えない裏側 フロントエンド = 「表舞台」、バックエンド = 「舞台裏」
フロントエンドとバックエンドの役割分担
ひよこ ひよこ

フロントエンドって何のこと?Webサイトを作ること全般?

ペンギン先生 ペンギン先生

いい質問だね!フロントエンドは、Webサイトやアプリの「ユーザーが目にする部分」を作る領域のことだよ。ボタンの色、文字の大きさ、アニメーション……ブラウザに表示されるものはぜんぶフロントエンドの担当なんだ。

ひよこ ひよこ

じゃあ、HTMLとかCSSがフロントエンドってこと?

ペンギン先生 ペンギン先生

そのとおり!HTMLで構造を作り、CSSで見た目を整え、JavaScriptで動きをつける。この3つがフロントエンドの基本技術だよ。最近はReactVueといったフレームワークを使って、もっと効率的に開発するのが主流になっているね。

ひよこ ひよこ

バックエンドとはどう違うの?

ペンギン先生 ペンギン先生

レストランに例えるとわかりやすいよ。フロントエンドは「ホール」で、お客さんが見るメニューや内装、接客のこと。バックエンドは「キッチン」で、料理を作ったり食材を管理したりする裏方の仕事。両方あってはじめてお店が成り立つんだ。

ひよこ ひよこ

フロントエンドエンジニアになるには何から始めればいい?

ペンギン先生 ペンギン先生

まずはHTMLCSSで簡単なWebページを作ってみよう。次にJavaScriptで動きをつけてみる。そこまでできたら、ReactVueなどのフレームワークに挑戦するといいよ。実際に手を動かして作るのが一番の近道だね!

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
フロントエンドはユーザーがブラウザ上で直接触れる部分を担当する技術領域です。HTMLCSSJavaScriptを軸に、モダンなフレームワークを活用して快適なユーザー体験を実現します。バックエンドとの連携を理解することで、Web開発の全体像が見えてきます。
📖 おまけ:英語の意味
「Front End」 = 前面・表側の端
💬 ユーザーに面している側という意味で「フロント(前面)」と呼ばれる
← 用語集にもどる