あぁ, 罪だ... 気づいてしまった...
『ドットインストール』と『runstant』の相性の良さに...
先日, 公開した runstant ですがこれは HTML, CSS, JavaScript を編集, 実行できます.
ドットインストールにあるWeb系のレッスンは, 大抵この３つを扱えれば事足ります.
そしてなんといってもどちらもログイン不要で使うことが出来ます!!
これは組み合わせて使うしかないでしょ!
今までにこれほど気軽にプログラミングを実行しながら学べる環境があったでしょうか？
いやなかったです!(あったらコメントください!)
これはもう, ごはん×明太子, 牛乳×バームクーヘン, 風呂上がり×ガリガリ君,
夏×TUBE, 原田社長×ベネッセ以来の革命かもしれない...
ってことでどう使うかまとめてみました. 参考になれば幸いです.
試しに作ってみた AngularJS のサンプルもたくさんあるよ♪
※ドットインストールの人気にあやかって runstant の知名度を上げようなんて
そんな打算的なエントリーでは決してないです! 多分...w
学習の流れ
通常のフローは
- dotinstallを開く
- ローカルでエディタを開く
- 動画を再生
- エディタで編集
- ファイルを保存
- ドラッグ&ドロップでブラウザ上でファイルを開く(２回目以降は更新)
- 実行結果を確認
- 3~7 を繰り返す
これが runstant を使うことでこうなります.
- dotinstall を開く(tab1)
- runstant を開く(tab2)
- dotinstall で動画を見ながら(tab1)
- runstant でコーディング&実行(tab2)
- 3, 4 を延々と繰り返す
効率が上がるのはもちろんですが, 学習を始める際のハードルが
劇的に下がっているのがわかるかと思います! なによりWeb完結してます!!
ちなみに Chrome だと Command+Option+左右キー で
タブ移動できるから作業しやすいよ♪
AngularJS のレッスンやってみた
まぁ口だけで便利だよといっても説得力ないと思うので,
AngularJS のレッスンを一通りやってみました♪
- #01 AngularJSとは何か？
- #02 はじめてのAngularJS
- #03 コントローラーを使ってみよう
- #04 フィルターを使ってみよう
- #05 ループで使えるフィルター
- #06 ループで使える便利な命令
- #07 コントローラーのネストとイベント
- #08 フォームの基本を学ぼう
- #09 エラーメッセージを表示する
- #10 フォーム部品を設置しよう (1)
- #11 フォーム部品を設置しよう (2)
- #12 フォーム部品を設置しよう (3)
所感
もともと AngularJS 使えるってのはありますが, きちっと動画を見ながら
すべて自分でコードを書きました.
Web 完結で, だいたい1時間ちょっとで一通りの
レッスンを終えることができました!!
runstant の, データを hash に保存する仕組みのおかげでレッスンごとにファイルを
保存したり, ドラッグ&ドロップでファイルを開いたりといった面倒なことをしなくて済みました.
また, fork 的な役割も果たすので, 前回のレッスンを引き継いで作業することが
できたので手間が省けてよかったです.
っとまぁ runstant を自画自賛しまくっているわけですが,
これはすべてドットインストールありきの話です!
なのでドットインストールで学習するときに runstant を
頭の片隅に置いてもらえれば嬉しいなぁというお話でした!
こんな感じで作業できるなら chromebook も
ありかなぁとか思ってきてます.
便利な時代になったものですねぇ.
っとプログラミング歴の浅い若輩者が言っております.