使った手抜き教材を作りました。実は単なるリンク集なので、一応こちらにもコピペすると↓な感じ。(async/await編)サンプルを書き換えてライブコーディングしながら覚えてもらう作戦です。ライブコーディングを使った学習は超速い!JavaScript未経験というインターン生にやってもらったところ、1日で最後まで進められました。「JavaScriptがマスターできた!」というわけにはいかないけど、触りながらどんなモノかはなんとなく掴めるところまでは進めたんじゃないかな。これから先は、興味のある部分をサイトなどを見ながら細かいところは覚えていけば良いと思っています。仕事でもJavaScript書いてるけど、私もそんな感じだし。実習を通じてjsBinのようなオンラインエディタを使ってプログラミングを覚えるのは下記のようなメリットがあると思いました。はじめられる本やサイトのサンプルコードなどを自分でコピーして動作させようとすると、そのコードの全てを一回コピーして動かすところから始めないといけなくて、始めるまでに時間がかかってしまいます。紙の本だと写経...やってらんないwjsBinのようなオンラインエディタを使うと、ブラウザを開いてリンクをクリックするだけで、すぐに学習を始めることができます。修正できるサンプルコードがそのまま動かせるし、修正してみることもできます。修正してみた結果、どう結果が変わるか?をリアルタイムに体験しながら覚えることができます。学習箇所を絞れる生徒がコードを1から書く必要がなく、学習したい部分だけを書かせるような教材が簡単に作れます。修正したコードは別のURLとして保存することもできます。先生と生徒が学習状況を素早く共有しながら学習を進めることができます。jsBinを使うときに注意すること便利なjsBinだけど、何点か気をつけないといけないポイントに気づいたので書いておきます。デバッグがちょっとやりづらいjsbinを使う人が書くコードはちょっとなのに、ブラウザのコンソールとかで見ようとするとjsbinのコードも含めていっぱい出てきてしまうので、ちょっと入門者には敷居が高いです。htmlをダウンロードしてもらって、そのhtmlをブラウザで開いてデバッグしてもらいました。手間なので、もう少し良い方法があればいいなぁ、というところです。Policyの設定ができてないから動作しないAPIがある最近のChromeブラウザで使おうとすると、getUserMedia()などでビデオストリーム取ったりといったコードが動きません。policyという機能へ対応していないためです。下記issueでjsBinのコードへの対応は終わってるようですが、まだサイトへのリリースが行われていないようです。修正が待ち遠しいですね。policy対応してあるので、そちらを使ってみるのも手ですね。永久ループのプロテクト機能が時々邪魔jsBinには永久ループを判定してプロテクトする機能が付いています。これが時々誤動作?します。下記のようなコードはちゃんと動かないです。midi.wait(30);}})();「32回ループ」なので、永久ループじゃないんですが、、、ダメなようです。noprotectというコメントをコードに入れます。なんだか変なおまじないが必要になるところも、ちょっとマイナスポイントかなぁ、という印象です。まとめオンラインエディタを使ったJavaScriptの学習は効率が良いと感じました。紹介しましたが、他にJavaScriptを書いて直接動かせるオンラインエディタはたくさんありますので、興味のある方は、他のもいろいろ使ってみると良いと思いました。(エディタはとても好みが別れるので。コメントをキャンセルメールアドレスが公開されることはありません。*サイトAuthor@tadfmac横浜でゆるりとモノやオトを作ってます。