Progateから始める、効率のいいプログラミングの勉強法

Web制作

 

プログラミングを学習したい!といざ思ったはいいけど、技術書、Webサイト、ツールと選択肢が多くて何から始めればいいかわからない・・・

とりあえず勉強し始めたけど、効率が悪い気がする・・・

 

今回はそんな人に達向けて、Progateから始める効率のいいプログラミングの学習法を紹介します。

 

Progateとは?

Progateとは、オンラインでプログラミングが学べるサービスです。

https://prog-8.com/

 

実際にどういった流れで学習するかを説明します。

 

まずはスライドで、学びたい内容のやり方を説明してくれます。

※Progate HTML&CSS初級編 https://prog-8.com/html/study/1/1#{2}

 

次にスライドの通りに、実際にコードを書いてみます。

※Progate HTML&CSS初級編 https://prog-8.com/html/study/1/1#{4}

 

コードを記述したらProgateが成否を確認してくれるので、正しければ次に・・・という流れで進んでいきます。

この流れをひたすら進めていくことになります。

 

どうしても正解がわからなかった場合、ヒントもしくは答えを見ることができるので、初心者でも安心して進めることができます。

 

以下、Progateの特色を紹介していきます。

 

コードを書きながら学べる

大事なのが、その場でコードを書けるという点

 

プログラミングを学ぶ上でもっとも重要なのは、手を動かすことです

本を読んだり、ネットでやり方を見るだけでは絶対に知識が定着しません。

 

Progateは、コースを進めるためには必ずコードを自分の手で書く必要があります。

加えて、画面上で自分の書いたコードの成否がその場でわかるので、技術書と比べても学習効率が非常に高いです。

 

様々な言語が用意されている

Progateでは、以下のように沢山のプログラミング言語が学習できます。

※Progate言語一覧 https://prog-8.com/languages

 

基本のHTML&CSSからjavascriptやPHPなど、実際の案件で使われている言語をバリバリ学べます。

しかも、これらの技術書を買おうとすると普通に2000円〜とかします。

 

これらを月額980円で、基礎からしっかり学べるのは非常にコスパがいいですね。

 

レベル制

これはほんのおまけ要素ですが、Progateにはレベル要素があります。

レッスンをクリアするごとに経験値が与えられ、一定数たまるとレベルアップします。

 

RPGのように、自分の経験を積み上げていく感じ。

ちょっとしたモチベーション要素と、自分がどこまで成長したかのわかりやすい指標になります。

 

有料or無料

Progateは基本無料ですが、月額980円の有料会員版もあります。

プログラミングをちゃんと勉強したい思うなら、必ず有料会員になりましょう

 

というか、無料版では本当に基礎の基礎しか学べないため、勉強しようと思ったら有料会員にならざるを得ないです。

Progateは技術書よりも圧倒的にとっつきやすく、学習も進めやすいツールになってます。

 

しっかり勉強すれば月額980円程度なんて簡単に回収できるくらい稼げるようになるので、ここは惜しまず払っていきましょう╭( ・ㅂ・)و

 

Progateの勉強法

以下、Progateにおいておすすめの言語と学習法、その時の注意点を紹介します。

 

おすすめの学習言語

Progateは沢山のコースがあるので、何から学べばいいかわからない・・・

そんな人にまずおすすめなのが、HTML/CSSコースとjQueryコースの学習です。

 

理由は二つ

◆HTML&CSSは、Webプログラミングを行う上で前提となる言語

Progateではプログラミング言語で一括りにまとめられていますが、HTML&CSSは実はプログラミング言語ではありません。(マークアップ言語)

ただし、HTML&CSSの知識がないと他の言語を扱うのは非常に難しいです。

ゆえに、最初に必ず学んでおくべき言語になります。

 

◆jQueryまで学べば、簡単なWebサイトの制作(コーディング)が可能になる

jQueryは、アニメーションションなどの動きを付け加えることができます。

HTML&CSSをjQueryさえ学べば、単純なサイトならば自分の手で再現可能になります。

内容も比較的簡単なため、最初の方に学んでおくのをおすすめします。

 

その他の言語も追々学ぶ必要があるのですが、まずはこの2コースでOKです。

 

学習の進め方

とりあえず、HTML&CSSコースと、 jQueryコースを一通り1週してみましょう。

これだけで、簡単なWebサイトであれば制作できるようになります

 

ここで、1週だけじゃ全然覚えられないor理解できない!という方は同じコースをもう1~2週しましょう。

 

プログラミングの学習には個人差があり、1週で理解できる人もいれば、2~3週かかる人もいます。

自分の理解度に合わせて、学習量を決めましょう。

 

注意点

Progateを学習する時、1週で全て理解しようとは思わないでください

1週のうちに全て理解しながら進むのは、難しい上に非効率です。

ある程度理解できたら先に進んで、2〜3週と繰り返すことで知識を定着させましょう。

 

反対に、周回しすぎもNGです

そもそもProgateはインプット作業になります。

どれだけ数をこなしてもアウトプットしない限り、完璧に理解するのは困難です。

 

