【初心者必読】Progate使い方ガイド！おすすめ言語と学ぶ順番を解説【ロードマップ付き】

「Progateの使い方が知りたい」
「プログラミング言語の学ぶ順番が知りたい」
「初心者向けの学習ロードマップが知りたい」

Progateの使い方ガイド決定版！Progateを効率良く勉強法に取り入れたい方は要チェックです。

》プログラミング学習の始め方と独学勉強法
》プログラミングスクールおすすめ12選

利用者数190万人以上！Progateの特徴を解説！

Progateは、プログラミング言語が学べる初心者向けのオンライン学習サービス。提供国数は100ヵ国以上、利用者数も190万人を超える人気サービスです。

『初心者から、創れる人に』を掲げるProgateは、イラスト中心のスライド学習や、環境構築不要の実践的学習形式だから、プログラミング未経験でも十分理解できる内容です。

特徴①：料金は無料！無料期間でも十分に学べる

Progateには無料会員と有料会員（プラス会員）の２種類の料金体系がありますが、無料会員でも十分学べるのが特徴です。

無料会員の場合、基礎レベルの18レッスンが全て0円。無料期間は存在しないため、年中いつでも勉強できます。

反対に有料会員になると、応用と実践的な82レッスンの受講が可能に。料金も月々980円と決して高くない値段です。

無料会員と有料会員のレッスン一覧をまとめましたが、まずは無料レッスンを全てクリアすることをおすすめします。

特徴②：開発環境の構築不要！登録後３分でプログラミング言語が学べる

Progate最大の特徴は、プログラミングに必要な開発環境の構築が不要なことです。

開発環境とは、プログラムを動作させるために必要な作業環境のこと。本来プログラムを書くためのテキストエディタの用意や、実行環境の用意が必要ですが、Progateを使えば環境構築は一切不要です。

もちろん将来的（Progate卒業時）には、開発環境を構築する必要はありますが、英語表記が多かったり、パソコンに謎のソフトウェアをインストールする作業に疲労がたまります。

環境構築を終える頃には『プログラミングって難しそうだな…』と挫折する人も多いため、環境構築不要で学べるProgateは初心者にもかなりおすすめです。

無料会員登録をすれば、早速HTML/CSSや、javaScript、Rubyの学習を始められます（これって実はすごいこと）

特徴③：レベルに合わせた複数のプログラミング言語が学べる

Progateでは、全部で16種類のプログラミング言語を学ぶことができます。

初級者コースであれば、無料会員でも全てのプログラミング言語が学べるため、目的に合わせたプログラミング学習が叶います。

• HTML&CSS
• JavaScript
• jQuery
• Ruby
• Ruby on Rails5
• PHP
• Java
• Python
• Command Line
• Git
• SQL
• Sass
• Go
• React

『どのプログラミング言語から学ぶべきか』はこの後詳しく解説しますが、16種類のプログラミング言語が無料で学べるオンライン学習サービスは他にありません。

Progate使い方ガイド！初心者向けロードマップ公開

無料会員でも豊富なプログラミング言語が学べるProgate(プロゲート)。ただ、学習コンテンツが多すぎて『何を学べば良いのか、どの順番で学べば良いのか』迷ってしまいますよね。

Progateの使い方・活用方法に不安がある方のために

1. 無料期間に最低限学びたい言語一覧
2. プログラミング言語の学習順番

を詳しく解説しようと思います。

無料期間に最低限学びたい言語一覧

Progate無料期間中に最低限学びたい言語(学習コース)と順番は以下の通りです。

1. HTML&CSS
2. JavaScript
3. jQuery
4. Ruby
5. Ruby on Rails5
6. Command Line
7. Git
8. SQL

はじめてプログラミング言語に触れる方は『HTML / CSS』のマークアップ言語から始めましょう。

『HTML/CSS』を学んだ後は『javaScript / jQuery』を学ぶことで、Webサイトに動き(ポップアップなど)がつけられます。

最後に『Ruby / Ruby on Rails』を学べば、Webサイトに機能(会員登録/ログインなど)がつけられます。

