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

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

こんにちは、たっきー(@ryutoblog)です。今回は、Progateが一通り学習し終わったら次にやるべきことについて話します。おそらくこの記事を読んでいるあなたは、html, css, jqueryあたりを一通り学習し終わっている状態だと思います。なので、

Progateでhtml, css, Jqueryの勉強が終わったんだけど、次に何やればいいかわかんない。案件が全然取れない。

今回は、こんな悩みを解決していきます。

結論: 実務に近いスキルを学ぼう

当然ですが、Progateを学んだだけでは仕事はGETできません

理由は簡単で、Progateで得られるスキルが実務とはかけ離れているからです。Progateはもともと、プログラミングが苦手な人でも独学で簡単にプログラミングが学習できるように、イラスト付きでかな〜り優しく作られているサイトです。よって、Progateが終了した時は、一見かなりのスキルがついてるように見えてまだまだ現場で働くには足りてないです。

数年前ならProgateだけでも稼げました。しかし、プログラミングの人気が高まってきて多くの人が参入してきたために、クラウドワークスやランサーズの募集倍率が10倍ほどに跳ね上がりました。みんなが同じことをやり始めたら、当然自分は埋もれるので他の人との差別化を計らないといけないですよね。

なので、Progateが一通り終了した後には、仕事を獲得するためにより実際の開発現場に近いスキルを学ぶことが重要です。 

自分は現在インターンに通っているのですが、働き始めてすぐにProgateだけじゃ学べない技術がたくさんあることに気づきましたね。そんな私だからこそ伝えられる、Progateが終わってから学ぶべきだったことを逆算して紹介します。

⬇︎その手順はコチラ⬇︎

1, ローカルで開発環境の構築をする
2, ドットインストールでエディターの使い方を学ぶ
3, サイト模写をする
4, PHPを本を買って学ぶ
5, 効率的にコーディングできるようになる
6, ポートフォリオサイトを作る

手順1: ローカルで開発環境の構築をする

Progateでは、開発環境が勝手に構築されていました。しかし、Progateではない所で自分で書いたプログラムを自分のパソコンで動かすには、ローカルの開発環境の構築というものが必要です。下の記事に沿って構築していきましょう。

PHPの開発環境構築の手順解説【mac編】

手順2: ドットインストールでエディターの使い方を学ぶ

Progateが終わった後は、まずは「ドットインストール」というサイトを使ってエディターの使い方を学ぶ必要があります。

エディターとは、プログラムを書く時に使うツールのことです。代表例として、「Visual Studio Code」というエディターがあります。

エディターを学ぶべき理由は、Progateは親切だからエディターを勝手に用意してくれていたからです。下の画像がエディターです。

しかし、実際にサイトを作る時には自分でエディターを用意しなくてはいけません。よってまずは、エディターの基礎的な使い方を学ぶところから始めましょう!(エディターの使い方を学ぶ)

>> エディターの使い方を学ぶ

手順3: サイト模写をする

エディターの使い方が一通り学び終わったら、次はサイト模写をしていきます。サイト模写とは、その名の通り自分の気になったサイトを真似してコーディングしてみることです。だいたい2~3サイトくらい模写できればバッチリです。

サイト模写の目的は、正しいコーディングができるかどうかも兼ねてますが、メインは「ディベロッパーツール」の使い方を学ぶことです。ディベロッパーツールとは、Googleの提供してる検証ツールのことで、全国ほとんどの会社がサイト開発に利用しています。

これが、ディベロッパーツールを使用している時の画面です。実際に私も日々頻繁に利用しています。このツールを使用することで、

・すぐにエラーが発見できるようになる
・各デバイスごとのページの見え方がこれひとつでテストできる
・書いたコードの検証が簡単にできる
・他の人のサイトのコードが見れる

といったメリットがあります。

どのHTMLタグにどんなCSSが適用されているか、どういう階層構造でコーディングされているか、margin・paddingはどれくらいなのか、などが丸分かりになるので、サイト模写の答え合わせに使えます。

サイト模写をすればコーディング技術も上がるしディベロッパーツールの使い方も学べるから一石二鳥だね!!

たっきー
たっきー

手順4: 本を買って学ぶ

エディターの使い方も学んで、ディベロッパーツールの使い方も理解した人は、次はプログラミングの本を買って勉強しましょう。本を使って学習すべき理由は、本の方がProgateより実践に近い内容が書いてあるからです。本をやり終える頃には、お問い合わせ機能やカレンダーが作れたり、データベースの設計方法・データベースの扱い方がマスターできるようになります。

また、大体の本には最初に開発環境構築の手順のページがあるので、今あなたはProgateを終えて初心者から抜け出していて、次は中級者を目指すステップにいます。

中級者の目安は、ちょっとしたサービス(メールフォームなど)が本を見ず自分の力で作れるようになることです。

1, まずは本の内容にそってサービスを作ってみる
2, 周回するにつれて徐々に本を見る量が減り、自分の力でコードが書けるようになる
3, お問い合わせ機能やカレンダーが作れるようになる

