スラックラインとは?完全解説はこちら

HTML&CSSなどプログラミング言語の基礎を学びたい人には「Progate(プロゲート)」がおすすめ!ユーザインターフェイスが素晴らしい!

プログラミング言語学習 「Progate(プロゲート)」 ユーザインタフェースが素晴らしい

こんにちは!

新米パパ、雑記ブロガーのスラックドロイド(@slackdroid)です。

このブログ「SLACKLIFE」はワードプレス(Wordpress)を使って運営しています。また、テンプレートは有料販売されている「SANGO(サンゴ)」を利用しています。

しかしながら、「SANGO(サンゴ)」は、現在ブロガー内で人気のテンプレートのため、多くのサイトで使われ、UIが同じになりがちです。個人的には、同じテンプレートでもオリジナル感を出したいと最近思いつつもの、カスタマイズを簡単に行うスキルがそこまでなく、悶々としています。

そこで、せっかくブログを再開し投稿も続けられるようになってきたので、HTML&CSSを改めて学ぶことにしました。プログラミング学習向けに無料・有料含め様々なサービスがある中、「Progate(プロゲート)」の評判が良かったので登録してみました。

今回、「Progate(プロゲート)」への登録と触ってみての所感を書きました。

Progate(プロゲート)とは?

Progate(プロゲート)とは?

「Progate(プロゲート)」は、株式会社Progateが運営するオンラインのプログラミング学習サービスです。

「Progate(プロゲート)」の学習対象者は、主に、プログラミング初心者の方向けに作らています。WEBサービスを作り上げるのに、必要な言語「HTML」「CSS」「JavaScript」「PHP」「Ruby」などをオンラインで学べるサービスです。

同じようなサービスとして以下があります。(無料・有料を含みます。)

プログラミング言語学習サービス

「Progate(プロゲート)」も無料コンテンツから拡充し、2016年4月からは有料サービスもはじまり、さらにコンテンツが充実してきているようです。

登録方法

まず、「Progate(プロゲート)」に行き、「無料会員登録」をクリックします。

Progate(プロゲート)会員登録

次に、Facebook, Twttierのアカウントを利用し登録するか、または、メールアドレで登録が可能です。私は、サービスに登録する際、SNSログインを利用せず、メールアドレスで登録することを決めているのでメールアドレスで登録しました。

Progate(プロゲート)会員登録

登録したメールアドレス宛に「Progate(プロゲート)」からメールアドレス認証のお願いのメールが届きます。メール本文内にある認証のためURLから再度サイトへ行くことで認証が完了します。

Progate(プロゲート)会員登録完了

はい、これで登録が完了です!すごく簡単ですね。スリーステップぐらいで登録できるフローになっているので素晴らしい!

HTMLコースを始めてみました

マイページに行くと登録時に設定したニックネーム名がついた可愛らしいキャラクターがいます。その下にHTML&CSS学習コース初級編が案内されていたので早速「レッスンを始める」から進んでみました。

少し進んでみると、学習の流れとして以下の4つのステップで進めていくようです。

  1. スライドで学習内容を学ぶ
  2. スライドで学習した内容のプログラムを実際に書く
  3. コードの答え合わせを行う
  4. 正解ならば、次の学習スライドへ

1:スライドで学習内容を学ぶ

Progate(プロゲート)では、動画ではなくスライド形式で学ぶスタイルです。
Progate(プロゲート)学習のステップ
Progate(プロゲート)学習のステップ

2:スライドで学習した内容のプログラムを実際に書く

まずスライドで学び、その後、そのスライドで学んだことの理解を深めるために実際にコードを書きます。スライドを一読したのみでは理解しきることは難しいため、画面が3分割された左端にヒントが提示されます。そのヒントを元に、センターにコードを書きます。

実際に書いたコードが正しく挙動がするかを右端の画面上部でプレビューすることも可能です。また、正解の挙動とはどのような形であるかを右端の下部のプレビューで確認できます。

Progate(プロゲート)学習のステップ

3:コードの答え合わせを行う

Progate(プロゲート)正解確認画面

4:正解ならば、次の学習スライドへ

記述したコードが正解であれば、コースが完了し、次のステップに進みます。

Progate(プロゲート)コース終了画面

学習の継続意欲を高めるため、ゲーミング要素もあり!

正解していくと、キャラクターのレベルがアップしていきます。ドラクエのようにレベル上げしていく感覚でプログラミングスキルが身についていくのは、モチベーション維持にも良い!

最終的に何レベルまでいくのかが気になる、、、ドラクエと同様にLv99までいくんだろうか。。。

ユーザインターフェースが素晴らしい!

先程ユーザインタフェースについて少し紹介しましたが、実際に少し進めてみて感じたことは、

UIが素晴らしい!!!

めちゃ勉強しやすい!

Progate(プロゲート)ユーザーインターフェイス

ユーザーインターフェイス
  • 左端:スライドで学んだことに対して課題
  • 真ん中:課題に対する答えのコードを書く
  • 右端:書いたコードがリアルタイムで確認できるプレビューとそれと比較できるように答えのプレビューもある

Progate(プロゲート)では動画ではなくスライドが学習コンテンツです。スライドのメリットとして、不明点があった際、学習スライドに戻るためのボタンもUI上に用意されていて、再度該当箇所を探す時間がすごく簡単です!

Progate(プロゲート)ユーザインタフェース

過去に他のサービスも利用したことがありますが、動画を見て後、コードを書くというフローがほとんどでした。動画をみることで理解が深めることが間違いないのですが、どうしてもコードを書きながら見なす際、動画を再度再生しそのポイントを探すのがとても面倒でした。

おわりに

独学でプログラミングを身につけようとこれまで様々なプログラミングサービスを使いましたが、どうしても学びづらかったり継続して学ぶモチベーションを維持するのが難しかったです。しかし、今回の「Progate(プロゲート)」はこれまでの悩みを解決してくれる要素が含まれていて、これなら続けられそうです!

どこまで継続できるかを含め、改めて進捗などを更新したいと思います!