こんにちは、Autumn（オータム）です。
プログラミングを独学で学習する場合、アウトプットの仕方がとても大事ですが、その一つに「写経」があります。
「プログラミングの写経って効果があるの？」
「どんなサイトを参考にすれば良いの？」
「具体的なやり方を教えて欲しい」
こんな声にお応えしていきます。
結論からいうと、「写経」はプログラミングを独学で学習する時に有効な手段です。
私自身、完全独学でプログラミングを勉強し、半年でフロントエンドエンジニア転職しましたが、当時は写経も取り入れて学習していました。
これからプログラミング学習を始める方、すでに始めているけどうまくいかないと感じている方には、特に参考になるかと思います。
それでは、解説していきます！
「写経」はプログラミング独学には有効【ただし条件あり】
そもそも「写経とはなんぞや？」という方向けに一言で説明すると、
「誰かが書いたコードを真似して、そのまま書いてみる」ということです。
「書き写しただけで効果あるの？」と思う方もいるかと思いますが、正しいやり方で実施すれば効果的な勉強法になり得ます。
ただ、写経を学習方法に取り入れる時期は「基礎学習が終えた段階」です。
全くゼロの状態からいきなり写経をしても、「自分が今何をしているのかわからない」状態になるので意味がないし、途中で心が折れます。
フロントエンドの立場からいうと、HTML・CSSの基本知識は理解している状態であればOK。
もし「まだ自分は何もわかってない状態です、、」という方はこちらの記事を読んで基礎の勉強から始めてみましょう。
「写経」を学習方法に取り入れるべき理由
具体的な方法の解説に入る前に、プログラミング独学で「写経」を取り入れるべき理由を4つお伝えします。
「写経」を取り入れるべき理由4つ
・コード構成力を鍛えることができる
・キレイなソースコードが書けるようになる
・ミスを自分で修正をすることができる
・「0→1」の経験をたくさん積むことができる
順に解説していきますね。
コード構成力を鍛えることができる
プログラミングの基礎を勉強した方の次の課題は、
「勉強したことを実際のWEB制作でどう使うのかわからない」
というポイントに集約されることが多いです。
初心者用の勉強教材はわかりやすくするために、部分ごとに解説したものがほとんど。
ただ実際は、それらのパーツを組み合わせて1枚のWEBページを構成する力が必要でして、その「コード構成力」を鍛える入り口として「写経」は効果的です。
他のWEBページのソースコードを真似していくことで、少しずつ全体像を理解できるようになります。また、決められた場所に必要なものを記述するルールも理解できるようになるので実践でも使える知識を得られます。
キレイなソースコードが書けるようになる
他のソースコードを真似していくことで、キレイにコードを書くことができるようになります。
ソースコードをキレイに書くことは現場レベルでもとても重要です。
WEB制作会社に入ると、規模の大きいホームページを複数人で制作することも少なくありません。そんな時、他のエンジニアが見ても理解しやすいソースコードで書くことは作業効率を上げる上でとても重要なことなんです。
まだクセが付いてない初期のうちに、キレイにコードを書くことを意識しておきましょう。
ミスを自分で修正することができる
そのままコードを真似していく「写経」でも、実際に自分の手で書いてみるとどこかで入力ミスを100%起こします。
その場合エラーが発生して、その対処に追われることになるんですが、写経であればお手本があるので、ミスの確認もしやすいです。
エラーを解決できずに２〜3日進捗なし、みたいな非効率なことにならないのも独学での学習に向いているポイントですね。
「0→1」の経験をたくさん積むことができる
「ネット上に掲載されている」ということは、基本プロのエンジニアが作成したものなので、そのソースコードを見れば現場レベルで使われているスキルが何なのか知ることができます。
その中には、今まで聞いたことのない技術にも触れることになるはずですが、その体験にこそ大きな価値があります。
そもそも、「自分が知らない」ということに気づいていなければ、調べるアクションすら起こすことができません。「0を1にする」ことであなたの視野は大きくなり、成長のきっかけになります。
効果的な写経の実践方法
ここからは、写経のやり方について解説していきます。方法はシンプルな３ステップです。
- 写経する参考サイト・ページを選ぶ
- 実際に写経する
- 復習でもう一回書いてみる
この３ステップをいろんなソースコードで実践していきましょう。
写経する参考サイト・ページの選び方
写経するページは正直どんなページでも良いですが、選ぶ際のポイントも少し解説します。
- アニメーションが少なめのものを選ぶ
- 直感的に「かっこいい！」と感じたページから始めるのも良いと思いますが、あまりにも高レベルなサイトを選んでしまうと、わからない部分が多すぎて心が折れます。
なので、アニメーションが少なめで「シンプルなサイトだな」と感じるぐらいのものを選ぶ方が良いです。
- 工業系企業のホームページを参考にする
- たまに健康食品や脱毛系のランディングページなどを参考にしている方もいますが、画像を多用している場合が多く、コーディングする部分が少ないケースがあります。
逆に、工業系企業のホームページは文章・画像のバランスがよく、シンプルな構成で作られていることが多いのでオススメです。
写経する時の注意点
写経するページが決まれば後は実践あるのみですが、注意してほしいことが２点あります。
- 丸暗記をしようとしない
- 同じコードを写経するのは2回まで
丸暗記をしようとしない
プログラミング学習でよくあるミスですが、書いたコードをそのまま丸暗記するのはNGです。
理由はシンプル、意味がないからです。
「すべて覚える」ではなく「使えるのを知る」ぐらいで大丈夫です。詳細に関してはこちらの記事を参考にどうぞ。
同じコードを写経するのは2回まで
写経が効果があるのは、最初の1回目と復習の2回目までで、それ以降は内容もほぼ覚えてし待っているのであまり意味がありません。
もし3回目をするのであれば、ソースコードを見ずにコーディングしてみましょう。
実際の業務では、デザイナーからもらったデザインデータを参考にコーディングしますので、その練習にはなります。
写経による学習の次にすること
無事お手本通りにコーディングすることができたら、次に自分なりにカスタマイズをしてみましょう。
・CSSで配色を変えてみる
・Javascriptでアニメーションを追加してみる
などなど、簡単なもので構いません。
「こうしたらどうなるのかな？」と思ったことを実践してみることで深い学びを得ることができます。
また、写経したデータを家族や友人に見せて感想をもらうのも効果的ですね。
自分のモチベーションアップにもなるし、第３者目線の意見から有益な改善策を得られる場合もあります。
正しい方法・手順で勉強しましょう
「プログラミングの写経」はしっかり考えながら実行することで様々なメリットを得られる勉強方法です。
独学でエンジニア転職を目指すことは簡単ではありませんが、一つ一つ着実に積み上げてスキル向上を目指しましょう。
最後に、独学半年でエンジニア転職するためのロードマップを作成しました。学習スケジュールが定まってない方は参考になると思いますので、ぜひ読んでみてください。
最後まで読んでいただき、ありがとうございました！
