こんにちは。さすをです。
過去に模写を10回行った経験があります。
今回の記事では「プログラミング模写をするとレベルが格段に上がります【経験談】」を5分間でお話します。
それでは本文をどうぞ。
Web制作独学の全手順も知りたい方は【初心者向け】滅茶苦茶わかりやすいWeb制作独学の始め方！|【最短距離で収益化できます】の記事を合わせてご覧ください。
※０円のプログラミングスクールという近道
最近はプログラミングスクールも増えており、最初の基礎を身につけるならTechAcademyの方が早い可能性があります。TechAcademyは１週間の無料体験があるので、これを使ってWebアプリケーションの基礎を学ぶのもありだと思います。
TechAcademyの無料体験はこちら
1.プログラミング模写をするとレベルが格段に上がります
Progateやドットインストールなどのプログラミング学習サービスや書籍での学習を終え、次に行うステップとして「プログラミング模写」があります。
プログラミング模写は想像よりはるかに難しく挫折率も高いですが、
- 今までに味わえなかった「自信」
- 実績となる「成果物」
- 自分に足りない「スキル」
を知ることができます。
また、模写が出来るようになると、自作のポートフォリオを作成できるようになったり、実際にお金を稼げるレベルまで近づくことができます。
僕は模写を終えたことで、サイトの構造をより深く理解することができました。
また、自作ポートフォリオを作る際にかなり役に立ちました。
ここでは、僕が模写をするうえで注意したこと、挫折しないためのおすすめの方法を紹介していきます。
2.プログラミング模写とは
プログラミング模写とは、既存サイトと瓜二つのもの(可能な限り)を作ることです。
例えばこんな感じです。
さすを(筆者)の模写：
実際のサイト：
バンコクのノマドエンジニア育成講座
http://isara.life/
多少時期が違うので文言は異なりますが、こんな感じですね。
それでは、イメージが付いたと思うので進めていきましょう。
3.プログラミング模写が必要な理由
プログラミング模写が必要な理由１．アウトプットの場になる
プログラミング模写が必要な理由の1つ目はアウトプットの場になるからです。
プログラミング業界において、【インプット3：アウトプット7】とよく言われます。
そして、プログラミング模写はアウトプットに最適な場です。
Progateやドットインストールなどのオンラインプログラミング学習サービス、教材を用いてインプットした知識を「プログラミング模写」という形で、アウトプットすることで知識を定着させることができます。
アウトプットを通して、木刀から真剣にレベルアップさせるイメージですね。
また、プログラミング模写を行うと自分の苦手分野や作業時間を知ることができるので、実案件や目標の再設定に役立ちます。
プログラミング模写が必要な理由２． 調べる力(ググり力)が向上する
プログラミング模写が必要な理由の2つ目は、調べる力(ググり力)が向上するからです。
この調べる力(ググり力)、プログラミングで最も大切なスキルと言っても過言ではありません。
現役システムエンジニアや、フリーランスで働いている人はプログラミングに精通していると思っているかもしれませんが、必ずしもそんなことはありません。
むしろ、調べまくっています。断言できます。
なぜ調べることが大切なのか？
それは、調べることがうまくなると作業効率が大幅にアップするからです。
- 「どのようなことがわからないのか」
- 「どのように調べれば知りたい答えを知ることができるか」
これらのことがすぐにわかれば、解決に時間がかからないのは容易に予想できますよね。
でもこれは、数をこなすしかありません。
プログラミング模写は、稼ぐうえで必要な「調べる力」を養うことができる最強のアウトプットです。
プログラミング模写が必要な理由３． 成果物ができる
プログラミング模写が必要な理由の3つ目は、成果物ができるからです。
正直に言って、成果物が何もない人に案件をお願いする可能性はほぼ0％です。
もしあなたが発注者の場合、
- やる気はめちゃくちゃあるけど何も作ったことがない人
- やる気は人並みだけど成果物を持っている人
がいた場合、どちらに発注しますか？
僕だったら、「やる気は人並みだけど成果物を持っている人」に発注します。
「育成に力を入れている」「お金に余裕があって失敗されてもいい」といった、やる気が最重要の超体育会系の方なら話は変わってきますが、ほとんどの方が後者の人に発注すると思います。
つまり、
プログラミングで稼ぐためには成果物は絶対に必要
です。
そして、プログラミング模写は1つの成果物になります。
実績がない方は、プログラミング模写をして成果物を作っておくことが必要です。
4.プログラミング模写は想像以上に難しい
悲報ですが、プログラミング模写は想像以上に難しいです。
そして模写ができず挫折、プログラミング学習をやめてしまう人もたくさんいます。
ぼくはここで3回挫折しました。（笑）
では、なぜ難しく感じるのか。
それは、
- 知識が圧倒的に足りない
- 道しるべがない
からです。
Progateやドットインストール、また教材での学習でプログラミング模写を完璧に行うことができたら、そこら中Webエンジニアだらけです。
やはり学習サービス、学習教材には限界があります。
なぜならプログラミングは膨大な書き方があり、さらに、プログラミング業界は常に移り変わりが早いからです。
ですので、模写を始めてみて知らない書き方や知らないコードが出てくるのは日常茶飯事です。
「知らないことを理解しながら書き進めていく」ことが大切です。
また、模写には道しるべがありません。
プログラミング学習サービスや、プログラミング学習教材では、分からない場合は「ヒント」や「答え」を見て進めていけば解決することが出来ます。
しかし、模写にヒントや答えはありません。(厳密にいえば検証機能でコードを見る事が出来るが解説はない。)
したがって、壁にぶつかった場合は自分で調べて解決する必要があります。
上記でも上げましたが、まだ調べる力(ググり力)が乏しい状態なので、根気よく調べていく必要があります。
これらのことから、模写は想像以上に難しいです。
もし、学習するうえで挫折をできるだけしたくないのであれば、書籍を購入しておくことをおすすめします。
おすすめのWeb制作書籍は以下の記事で解説しているので、参考にしていただけたらと思います。
>>【まとめ】フリーランスでWeb制作はもう安心！おすすめの本6選
5.プログラミング模写の手順
プログラミング模写を行う手順は３ステップです。
- 模写したいサイトを見つける
- 使われている画像をダウンロード
- エディタでコードを書き始める
たったこれだけです。
一つずつ深堀していきます。
5-1.模写したいサイトを見つける
1つ目の手順として、模写したいサイトを見つけましょう。
なぜなら、「こういうサイト、つくってみたいな」という気持ちがあれば、やる気が持続しやすいからです。
サイトによってもちろん難易度はありますが、大して変わらないのであまり気にしなくていいです。
「作りたいサイトはないけれど、模写を始めたい」
と思っている方もいらっしゃると思うので、おすすめのサイトをピックアップしておきます。
バンコクのノマドエンジニア育成講座
http://isara.life/
FLOWER かわいいが届く、ずっと無料*のお花便
https://flowr.is/
airbnb
https://www.airbnb.jp/
5-2.サイトの画像をダウンロードする
2つ目の手順は、「サイトの画像をダウンロードする」です。
画像のダウンロードの方法ははにわまんさんの記事に詳しく書いてあるので、参考にしてみて下さい。
Webサイトをコーディング模写するやり方と使用するツール
https://haniwaman.com/replication-coding/
画像がダウンロードできない場合は、似ているものを用意しましょう。
同じ画像、似ている画像を用意することで、「実際に模写できている感覚」をより深く感じることができます。
模写は想像以上に精神を削るので、ここで少しでもモチベーションを上げておくことが大切です。
5-3.エディタでコードを書き始める
3つ目の手順は、「エディタでコードを書き始める」です。
ここまで来られた方は、すでに必要なものはすべてそろっているので、あとは書き始めるだけです。
学習してきたことをふんだんに生かしてコードを書きまくりましょう。
ここでの目的は、実際に制作物を完成させるということです。
フォントや、文字の大きさなどは深くこだわらなくていいです。
「寸分の狂いもなく」というよりかは、「雰囲気を似せていく」イメージで進めていきましょう。
6.プログラミング模写を挫折しないためのおすすめのやり方
6-1.ボディー→フッター→ヘッダーの順で取り掛かる
これは模写をするうえで僕が一番お勧めする方法です。
なぜこの順をお勧めするかというと、
ヘッダーが一番難しいから
です。
ヘッダーは、言わばそのページの顔です。
顔にこだわるのは当然ですよね？
そんなこだわりが強いヘッダーは模写の中で一番難しいパーツです。
ヘッダーから進めていって詰まった場合、
ヘッダーできない→何もできてない→自分には才能がない→挫折
のループをたどってしまいます。
ここで伝えたい事は、「上から進める必要はない」ということ。
そこでおすすめなのがボディー→フッター→ヘッダーの順で取り掛かること。
なぜなら、ボディーは同じような規則で成り立っていることが多いからです。
例えば先ほど紹介した、FLOWERのサイトは以下のような構成になっています。
似たような構成になっていることがとわかります。
また、面積が大きいので心理的にも効果的です。
「マラソン大会のラストパート」みたいな感じですね。
終わりが見えていれば、気合で乗り切れたりしますよね。
なので、規則性が多く広範囲のボディー→フッター→一番難しいヘッダーの順で行うことがおすすめです。
6-2.完璧を求めない
メンタル的な話になってしまいますが、完璧を求めないことが大切です。
プログラミング初学者は特に完璧を求めがちです。
完璧を求めることは悪いことではないし、忘れてはいけない大切な心構えです。
しかし、完璧に作り上げられるほど、今のあなたに力はありません。
辛辣ですが、このように思っていた方がいいです。
なぜなら、模写は上記でも挙げた通り、挫折率が非常に高いからです。
ですので、「完璧にできなくて当然」と胸に刻んでおいてください。
最初は6割から7割できたら上出来です。
大切なのは、どこでつまずいたのかを理解しておくこと。
この気持ちを忘れなければ、どんどん次に進んで大丈夫です。
僕は初めての模写の時は5割もできませんでした。
プログラミングの世界では、「質より量」なのか「量より質」なのかよく議論されますが、僕は間違いなく「質より量」だと思っています。
量をこなすにつれ、以前分からなかったことがわかるようになり、模写のクオリティも上がったのを覚えています。
また、プログラミングで年間1,800万円稼いだことのあるマナブさんも「質より量」が大切とおっしゃっています。
【圧倒的】質vs量 ←大切なのは、完全に「量」です【鬼作業セヨ】
https://www.youtube.com/watch?v=Nwm4L3pRung
まずは完璧を求めず、数をこなして経験値を上げていくことが大切です。
7.おわりに
プログラミング模写をするとレベルが格段に上がる話をしていきました。
プログラミング模写は簡単ではないですが、実際に稼ぐために必要な要素がたくさんあります。
ぜひ、紹介したおすすめの方法を用いて成果物を量産していってください。
頑張るあなたを応援しています！
それでは！
>>【徹底解説】副業でプログラミングとWebデザインならどっちがおすすめ？【魅力度の高い方を選ぶべし】
>>【初心者向け】滅茶苦茶わかりやすいWeb制作独学の始め方！|【最短距離で収益化できます】
コメント