手前味噌ですが、手応えを感じた年度になりました。
前年度はProgateを中心に展開したが、いまいち悪かったので座学よりも実践の時間を多く取るよう試みた。
上記の課題感を受けて、年度を通して以下の工夫をしました。
目的意識の有無が学習効率に影響を及ぼします。クラス全体として「1つのサイトを作成、共同で運営する」ことを掲げました。
コードの編集したり、最終的にはコンテンツまで考えてもらうことになりました。淡々とこなすよりも、効果を感じることができました。
以前はWEBに公開されているチュートリアル記事やIT企業の研修資料を使用していました。内容は充実している一方で、教科書的すぎるあまり余計な情報が多く混乱しやすくそれが作業の進捗や知識の定着率に悪い影響を及ぼしているようにも思えました。
オリジナルで作成し、それを見て作業を進めてもらうようにしました。
コンテンツ
板書や連絡のツールとしてNotionを活用しました。様々な面でメリットがありました。詳しい内容はこちらの記事にまとめています。
特に、生徒各自でコンテンツの企画を同時並行で進める際は看板状のUIで管理・内容把握ができるので効果的でした。
実際の取り組みを紹介します。
HTMLとJavascriptコースを、あくまで雰囲気を掴んでもらう程度に行いました。前年度の反省から座学的な内容に終始してしまうのは避けたかったので、早めに実践的な内容に移りました。
ちなみに、このProgateっというサービスですが、教育機関向けのプランが用意されています。
対象の教育機関であれば申請を行うことで、 有料コースのうち2プランを無料で利用可能となっています。JavascriptコースとReactコースを選択しましたが、Reactコースの代わりにHTMLコースを選んでもよかったかなと思います。
実際に制作したサイトはこちらです。時間的にフルスクラッチで作るのは無理があったので、vercelのテンプレートを活用しています。
英字の部分を日本語に直したり、新しくページを追加してもらいました。
共同開発のやり方ですが、StackBlitz Codeflowというサービスを利用しています。
また、ロゴタイプを得意そうな生徒にFigmaというデザインツールで作ってもらっています。
こちらです。Figmaを使いこなすのは簡単ではないはずですが、1時間ちょっとの時間でサクッと作っていて驚きました。
コンテンツの作成も行なってもらっています。
Notionで下書きを書く→markdownで出力する→ソースコードに反映させる。という流れになります。Notionでドキュメントを作ることは、HTMLと親和性の高いmarkdown記法の習得につながるのがメリットです。
3つあります。
3学期に取り組んだことです。
ブラウザベースで動作するため、開発環境構築を行う必要がないのがありがたかったです。
Line Messaging APIを利用します。APIについて、学んでもらいました
自信がついた。面白かった
生徒が非常に
皇居良俗に反しない限りは自分の裁量に任されているため、特に最新のテクノロジを現場で試せるという環境です。
後半には本格的に活用しました。
所属する学校を問わず1つのサイト運営することを通して、ハブ的な役割を果たせたらいい。