プログラミング

【Progate】HTML&CSS初級編を終えた感想【プログラミング学習】

プログラミング学習サイト【Progate】でプログラミングの学習を始めました。

HTML&CSS初級編を修了したので、ここまでの感想を書きたいと思います。

  • プログラミングを学習したいけどやり方が分からない
  • Progateを課金するか迷っている

こんな方にぜひチェックしてほしい記事です。

プログラミングの勉強方法は?

プログラミングを学ぶ為には、どんな方法があるのでしょうか?実際に私が知っている限りでは、下記の通りです。

  • 本で学ぶ
  • 学習サイトで学ぶ
  • 実際にホームページなどを作ってみる

本で学ぶには、まず本を買わなければなりません。Amazonや本屋さんでチェックしても、いまいちどの本を買って良いのか分かりづらいのではないのでしょうか。

また、実際にホームページを作ってみるにしろ、どこから手を付けてよいのか分かりません。調べながら作るのは至難の業ですよね。

クボヒロ

私はミニマリストなので、本が増えていくというのもちょっとやだな〜って感じ

ということで、私は「学習サイトで学ぶ」のを選びました!しかし、学習サイトといっても「読んで学習するサイト」と「実際にプログラムを打てるアプリのようなサイト」と二種類あるかと思います。

私は後者のほうを選びました!以下でご紹介していきます。

Progateがおすすめ!

Progateとは、サイト上でプログラミングを学習できるサービスです。いわゆる、オンラインプログラミング学習です。

パソコンとインターネット環境さえあれば、どこでもプログラミング勉強ができてしまいます。また、初級のコンテンツなら無料で利用することができるので、「とりあえず無料でちょっと試してみたい!」という方にはピッタリです。

Progateは「読むだけ」の学習サイトとは違って、実際にプログラムを打ち込めるアプリのような使い心地のサイトです!

まず、「プログラミングってなんだろう?」というところからざっくりと説明してくれるため、プログラミングについて全く知らない人でも、理解することが出来ます。

私はProgateを8月6日に始め、8月12日に初級編を修了しました。もちろん、ここまでは全て無料で利用することが出来ました。

Progateで学習してみる

Progateの良いところ

実際に私がProgateを使ってプログラミングを学習してみて、「ここが良かった!」と思ったところをまとめました。

様々な言語を取り扱っている

Progateでは15種類の言語を取り扱っています。本とは違って、今後別の言語が増える可能性もあるところがオンラインの良いところですね!

ちなみに私はHTML&CSS(Web上の見た目を作る言語)を学習している最中です。どの言語を学ぼうか迷ったら、まずHTML&CSSをやってみることをおすすめします。

Progateで取り扱う言語
  • HTML&CSS
  • JavaScript
  • JQuery
  • Ruby
  • Ruby on Rails5
  • PHP
  • Java
  • Python
  • Swift
  • Command Line
  • Git
  • SQL
  • Sass
  • Go
  • React

WEB版とアプリ版がある

基本的に私はWeb版で勉強していますが、アプリ版もあります。iOSとAndroidどちらもあるところが良いですね。

アプリ版ではWeb版と違って、学べる言語が限られてきます。

アプリ版Progate言語
  • HTML & CSS
  • JavaScript
  • Ruby
  • Python
  • Java

アプリ版の言語はWeb版より少なくなりますが、今後のアップデートでWeb版と同じ数になる可能性はあります。

また、逆にアプリ版のメリットもあって、Web版とは違うレッスンがあります。

Web版と一味違うレッスンを用意しております。
アプリ版独自のレッスンを用意しております。
実践的なWeb版に比べ、より初心者向けのため、サクサク進められます。

https://prog-8.com
ハムスター

Web版は実践向け、アプリ版はサクッと初心者向けということなのだ

Progate -楽しく学べるプログラミング学習アプリ

Progate -楽しく学べるプログラミング学習アプリ

Progate無料posted withアプリーチ

Web版とアプリ版どちらが良いの?

迷わずWeb版をおすすめします。プログラミングではキーボードで半角英数字をバシバシ打っていくので、アプリ版(スマホ)だとちょっとやりづらいからです。また、アプリ版では学習できる言語もWeb版に比べて限られてしまいます。(2019年現時点では)

出先ではアプリ版、家ではWeb版と使い分けるのもおすすめです。

絵が豊富で学びやすい

▲Web版のイラスト
▲アプリ版のイラスト

プログラミングってただでさえややこしいので、文章だけでずらずら〜っと説明されると分からなくなってしまいがちです。

が、Progateではイラストが豊富だし、そのイラストも分かりやすい!

要点がしっかりまとまっていて、イラストもすっきりと理解しやすくなっています。私はこのイラストのおかげで、プログラミングのイメージがしやすくなって本当に助かりました。

画面がスッキリで見やすい

▲Web版ProgateのHTML&CSS学習画面

Progateでは、学習画面がとても見やすいです。(実際に手を動かす画面)

画面の左側にやることリスト(指示)がまとまっており、画面の中央にはメインであるプログラミング画面があります。HTMLとCSSもタブで切替ができます。そして、画面の右側にはプレビューとお手本があります。

プレビュー画面は、プログラミング画面をいじるとスグに反映されるのでとても便利です!

ヒントや回答があるので行き詰まらない

途中で分からなくなってしまっても、ヒントがあるので行き詰まりにくいです。

また、回答もあるので「正確な答え」がきちんと分かります。答えを分からないままにしておくのが一番良くないので、もし行き詰まってしまっても答えを自分のものと見比べてみると、間違いが分かって学習がスラスラ進みます。

