エンジニア プログラミング

Progateの使い方とおすすめプログラミング勉強法5ステップ【プロゲート】

Progate

プログラミングに興味がある人
プログラミングに興味がある人

プログラミングをこれから勉強したい。

Progateが初心者におすすめらしいけど、どのコースから勉強したらいいのだろう?

おすすめの勉強方法、学習手順が知りたいな。

今回は、そんな悩みを持っている人におすすめの記事となっています。

どうも!てぃかしです。

最近(2019年)、ゲーム感覚でプログラミングを勉強できるProgate(プロゲート)というサイトで僕は勉強してますが、今回はそのProgateの効率的な勉強の進め方5ステップをお伝えしていきます。

Progateとは?

まずその前に、Progateというサービスがどんなものなのか説明します。

これがProgateのトップページです。

Progate

ここにも書いてある通り、初心者からできるプログラミング学習です。文系の方でも始められるます。

プログラミングについて、何も知らない人でも勉強を始められる、プログラミング学習の第一歩を踏み出せるサイトです。

ユーザー数は、100万人ほどです。

そのProgateの特徴ですが、イラスト中心のスライドで学べるようになっています。

プロゲートのスライド

紙の本よりも直感的で、動画よりも学びやすいです。

紙の本でプログラミングを勉強した経験がありますが、かなり大変です。

このProgateでは

2~3枚のスライドが終わったら演習、2~3枚終わって演習…

という形なので、サクサク進んでいる感じがして、すごく面白いです。

ゲーム感覚で、課題を進めることができて、レベルも上がります。

他の特徴としては、手を動かしながら学習ができるところです。環境構築もせずにすぐに学習に取り掛かることができます。

その場でプログラムを書いて、次の問題へ進んでいくという形となっており、身につきやすいです。

完全独学で、初心者でも独学でできます。

ちなみにProgateは無料でも登録できますが、有料版は1,078円になります。

全部で16コース、77レッスン。結構豊富です。(2019年時点の数字です。2021年は、全15コース、82レッスンとなっています。)

基本的なHTML、CSSのコースもありますし、サーバーサイド言語のRuby、Python、Javaなどの言語もあります。

この中から自分が学習したい言語を選んで勉強していきます。

ProgateでHTML & CSSを学習してみよう!

それでは、実際にログインをしていきましょう。

ログインをするとこんな画面です。

Progateログイン後の画面

僕は今レベル68です。総演習クリア数169。(2019年時点)

「レッスン一覧」を押すと、先ほど見た学べるプログラミング言語の一覧が出てきます。(2021年には「コース一覧」という名称になっています。)

プロゲートのコース一覧

実際にちょっとやってみましょうか。

HTML&CSS初級編。

ProgateのHTML & CSS

HTML、CSSはウェブサイトの見た目を作る言語です。

最初からやってみましょうか。

HTML,CSS

まずHTML、CSSとは何なのか、という説明がされています。

簡単にわかりやすく説明してあります。

HTMLの仕組み

HTMLには、タグというものがあります。

h1、aタグと呼ばれるものがあって、例えばこのh1タグに表示したいテキストを書きます。

「プログラミングの世界へようこそ」と書いたら、ウェブページの方に「プログラミングの世界へようこそ」というテキストが表示されます。

aタグの間に「Progate」というテキストを書けば、「Progate」と表示されますが、h1タグとは違い、リンクとして表示されます。

リンクをクリックすると別のページに飛びます。

開始タグと終了タグがあり、終了タグはスラッシュをつけます。

開始タグ終了タグ

で、ここで終了。

プロゲートのスライド

で、演習ですね。

プロゲート演習

手順が左に書いています。

書いていある内容に沿って、プログラムを作成していきます。

右下にプレビューが書いてます。それが完成形(見本)です。

右上のプレビューのところと右下の見本が同じになれば良いというわけです。

同じになったら、確認して、「次に進む」をクリックして、合っていれば「Congratulation!」めちゃめちゃ簡単です。

プロゲート演習画面

次へ進む、といって、次に行くと言う感じです。

このHTML、CSSのレッスンを進めていくと最終的にどんなサイトが作れるようになっていくのでしょう。

これは中級編ですが、中級編の最後を見てみましょう。

プロゲート中級編

