プログラミング初学者にとって、最も良いプログラミング言語はHTML/CSSです。
>>プログラミングの入り口はHTML/CSSがおすすめな理由【初心者必見】
言語の選定が終わったら、次は学習方法についてです。この記事では、HTML/CSSの効果的な学習方法を解説していきます。人間の心理に基づいたアプローチもいくつかありますので、是非とも参考になさってください。
HTML/CSSを習得するための効果的な学習方法
HTML/CSSはプログラミング言語の中では、比較的習得しやすい言語だと言われていますが、それは正しい学習方法を行った場合に限ります。順序だてて効果的な学習方法を確認していきましょう。
初めの一歩は「Progate」から
プログラミング初心者にとって、書店に販売されているテキストでの学習はハードルが高いと言えます。やはり現代では、オンライン上のツールを利用する方が得策だと思われます。この手の話になると必ず名前があがるのが、「Progate」と「ドットインストール」です。「ドットインストール」から学習を勧める方もいますが、初めの一歩は「Progate」の方が良いと思います。その理由を解説します。
Progateとは、スライドを見ながらインプットをして、その後すぐにアウトプットをするというもの。
対するドットインストールは、動画を見ながらアウトプットを同時に行うというもの。
どちらもインプットとアウトプットのバランスが良いため学習教材としては優秀だと思います。しかし、初心者にとって理解もしていないタイミングでアウトプットをするというのはかなりキツイです。訳も分からずとりあえず言われるがままやって、出来たけど意味わかんない。という状態になります。これが続くと確実に嫌になります。
そのため、ある程度の理解をしながらアウトプットが出来るProgateが良いでしょう。
少し慣れたら「ドットインストール」
ProgateのHTML/CSSコースを2回もしくは3回ほどやって、ある程度の理解が出来たらドットインストールに進みましょう。もちろんProgateを1回だけやって大丈夫そうであれば1回でいいですが、初心者の場合は2回か3回が目安となります。
逆に5回、10回とやりすぎるのは、、、、悪くはないですが、効率的とは言えないかな?と思います。学習をする際に、いろいろなパターンに触れることも大切です。違う角度からのアプローチを加えることで、理解が進むこともあるので。
ドットインストールではHTML/CSSの「WEBサイトを作れるようになろう」という項目を履修すると良いでしょう。ベースがある状態なので、こちらは1回だけやればよいと思います。
Progateでベースが出来ていれば、ちょっと理解が出来てきた自分に出会うことができテンションが上がります。ここにきてもまったくわからなかった、、、という場合は、もう一度Progateをやることも重要かもしれません。
写経コーディングを行う
ここまで来たらオンラインサービスとの決別です。解約してよいでしょう。恐らく都度ググりながらやって行けば理解できるレベルになっていると思います。
写経コーディングとは、手本となるサイトを見つけ、そこのHTMLコードソースを見ながら、そっくりそのまま入力することです。
ソースコードを表示させるには、手本となるWEBページ上で「右クリック」して「ページのソースを表示」をクリックするだけです。それだけでコードが全て確認できます。
ここですべてのコードの意味を理解する必要はありません。なんとなくでいいので、コードの特徴や癖、使い方をみていきましょう。WEBページのどの部分でこのコードが使われているのか、意識しながらやると効果的です。
模写コーディングを行う
写経コーディングは、2つ3つやれば十分だと個人的には思います。あまりテンションが上がる作業でもないので。。。
写経の次は、模写コーディングです。似ていますが、まったく異なりますし、ここが出来るようになると一気にプログラミングが楽しくなってきます。模写コーディングは、手本となるWEBページを見ながら、自分で一からコードを書いていくことです。その際、なるべく手本サイトのソースは見ないようにしましょう。
同じ表現をするにしても、様々な実現方法がありますから、真似る必要はありません。どうにかこうにか見た目が同じになればまずはOKです。表現できそうにない部分は飛ばしてもOKです。完璧を目指さず、できるパーツからどんどん取り組みましょう。
真似するサイトは、ランディングページまとめサイトから難易度の低いものを選べばいいでしょう。あとは作ってみたい！と思えるページを選択するのもいいですね。ある程度形にできるようになったら、もうプログラマーとして一歩を踏み出したといってもいいでしょう。そのくらいのレベルにまで来ています。
オリジナルのWEBページを作成する
そして、最後はやっぱりオリジナルページの作成です。在宅ワークや副業を考えている方も多いかもしれませんが、その際に必要になるのは実績。ただ最初は実績などあるはずもありません。
そこで重視されるのが「ポートフォリオ」です。正確な意味での実績ではありませんが、「今までこういったページを作成しました」という証明が出来れば、発注側も安心感が芽生えるでしょう。
ただこのオリジナルページを作成する際も、基本は手本となるWEBページをまねて作るのが良いでしょう。すべてを想像してというのは難しいものです。処女作で完璧なものなど期待はできませんから、最初のうちは質よりも数をどんどん増やしていきましょう。
番外編：学習を習慣化させるためのポイント
プログラミングは決して難しいものではありません。言語の中では最も簡単な言語といってもいいでしょう。英語やフランス語を今からマスターするのと、プログラミングをマスターするのでは、圧倒的にプログラミング言語マスターのほうが簡単です。
ただし、継続することに関しては得意な方とそうでない方がいるでしょう。自分でやろうと思ったことは、1年くらい普通に継続できるという方は何の問題なし！ただ、挫折した経験がある方は、以下のポイントに意識しましょう。
- やる目的は明確になっているか
- メリットが具体的にイメージできているか
- 小さなステップを明確にしているか
- 超短期で出来るときたいしすぎていないか
- やめられない環境をうまく作り出しているか
- 学習中に脳が”快”になるように意識しているか
ざっとこのあたりが大切です。細かな部分はまた別の記事にて紹介します。継続するには、根性論ではなく心理学と脳科学に基づき、自分をコントロールすることが大切です。
そう、自分をできる自分にプログラミングするということです！