モチベーションUP

Progateには、「もっと勉強したい!」と思わせるようなモチベーションアップ要素がたくさん含まれています。ざっくり3つご紹介します。

レベルアップ

Progateでは、アカウントを登録すると経験値が蓄積されるようになっています。

この経験値は、レッスンをクリアすることでたまり、一定たまるとレベルアップします。まるでRPGのゲームのようですよね。

言語ごとにレベルは初期化してしまいますが、総合レベルがあってこれはどのレッスンをクリアしても上がります。

学習カレンダー

自分のダッシュボードから、学習カレンダーを確認することが出来ます。

マス目にカーソルを合わせると、日付が分かります。学習時間までは分かりませんが、週にどれくらい勉強したのかによりひと目で分かります。こういうちょっとしたポイントも、モチベーションアップに繋がりますよね!

クボヒロ

ちなみにグリーンの色が濃いほどたくさん勉強しているということだよ!

修了レッスンや達成度

これは個人的に大好きなポイントです!

レッスンをクリアするたびに、達成度が100%に近づきます。また、レッスンを全て終えると、「修了レッスン」として数に入ります。

▲左側の達成度が100%になっている♪

総演習クリア数や修了レッスン数がどんどん増えていくとモチベーションアップ!

細かいところに気遣いがある

アカウントを作ると運営から「メッセージ」が届きます。その中に「プログラミングを学ぶあなたへ」というメッセージがありました。

チェックしてみると、「誰もが最初は初心者だったんだよ」ということや、「悩むくらいならやってみて!」という励ましの言葉が書かれていました。ちょっとした気遣いが嬉しいですよね。(実際にアカウントを作成してチェックしてみてくださいね)

また、今回ブログにProgateのことを書こうと思った際に、「Progateをご紹介いただく際のお願い」というページを見つけました。

このページには、ブログにProgateのことを書く際の注意点が載っていたり、プレスキットのダウンロードができるようになっています。(プレスキットにはProgateの画像やロゴが入っていて、ブログで使用することができます。)

初級編まで終えてみての感想

Progateは、Googleアカウントがあれば始められるのでとにかくサクッと始める事ができました。面倒くさい会員登録がなかったのが良かったです。(Progate,Google,Facebook,Twitterのどれか四種類でログイン出来ます)

学習期間

8月6日から始めて8月12日にHTML&CSSの初級編を修了することが出来ました。一週間かからないくらいですね。ちなみに一日の学習量はその日によってまちまちでした。

HTML&CSSの初級編は全部で23ページありました。8月12日には初級編を終え、JavaScriptの初級編を6ページ行いました。

Progateを学習した日数とページ数

  • 8月6日 1ページ
  • 8月7日 学習なし
  • 8月8日 8ページ
  • 8月9日 3ページ
  • 8月10日 学習なし
  • 8月11日 8ページ
  • 8月12日 9ページ(内6ページは別言語)

学習内容

学べること一覧では下記のようになっています。初級編にしてはボリューム的に十分で、たっぷりと勉強することができました。全7章あります。

学べること一覧

一章【HTMLに触れてみよう!】

  • HTMLに触れてみよう!
  • 見出しと段落
  • リンク
  • 画像
  • リスト

二章【CSSに触れてみよう!】

  • 文字の色
  • 文字の大きさと種類
  • 高さと背景の色
  • タグに名前をつける

三章【レイアウトを作ろう!】

  • HTMLの全体構造
  • HTMLの全体構造(2)
  • 全体のレイアウト

四章【ヘッダーを作ろう!】

  • ヘッダーの構造
  • ヘッダーのレイアウト
  • ヘッダーの余白

五章【フッターを作ろう!】

  • フッターの構造
  • フッターのレイアウト

六章【コンテンツを作ろう!】

  • メインのレイアウト
  • コンテンツの構造
  • ボーダー
  • paddingとmargin

七章【お問い合わせフォームを作ろう!】

  • お問い合わせフォームのレイアウト
  • お問い合わせフォームのレイアウト(2)

Progateは難しい?

初級編は誰がやっても比較的カンタンにクリアすることが可能だと思います。

イラストでの説明が豊富だし、指示に従っていけば割と簡単にサクサク進めることができました。分からなくなってもヒントや回答があるので、行き詰まることはなさそうです。

課金はするべき?しないべき?

私は初級編を終えたあと、真っ先に課金しましたw 初級編以降は有料になるのですが、とにかく続きを勉強したくなってしまったので・・・。

ちなみに月額課金で980円(税込み)で、2019年10月1日からは増税なので980円の税抜き価格になるみたいです。

また、下記の通り、Web版で有料会員になってもアプリ版にも有料が適用されます!これは嬉しいですね。アプリでも初級以降のレッスンを受けられます。

▲Progateお問い合わせより

まとめ

Progateは初級編までなら無料で利用できるオンラインプログラミング学習です。

私はだいたい一週間くらいでHTML&CSSの初級編を終え、すぐに有料会員になりました。それほど気に入ったからです。今は中級編にチャレンジしています。

とにかくWeb上でサクッと実際に手を動かしながら学習できるので、まずは無料の初級編から試してみることをおすすめします!

Progateお気に入りポイント
  • 豊富なイラストや要点をおさえている説明で、理解しやすい
  • 学習画面が見やすく、プログラムを打ち込みやすい(プレビューも即反映で便利)
  • 学習カレンダーや達成度によってモチベーションアップ!