みなさん、こんにちは。どんぶラッコです。
先日、中の人がプログラミング講師として授業を行ってきました。
https://qws-fes-20201107.peatix.com/
HTML, CSS, JavaScript の仕組みを体験してみるという内容でした。
5時間で全てを教えきるというのはなかなか大変でカリキュラムが全て終わらなかった部分もありましたが、なんとか無事に終えることができました。
今回進行の仕方を特に迷ったのがJavaScriptでした。 ローカル環境で話を進めてしまうと console.log() を使って表示確認を行わねばならず、5時間という限られた時間の中では、本質的ではないところで時間が取られてしまうのでは…という懸念です。
そこで今回使ったサービスが CodePenです。CodePenはオンライン上で HTML, CSS, JavaScriptを編集し、動作を確認できるプログラミング版のノートのようなサービスです。
これを使ってJavaScriptの演習問題を作成して展開する試みをしてみました。
今回使ってみて良かったと感じたこと・次回への改善点をこの場を借りて共有します。
今回作ったコード
今回作成したCodePenの一つを公開します。これは、変数と変数の計算の概念を伝えた後に実施する練習問題です。
See the Pen JavaScript基礎 – 演習: 時間を秒数に変換するプログラムを書いてみよう！ by cha1ra (@cha1ra) on CodePen.
予め分数と秒数が格納されている変数が与えられているので、それを使って全て秒数だと何秒になるかを計算し、その結果を result という変数を作り、格納しなさいという内容です。
- 変数の宣言
- 変数の値代入
- 変数の計算
を復習するための演習問題です。
実際の講義の際はこのリンクを受講者に展開し、演習課題として取り組んでいただきました。
工夫した点
もし出力結果が正解だった場合、「正解」と表示することでゲーム性を高めています。
この確認用プログラムは答えなので受講生にはあまり見られたくありません。なので、HTML側で確認用関数を作成し、JavaScriptの一番最後でその判定関数を実行しています。
また、 console.log を利用せずに授業を展開するため、エラー文章が発生しません。
そこで、エラーが発生したらイベントを拾い、GUI上に表示するようにしています。
コードは下記の通りです。 addEventListener を使ってイベントを検知し、 jQuery を使ってエラー文章を反映しています。
window.addEventListener('error', function(e) {
$('.error').text("エラー: " + e.message)
})良かった点
説明時間の短縮に成功
受講者は予め用意されているリンクをクリックするだけなので、リンクをまとめたページを用意しておけば迷子になることはありません。その分、サクサクと講義を進めることができました。
文法の仕組みを視覚的に理解できる
特にプログラミング体験会のようなライトな受講生には、console.log()を使ったデバッグ作業が苦痛に感じてしまうこともあります。今回のようにHTMLと組みわせることでライトな層にも気軽にプログラミングに触れてもらえる機会を提供できました。
次回に向けての課題
セーブができない
会員登録をしないとセーブができないため、せっかく演習で書いたコードが全て消えてしまうことになってしまいます。 そのため、演習中にホットリロードが原因で表示がおかしくなったとしても画面更新を容易に行うことができません。
実際の開発工程を体験できない
これは今回のような仕組みとのトレードオフになってしまいますが、「演習問題特有」のルールの中の記述方法しか学ぶことができず、開発現場の実態に即した手順を追体験する機会が減ってしまいます。
以上のことを踏まえると、文法の仕組みの解説や、導入部分の演習では自転車の補助輪のような形でCodePenを使っていき、慣れてきたら徐々に実際のツール(VSCode など)に移行していくのが一番スッと移行しやすいのではないかと考えています。
CodePenを使用した授業自体は非常にメリットを感じているので、今後も展開していこうと思います！