『Command Line / Git / SQL』は、覚えておいて損がない動作なので、簡単に触れておきましょう。

※上記は無料期間中に学習できる範囲まででも十分です。

動きのあるWEBサイトを作りたい方

プログラミング学習の目的が『動きのあるWEBサイトを作れるようになりたい』方は、以下の順番でプログラミング言語を学んでいきましょう（Webデザイナー向け）

デザイン性に優れたWEBサイトが作れるようになります。

順番①：HTML / CSS

順番②：javaScript / jQuery

順番③：卒業

1. HTML
2. CSS
3. javaScript
4. jQuery

無料コースを終えたら『Progateが終わったら次にやるべきこと』に進みましょう。

機能的なWebアプリケーションが作りたい方

プログラミング学習の目的が『機能的なWebアプリケーションが作りたい』方は、以下の順番でプログラミング言語を学んでいきましょう（Webエンジニア向け）

機能性を持ち合わせたWebアプリケーションが作れるようになります。

順番①：HTML / CSS

順番②：javaScript / jQuery

順番③：Ruby / Ruby on Rails

順番④：SQL

順番⑤：卒業

1. HTML
2. CSS
3. javaScript
4. jQuery
5. Ruby / Ruby on Rails
6. SQL

無料コースを終えたら『Progateが終わったら次にやるべきこと』に進みましょう。

AI搭載のWebアプリケーションが作りたい方

プログラミング学習の目的が『AI搭載のWebアプリケーションが作りたい』方は、以下の順番でプログラミング言語を学んでいきましょう（機械学習エンジニア向け）

人工知能・機械学習を持ち合わせたWEBアプリケーション開発に必要です。

順番①：HTML / CSS

順番②：javaScript / jQuery

順番③：Python

順番④：SQL

順番⑤：卒業

1. HTML
2. CSS
3. javaScript
4. jQuery
5. Python
6. SQL

無料コースを終えたら『Progateが終わったら次にやるべきこと』に進みましょう。

スマートフォンアプリ開発に挑戦したい方

プログラミング学習の目的が『スマートフォンアプリ開発に挑戦したい』方は、以下の順番でプログラミング言語を学んでいきましょう（アプリエンジニア向け）

Androidアプリ開発に必要です（iOSアプリは別途Swift言語の勉強が必要）

順番①：HTML / CSS

順番②：javaScript / jQuery

順番③：Java

順番④：SQL

順番⑤：卒業

1. HTML
2. CSS
3. javaScript
4. jQuery
5. Java
6. SQL

無料コースを終えたら『Progateが終わったら次にやるべきこと』に進みましょう。

Progateが終わったら次にやるべきこと

冒頭でも述べたように、Progateはプログラミングの基礎中の基礎を学ぶ入門編です。料理で言うところの、野菜の切り方を覚えただけ。

長い時間Progateに入り浸っていては、いつまで経っても本格的な開発に取り組めません。ある程度 無料コースをクリアしたら、実践的なプログラミング学習に進みます。

Progate卒業後の行動指針を明記する前に、Progate卒業生のできること・できないことを振り返りましょう。

上記表を見て分かる通り、Progateが終わったら次にやるべき行動は『開発環境の構築・テキストエディタの使用・実践的なプログラミング』です。

紹介した３つの行動が出来なければ、プログラミングの仕事は出来ませんし、就職・転職も難しいです。

上記３つのステップは、Progateでは学びにくい特徴があるため、Udemy(ユーデミー) や、ドットインストール と言った、

他のプログラミング学習サイトを活用していきます。

今回はProgate卒業後に必要な手順に沿って解説します。

• 手順①：開発環境の構築に挑戦
• 手順②：エディタの使い方に慣れる
• 手順③：サンプルコードを模写する
• 手順④：Webアプリケーションを作る

手順①：開発環境の構築に挑戦

自分が書いたプログラムを自分のパソコンで動かすためには、ローカルの開発環境の構築が必要です。Progateは開発環境の構築不要で始められましたが、Webアプリケーションの開発をするためには、環境構築のステップは避けて通れません。

