今回はそんな人に達向けて、Progateから始める効率のいいプログラミングの学習法を紹介します。まとめProgateとは?Progateとは、オンラインでプログラミングが学べるサービスです。https://prog-8.com/実際にどういった流れで学習するかを説明します。スライドで、学びたい内容のやり方を説明してくれます。https://prog-8.com/html/study/1/1#{2}次にスライドの通りに、実際にコードを書いてみます。https://prog-8.com/html/study/1/1#{4}コードを記述したらProgateが成否を確認してくれるので、正しければ次に・・・という流れで進んでいきます。この流れをひたすら進めていくことになります。しても正解がわからなかった場合、ヒントもしくは答えを見ることができるので、初心者でも安心して進めることができます。以下、Progateの特色を紹介していきます。コードを書きながら学べる大事なのが、その場でコードを書けるという点。プログラミングを学ぶ上でもっとも重要なのは、手を動かすことです。本を読んだり、ネットでやり方を見るだけでは絶対に知識が定着しません。Progateは、コースを進めるためには必ずコードを自分の手で書く必要があります。加えて、画面上で自分の書いたコードの成否がその場でわかるので、技術書と比べても学習効率が非常に高いです。様々な言語が用意されているProgateでは、以下のように沢山のプログラミング言語が学習できます。https://prog-8.com/languages基本のHTML&CSSからjavascriptやPHPなど、実際の案件で使われている言語をバリバリ学べます。これらの技術書を買おうとすると普通に2000円〜とかします。これらを月額980円で、基礎からしっかり学べるのは非常にコスパがいいですね。レベル制これはほんのおまけ要素ですが、Progateにはレベル要素があります。レッスンをクリアするごとに経験値が与えられ、一定数たまるとレベルアップします。RPGのように、自分の経験を積み上げていく感じ。したモチベーション要素と、自分がどこまで成長したかのわかりやすい指標になります。有料or無料Progateは基本無料ですが、月額980円の有料会員版もあります。プログラミングをちゃんと勉強したい思うなら、必ず有料会員になりましょう。いうか、無料版では本当に基礎の基礎しか学べないため、勉強しようと思ったら有料会員にならざるを得ないです。Progateは技術書よりも圧倒的にとっつきやすく、学習も進めやすいツールになってます。以下、Progateにおいておすすめの言語と学習法、その時の注意点を紹介します。おすすめの学習言語Progateは沢山のコースがあるので、何から学べばいいかわからない・・・そんな人にまずおすすめなのが、HTML/CSSコースとjQueryコースの学習です。理由は二つ◆HTML&CSSは、Webプログラミングを行う上で前提となる言語Progateではプログラミング言語で一括りにまとめられていますが、HTML&CSSは実はプログラミング言語ではありません。(マークアップ言語)ただし、HTML&CSSの知識がないと他の言語を扱うのは非常に難しいです。ゆえに、最初に必ず学んでおくべき言語になります。◆jQueryまで学べば、簡単なWebサイトの制作(コーディング)が可能になるjQueryは、アニメーションションなどの動きを付け加えることができます。HTML&CSSをjQueryさえ学べば、単純なサイトならば自分の手で再現可能になります。内容も比較的簡単なため、最初の方に学んでおくのをおすすめします。その他の言語も追々学ぶ必要があるのですが、まずはこの2コースでOKです。jQueryコースを一通り1週してみましょう。これだけで、簡単なWebサイトであれば制作できるようになります。ここで、1週だけじゃ全然覚えられないor理解できない!という方は同じコースをもう1~2週しましょう。プログラミングの学習には個人差があり、1週で理解できる人もいれば、2~3週かかる人もいます。自分の理解度に合わせて、学習量を決めましょう。注意点Progateを学習する時、1週で全て理解しようとは思わないでください。1週のうちに全て理解しながら進むのは、難しい上に非効率です。ある程度理解できたら先に進んで、2〜3週と繰り返すことで知識を定着させましょう。反対に、周回しすぎもNGです。そもそもProgateはインプット作業になります。どれだけ数をこなしてもアウトプットしない限り、完璧に理解するのは困難です。ある程度知識が定着したなら、次のステップに進んでしまいましょう。2~3週したら、とりあえずサイトを作ってみましょう。Progateはインプットの作業なので、必ずどこかでアウトプットをする必要があります。「そんなこと言われても、0からサイトを作るなんて無理!」となる方が大半だと思われます。そんな人におすすめなのが、模写コーディングです。模写コーディングとは、Webサイトを見て、同じ見た目になるようにコーディングすることです。当然ですが、元サイトのソースコードを見るのはNGです。見ながらだと練習にならないので。ここで、模写コーディングを行うときのポイントをいくつか紹介します。素材はサイトのものorフリー素材で対応あくまで練習に使うものなので、素材は模写するサイトからコピーしてOKです。手持ちにフリー素材があればそちらでも構いません。Downloader」という表示しているページの画像を全て保存してくれるツールがあります。模写コーディングを行う上ではかなり役立つので、インストールをおすすめ。フォント、カラーコードは調べてOKフォントとカラーコードはchromeの検証機能から調べてOKです。言うと、フォントやカラーコードの調整はコーディングの練習に関係ないから。Eyedropper」というchromeの拡張機能でも調べることができます。使い方は簡単で、色を調べたいところにマウスを乗せるだけ。一つカラーコードを調べる方法として、「イロミル」というサイトがあります。こちらのサイトでは、まず画像をアップロードします。アップすると画像が画面上に表示されるので、色を調べたいところをクリックするとカラーコードが表示されます。模写コーディングしたいサイトを画面キャプチャしてアップロードすると、一気にカラーコードを調べることができます。margin、padding等の余白は大まかにあってればOK余白調整も、大まかに合っていればOKです。こちらもフォントやカラーコードと同様、コーディングの練習に関係ないためです。模写コーディングの目的は、あくまでHTML/CSSのコーディング技術を高めるのが目的です。フォントの調査や余白の細かい調整なんかは、コーディング技術と関係ありません。手を抜けるところは手を抜いて、浮いた時間でたくさんコーディングしましょう。一つ注意として、明らかに見栄えが悪くなる手抜きはNGです。コーダーの仕事を受ける場合、模写コーディングも実力を測る基準になります。Day63広告会社と制作会社の方とお話ししてわかったこと。模写コーディングとは言え制作物を見せるわけなので、あまり手抜きだと・・・印象が下がりますよね。最低限、人に見せても問題ない程度には仕上げておきましょう。元サイトの画像やテキストをそのまま使用している場合、制作物をネット上に公開するのは著作権違反になります。制作実績として用いる場合は、クライアントと直接やりとりする場合などのクローズドな環境のみに限定しましょう。してもポートフォリオサイトやGoogleドライブで公開したい!と言う方は画像やテキストをフリー素材に差し替えて公開しましょう。模写コーディングをやった後は、次に何やるかは選択肢が様々です。以下、例を紹介します。Progateで違うコースを学習する一度Progateに戻って、他の言語を学習してみましょう。HTML&CSSとjQueryだけだと、簡単なコーディングの仕事しかできないのでどうしても単価が安くなります。単価を上げるには、他の言語やデザインスキルなどの付加価値が必要になってきます。単価を上げたい、本格的にプログラミングをやりたい、と言う方はPHP、Ruby、Javascriptあたりを勉強しましょう。色々なサイトを模写コーディングする複雑なコーポレートサイトや、分量の多いランディングページなど、色々な種類のサイトを模写コーディングしてみましょう。ポイントは、自分が完璧に理解できるサイトではなく、ちょっと難しそうなサイトを選ぶこと。自分がわかるものを選んでも、上達するのはスピードだけです。技術を高めたいなら、自分の理解度より少しレベルの高いものを選ぶべきです。模写コーディングなので、できなくても全くリスクはありません。見切り発車でもいいので、ガンガン高みに挑戦していきましょう。実案件をこなす模写コーディングを数本やると、ぶっちゃけコーディングの仕事が取れるだけの力はついてきます。ある程度本数が溜まったら実績としてまとめて、クラウドソーシングに応募してみるといいでしょう。応募するだけなら、さしてリスクもありません。実案件をこなすのが最大のアウトプットです。早く成長したい、と言う方は思い切って挑戦していきましょう。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。