(※2019/3/29現在の情報です)
(※使用画像は公式配布のプレスキットを使用しています。問題があればご指摘ください。)

私は2018年9月にエンジニアに転身する決意を固めてDMM WEBCAMPに申し込み、同年12月より3ヶ月間はスクールに通ってカリキュラムをこなしていたのですが、どうせエンジニアとして一歩を踏み出すことは決めているのだから、通学開始を待たずにちょっと先んじて勉強してしまおう、などと考えておりました。
そんな時にProgateという学習サービスを知りまして、今に至るまで活用させて頂いております。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

DMM WEBCAMPに通学している間、同期に対しても、「Progate結構使えるよ〜」などと話をしたりしていたのですが、実際どう使えるのか具体的に伝えたことがなかったので、改めてまとめてみようと思い立ちました。

本記事では、全くの初心者からエンジニアになること、エンジニアとして働いていくということを念頭に置いた上で、どのようにProgateを使っていけば効果的か、自分なりにまとめてみようと思います。

Progateの特徴

と、活用法をまとめる前に、まずProgateの特徴について言及します。

良いこと

安価(サブスクリプション・月額980円)
言い回しが簡単かつ図解がていねいで、イメージを掴みやすい
学んだその場で手を動かせる
開発環境を整える必要がない

一つ目は、値段です。とにかく学習コストが安いです。月額980円。
入門書一冊買うのに3,000円くらい掛かることを考えると、取っ掛かりとしては相当敷居が低いと思います。もちろん、入門書とProgateのレッスンとでは情報量に違いがあるので、一概に比較はできませんが。

二つ目は、説明のわかりやすさ。特に言い回しの平易さと図解のわかりやすさ。

あまり難しい表現を使わずに、キャラクター同士の会話で進むということもあり、専門書を読んでいるよりも意味が頭に入ってくる印象があります。また、手順をスライド形式でまとめてあるので、「これをやった後にこれをやる」という記述の前後関係が分かりやすいです。

三つ目は、学んだその場で手を動かせること。個人的にこれが相当大事だと思っています。

「レクチャー→コーディング(コースによってはコマンド入力)」が一つのレッスンの構成となっているので、やったことをその場で実践できます。
当たり前のことで恐縮ですが、実際のプログラミングは自分で手を動かさないと何も動かないので、こういうレッスンの取り組み方は、技術を習得するだけでなく、手を動かすことへの抵抗を減らすということに繋がります。

四つ目は、開発環境を整える必要が無いこと。これは人により見解が分かれるかもしれません。
実際は開発を行うために自分で環境を整える必要がありますし、環境構築はエンジニアであれば当然抑えるべきことではあります。ただ、私個人の見解として、Progateは**「プログラミングの取っ掛かりを作るもの」「知らない言語へ挑戦する足がかりを作るもの」**として捉えているので、むしろ開発環境で手こずるよりは手軽であった方が良いと考えます。

要点をまとめると、以下の通りです。

プログラミング自体の取っ掛かりとしては、とても敷居が低く、加えて手を動かすことへの抵抗が減る。
新しい言語、フレームワーク・ライブラリを習得しようと考えた時、走り出しとして使いやすい

できないこと

開発環境の構築は学べない
作業したファイルは自分のPCには残らない

一つ目は、Progateのレッスン上では環境構築は出来ないということ。
メリットの部分でも述べましたが、Progateはとっつきやすい反面、既にコードを記述できる環境が準備されているので、環境構築自体は実践できません。
ただし、レッスン内に「コラム」として環境構築の方法をまとめたtipsが含まれていることがあります。

※ 執筆時に確認したところ、Ruby / Ruby On Rails / Pythonの各コースで、開発環境構築のコラムがありました。ただし、現状MacOSのみ対応のようです。

二つ目は、作業したファイルは自分のPCには残らないということ。
レッスン内で記述したコードは、全てProgate側に保存されますので、書いたコードをコピペして保存しておかない限り、自分のPCには何も残らないということです。

