オンラインでプログラミングを学ぶサービス[Progate]を試してみた

こんにちは。
熊谷です。

ここ最近(結構前から？) 国内外問わず、学校でのプログラミング教育についての話題を耳にします。
私もプログラムには大学時代にはじめて触ったのですが、もっと若いうちに始めておけば、、と思ったこともありこの話題のニュースや、プログラミング教育に関するニュースはたまに見るようにしています。

今回触ってみたのは[Progate]というサービスでオンライン上で簡単にプログラミング(HTML/CSS, PHP, jQuery)が学べ、Webアプリ開発の基礎スキルを身につけられるというものです。


この手のサービスは他にもいくつかあるのですが、
このサービスの特徴は、まずは日本語(日本人が作成している)という点。
やはり海外のほうがプログラミング教育に対する意識は高く、日本はかなり出遅れているということもあり、英語のサービスが多いです。

そして実はこのサービスは学生起業家が作成、運営しているという点。
2人の東大生プログラマーが作ったというのは興味を惹かれました。

実際に少しだけですが使ってみたので画像と一緒に見ていただきたいとおもいます。

・トップ画面①
　ユーザ登録後、ログインするとこの画面が表示されます。
  HTML Lv. 1など、すでにゲーミフィケーション要素が散りばめられているのが分かります。
　
　ちなみにアカウントはFacebook, Twitterアカウントを使用することも出来ました。

・トップ画面②
　こちらは先程のトップ画面を下にスクロールしたところです。
　進行度が％で表示されており、「続きからはじめる」の文字。ゲームをやる人にとってはおなじみの文字列で親近感がわきます。

　右側にはTimelineとFriendsと書いてあることから、SNS要素もあるのでしょうか。

・学習
 先ほどの画面からHTML&CSSを選択し、実際の学習に入ります。
 このサービスは、講義→実習のような順番で学習していくようです。
 まずは 「講義」部分にあたるスライドが表示されます。

　各ページはこの程度の内容となっており、テンポよくページを送ることが出来ます。

・実習
　全てのスライドを読み終えると実習画面に移ります。
　各要素について、以下で説明します。

・こちらは上の画面の右側部分。
　ここで「何をすればいいのか」を知ることが出来ます。
　また、要素をクリックすることで、それぞれの説明をしているスライドを表示させることも出来ます。

・真ん中にある黒い部分がエディタとなっております。
　コメントが親切でここだけを見ても何をすればわかるようです。
　また、基本的なショートカットキーや、表示のサポート機能は揃っており、Ctrl+/でコメントタグを追加できたり、インデント毎に薄い線が入りコードに慣れていない人でも見やすい工夫がされています。

・画面右側は現在のコードをブラウザで表示した際のプレビューと、このページで作製するページの見本が表示されています。
　プレビュー画面はもちろんリアルタイムで更新されていくため、間違いがすぐに分かります。

・実際に指示通りにコーディング(?)してみました。
　プレビューと見本の見え方に若干差がありますが、ほとんど同じ状態です。
　ここで中央下の「確認して次へ」をクリックすることで１レッスンが終わります。

・レッスンが終了すると経験値がもらえレベルアップしました！
 Facebook, Twitterでシェアできます。

そして次のレッスンへ進んでいく、と言った流れで学習を進めていきます。


いかがでしたでしょうか。
私は個人的にこの手のサービスに何度か登録したことがあるのですが、
このサービスは非常にわかりやすく、面白かったです。
今後も言語のバリエーションなど増えていくのではないでしょうか。

興味のある方はぜひ触ってみてはいかがでしょうか。