こんにちは、まつもとです。
今日は久しぶりのブログ更新です。本当はもっと頻繁に更新したかったのですが、きれいな文章やまとまった文章を書かなきゃと意識しすぎてなかなか記事が書けませんでした。^^;
これからはもっとたくさん更新できるよう、自分の思ったことや行ったことが素直に伝わるような文章を書いて、あまり気負いすぎず書くようにしようかなと思っています。
さて、本日はプログラミング学習日記②。私がここ最近行っているサイト模写について書いていきます。
まだサイト模写をし始めて数日しか経っていないのですが、ここまでの過程を記録しようと思います。同じ初学者の方の参考になるものが少しでもあれば嬉しいです。
それでは、以下のような順番で書いていきます。
- どのサイトを模写したか？
- サイト模写の進め方
- サイト模写したあとは？答え合わせの方法
- 写経について
- サイト模写に役立つ便利ツール
エンジニアの方のブログやYoutubeをいくつか参考にさせていただき、サイトを選びました。初めて自力で模写をしたのがこちらの入浴剤のWebサイトです。
kneipp（クナイプ） （https://www.kneipp.jp/lp/yuzu/）
こちらは画像多めで、模写するには非常にやさしいレベルだと思います。私もこれまで学んだことを書籍で復習したりググったりしながらでしたが、割とスムーズに模写することが出来ました。
実はこちら挑戦する前に別もWebサイトを模写したことがありますが、難しくて断念してしまいました…。
そのサイトは、とあるブログで初心者で模写する人にオススメと紹介されていたのですが、それすら超初心者の私には難しく、「私ほんとにこれが出来るようになるのか…？」みたいなネガティブな気持ちになってしまいました。
でもプログラミング学習を挫折するのだけは絶対に嫌なので、もっと簡単なものから挑戦していこうと考え、「模写 初心者 簡単」のようなキーワードでググった結果、上記のkneipp（クナイプ）にたどり着いたのです。
サイト模写の進め方
私が行ったサイト模写の手順はこんな感じです。
- PCに新規ファイルを作成。そのなかにindex.htmlファイルをつくる。
cssファイルを作成し、そのなかにstyle.cssファイルをつくる。
imagesファイルを作成し、そのなかにサイトに使われている画像を保存。 - 画像の保存には”Image Downloder”という拡張機能を使い、一括で画像保存。これほんとに便利です。
- 上記で保存できなかった画像はディベロッパツールのsourcesから個別に保存。
- 自力でコードを書いてサイトを完成させてみる。
実際のサイトを見て、自分なりに「ここをdivで囲んで～。ここはfooterで～。」とか考え、コードをうちはじめました。
分からないところはこれまでに利用した書籍を参考にしたりググったりして、できるだけ本物のサイトそっくりになるよう頑張りました。どうしてもそっくりにならない部分もありましたが…^^;
（書籍については以前「プログラミング学習日記①」で紹介しましたので、もしよければご覧ください。）
サイト模写をしたあとは？答え合わせの方法
さて、なんとか自力で模写をしたあとは答え合わせです。
ディベロッパーツールをを開いて実際のサイトはどんなコードでできているのか、確認しました。
超初心者の私はこんな風に実際のコードが見れるとは知らなくて、なんて便利なんだと驚きました。プロの方からしたらきっとそんなん当たり前って思われるでしょう^^;
また、自分のうったコードと実際のものがあまりにも違いすぎてさらに驚きました(笑)
でも初めてなのでOKとします！大事なのは、模写したあとに知らないことをどれだけたくさん吸収することが出来るかだと思います。
写経について
実際書かれたコードを確認したあとは、より理解を深めるために写経をしています。ちょうど今日から始めました！
ここでいう写経とは、実際のWebサイトのHTML/CSSを書き写すことです。
上記の通りディベロッパーツールでコードを確認できたので、今度はそれを自分の手でエディターに書き写していきます。
書き写すといっても、思考停止してただ手を動かすだけではダメだと思います。
このタグにはどんな機能があるのかとか、なぜこんな風に書かれているのかとか、これとこれに同じclassをつけてcssで装飾するのねとか、考えながら写していきます。
この作業をし始めて私が感じたメリットは以下の通りです。
- プロのコードの書き方、idやclassの付け方などが理解できる。
- きれいで見やすいコードの書き方を学べる。
- 自分の手でコードを書くことで理解が深まる。
- 新しい知識をどんどん吸収できる。
作業を進めるなかで知らないタグなどがたくさん出てきますので、私はその都度ググってます。そして次にそのタグを使うときにスムーズに使えるように、学んだことを簡潔にまとめてWordに保存しています。自分専用のプログラミング辞書を作るイメージです。
こうすることで後で見直せるし、ぼんやりと「あの時こんなことをWordメモしたよなぁ」くらいにとどめておけばいいので楽です。そもそも私には記憶することは無理なので、この方法にしました(笑)
サイト模写に役立つ便利ツール
最後に、私がサイト模写をするときによく使っている便利ツールを3つご紹介します。
これらはすべてGoogle Chromeの拡張機能で、無料で利用できます。
- Image Downloader
- ColorPick Eyedropper
- Page Ruler Redux
まずは①のImage Downloaderについて。こちらは上記にも記した通り、サイトに使われている画像を一括で保存できるというツールです。1つ1つ保存していく必要がないので本当に便利です。
ただ、繰り返しになりますが一部このツールで保存できない画像があるので、その場合はディベロッパーツールのsourcesから画像を個別で保存しました。
次は②のColorPick Eyedropper。こちらはサイトの背景や文字の色が一発で分かるという便利ツールです。
使い方は簡単。この拡張機能を開いて、色が知りたい文字や背景などの上にカーソルを合わせるだけです。
ディベロッパーツールからも色を調べることはできるのですが面倒ですし、他の部分のコードも見てしまって自分でコードを書いてみるという挑戦の妨げになるような気がします。
最後は③のPage Ruler Redux。こちらはWebサイト上のあらゆるものの大きさが測れる便利ツールです。
例えば、このロゴ画像の横幅と縦幅が知りたいなって時も、これを使えば一発で分かります。
おわりに
さて、本日はサイト模写について書いていきました。
これからも日々の学習についてブログを書いていこうと思います。（たまにはプログラミングに関係のないことも書くかもしれません^^）
朝晩が寒くなってきたので皆さま風邪には気を付けてください。
最後まで読んでいただいてありがとうございました！
