プログラミングの『写経』で大切なミクロな視点とマクロな視点【初学者向け】

プログラミングの学習方法の1つとして、「写経」があります。

写経とは、既存のソースコードをそのまま書き写す(入力する)行為を指します。

写経の効果については賛否がありますが、私は意識をもってすればメリットのある行為かなと思っています。

今回は、私なりにプログラミング学習における写経のコツについてまとめていきます。

結論からいうと、写経には主に2つのコツがあるかなと思っています。

  • ミクロな視点で理解すること
  • マクロな視点で理解すること

この2つについて、以下で深掘りしていきます。

また、この記事は

  • まっさらな状態からシンプルなHPをつくりたいけど、ムリそう。
  • 基礎学習は終えたけど、実際にHPをつくってみようとして挫折した。
  • インプットとアウトプットのちょうどいい橋渡しがほしい。

などと感じている、主にプログラミング初学者(HTML&CSSの基礎学習を終えたあたり)に向けて共有していきます。

これに当てはまるかたは、ぜひ以下を参考にしつつ「写経」してみてください。

ミクロな視点で理解するには

プログラミングの写経において、まず意識してほしいのが、「なぜこのコードになるのか」「なぜこのようなレイアウトになるのか」というミクロな視点です。

具体的に、HTMLとCSSでHPを写経していく流れを示していきます。

まずはHTMLで記述してみよう

まずは、HP全体ではなく、一部分を切り取ってHTMLファイルを写経していきましょう。(最初はヘッダーのみ、続いてメインコンテンツ、最後はフッターなど)

写経していく中で、「どうしてこのコードを入力しているのか」といったことを常に考えてみましょう。

時間のかかる作業ですが、この理解がないと先に進めません。

また、逐一ウェブブラウザを更新しつつ、どのような感じに表示されているかを確認しながら行うとよいです。

次はCSSで記述してみよう

続いて、CSSファイルを写経していきます。

お手本のサイトと見比べつつ、HTMLだけで記述したものがCSSで修飾するとこんな感じになるのかぁと事前にイメージさせておくことも大切です。

さらに、CSSファイルを写経するときにも、「このコードを入力すると、どのようなレイアウトになるのか」といった視点を忘れないようにしましょう。

さて、CSSファイルの写経を終えたら、お手本のサイトとレイアウトに差がないか見てみましょう。

検証ツールを使ってみよう

では、Google Chrome の検証ツールを使ってみましょう。

この作業がかなり肝腎です。

検証ツールから、先ほど作成した箇所を選択し、Styles からCSSのコードについているチェックボックスに注目してみてください。

チェックマークを付けたり外したりすることで、レイアウトがどのような動きをするのか、タイムリーに確認することができるので、理解がとても深まります。

また、computed からは、その要素の大きさや余白(paddingやmargin)について確認することができますから、こちらも適宜見ておくようにするとよいです。

(paddingやmarginのみならず、box-sizingなどの適用の様子もわかりやすく把握することができます。)

マクロな視点で理解するには

コードを細かく見た後には、少し俯瞰して見てみましょう。

主にHTMLファイルについて、コード全体の大枠を見ていきます。

「これとこれにはなぜ共通のクラスが使われているのか」「どのようにセクション分けされているのか」などに注目しつつ、HPの概観をノートに書いてみましょう。(なぐり書きでOKです)

HPの構成をブロックごとに書いてみれば、頭がスッキリしますヨ。

「こうやってクラス分けをすればいいのか~」などさまざまな気づきもあるはずです。

英語の精読と似ていますね

プログラミングの写経って、英語の精読と似ていると思いませんか?

この英文の構造はこうで、こんな文法事項が使われていて、この形容詞節はこの名詞にかかっていて…(ミクロ的視点)

この段落とこの段落ではでは同じ主張を述べていて、逆にここではまた違った主張を述べている…(マクロ的視点)

個人的には、プログラミングの写経は英語の精読を想起させます。

ひどく手間がかかるし面倒だけど、きっとメキメキ力がつくでしょう。

何度も写経するのはNG

写経をやっていく中で、先人たちの意見を参考にしますと、何度も写経するのはNGといえるでしょう。

写経をとおして、私たちはHPの作り方の大枠を知ることができれば十分なのです。

暗記の必要はありません。
あくまでも手になじませるように。

写経は最大2回までを目安にやっていくとGoodです。



おそらく、プログラミングの写経を思考停止でやっても、時間のムダです。

写経をすることの目的を明確にしつつ、意識をもっておこなうようにしましょう。

写経をとおして、お手本のHPをまっさらな状態からだいたい復元することができるようになれば、ポートフォリオ作成にグンと近づきますネ。

こんな具合で、今回は以上です。