あるくテック

「分かる」をつくりたい。

来年度の授業準備 - JS開発環境 その2

来年度の授業準備 - JS開発環境 その1のつづきです。

JavaScriptの記述と実行が簡単にできて、授業中に情報共有ができる開発環境を検討中です。今年度の授業環境については過去記事2017年度の授業環境 (HTML5+JavaScript)に書きました。

前回チェックしてみたもの

今回チェックしたもの

CodePen

無料と有料のプランがありますが、無料プランでチェックしました。

シンプルで、日本語化されてはいないが操作も分かりやすい。JavaScirptのメジャーなライブラリーがすぐに使える。

Fork機能があるのも良い。プロジェクト(Pen)のシェアはURLが分かればできる。

有料プランではチーム開発にも対応している。

codepen.io

Lineweave

HTMLファイルのheadタグ内含めた内容が表示されるので、HTML・CSSの基礎を学ぶのにとても使いやすそうです。

CSS用エディタ画面、CSS Explorerカラーパレット画像エディタなどがあり便利。

メジャーなJavaScriptライブラリもすぐに使える。

チャットの機能があり、大人数の授業で役立ちそう。Team Up機能というのも気になる。

※2018.2.11、2018.2.12現在、新規ユーザ登録が一時的に出来ないというメッセージ(「New user registration has been temporarily disabled」)が表示されます。登録画面には移動できるが、入力してもアカウントは作成されない様子。後日再チェック。

Plunker

ファイルを複数作成できるのが良い(jsdo.itではできずに困った)。Fork可能。Gitterが使える。シンプルで使いやすい。

個人的な印象として少しコーディングに慣れた学生の方が利用しやすいかもしれない。

arukutech.hatenablog.com

感想

授業中に、講師のパソコン画面をプロジェクタでホワイトボードに投影して見せるよりも、オンラインで使えるツールで画面を各学生のモニタに共有して見せる方が、学生にとって見やすく分かりやすいかもしれない。

どれがベストなツールかを考え始めるとキリが無くなりそうなので、ある程度条件を満たす良いツールがあれば、まずは実際に授業で使ってみたいと思う。

その他参考記事

2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな? - Qiita

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

実はスゴイ「CodePen」の隠れた必殺機能の使い方をまとめてみた! : うえぶはっく