『開発環境の構築』と言っても、手順通りにソフトウェアをインストールしたり、設定をするだけなので難しくはありません（ただ面倒なだけ）。

開発環境の構築はドットインストールの無料動画がおすすめです。

【関連】Progateとドットインストールを両方使った独学勉強法

手順②：エディタの使い方に慣れる

開発環境の構築を終えたら『プログラムを書く場所＝テキストエディタ』を用意します。こちらもProgateはブラウザ上に

用意されていましたが、別途インストールする必要があります。
テキストエディタにも沢山の種類がありますが、最初は『無料・日本語対応・簡単な操作性』から Atom(アトム) を使うことを推奨します。

【Mac版】初心者に使いやすい無料テキストエディタ５選【日本語対応】

【初心者向け】Atom(エディタ)使い方ガイド！無料テキストエディタの始め方まとめ

手順③：サンプルコードを写経する

開発環境の構築・テキストエディタの準備が終わったら、サンプルコードの写経を始めましょう。

プログラミングの写経とは、見本となるWebサイトをそっくりそのままコーディングすること。既存サービスを真似して作ることを意味しています。

例えば、フリマアプリ『メルカリ』を真似して作ってみる。グルメアプリ『ぐるなび』を真似して作ってみる。自分のポートフォリオサイトを１から作ってみる。など、写経のできることはさまざま。

プログラミング初心者の上達に写経はかなりおすすめですので、まずはサンプルコードを真似ることから初めてみましょう。

プログラミング上達に写経がおすすめ！効果的な学習方法とサンプル集まとめ

『何を作れば良いか分からない。そもそも作り方も分からない…』方は、オンライン学習サイト Udemy(ユーデミー)内にある『◯◯を作ってみる』講座を受けながら、一緒に作ってみる勉強法がおすすめです。

一緒に作るタイプの動画講座は、環境構築からエディタの準備、サンプルコードの模写も同時に学べるため非常にお得です（料金も3,000円程度と書籍代と同程度）

手順④：WEBアプリケーションを作る

サンプルコードの模写（既存サービスの真似）を終えたら、オリジナルWebアプリケーションを作ってみましょう。

オリジナルWebアプリの開発は、そのままポートフォリオにも変わります。ポートフォリオを複数準備できれば、仕事にも繋がりますし、就職・転職の応募にも使えます。

とはいえ『何を作れば良いか分からない….』という方は、以下の記事をご覧ください。

【作りたいものがない】プログラミング初心者におすすめの成果物10選【例題あり】

ちなみにオリジナルWebアプリと言っても、大層な作品を作る必要はありません。

ポートフォリオの目的は、自分の技術力を作品に込めたもの。「私はこんな技術を使えます。私はこんな機能を作れます」を採用担当者にアピールするために使います。

『こんなWebサイトが作れます』『TODOリストが作れます』『会員機能・ログイン機能を持ったサイトが作れます』と、自分のできることを積み重ねていきましょう。

Progateが終わったら次にやりたいことを解説！プログラミング言語別に手順を紹介

Progateの活用方法まとめ

Progateは、初心者がプログラミングに触れる機会に最も有効な学習サイトです。料金も無料で使い放題ですし、環境構築・エディタの準備不要は、やはり入門編として優秀です。

しかし居心地の良いProgateを極めていては、いつまで経ってもプログラミングが出来るとは言えませんし、仕事や就職にも繋がりません。

最低限必要なプログラミング言語の基礎を学んだら、Progateを終えて 次のステップに進みましょう。この決断が仕事や就職に繋げるための大事な一歩です。

プログラミングを学ぶ目的を達成するためにも、新しい環境に挑戦していきましょう！

Progateの使い方に関する質問回答集

最後にProgateに関するよくある質問をまとめました。

• 質問①：Progate有料版の評判を教えてください。
• 質問②：Progate有料版の解約方法を教えてください
• 質問③：Progateとドットインストールはどっちがおすすめですか？
• 質問④：Progateが終わった後の勉強法を教えてください
• 質問⑤：Python講座が終わった後の勉強法を教えてください

詳細記事を書いていますので、気になる内容はご確認ください。