Webサイトを見るためのアプリ。Chrome、Safari、Edgeなどが代表。サーバーから受け取ったデータを、人が読める画面に組み立てて表示してくれる。
ブラウザとは、Webサイトを見るためのアプリのことです。Google Chrome、Safari、Microsoft Edge、Firefoxなどが代表的で、あなたが今このページを読んでいるのもブラウザの上です。browse(拾い読みする)が語源です。
「Web世界の翻訳機つき窓口」です。サーバーから送られてくるデータは、HTMLやCSSといった機械向けの言葉で書かれています。ブラウザはそれを受け取って、人間が読める美しいページに一瞬で「翻訳」して見せてくれます。
どのブラウザでも、ページ上で右クリック→「検証」(またはF12キー)で開発者ツールが開きます。ページの構造や色指定がその場で見られて、勉強の教材は目の前のすべてのサイト、という状態になります。壊す心配はありません(変更は自分の画面だけで、再読み込みすれば元どおりです)。
初心者がつまずきやすいポイント
「直したはずの変更が画面に出ない」とき、原因の多くはブラウザのキャッシュ(古い保存版の表示)です。スーパーリロード(Windows: Ctrl+Shift+R / Mac: Cmd+Shift+R)を覚えておくと、無駄な悩み時間が消えます。
API(エーピーアイ)
プログラム同士が情報をやり取りするための窓口。中の仕組みを知らなくても、決められた形で頼めば決められた形で返ってくる。
CSS(シーエスエス)
Webページの「見た目」を書くための言語。色・文字の大きさ・余白・配置・アニメーションまで、デザインに関わる部分をすべて担当する。構造のHTMLとセットで使う。
GitHub(ギットハブ)
プログラムのコードを保管・共有するためのWebサービス。変更の履歴がすべて残り、いつでも前の状態に戻せる。Vercelと連携すると、コードを送るだけで自動でサイトが更新される。
HTML(エイチティーエムエル)
Webページの「構造」を書くための言語。見出し・段落・画像・リンクなど、ページに何がどの順で置かれるかを定義する。Webページはすべて最終的にHTMLでできている。
JavaScript(ジャバスクリプト)
Webページに「動き」を付けるためのプログラミング言語。ボタンを押したら開く、入力をチェックする、データを取ってきて表示するなど、ページ上のあらゆる動作を担当する。
Next.js(ネクストジェイエス)
Reactをベースにした、Webアプリ開発の人気フレームワーク。画面・ページ切り替え・サーバー処理までひと揃いで作れる。本サイトもNext.jsで動いている。