no-image

jsBinを使って超速でJavaScriptを学習する

ちょっと前に、インターン生にJavaScriptを2日くらいで覚えてもらうため、jsbin を使った手抜き教材を作りました。

つくったもの

これ です。

実は単なるリンク集なので、一応こちらにもコピペすると↓な感じ。

サンプルを書き換えてライブコーディングしながら覚えてもらう作戦です。

感想→ ライブコーディングを使った学習は超速い!

JavaScript未経験というインターン生にやってもらったところ、1日で最後まで進められました。
もちろん、「JavaScriptがマスターできた!」というわけにはいかないけど、触りながらどんなモノかはなんとなく掴めるところまでは進めたんじゃないかな。と。これから先は、興味のある部分をサイトなどを見ながら細かいところは覚えていけば良いと思っています。仕事でもJavaScript書いてるけど、私もそんな感じだし。

実習を通じてjsBinのようなオンラインエディタを使ってプログラミングを覚えるのは下記のようなメリットがあると思いました。

1. すぐにはじめられる

本やサイトのサンプルコードなどを自分でコピーして動作させようとすると、そのコードの全てを一回コピーして動かすところから始めないといけなくて、始めるまでに時間がかかってしまいます。

紙の本だと写経…やってらんないw

jsBinのようなオンラインエディタを使うと、ブラウザを開いてリンクをクリックするだけで、すぐに学習を始めることができます。

2. すぐに動かせる / 修正できる

サンプルコードがそのまま動かせるし、修正してみることもできます。
修正してみた結果、どう結果が変わるか?をリアルタイムに体験しながら覚えることができます。

3. 学習箇所を絞れる

生徒がコードを1から書く必要がなく、学習したい部分だけを書かせるような教材が簡単に作れます。

4. 保存、共有が簡単

修正したコードは別のURLとして保存することもできます。
先生と生徒が学習状況を素早く共有しながら学習を進めることができます。

jsBinを使うときに注意すること

便利なjsBinだけど、何点か気をつけないといけないポイントに気づいたので書いておきます。

1. デバッグがちょっとやりづらい

jsbinを使う人が書くコードはちょっとなのに、ブラウザのコンソールとかで見ようとするとjsbinのコードも含めていっぱい出てきてしまうので、ちょっと入門者には敷居が高いです。

今回のインターン生には、コードがエラーになったら一度 htmlをダウンロードしてもらって、そのhtmlをブラウザで開いてデバッグしてもらいました。

ちょっと手間なので、もう少し良い方法があればいいなぁ、というところです。

2. feature Policyの設定ができてないから動作しないAPIがある

最近のChromeブラウザで使おうとすると、getUserMedia()などでビデオストリーム取ったりといったコードが動きません。

これは、jsBinがまだfeatue policyという機能へ対応していないためです。

下記issueでjsBinのコードへの対応は終わってるようですが、まだサイトへのリリースが行われていないようです。修正が待ち遠しいですね。

has been blocked because of a Feature Policy applied to the current document

同様のオンラインエディタである jsfiddle は feature policy対応してあるので、そちらを使ってみるのも手ですね。

3. 永久ループのプロテクト機能が時々邪魔

jsBinには永久ループを判定してプロテクトする機能が付いています。
これが時々誤動作?します。

例えば、下記のようなコードはちゃんと動かないです。

「32回ループ」なので、永久ループじゃないんですが、、、ダメなようです。
これを動かすには、

というコメントをコードに入れます。

なんだか変なおまじないが必要になるところも、ちょっとマイナスポイントかなぁ、という印象です。

まとめ

オンラインエディタを使ったJavaScriptの学習は効率が良いと感じました。

今回jsBin を紹介しましたが、他にJavaScriptを書いて直接動かせるオンラインエディタはたくさんありますので、興味のある方は、他のもいろいろ使ってみると良いと思いました。(エディタはとても好みが別れるので。。。)

オンラインエディタをたくさん紹介してくれてる下記リンクの記事がとても参考になりました!

CodePenだけじゃない!ブラウザー上でサクッとコードを書けるプレイグラウンド7選

それでは〜