一覧に戻る
Lv.2

フロントエンド

Frontend

Webサイトやアプリで、ユーザーが直接目にして操作する画面や機能のこと

簡単に説明すると

フロントエンドっていうのは、Webサイトで僕たちが直接見たり、ボタンを押したりして操作する画面部分のことだよ。 文字の色やボタンの配置といったデザインを整えたり、ネットショップの買い物かごの動きなどを担当しているんだよ。

名前のヒミツ

Frontend(フロントエンド)は、英語の『front(前面・表側)』と『end(端)』を組み合わせた言葉だよ。 ユーザーが直接触れる『システムの最前線』という意味からこう呼ばれているんだ。 英語では Client-side(クライアントサイド)とも呼ばれているんだ。

くわしく見てみよう!

フロントエンドとは、Webサイトにおいて、ユーザーが直接目にする画面や操作する部分のことだよ。
ブラウザ上に表示されるテキストや画像、ボタンなどのデザインや、それらを動かす仕組みを指すんだ。

普段みんながネットサーフィンをしているときに見るWebページは、すべてフロントエンドの技術で作られているんだよ。
具体的には、文字や画像を配置するHTML(マークアップ言語)、デザインを整えるCSS(スタイルシート言語)、そして画面に動きをつけるJavaScript(プログラミング言語)という3つの技術が、Webフロントエンドを構成しているんだ。

例えば、ボタンを押したときにポップアップが表示されたり、入力フォームに入力ミスがあるとその場で警告が出たりするのも、フロントエンドの役割だよ。
イメージとしては、お店の「接客スペースやメニュー表」のようなもので、お客さんをもてなす表舞台の役割を果たしているんだ。

なお、スマートフォンアプリ(ネイティブアプリ)にも「ユーザーが直接操作する画面」という点で似た役割を持つ部分があるけど、Apple製品向けの「SwiftUI」やAndroid向けの「Jetpack Compose」といった、それぞれの環境に合わせた別の技術が使われていて、仕組みはWebフロントエンドとは異なるんだ。

これに対して、ユーザーからは見えない裏側のデータ処理やデータベースの管理などはバックエンドと呼ばれているんだよ。
フロントエンドとバックエンドが情報をやり取りしながら協力することで、1つのWebサービスが成り立っているんだ。