活用法

特徴をまとめたところで、実際にどのように活用したら良いか、考えていきます。

さて、突然ですが、図です。

この図は、私がプログラミングの学習を開始してから、実際にどのようなプロセスでオリジナルのアプリケーション開発に至ったか、フローを簡略化した図です。もちろんこの各セクションにおいて、無数のトライアンドエラーがあったことは確かですが、あくまで簡略化した図なので、その辺りは省略します。

そして、あらかじめお伝えしておきますと、Progate単体よりも、スクールや書籍を併用するなど
「いくつかのチャンネルを使って繰り返し同じことを学習する」
ことで、習熟度はかなり上がると思いますし、様々なアプローチを学ぶことができます(あくまで体感ですが)。
※ 私の場合は、Progate + DMM WEBCAMPという形で、同じ言語やフレームワークの内容を学習しました。

その1 : Progateを使った言語・フレームワークの学習

Progateでは、様々な言語・フレームワークのコースを取り扱っています。
どの言語から始めたら良いか迷うポイントですが、どれから始めても難易度は変わりません。
ただし、個人的には以下の順番で取り組むのが良いかと考えています。

HTML/CSS
Ruby & Ruby On Rails(2つで1セット) またはPHP
JavaScript & jQuery(2つで1セット)

これらは、説明とコーディングのセットを基本とした「学習コース」に加え、「道場コース」という、実践を前提としたレッスンが含まれています。ですので
「具体的なアプリケーションを作る感触を掴む」
という意味ではちょうどいいのです。

一度で理解する必要はありません。初めは指示に従って記述していくだけでも良いでしょう。
繰り返しになりますが、**「手を動かすことへの抵抗を減らす」**ことが大事なのです。

一通りレッスンを一周したら、道場コースに入る前に、もう一度復習をしておくと良いです。

その２ : アプリケーション開発ハンズオン(Progate道場コース)

ハンズオンとは、実際に手を動かして学習することを意味します。
先ほど述べたとおり、その1で挙げた各言語・フレームワークには「道場コース」と言う実践レッスンが含まれていて、ゴール(例えばWebサイトの完成レイアウトなど)が示された上で、それと同じものを作ることを目標としています。
このレッスンは、道場というだけあって、**ヒントがほとんどありません。**したがって、必要に応じてその1に立ち戻る必要があります。フローチャートでいう①と②を繰り返すイメージになります。

ここで、道場コース突破にかかった時間を計測しておくことをお勧めします。
道場コースだけでなく、Progateのコースにはそれぞれ「所要時間」が目安として記載されています。それに対して自分はどのくらい時間をかけているのか、比較する目安となります。

また、道場コースも何度も繰り返すことで、次第に学習コースに頼ることなくコーディングができるようになるはずです。

その3 : オリジナルのアプリケーション開発

ここまでProgateのコンテンツを使った学習について述べてきましたが、オリジナルのアプリケーション開発は、当然自分で用意した開発環境で作業をし、コードを書いていく必要があります。したがって、開発自体にProgateは関係ありませんが、活用できる場合があります。それは**「スライド検索」**です。

Progateは、実装で詰まった時に、スライド検索を使ってキーワード検索することで、簡易リファレンスとしても使えます。また、構造が複雑で、よく見返すスライドについては**「お気に入り登録」**することで、振り返りがしやすくなります。

まとめると

プログラミング初心者の方がProgateを活用する際、下記の三点を意識すると良いのではないかと思います。

プログラミング言語を、手を動かして学習する取っ掛かりとして使う
学習からハンズオンまで、繰り返して学習する
リファレンスとして使う

今回は、道場コースのある言語・フレームワークを学習した場合を想定した活用法にフォーカスしましたが、プログラミング経験者の方でも、未経験の言語の取っ掛かりとして使うなど、活用法はまだまだあるかと思います。