効率的な勉強方法はないものか…
このような疑問に答えます。
「どうしてもプログラミングの勉強が続かない…」、「モチベーションが上がらない…」という人向けにも救済方法を紹介します。
独学でHTML・CSSを効率的に勉強法する方法は「模写コーディング」
タイトルにもあるように、HTML・CSS（以下”マークアップ言語”と表記）を独学で勉強する一番効率のイイ方法は、「模写コーディング」です。
「模写コーディング」とはどういったものかザックリ説明すると…
なぜ、「模写コーディング」が効果があるか
ザックリ次の要素をする時間を削除して、勉強効率の最適化をします。
- 「どんなサイトをつくろっかな～」と考える時間を削除
- サイト構成を考える時間を削除
- デザインや配色などを考える手間を削除
- 文章を考える手間を削除
- アニメーションなどの動きを考える手間を削除
「どんなものを作ろっかな～」って考えるのは楽しいですよね。でも、コーディングできないと話になりません。
それと、「Webサイトを作れるようになろう」としているということは、コーディング・デザイン・文章などのノウハウが乏しい状態ではないですか？
そういう状態で作ったものって、1ヵ月後に見返した時に「なんでこんなもの作ったんだろう…」と思うはずです。
上で挙げた一覧に書かれていることを考えるのは次のステップです。
模写コーディングをする方法
準備することは2つあります。
- マークアップ言語を書くための環境作り
- インターネットが使える環境
以上。
1.マークアップ言語を書くための環境作り
この記事を読んでいる人は、もうできている人が多いと思います。
2.インターネットが使える環境
Webサイトをこれから作るのに、これができていない人はたぶんいないですよね…(;^_^A
模写コーディングをするための具体的な方法
模写コーディングする為には、3ステップでできます。
- 模写コーディングするページを開く
- Webサイトを開いているブラウザでデベロッパーツールを開く
- Webサイトとデベロッパーツールを見ながら、実際に自分でコーディングしてみる
私も初めはこの方法で勉強しました。
模写コーディング用のツールとかありますが、ぶっちゃけいらないです。導入の手間もかかるし、模写コーディングでの勉強が終わったら「無用の長物」となるだけです。
1.模写コーディングするページを開く
まずは、普段使っているブラウザで「こんなページを作ってみたい」と思うページを開いてみてください。
※最初はLP（ライディングページ）あたりが作りやすいかと思います。
2.Webサイトを開いているブラウザでデベロッパーツールを開く
ChromeやInternet Explorer、Microsoft Edge、Firefoxを使っている人は多いと思います。今開いているブラウザが先ほど挙げたものだったら、「F12」キーか、右クリックの「検証」又は「要素の検証」をクリックしてみてください。
※safariの場合は下記を参照
コードが書かれた窓が開くはずです。
このデベロッパーツールは実際の開発でも使用することが多いので使い方を慣れておくのも大事ですよ。
3.Webサイトとデベロッパーツールを見ながら、実際に自分でコーディングしてみる
あとは手を動かすだけです。
参考にしている画像とかは、自分の勉強用に使う分にはコピーして使っても問題ないです。
プログラミングの勉強はモチベーションがすごい大事
ここからは、「モチベーションが維持できない…」という人や「プログラミングの勉強もうムリ～」という人向けに、プログラミングを勉強する上で大切なメンタル面の話をです。
上で紹介した模写コーディングで勉強効率が上がっても、気持ちが乗らないと苦痛になっちゃいますよね。
そこで、次の２つの方法をおすすめします。
- モチベーションを維持する方法：市場価値を知る
- プログラミングの勉強に行き詰ったら：オンラインサービスも検討してみる
順番に説明していきます。
モチベーションを維持する方法：市場価値を知る
「自分の実力が今どの辺りか」ということを客観的に知ることができれば、ちょっとモチベーションが上がりませんか？
どうやって知るかと言うと、クラウドソーシングサイトで知ることができます。
- クラウドソーシングサイトの検索欄に勉強しているプログラミング言語や「習得したときにやりたいと思っていること」などを入れる
- 検索結果の中から「今の自分なら何だったらできそうかな～」という目線で案件の詳細欄を見る
- 「これならできる」と思った案件の報酬額が自分の市場価値
この方法で自分の市場価値が探ることができます。思い切って「できそう」と思った案件を受注してみてもイイかもしれませんね。
なんだかんだ実践が一番身につきますから…
有名なクラウドソーシングサイトのリンクを貼っておくので、そのサイトで検索してみてください。
※登録しなくても見れる案件が結構多いです
プログラミングの勉強に行き詰ったら：オンラインサービスも検討してみる
私がプログラミング学習をしていて思ったのが「ゴールの見えない地平線をただひたすら前に進む感じ」でした。
そんなときに使えるのが、オンラインプログラミングスクールです。
転職をサポートしているスクールもあるので、勉強はもちろんですが、「その後」のこともついでにやっちゃえるので効率的ですね。
まとめ：時間もお金も自分への投資
プログラミングはスキルなので、習得して絶対無駄にはなりません。
しかも、各業界でシステム化が進んでいるので将来性も抜群と言えます。フリーエンジニアとしてもたくさんの仕事が溢れていますので、将来への選択肢は増えますね。
プログラミング学習はとにかく独学だとしんどいと思うことが多いと思います。私もそうでした。
そういう時は、上で紹介した方法や「エンジニアの人と話してみる」などしてモチベーションを上げることをした方がいいです。
プログラミングの勉強には時間もかかるし、プログラミングスクールはお金もかかります。
でも、その先の将来性（給料やキャリア）と天秤にかけると、やる価値は十分にあると思いますよ。
