プログラミング初学者向け学習サイト「Progate」がすごい

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

気がつけば2016年もあと3週間、あまり年末の実感が沸いていないおてらです。

 

業務の関係上、今後プログラミングをする機会が増えてくるのでちまちまとプログラミングの勉強をしておりました。

そんな中、名前は聞いた事あったけど使ったことはなかったサービス、Progateを最近使い始めたんですがとんでもなく素晴らしいサービスだったのでご紹介します。

Progate[プロゲート]とは?

progate

ProgateはWebブラウザ上でプログラミングの学習が出来るサービスです。

サイトURL:https://prog-8.com/

 

代表取締役の加藤將倫氏と取締役の村井謙太氏が大学生の時に共同で創業したサービスというところも非常に驚きです。

大学生にしてこのようなサービスを生み出せる力、本当に素晴らしいと思います。

Progateの特徴

Progateの何がすごいと感じたのかをいくつかまとめてみます。

 

スライド形式で分かりやすい学習ステップ

Progateのレッスンの進め方は

  1. スライドを見て概要を学習する
  2. 実際にコードを書いて実行する

の繰り返しです。

各レッスンで以下のようなスライドがありますが、見ての通り初学者の方でも分かりやすいようにまるで一般の書籍で販売されているもののように丁寧に作られています。

右下の矢印をクリックするか、キーボードの「←」「→」で操作できます。

このあたり、あまりマウスを触らずキーボードだけで進められるところも地味にいいですね。

slide

 

実行環境を用意する必要がない

プログラミングを学習する上でネックなのが実行環境を用意することです。

複数の言語を学習したい人にとってはPHPをインストールしたりnode.jsをインストールしたりPythonをインストールしたりと環境構築に時間が取られてしまいますが、Progateではそれが一切ありません。

ではレッスンの流れに戻ってそれを見てみましょう。

 

各レッスンでスライドを見て一通り学習したら、続いて実際にコードを書くフェーズに移ります。

それが以下の画面です。

coding

左側に今回のレッスンの進め方の指示が書いてあります。

どのようにコーディングしてよいか分からなくなっても「スライドで確認」ボタンをクリックするとその部分のスライドをすぐに確認することが出来ます。

 

中央の部分がエディタになっており、ここに自分でコードを書いていきます。

エディタ中にもどのようなコーディングをするのかがコメント文で書いてあるため非常に助かります。
また、このコメント文が書いてある位置が非常に優しく、コメント文で指示されている内容をそのすぐ下に書いていけばいいようになっています。
インデントが必要な箇所は、コメント文もインデントされています。

コーディングをしていく上でどこに記述したらよいか、というのが重要になってくるケースがあります。
特にPythonなんかはインデントでコードのブロックを判断するのでどこにインデントが必要なのかに慣れる必要があります。

そういった観点からこのコメント文は非常にありがたいですね。

 

コードを書いたら「確認して次へ」ボタンを押して自分が書いたコードを実行します。

問題なく書けていれば右上のコンソールに結果が表示されて課題クリアとなります。

間違っていればどこが間違っているのかが表示されるので修正します。

 

見本の箇所はHTML & CSSのレッスンにおいて、こんなページを作りましょう、というその課題のゴールの状態が表示されています。

なお、HTML & CSSのレッスンでは上記のコンソールの画面がプレビュー画面となっていて、コーディングした内容がリアルタイムで反映されていきます。

プレビュー画面と見本画面を見比べながら作業できるので、「自分が作っているんだ」という感じが出て非常にモチベーションが上がります。

 

モチベーションが続く

Progateのレッスンを進めていくうちに経験値(Exp)が手に入ります。

経験値を溜めていくことで各レッスンにおけるレベルと、自分個人のレベルが上がっていくのですが、これが意外とモチベーション維持に貢献してくれます。(人によるかもしれませんが笑)

level

私はまだ始めて日が浅く、PythonとCommandのレッスンくらいしか修了していませんのでグラフが寂しい感じですが、このグラフが大きくなるのを想像するだけでも「早く勉強したい」というモチベーションが湧いてきます。

受講できるレッスン

lessons

Progateで学べるプログラミング言語は2016年12月9日現在で以下の通り。

  • HTML & CSS
  • JavaScript
  • jQuery
  • Ruby
  • Ruby on Rails
  • PHP
  • Java
  • Python
  • Swift
  • Command Line
  • Git(2016年内公開予定)

Gitのレッスンがまだ公開されていませんが現状10の言語のレッスンがあります。どのレッスンもレッスン1や初級編・基礎編は無料で学習することが出来るので是非試してみてもらえればと思います。

有料とは言え月額980円でこれら全ての言語のレッスンを学べるので入門レベルの書籍を買うよりははるかにお得だと思います。

私もProgateを始めて翌日には有料会員になりました。

 

また、現状HTML & CSSやjQuery、RubyにRuby on Railsが充実しているようです。これは創業者のお二人が元々Webサービスの受託などをやっていたからとかそういう背景が関係しているかもしれませんね。

個人的にはGitを使うケースが増えてきそうなのでGitのレッスンが公開されるのが待ち遠しいです。

Pythonも2017年に新しいレッスンが公開されるようなのでそちらも期待しています!

 

学習してみて

私は現在HTML & CSSの学習コース 中級編、Pythonの学習コース3、Command Lineの公開されているもの全てをクリア(修了)しました。いずれも分かりやすく丁寧に作られているので楽しくモチベーションを維持しながら進めることが出来ました。

特にHTML & CSSに関しては、今まで何となくでCSSをいじっていたのですが、どういう理屈でこの要素がこの位置に来ているのか、このボタンはこうやって作られているんだとか、はっきりとした原理を体系的に学べるようになっていて素晴らしいレッスンだと思いました。

 

まだProgateを利用し始めて日が浅いので全体的なコンテンツの内容については詳しくありませんが、新卒や学生でこれからプログラミングを学習しようと思っている人には入門として非常にオススメのサービスだと思います。

 

とりあえず一通りレッスンを終わらせた時に私自身どんなことが出来るようになっているかというのを何かしらの形で表したいですね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す