Progateを使ってプログラミングを学んでいる方向けにProgateが終わったら何をしたらいいのかについてフリーランスエンジニアが本気で考えてみました。
考えたというよりは自分がどういうふうにしてプログラミングを学んだのかを振り返ってみた時にどういう情報が必要だったのか見つめ直してみましたといった感じです。

知られざるProgateの弱点

初心者には圧倒的なわかりやすさとプログラミング学習のハードルの低さを提供しているProgateですが、どのサービスにも長所短所あるようにProgateにも弱点があるので考えてみましょう。

Twitterを覗いてみるとProgateでの学習方法について様々言及されていたりします。

最初はプログラミングができるようになりたいというところからProgateを始めたのにいつしかレベル上げることが楽しくなってしまって様々な言語に手を出し結果何もできないといった事が多くあります。
レベル上げ機能も初心者を鼓舞する良い機能なんですが、目的を忘れてはいけないということですね。
2〜3周というのも知識がある程度定着するレベルを指すものだと思われますので、あくまで目安ということになります。

また、ある人はProgateを見ながらでも良いので次のステップに行くことが大事だと思っています。
でないと、Progateができる人であっていつまでもプログラミングができる人にはならないからです。

Progateが終わったら次に何をやるか

多くの記事でも言われているとおり、「サイト模写」が圧倒的に効果的だと思います。
「模写なんてめんどっちいから、すっ飛ばして作りたいもの作らせろ！」
って方ならぜひ作りたいものをどんどん進めていくのが良いのですが、大抵の場合は「作りたいものがそんなに明確にはない。。」という感じだと思いますので、「あ、自分だ。」と思ったらサイト模写をオススメします！

サイト模写は別名「クローン」っていいます。よく新人エンジニアに課される課題です。クローン羊とか人のクローンとかと同じような意味で
すでにあるWebサイトと同一のデザイン、機能で新しく開発すること
です。
クローン対象は何でも良いと思いますが、あまり難しいようなUber EatsのクローンとかGoogleの検索エンジンクローンみたいなのは辞めたほうが良いでしょう。
よくあるのは

・Twitter、Facebookクローン（SNS）
・簡素なAmazonクローン（EC）
・メルカリクローン（フリマ）
・LINEクローン（チャット）
・Trelloクローン（タスク管理）
・note、Qiitaクローン（ブログ）

若かりし頃に作ったQiitaクローン（Ruby on Rails）がありますのでRubyを勉強している方は参考になるかも！
shimonosatoru/qiita-clone Qiitaのマークダウンエディタ部分をそっくりそのまま

なぜ自分でサービスを作ることが大事なのか

いくつかクローン開発において大事な目的がありますが、3つがわかりやすいということで3つにまとめてみました。
これらを認識して取り組むのと知らずに取り組むのでは全く意味が異なりますのでぜひ意識してみてほしいですし、ある意味、学習者からエンジニアへの大きな一歩だとも思いますので耳をうさぎにして聞いてほしいです🐰（耳じゃないか。）

① 自分のPCに開発環境を構築せよ

エンジニアの仕事を覗いてみると何やら黒い画面に向かってカタカタとキーボードを叩いています。
ここでいう黒い画面はエディタのことで、大概の時間はエディタを開いています。このエディタというものがなければエンジニアはプログラミングすることができません。
実はProgateにもエディタはありました。こちらです。

image

Progateはエディタのインストールなしにブラウザ上でプログラミングできましたが、より学習を進めていく上ではパソコンにインストールして使う必要があります。
初めてエディタを使う方であれば問答無用にVSCodeというエディタで十分だと思います。
そこからさらにプログラミング言語のインストールが必要です。プログラミング言語もツールなのでインストールして使います。
実はこの段階でプログラミング学習を辞める人がほとんどです。Progateはこの作業なしにプログラミング学習を進められるという革命を起こしたからすごいんです。
あとは各々が書いている言語をインストールしてもらい、調べながらできれば大成功です。

② 調べながら進められるスキルを身に着けよ

今回の記事で手順を具体的に書かなかったのも自分で調べる余地を残しておきたいからという意味もあります。
よくエンジニア採用担当の方とお話していた時期があり、みな口を揃えて
「プログラミングは教えられるからできなくてもいい。それよりも手が止まらない人がほしい」
もちろんプログラミング学習は前提ではありますが、手が止まらない人というのはどういう人なのか、それは
自分で調べられる人
です。
手が止まっている状態というのは自分の知っている知識ではもう太刀打ちできないという状態です。だから調べる必要があるし、現場の先輩エンジニアに質問しに行く必要があります。
ここで多いのがわからないことをずっと黙ってて1週間後聞いてみたら何も進んでいないという人です。
職場に行くならわからないアラートを出すことが大切ですし、独学の段階ならどう検索したら自分の欲しい情報が返ってくるのかをわかっていないといけないです。それでも難しそうなら質問サイトに答えやすい質問で投稿したりするのもいいと思います。
プログラミングスキルを身につけるのもいいですが、どうせならプログラミングを学ぶ過程の中で質問するスキルや調べるスキルも同時に磨けたほうが美味しくないでしょうか。
極論でもありますが、エンジニアはわからないことを調べられる職種だと表現する人もいます。先輩エンジニアでも5年でも10年でもプログラミングやっていてもわからないことだらけです。エンジニアがわかっているのは直し方や調べ方です。どういうふうに調べたら自分の欲しい情報が得られるのかを把握しています。
先日エンジニアYouTuberのKBOYさんもこのような動画を投稿していました。

エンジニア５年やっても何もわからない【プログラミング】

③ サイトの構成を理解せよ

クローンを開発するにはそのサイトをのことをより深く理解していなければいけません。逆に言えばクローン開発を通してそのサイトをより深く理解することができます。
一つのサイトを深く理解することはエンジニアになる上で大きな進歩に繋がります。
例えばProgateは採用情報を見る限りRuby on RailsとNode.jsで作られているようですが、画面遷移に伴って変わるURLがどのように変化しているのかがわかればだいたいのサイトの構成はつかめます。（僕もRailsの使い手なのでファイル構成が頭の中に浮かんできます。）
有名なサイトはデザインがだいたい同じようなものになっているのでハンバーガーメニューとかスライドとかそういったものが作れれば他のサイトでも使えます。機能でも会員登録機能、チャット機能、投稿機能などだいたい機能は限られていますのでそのサイトをじっくり見ながらどういった機能なのかなるべく細かく把握すると他のサイトでも同じような構成なので"Web"というものの理解が進みます。
「よくわからんな〜」
という方は一度やってみてほしいです。今開いているこのnoteのページもどういうURLで、どういうデザインで、どういう機能が隠されているのか。

まとめ

最後まで読んでくださりありがとうございます！
今日紹介した条件が一致していれば手段は何でも良いですが、今の所サイトクローンの開発、つまりはサイト模写だと思います。
具体的な手順は飛ばしましたが、この記事では大まかな流れだけ確認するようにしました。

よいプログラミングライフを！

最後に告知

僕のメンタープランいくつか開放していますので、ぜひご覧ください。
zoomなどでオンラインMTGができるプランやSlackで質問ができるプランなど用意しています。
https://menta.work/plan/3235