Progate修了！…で、どうすればいいの？
Progate修了おめでとうございます。
これであなたもフロントエンドの第一歩を踏み出しましたね。ところで未経験からProgateでHTML/CSSを初めて勉強してみて実際どうですか？
簡単？難しい？感想は人それぞれだと思います。
Progateをやり終えた駆け出しの人からよく聞く声は、
「次に何をしたらいいのか分からない」
「いざ自分で何か作ろうと思っても何からやったらいいのか分からない」
というものです。
このnoteでは、未経験からProgateで初めてHTML/CSSに触れてちょっとコーディングに慣れはじめたくらいの駆け出しの方が、自分の作りたいものを自由に作れるようになるために次に何をしたらいいのか、ということを解説していきたいと思います。
Progateの良いところ、悪いところ
Progateの良いところは、とにかく解説が簡潔で分かりやすく、未経験の人でも非常にとっつきやすいという点です。難しい理屈は抜きにして、とにかくコードに触れることで苦手意識を無くし、Webフロントエンドの世界へ踏み込む際の敷居を低くしてくれている点で非常に評価が高く、多くの未経験の人がProgateで学んでいます。
逆に悪いところは、コードを読み書きすることに慣れたその後で、本格的に自分で何かを作っていくために必要な情報が圧倒的に足りていないという点です。
ポートフォリオの作成、その前に。
ProgateでHTML・CSS学習コースを上級コースまで全てやり遂げた方は、もしかしたら「これでHTML・CSSの基礎は十分！」と考え、すぐにWebサイトの模写やポートフォリオの作成に取り掛かろうとしているかもしれません。でもちょっと待って下さい！
もしもProgateをやっただけで他に何も勉強していないのだとしたら、ポートフォリオの作成はもう少し待った方がいいです。あなたがProgateで学んだ「HTML・CSSの基礎知識」だと思っている情報は、本当に必要なフロントエンドの基礎知識のうちのほんの一部にすぎません…。
そのままの状態でポートフォリオを作り始めたとしても、すぐに行き詰まるのは目に見えていますし、仮にとりあえず見た目は何とかなっていたとしても、そのコードは目も当てられない状態である可能性がとても高いです。
なぜでしょうか？
その理由は、ProgateではHTMLやCSSを「どのように書くか」は教えてくれるけれど、「なぜそのように書くのか」ということは教えてくれないからです。
Progateを何周やっても、思い通りに作れるようにはならない
Progateは、よくも悪くも未経験の人にコードを書くことの楽しさを伝え、「自分にもできる！」という達成感を得やすくすることで、一人でも多くの人にプログラミング学習の第一歩を踏み出すきっかけを作ることに重きを置いているため、教材の中で教える内容は極めて初歩的なものに限定しています。
JavaScriptやRubyなどの他のプログラミング言語教材についてはごく基本的な文法の習得を目指す内容となっているため、初歩的な教材だと理解していれば特に問題はありません。ただ、HTML・CSSの学習コースに限って言えば、なまじ目に見える形でページを作成する形態での教材となっているため、「Progateで教わった内容さえ理解していればWebサイトは作れる」と勘違いしやすいという問題があるように思います。
はっきり言ってしまうと、ProgateのHTML・CSS学習コースをたとえ何周やったとしても、自分の思い通りのWebページを自由に作れるようにはなりません。自由に作れるようになるために必要な知識・テクニックの情報量が圧倒的に足りていないからです。
Progateの次に何を学べばいいのか？
次にあなたが学ぶ必要があるのは、まずは「マークアップすることの意義」。そして「CSSのルールと仕組み」です。
これらを、できるだけ体系的に学ぶことをおすすめします。
Progateでは敢えて触れられていなかった、
「なぜそのように書くのか？」という、自力でコーディングするには必ず必要となる知識を早い段階でしっかり身につけるのです。
かっこいいデザインのWebサイトを模写して使われているプロパティの書き方を覚えることより、HTML・CSSの根本的な理論と思想を身につけることの方が重要です。
おすすめの教材は？
このような理論と思想、つまり「考え方」の部分を体系的に学ぶためには、初心に帰って「書籍」を使うのが最も効率が良いと思います。
今の世の中、インターネット上に様々な学習サイトや動画教材などが氾濫していますが、書籍はそうしたものに比べて情報の密度が圧倒的に高いのが特長です。紙の書籍でも電子書籍でもどちらでも良いですが、「ちゃんとしたプロが責任をもって監修した初心者向けの入門書」を1冊でもいいから通読することをオススメします。
1冊でも通読すれば、Progateをやっただけの自分にどれほど足りないものがあるのかハッキリ認識できるようになるはずです。1度で理解する必要はありません。まずは「何が足りないのか？」を認識することが重要なのです。その上で、より深く学ぶために本が好きな人は他の書籍を当たればよいですし、動画が好きな人はYoutubeやUdemy、ドットインストールなどの動画教材をあたりましょう。他にはTwitterで質問しまくったり、メンターをつけたり、オンラインサロンに加入したりして、先輩エンジニアに教えてもらうという方法もありますね。
「何が分からないか？」が分かるようになれば、その先はいくらでも独学できるのがWebフロントエンドの強みです。本当の学びが始まるのはそこからです。
さいごに
Amazonなどで検索すればHTML/CSSの入門書・解説書は沢山見つかると思います。基本的にはどれもProgateよりは多くの情報が詰まっているのでどれでも好きなものを読めば良いと思うのですが、やはり書籍によって重視する内容が違うので「なぜそうするのか？」という理由の部分を省略せずに根拠を持って丁寧に解説しようとする姿勢が強いものをおすすめしたいです。
またデザイン・レイアウトや文体などの好みもあるでしょうから、多少手間でも本屋さんに出向いて実際に手にとって中身を確認することを推奨します。「令和の時代にもなってなんてアナログ！」と思うかもしれませんが、そのひと手間を惜しまないことで結局はその後の学習効率がうんと良くなることを思えば、ためらう理由はないと思います。
Progateを卒業してよきフロントエンドライフをお過ごしください！
（追記）宣伝タイム♪
この記事を投稿したところ、「読む人にとっても役に立つから自分の書籍の宣伝載せたらどうですか？」とアドバイスをいただいたので、ここからちょっと宣伝させてくださいw
プロのWeb制作者を目指す人向けに、翔泳社さんから初心者向け入門書を出版しています。このnoteでも触れたように、できるだけ「なぜそうするのか？」ということを重視した解説をこころがけていますので、多少小難しくなったとしてもきちんと理論を理解したい人にはお勧めです。
（一応2013年から2回の内容改訂、改訂前の版は5回の重版をいただいておりますし、分かりやすいと評価いただいてますので多分大丈夫。…だと思いたいw 最終判断はご自分の目でお願いしますね！）
なお、自分の本以外のおすすめ書籍については、中身をちゃんと自分で読んでみてからでないと正確な書評ができないため、また改めてまとめてみたいと思います♪
よろしければサポートお願いします！いただいたサポートは大切に使わせていただきます♪