フロントエンド Web の基本

ある喫茶店のランチメニューのページには、料理の一覧と、料理をさがす入力欄と、暗い配色に切りかえるボタンがあります。ページに何があるかを決める人、見た目を決める人、ボタンを押したときの動きを決める人が必要です。Web では、それぞれの仕事に専用の言語があります。

• HTML：ページに何があるか（見出し、リスト、リンク、フォーム）を書く言語。
• 要素：ページの一部分。h2 や li のようなタグで書く。
• CSS：要素の見た目を書く言語。
• セレクター：CSS のルールのうち、どの要素に当てはまるかを示す部分。
• 宣言：ルールの中の1つの設定。たとえば margin: 1rem。
• ボックスモデル：どの要素も、内容、パディング、ボーダー、マージンからなる箱である。
• DOM：ブラウザーが持っているページの姿。JavaScript が読んだり変えたりできる。
• イベント：クリックのように、ページの上で起きること。

ls site は、ページの3つのファイルを一覧にします。ページにあるものを書いた index.html、見た目の style.css、動きの app.js です。2つめのコマンドは大きさを表示します。1373、1125、1093 バイトで、合わせて 3591 バイトです。これでページ1つ分です。Preview で見て、JupyterLab でファイルを読んでみましょう。

スクリプトは、ブラウザーが読みはじめるのと同じように、index.html をタグごとに読みます。タグは全部で36個です。a と li は5回ずつ、section は3回出てきます。2つめのスクリプトは見出しだけを表示します。これがページのアウトラインで、h1 の Lunch menu がひとつと、その下に h2 が3つあります。見出しは文字を大きくするためのものではありません。ページが何について書かれているかを示すもので、画面読み上げソフトが見出しからほかの見出しへ移動するときにも使われます。

CSS のルールは、セレクターと、波かっこの中の宣言でできています。スクリプトは17個のルールと39個の宣言を見つけ、いちばん多く使われている設定は padding で6回です。どの要素も箱で、内容があり、その内側にパディング、次にボーダー、外側にマージンがあります。.dish のルールは padding、margin-bottom、border、border-radius を決めているので、料理ひとつひとつが、まわりにすき間のある枠つきのカードになります。ひとつの要素に2つのルールが当たるときは、より具体的なセレクターが勝ち、同じ強さなら後に書いたほうが勝ちます。これがカスケードです。body.dark は body より具体的なので、暗いページでは色が入れかわります。style.css の値をひとつ変えて保存し、Preview を再読み込みして、スクリプトをもう一度実行してみましょう。

スクリプトは app.js を読んで、何を定義し、何を待っているかを調べます。関数は filterDishes と toggleTheme の2つ、イベントを待つものは3つで、検索欄の submit と input、テーマのボタンの click です。これらのイベントが起きると、関数が DOM、つまりブラウザーが持っているページを変えます。Preview で試してみましょう。欄に tom と入力すると、その文字を含む2つの料理だけに一覧が絞られます。そのあと Dark theme を押します。ライブラリもネットワークの呼び出しもなく、ブラウザーがもともと持っているものだけを使っています。

見た目が正しくても、壊れているページはあります。1つめのスクリプトは、すべてのリンクと、それがどこへ行くかを一覧にします。3つのリンクはページの中で、どれも行き先が見つかります。1つはここにあるファイル、もう1つは別のサイトへのリンクです。2つめは、ブラウザーと同じように Preview のサーバーにページを求め、ステータス 200、タイトル Lunch menu、そして style.css が text/css で返ることを表示します。ステータスが 404 なら、ページが求めているファイルがないという意味です。

バーから JupyterLab を開き、start.ipynb をダブルクリックします。セルは同じファイルを Python で読み、タグを数え、CSS のルールを一覧にし、Preview にページを求めます。セルをクリックして Shift と Enter を押すと実行されます。最後のセルは、あなた自身の変更のための場所です。style.css を編集して保存し、ルールをもう一度数えてみましょう。