という流れですね。

私は、最初に学ぶ言語は「PHP」というプログラミング言語をおすすめします。PHPをおすすめする理由は、初心者向けのプログラミング言語だからです。

また、現在約80%のWebサイトは「PHP」を使って作られているからです。そのため、PHPはネット上にたくさんノウハウが出回っているので、本でエラーが起きて詰まった時に他の言語よりも情報が多く解決しやすいです。

じゃあ、PHPでおすすめの本は何ですか?

という方はこちら⬇︎を参考にしてください!

【PHP7対応】PHP初心者が買うべきおすすめの本5選

他の言語も挑戦してみたい!

よくわからないけど、とりあえずお金が稼げるプログラミング言語は何ですか?

という方はこちら⬇︎を参考にしてください!

【プログラミング言語】プログラミング言語年収別ランキング2020

手順5: 効率的にコーディングできるようになる

エディター使えるようになったよ。
ディベロッパーツールも使えるよ。
本も学習し終わったよ!

ここまで来たら、次はより効率的にコードを書いていく練習をします。効率的なコードを書かなければいけない理由は、実務はスピードが命だからです。自分で作りたいものを作っている時にはなかった期限というものが仕事にはあります。限られた時間の中で効率的にコーディングをする能力は非常に重要です。

私がインターンで一番「これは使える!」と思ったスキルは「Sass」というプログラミング言語の習得です。Sassとは、「Syntactically Awesome Style Sheet」の略です。要は、CSSが構文的にすごくなった、という訳なのでそういう認識で大丈夫です。

Sassは多くの開発現場で利用されていて、面接時にSassができることを伝えると面接官の見る目が変わります。実務経験がない人でSassを意図的に使う人なんてなかなかいませんからね。私もインターン始めるまで知らなかったです。

Sassの便利な点は、入れ子のようにCSSを記述できる点です。例えば、

.class1 {
  color: black;
  background-color: white;
}
.class1 a {
  text-decoration: none;
}
.class1 a:hover {
  color: white;
  background-color: black;
}

というCSSファイルをSassで表現すると、

.class1 {
  color: black;
  background-color: white;
  a {
    text-decoration: none;
    &:hover {
      color: white;
      background-color: black;
    }
  }
}

といった形に省略して書くことができるようになります。明らかに少ないコード量で同じ表現ができるし、何より入れ子になっているので見やすいですよね。何十行もCSSを書く時に、Sassが使えるとどこに何が書いてあるのかの整理がしやすくなり、現場で重宝されています。

ProgateにSassを学べる項目があるので、サクッとコース終了させましょう。SassはProgateやるだけで十分現場で必要な知識は足りるので、本は買う必要ないです。

手順6: ポートフォリオサイトを作る

当然ですが、ここまで勉強を終えたら次は仕事を獲得してお金を稼ぎたいと思います。そこで、応募をするにあたってエンジニアは何か制作物がなければいけません。ポートフォリオサイトとは、その制作物をまとめて採用側に見せるための履歴書のようなものです。

ポートフォリオサイトを作るべき理由は、採用する側からするとあなたが何ができて、何ができないかわからないからです。

私は、html, css, jqueryなどを勉強してきたので、簡単なWebサイトが作れます!Sassも使えます!

みたいなことを口頭で言われても、実際に作ったWebサイトを見ないとその技術が実際どの程度のものか確認することができないですからね。

ポートフォリオサイトの作る手順は、以下の記事を参考にしてください!

ポートフォリオサイトの作り方解説【写真付き】


【学生の裏技】インターンにそのまま応募する

実は、学生には仕事を獲得する裏技があります。それは、手順5を飛ばしてそのままインターンに応募してしまうことです。

近年、AIや機械学習の発達によりエンジニア需要が急速に高まっています。一方で、日本国内でエンジニアを志望している人はその需要に対して少ないのが現状です。なので、最近は実務経験がない新人でもやる気次第で採用している企業が増えている傾向にあります。

実際に私は、本を買うところまでは自分でやったはいいものの、本を進めているうちに急に何を目指せばいいかがわからなくなり挫折しそうになったのでダメ元でインターンをさせてもらえないか交渉しました。結果、大した知識もないのに有給で採用していただけました。

インターンを始めるとメンター(質問に受け答えしてくれる人)が横についてくれるので、本当に爆速で成長します。独学だけではわからなかった技術も簡単に手に入れられました。

大金をはたいてプログラミングスクールに通うのも一つの手段ですが、学生のうちは熱意を持ってインターンに応募してしまうのも個人的にはアリだと思います。不採用を恐れずにガンガンいきましょう。

まとめ

今回は、Progateが一通り終わったプログラミング初心者が次にやるべきことの手順を説明しました。

何よりも、プログラミングは楽しんでやれることが一番だと思います。

いい記事だと思ったらシェアしていただけると嬉しいです!

では今回は以上です。