ここに index.html、stylesheet.cssがありますが、拡張子が.htmlの方はHTMLです。.cssの方はCSSです。

この2つ両方読み込んで、サイトが表示されます。

最終的にこんなサイトが作られます。

プロゲートで作ったサイト

(サイトの全体像を見たい方は、動画をご覧ください。)

これを見ると「なんかすごく難しそうだな」って初心者の方は思うかもしれませんが、このサイトは、全部レッスンに沿っていけば、完成します。

Progateで復習

また、Progateでは、復習も簡単にできます。

スライドだけ見て復習することもできますし、同じ単元をもう一度、プログラムを書いて復習することもできます。

スライド検索という機能が結構便利で、例えば

「box-sizingって何だっけなぁ?」

って思ったときに、「box-sizing」を検索して、box-sizingについて書かれているスライドに飛ぶことができます。

Progateのアプリ版

Progateには、Web版とアプリ版があります。

アプリ版では、スマホで学習できます。

では、アプリ版の方を見てみましょう。

Pythonをやってみましょう。(画像は、スマホを横にした画面を掲載しています。)

Progate Python

「復習する」を選んで、過去に学習したことがある場合は、リセットして復習するかどうかを選択できます。

スライドでは、HTML&CSSの時と同じように、Pythonの説明がされています。

スライドが終わると、演習に移ります。

Python演習

可愛いキャラクターの指示に従って進めていきます。

右下に「print」「Hello World」とあるので、これを押すだけ。

Python Hello World

「print」「()」「Hello World」をタップして、完了。

これがProgateのアプリ版です。

Progateのおすすめ勉強法 5ステップ

おすすめの進め方、使い方について、5ステップで説明します。

まず自分が何を学びたいのかを決めてください。

1つ目、プログラミングでやりたいことを決めましょう。

2つ目、言語を選んで勉強しましょう。

例えば、やりたいことが「Webサイトを作る」だったら、プログラミング言語は、HTML、CSSを学ぼうということになります。

学習のポイントは、「暗記はしなくても良い」ということです。

プログラミングには、学校みたいにテストなどはありません。

専門学校や大学ではテストはあるかもしれませんが、社会人になったらプログラミングの試験はありません。

分からなかったらネット上で分からないことを調べて解決していくという流れになるので、暗記しなくてもいいです。

気楽に学習していけば良いと思います。

3つ目、合間の時間にアプリで復習。

復習は、それほどしなくてもいいですが、1回勉強した後は、スライドをササッと見るぐらいはしても良いでしょう。

PC版、アプリ版があるので、それぞれ1回ずつ学習すれば十分です。

2周以上する時間があるなら、実際にプログラムを作ってみた方が有意義です。

その方が勉強になるし、身につくと思います。

4つ目、一通りやったら簡単なアプリを作ってみる。

5つ目、レベルが高いものを作る、または他の言語を学ぶ。

という流れです。

勉強の仕方については、下記の記事でも解説しているので、そちらもご参考いただけたらと思います。

エンジニア転職の勉強時間
長い道のり?未経験からエンジニア転職までのプログラミング勉強時間

未経験からプログラミング学習&エンジニア転職をした てぃかしです。 この記事を読めば、下記のの内容がわかります。 未経験から転職活動スタートまでのプログラミングの勉強時間とやること 転職活動ス ...

続きを見る

ということで今回はProgateの使い方とおすすめの勉強法について解説しました。

Progateはあくまで初心者向けです。

Progateだけをやっててもプログラムは書けるようにはなりません。

これからプログラミングを始めようとする人がプログラミングがどんなものかを体験するのにぴったりな学習サービスです。

Progateで学ぶことは、基礎中の基礎なので、エンジニアではなくても、勉強はしておいて損はないでしょう。

未経験からエンジニア転職を目指している方は、無料メール講座を用意しています。興味のある方はぜひご購読ください。

未経験エンジニア無料メール講座

本ブログでは、エンジニア関係の記事を他にもアップしていますので、興味のある方は、お気に入り登録をして、またご覧いただけたら嬉しいです。

<動画版>

YouTubeでも役立つ情報を配信しています!

ボタンをクリックしてチャンネル登録お願いします!

-エンジニア, プログラミング
-, , , , , , ,

© 2021 てぃかしのブログ Powered by AFFINGER5