ある程度知識が定着したなら、次のステップに進んでしまいましょう。

 

模写コーディング

HTML&CSS 2~3週したら、とりあえずサイトを作ってみましょう

Progateはインプットの作業なので、必ずどこかでアウトプットをする必要があります。

 

ただ、学習を終えたばかりの初心者では、

「そんなこと言われても、0からサイトを作るなんて無理!」

となる方が大半だと思われます。

 

そんな人におすすめなのが、模写コーディングです。

模写コーディングとは、Webサイトを見て、同じ見た目になるようにコーディングすることです。

 

当然ですが、元サイトのソースコードを見るのはNGです。見ながらだと練習にならないので。

 

模写コーディングにおすすめのサイト→http://pas-pol.jp/


1ページのLPなら→https://isara.life/ など

 

ここで、模写コーディングを行うときのポイントをいくつか紹介します。

 

素材はサイトのものorフリー素材で対応

あくまで練習に使うものなので、素材は模写するサイトからコピーしてOKです。

手持ちにフリー素材があればそちらでも構いません。

 

chromeの拡張機能に、「Image Downloader」という表示しているページの画像を全て保存してくれるツールがあります。

模写コーディングを行う上ではかなり役立つので、インストールをおすすめ。

 

フォント、カラーコードは調べてOK

フォントとカラーコードはchromeの検証機能から調べてOKです。

何故かと言うと、フォントやカラーコードの調整はコーディングの練習に関係ないから

 

ちなみにカラーコードは、「ColorPick Eyedropper」というchromeの拡張機能でも調べることができます。

使い方は簡単で、色を調べたいところにマウスを乗せるだけ。

 

もう一つカラーコードを調べる方法として、「イロミル」というサイトがあります。

 

こちらのサイトでは、まず画像をアップロードします。

アップすると画像が画面上に表示されるので、色を調べたいところをクリックするとカラーコードが表示されます。

 

模写コーディングしたいサイトを画面キャプチャしてアップロードすると、一気にカラーコードを調べることができます。

 

margin、padding等の余白は大まかにあってればOK

余白調整も、大まかに合っていればOKです。

こちらもフォントやカラーコードと同様、コーディングの練習に関係ないためです。

 

模写コーディングの目的は、あくまでHTML/CSSのコーディング技術を高めるのが目的です。

フォントの調査や余白の細かい調整なんかは、コーディング技術と関係ありません。

手を抜けるところは手を抜いて、浮いた時間でたくさんコーディングしましょう。

 

ただし一つ注意として、明らかに見栄えが悪くなる手抜きはNGです。

 

コーダーの仕事を受ける場合、模写コーディングも実力を測る基準になります

模写コーディングとは言え制作物を見せるわけなので、あまり手抜きだと・・・印象が下がりますよね。

最低限、人に見せても問題ない程度には仕上げておきましょう。

 

注意

元サイトの画像やテキストをそのまま使用している場合、制作物をネット上に公開するのは著作権違反になります。

制作実績として用いる場合は、クライアントと直接やりとりする場合などのクローズドな環境のみに限定しましょう。

どうしてもポートフォリオサイトやGoogleドライブで公開したい!と言う方は画像やテキストをフリー素材に差し替えて公開しましょう。

 

 

模写コーディングの後

模写コーディングをやった後は、次に何やるかは選択肢が様々です。

以下、例を紹介します。

Progateで違うコースを学習する

一度Progateに戻って、他の言語を学習してみましょう。

 

HTML&CSSとjQueryだけだと、簡単なコーディングの仕事しかできないのでどうしても単価が安くなります。

単価を上げるには、他の言語やデザインスキルなどの付加価値が必要になってきます。

 

単価を上げたい、本格的にプログラミングをやりたい、と言う方はPHP、Ruby、Javascriptあたりを勉強しましょう。

 

色々なサイトを模写コーディングする

複雑なコーポレートサイトや、分量の多いランディングページなど、色々な種類のサイトを模写コーディングしてみましょう。

 

ポイントは、自分が完璧に理解できるサイトではなく、ちょっと難しそうなサイトを選ぶこと

自分がわかるものを選んでも、上達するのはスピードだけです。

 

技術を高めたいなら、自分の理解度より少しレベルの高いものを選ぶべきです。

所詮模写コーディングなので、できなくても全くリスクはありません

 

見切り発車でもいいので、ガンガン高みに挑戦していきましょう。

 

実案件をこなす

模写コーディングを数本やると、ぶっちゃけコーディングの仕事が取れるだけの力はついてきます。

ある程度本数が溜まったら実績としてまとめて、クラウドソーシングに応募してみるといいでしょう。応募するだけなら、さしてリスクもありません。

 

実案件をこなすのが最大のアウトプットです

早く成長したい、と言う方は思い切って挑戦していきましょう。

 

まとめ

・ProgateでHTML&CSS、jQueryを2~3週こなす

・Progateをざっと終わらせたら模写コーディング

・Progateで他の言語に挑戦

・模写コーディングを何本かこなしたら、実案件に挑戦