プログラミング講義の概要
WEBの世界には、面白い小噺がたくさん あります。雨宿りとWEBの小噺
パーソナリティーのkeethです。今日も 一つ、興味深いお話をご紹介します。
今回の話題は、今年からプログラミング の講師の内容がちょっとガラッと
変わりまして、いつかの回でお話し したと思うんですが、TypeScriptと
Reactを使ったフロントエンドの アプリケーション開発の講師を
今やっています。だいたい初めて 4月スタートなので、3ヶ月、4ヶ月
目とかに入ったんですけど、そこで 得たものと最近感じていること
とか、いわゆる小学生の学習に関して 思うところっていうのを頭の中
を整理しながら語ってみたくなった ので、今日はそういうお話になります。
今、対象者は一応プログラミング やったことないわけではないですけ
ど、ほぼほぼ小学生と思っていただ いてよくて、各クラス20人ないし
30人ぐらいで、僕はさらに3クラス 受け持っていて、1コマ50分プラス
10分休憩を各クラス毎週2コマ ずつやっているので、毎週6時間
教えているという感じで、60人ない し90人ぐらい見ている。もう既に
経験したことあったり、既にタイプ スクリプトも書けますよっていう
子が毎年1人ないし2人ぐらいいらっしゃ ったんですけど、今年は珍しく
1人もいなかったので、本当に皆さん ひっくるめて小学生です。完全な
小学生じゃないといったのは、例えば Pythonとか、あとJavaとかですかね、
他のプログラミング言語を他の講義 でやったり受けたことあるっていう
方もいらっしゃるので、全く何も 分からないっていう方はそんな
多くはない。全然いらっしゃるんです けどね。そもそもパソコンその
ものに慣れてないよっていう学生 さんもいらっしゃるので、結構ピン
切れではあるんですけど、どの学生 さんに合わせるかというと、さすがに
それは一番下のパソコンすら触った こない学生に合わせると進捗悪
すぎるのでやらない。じゃあどこに 合わせるかっていうと、てっぺん
に合わせてもいいですけど、今回 はそういう飛び抜けた学生さんが
いらっしゃらないので、てっぺん ないし中間どころちょっと上に
揃えようかなと思って今進めて ます。やってる内容は最初カリキュラム
しっかり組んだんですよ。この 講義始める前に学校側とすり合わせ
をして、こういう内容でやろうと思 ってますっていうのを言ってます。
前期後期っていうものがあって、 前期12週後期13週だったかなっていう
ふうに分けてあります。その各 週で何をやるかっていうのをいわゆる
シラバスってやつを提出。僕の 方で考えて、スタッフの方と問んで
これでいきましょうというふう に確定します。参考程度にどんな
感じのシラバスを当初描いていた かっていうのをざーっとしゃべります。
前期は最初に環境セットアップ とTypeScriptの基礎をやりまして、
第2週でTypeScriptの応用と型システム をちょっとやろうかな。第3週から
リアクトに入ります。リアクト の入門とコンポーネント設計を
やって、第4週リアクトの状態管理 とフックスをちゃんとやろうかな
っていうとこです。それの基礎を やったら次の週でリアクトの状態
管理とフックスを実際ちゃんと 使って、実際のアプリケーション
こんなふうに使えますよっていう 応用まで入っていきたいなと思って
ます。進捗良ければカスタムフックス までやろうかなと思ってました。
第6週でちょっとリアクトから 離れてフォームの処理とバリデーション
周り。フォームもメソッドがGet とPostがあって、PutとDeleteももちろん
あるんですけど、基本GetとPostしか 使わないよみたいなお話。それが
なぜかみたいなお話もしようかな とか、ちょっと基礎知識も教えた
くなったので、そういうことを思 ってました。第7週APIとの連携と
非同期処理。第8週にリアクトルーティング とナビゲーションやって、第9週
グローバルの状態管理とコンテキスト ってとこです。この辺でそろそろ
状態管理のライブラリーを少し 見ていくのを一つかなと思って
ました。今の状態になるか、もしくは 中3度とかになるんですかね。第10
週でもうちょっと外側の話でスタイリング とかUIフレームワーク。さすがに
CSSもそんなに慣れた学生さんじゃない ので、テイルウィンドとかはやめて
よくあるMUIとかを使うんかなとか 思ってました。第11週認証とアクセス
制御入りたかったんですよね。認証 何で使うかってとこですけど、一旦
ファイアベース使おうと思ってました。 ファイアベースオースを使って
認証周りの実装してみようかなと思 ってました。第12週前期のプロジェクト
作成とデプロイ。第13週で前期プロジェクト 作成とデプロイ続きで最後どんな
ふうに完成しましたかっていう のを発表しあってみんなでレビュー
しあって終わりましょうっていう のが前期です。その前期プロジェクト
って言ってますけど、あれです。 いわゆるトゥードゥ管理、タスク
管理アプリを作ろうかなと思って ました。前期でも一応ハンズオン
形式でベースやっておりますので、 皆さん一緒に手を貸しながらやるん
ですけど、最後のトゥードゥアプリ のところはもう僕は何も教えなくて
皆さんで好きに調べながらやって くださいっていうふうにしよう
と思ってました。そこでは別にAIを 使うことも意図はないです。ただ
こういうトゥードゥアプリケーション を作ってくださいっていう仕様と
デザインだけ渡して、あとはもう それを再現できるかっていうのを
皆さんでやっていただくという 感じですね。クラスのやっぱり人
最終プロジェクトの概要
も多いので、ちゃんと提出していただ いて、そのクオリティーを見て強化
をつけようっていうふうに思って ました。これが前期ですね。後期は
もうちょっと応用範囲にどんどん 入っていって、後期第1週リアクト
の応用パターンとベストプラクティス です。有定リアクトの方式に乗っ
かってる話をしようと思ってます けど。第2週でリアクトにアニメーション
とかインタラクション周りのライブラリ がたくさんあるので、それを使って
もうちょっとリッチな見た目にする ようなときどうしたらいいんだろう
っていうのをやってみようかな。 この辺は多分結構引きがいいとは
思ってるんですけど。第3週にテスト とかをやって、第4週にパフォーマンス
チューニングですね。がっつり全部 やるわけじゃないですけど、リアクト
の中で例えばユーズコールバック あったりとかメモってのがあったり
するんですね。しっかりJavaScript のメモ化とかその辺の話もして
から、その辺をうまく活用できる リアクトのカスタムフックスを
使ったり便利な機能とかを使ったり それを除いてアプリケーション
としてのいわゆるパフォーマンス チューニング。まずブラウザー
でしっかりメトリクス取ってみたいな ところですね。これをやろうと思って
ました。あとはもうリアクトとか タイプスクリプトの話は正直どこ
行ったんって感じですけど、状態 管理実践パターンやったり、ビート
周りのそもそも高度な機能とか 開発ツール周りだったり、サード
パーティーのライブラリ使って 開発環境とかもっと良くしよう
とかリッチにしてみようみたいな 話をしたりとか。あとモバイル
対応、いわゆるレスポンシブデザイン とかをまずやるかなって感じです。
そもそもCSS慣れてないのでメディア クエリすら皆さん触ってないので
その辺もやってみようかなとか。 アクセシビリティでやっとやった
りとか、あとはモジュール設計とか ディレクトリの構造ですね。今回
の講義は基本ビートを使っていて ビートのリアクトタイプスクリプト
テンプレートを使ってます。あれの 中に乗っかってるんでディレクトリ
構成そのままっちゃそのままです けど。よくある構成が本当に良い
のかとか、いろんなこういうディレクトリ 構成が良いんじゃないのとか、ディレクトリ
の名前はこうだ、こうが良いんじゃない みたいなお話でたくさんあって
その辺のいくつかをピックアップ してやりたいかなと思ってました。
吉子さんのやつが良いかなっていう やっぱり思ったりしますかね。
実践的なフォーム処理とデータの バリデーションもあり、この辺バリデーション
のやっぱりライブラリーをしっかり 入れてやっていきたいかなっていう
とこです。より本当実践開発、僕らが 仕事でマジで使っているものとか
を使おうかなと。最後、最終プロジェクト ですね。まだ考えてないんですけど
これは今から考えるんですが、もう 1個前期と同じように最終課題
今までも何だもの全部ひっくるめる とここまでできるでしょうっていう
ものを開発していただいて、それを デプロイしてまた同じように
みんなでレビューし合って終わり にしようかなっていう感じです。
が、リアクトタイプスクリプトって 目打ってますけど、そもそもタイプ
スクリプトなかなか時間かかるという か、初学者なのでタイプスクリプト
云々の前にそもそもJavaScriptの話 をしなきゃいけなくて、途中で
カリキュラムも第2週からガラッと 結局変えちゃったんですよ。とにかく
まずは手を動かしてものを作れる ようにしたいっていうところを
最優先しました。ものを作ってる 途中で、例えばドキュメントの
getElementByIdっていう関数出てきました けど、ドキュメントってのはそもそも
JavaScriptというか、ブラウザーが 標準で持っているオブジェクト
で、その中にAPIとして用意されている ドムの中からID指定したものを抽出
するっていう関数がありますよ みたいな話をしたりとか、例えば
JavaScriptにもプリミティブ型として 型がないわけではないんですよ
ね。例えばその中にストリング型 から.trimみたいな関数で、余白
とか空白開業とかをカットできる 関数も組み込まれていたりとか
あとは全ての関数とかオブジェクト はオブジェクトがあって、そこから
アプリケーション開発の導入
派生しているものなので、全ては オブジェクトなんですよっていう
ところの話をしたりとかっていう 書いていったりアプリケーション
作っていく中で出てきたものを 適宜教えていく形にしようかな
と。その場ですぐに理解だけはでき たとしても、すぐに覚えられる
とは思ってないです。この辺はJavaScript ってプログラミングってやっぱり
習えるより慣れろっていう言葉 があるとおり、僕はこれ結構信じ
てるし、なかなか今でも通用できる 言葉だと思っておりますと。です
ので、分からんけどこれがまず何が できて、それを使ったらこういうこと
になりますっていうのが分かって いれば、あとはやりたいこと先
に、そういえばあれあったなって 言ってそれを使って書いてみたら
できましたっていうこのできました 体験をいっぱい積ませたかった
んですよね。なので前期いきなり ずっと今アプリケーション開発
をしてて、第2週でいきなりTypeScript は使ってないです。HTMLとJavaScript
とCSS、素のやつらですね。ビート すら使ってなくて素のHTMLとJavaScript
とCSSを使ってカウントダウンアプリ ですね。今年あと何月何日何秒っていう
のを毎秒毎秒計算してブラウザー で表示をして、JavaScriptでその数字
を書き換えていくっていうような 超シンプルなアプリケーション
を作っていきました。それでまず ブラウザーとかDOMとか、HTMLの操作
とか、CSSの装飾、簡単なやつの書き方 とか、あと多少Flexboxをやりました
ね。あとJavaScriptのロジックとか 処理の書き方みたいなのを基礎
をやっておきました。ただやっぱ これって書き方結構めんどくさかった
り、手続き的にしっかり書いて いかなきゃいけなかったり、だるい
のでこの辺をリアクトを使うと こんなにシンプルとかリアクト
が持っているAPIでサクッと書け たりしますよっていうのをやったり
するわけですね。そのカウントダウン アプリも実は2週かかってしまった
ので、僕1週間でスパッと終わる と思ったんですよ。残念ながら
そのレベルですらなかった。もっと 低かったんで僕の見積もりはちょっと
甘かったんです。第4週から第8週 まで4、5、6、7、8、5週間にかけて
ポケモンAPIっていうパブリック APIがございましてこれを使って
フォームからポケモンのIDないし 名前で検索をしてポケモンの情報
画像とかなんやらかんやらを取って きてカードっぽいコンポーネント
で出すみたいなアプリケーション を作っています。これ聞いても
慣れてる人は一瞬というかなん ならもう30分ぐらいで早く終わる
人もいらっしゃるでしょう。装飾 とかうまいこと頑張って1、2時間
もあれば終わると思ってるような アプリケーションです。慣れた
人であればです。ただ皆さんはタイプ スクリプトもリアクトも慣れて
いないので。僕それでも3週ないし 4週で終わると思ったんですけど
余裕で5週行って最悪7週まで行くん じゃないかと思ってるんですけど
多分6週で着地するとは思います。 その中でそもそもコンポーネント
とは何かとかディレクトリ構成 とかインポートをしたりエクスポート
をしたりとかっていう話もしたり してるので。割とJavaScriptの基礎
とかモジュールシステムとかっていう のも説明しながらやってるので
仕方ないなという話はあります けど。それでもなかなか進まん
ことには進まんなっていう話を 今ずっとしてるところです。
教育の難しさ
カリキュラーもそんなところだったん ですけど。ちなみにカリキュラー
に関してもこういうことを教えた ほうがいいとかこういう流れで
やったほうがいいよみたいなアドバイス ないしお前のやり方はそれだと
学習ならんぞみたいな悲嘆なく まさかりはいただけるとすごく
励みになりますのでぜひ遠慮せず 投げていただけると嬉しいなと思って
おります。 ちょっと長くなってきたんでぼち
ぼち前半としてここ1回区切って 後半でその各クラスの傾向とか
皆さんどういうステップで学んでる とかそういう学びに関する今思って
いることを喋ろうと思うんですけど 今その3クラス持ってるって言ったん
ですけどその3クラスっていわゆる ABCってランク分けされてるんですね
一応Aクラスができる方らしいBクラス Cクラスと下がっていくんですけど
残念ながら進捗としてはCクラス が一番早いんですよBクラスが実
は一番中途半端で一番遅かった ですけど最近これがAクラスとBクラス
逆転しそうになっててAクラスが 一番スピード今ちょっと下がってる
っていう感じですそれは何だろう っていうのが個人的に興味深かったん
でそれを今深掘りをしながら喋 っているとこですけど長くなりました
ので前半はここで区切って気になる 方はぜひ後半も聞いていただける
とすごく嬉しいなと思います というところで前半はこれで終了
したいと思いますそれではエンディング です
人に物を知るってすごく難しくて それは僕が持ってる知識で僕が
もう当たり前と思っていることは 皆さんにとっては当たり前では
ないんですね同じ業界にいたり すると目線とか経験値も近い人
とかを身近に置いたりそういう 人を採用したりするのでそうなんですけど
全然自分よりもレベル高いエンジニア の方のいらっしゃって僕がむしろ
エンジニアに到達しないことも よくありますとはいえベースとなる
知識はある程度揃ってはいるので 会話できないわけではないんです
けど初学者になるとそこがやっぱり 話変わってくるんですよねそも
そもコマンドラインのターミナル 叩いたことないとかコマンドが
そもそも分かりませんみたいな 学生さんもたくさんいらっしゃ
るんですよですので教えるって 本当に難しいし教える側にスキル
と総合的な知識がめちゃくちゃ 求められるなっていうのを改めて
痛感してます初学者であればある ほど質問とか分からないところ
つまずくポイントがあまりにも プリミティブなので僕はもう通過
しているというかそんなところ 全然引っかかることすらないみたいな
ところにバンバンみんな引っかか っていくんですよねはいいろんな
意味で学び直しをしたりとか今の 環境でも同じとこにつまずくんだ
とかそこはもうみんな引っかから なかったりここつまずくだろう
なみたいなところはみんな飛ばして きたりとかあったりするのでそういう
話を後半でしていきますのでぜひ 後半の教育論的なところに興味
ある人は聞いていただくと面白い 議論ができる気がしてますので
はいお楽しみいただければと思います それでは今回も終わりにしたい
と思いますクロージングです
この番組面白かったよーという 方はぜひチャンネル登録もお願いします
もし聞いていて気になることや 話してほしいトピック感想など
ございましたら概要欄のフォーム やxでハッシュタグweb小話でつぶ
やいてくださいwebはアルファベット 小話は漢字でもひらがなでも大丈夫
です それではまた雨宿りしに来てください
今回もお聞きくださりありがとうございました 雨宿りとwebの小話お相手はキース
でしたさよなら
