フロントエンド Web ラボ：HTML、CSS、JavaScript をブラウザーでライブプレビュー
このラボは、生徒ひとりひとりに自分用の小さな Web ページ（ランチメニュー）を用意します。ページは3つのファイルでできています。ページにあるものの index.html、見た目の style.css、動きの app.js です。生徒は JupyterLab のファイルエディターでファイルを編集し、同じフォルダーから配信される2つめのリンク、Preview でページを見ます。短い Python スクリプトがファイルを読んで中身を表示するので、ページを書くだけでなく、確かめることもできます。
攻撃のラボではなく、Node もフレームワークもありません。ページはふつうのファイルで、動かす環境はブラウザーだけです。どのコピーも、インターネットにも他の生徒にもつながっていないので、何かをダウンロードすることも、中から他の人に届くこともありません。
生徒が学ぶこと
HTML、CSS、JavaScript がそれぞれ何をするか。HTML は構造で、要素、見出しのアウトライン、リンクです。CSS はスタイルで、セレクターと宣言、内容・パディング・ボーダー・マージンからなるボックスモデル、そしてひとつの要素に2つのルールが当たったときにどちらが勝つかを決めるカスケードです。JavaScript は動きで、クリックや入力のようなイベントと、DOM を変える関数です。ここでは、ライブラリを使わずに、一覧を絞り込み、暗い配色に切りかえます。そのあと、ページの確かめ方を学びます。タグを数える、アウトラインを読む、どこにもつながらないリンクを見つける、ブラウザーと同じようにサーバーにページを求める、という方法です。Web 開発やフロントエンドの入門に向いています。正確な表現は、お使いの認定機関の単元でご確認ください。ここでは特定のものを挙げていません。
ブラウザーで動かす
ラボはサービスをひとつ、jupyter だけ起動します。作業フォルダーにページ、最初のノートブック、短いスクリプトを書き出し、フォルダー site を配信する簡単なファイルサーバーを動かします。ラボのページからは2つのリンクが開きます。作業場の JupyterLab と、ページそのものの Preview です。プラットフォーム自身の入り口が開いた人をすでに知っているので、JupyterLab はトークンを求めません。Preview が見せるのは保存したファイルなので、ファイルを編集したら、生徒は保存してから Preview を再読み込みします。ラボのそばのターミナルには専用の Python がないので、docker exec jupyter に続けて、中で実行するコマンドを書いてラボの Python を使います。
- コンテナーのページを開く. バーの「つくる」を開き、「コンテナーを実行」を選びます。ページは誰でも開けて、Git ラボと SQL ラボはアカウントなしで起動できます。ほかのラボには無料アカウントが必要です。アカウントを作成してサインインし、「起動」を押します。
- ラボを探す. 「サンプルラボ」のカードにすべてのサンプルが並んでいます。フロントエンド Web：HTML、CSS、JavaScriptを探します。
- 「起動」を押す. 「起動」はそのまま1回の操作で実行します。「先にファイルを編集」は compose ファイルを開くので、起動する前に変更できます。
- 開く. ラボのページにあるラボのバーには、リンクが2つあります。JupyterLab を押し、フォルダー site を開いて index.html をダブルクリックし、次に Preview を押してページを見ます。そのあと「ターミナルを開く」を押し、docker exec jupyter python3 steps/tags.py と入力して、ページのタグを数えます。
生徒に提出してもらうもの
自分のページの版です。フォルダー site にある3つのファイルを、JupyterLab の File、Download でダウンロードします。そのうえで、自分で行った変更1つと、それで何が変わったかを、自分の言葉で一、二文。たとえば新しい料理、別の配色、別の動きをするボタンなどです。自動採点はありません。一文を読めば、理解できたかどうかがわかります。さらに力をつけたいときは、自分のページで steps/links.py と steps/outline.py を実行して、それぞれが何を示すかを書かせるか、ルールを1つ足して、どのルールが勝つか、その理由は何かを説明させてください。
このラボの基本レッスン
Front-End Web Basics は、このラボで進める小さなレッスンです。生徒はページの3つのファイルを一覧にし、タグを数えてアウトラインを読み、スタイルシートのルールと宣言を数え、スクリプトの関数とイベントを見つけ、リンクと Preview のサーバーの返事を確かめます。わざと小さくしてあり、ラボで進めるレッスンとはどういうものかを先生に見てもらうためのもので、あとはラボが担います。変更したいときは、ご自分のモジュールにコピーしてください。
GitHub のコード
compose ファイルに Dockerfile はありません。公開されている1つのイメージ、Jupyter Docker Stacks の scipy-notebook を、日付つきのタグに固定して、権限のない専用アカウントとメモリ 512 MB で動かします。イメージのライセンスは BSD-3-Clause で、当社は配布していません。ファイルは起動時に、決まった文章からページとスクリプトを書き出すので、どのコピーも同じで、何もダウンロードされません。限界も正直にお伝えします。ページは小さく、Node もフレームワークもなく、インターネットからライブラリを取ってくる方法もありません。そのため生徒はふつうの HTML、CSS、JavaScript で作業します。それがこのレッスンのテーマです。ラボを止めると何も残らないので、生徒は先にファイルをダウンロードします。
課題として出す
何を提出するかを課題に書いてください。
- ラボを作る. モジュールで課題を追加し、「コンテナーラボ」のカードを選んでから「GitHub リポジトリ」を選びます。https://github.com/mitsurutech/lab-frontend-web とブランチ main を指定します。compose ファイルは既定の compose.yaml です。変更したい場合は、たとえば自分用の出発点のページを使うときは、先にリポジトリをフォークしてください。
- 公開して試す. 「公開」すると、確認したコミットに固定されるので、あとでリポジトリを変更しても、すでに出したラボは変わりません。まず自分のコピーを起動してください。
- 配布する. ほかの課題と同じように配布します。期限を付けることもでき、課題には何をするか、何を提出するかを書いておきます。
- 提出物を採点する. 生徒のコピーを開いて提出された内容を確認し、採点します。足りない場合は理由を書いて差し戻します。
このラボを試す、そして費用
無料の個人アカウントで、このラボの基本レッスンに取り組めます。毎月、ほとんどのレッスンに足りる無料クレジットがあり、カードは要りません。クラスで使う場合、学校は最初の365日間、生徒50人まで無料で、その後は生徒1人あたりの年額です。すべてのラボが含まれ、教職員は無料です。
よくある質問
- リンクが2つあるのはなぜですか。
- 1つめの JupyterLab は、生徒がファイルを編集し、ターミナルを使う場所です。2つめの Preview は、フォルダー site から配信されるページそのもので、訪問者が見るのと同じ姿です。ページを別のタブに分けてあるので、エディターに囲まれることがありません。
- ファイルを変えたのに Preview が変わりません。なぜですか。
- Preview が見せるのは保存したファイルです。エディターでファイルを保存してから、Preview を再読み込みしてください。それでも同じなら、強制再読み込みを試してください。ブラウザーが古いファイルをおぼえていることがあります。
- 生徒は Node や React、インターネットのパッケージを使えますか。
- いいえ。コピーはインターネットにつながらず、イメージに Node もないので、インストールするものがありません。このラボが教えるのは、あらゆるフレームワークの土台になっている3つの素の言語です。ほかの出発点のページが必要なときは、リポジトリをフォークし、compose ファイルが書き出すファイルを変えて、そのフォークをラボに指定してください。
- トークンやパスワードを入力しなくてよいのはなぜですか。
- ラボのウェブページには、プラットフォーム自身の入り口からしか届きません。入り口はあなたが誰かをすでに知っていて、あなたと、そのモジュールを教えるスタッフだけを通します。だから JupyterLab はトークンなしで起動します。他の人が届くマシンでは、このようには動かさないでください。