プログラミングを勉強中のみなさん、こんにちは！
今回は、模写コーディングに必要な、なおかつ便利なGoogle拡張機能を御紹介します。
Google拡張機能を使うとコーディングがスムーズにいきます。
そして、自分の知識が増えてとても勉強になります。
それでは見ていきましょう。
目次
模写コーディングとは
模写コーディングとは、実際のWebサイトをそっくりそのまま実装することです。
なぜ、そんなことをするのか、というと、
実務に近い作業を想定できるからです。
私もそうですが、スクールや参考書で「ふむふむ」と理解したつもりでも、
この模写コーディングをいざ始めると、急に手の動きが鈍ります。
「あれ、これはどうやるんだっけ？」
「うまく表示できない・・・」
などなど、
とにかく調べる時間が多くなり、
「学習したことが全然身についてない・・・」
と錯覚に陥るほどです。
そして、
「これが本当のお仕事だったら、絶対納期に間に合ってない」
と実感できるのです。
しかし心配はいりません。
これも慣れです。
複数こなすうちに、コードのイメージが、パッパッパと浮かぶようになります。
手の動きがスムーズになります。
おすすめGoogle拡張機能
前述のように、「最初はつまずくであろう」模写コーディングを助けてくる、
Google拡張機能を御紹介します。
言うまでもありませんが、ブラウザはChromeを使用する前提です。
Image Downloader
これは、サイトの画像を一度にまとめてダウンロードできる機能です。
一つのサイトに数多くある画像を右クリックで「名前をつけて保存」、
なんていちいちやってられません。
このように、画像の一覧が出てきますので、「Select all 」にチェックを入れて、「Download」ボタンを押すと、自動的に全ての画像のダウンロードが始まります。
ColorZilla
ColorZillaは、色の値を取得できる便利な機能です。
起動させると、画像のようなバーが出現します。
それと同時に、マウスカーソルが十字カーソルに変わります。
その十字カーソルを置いた箇所の色の値を取得できる便利な機能です。
色の表記であるrgbの値、＃〜の値、両方表示されます。
そして、クリックすると、その色の値をコピーできる優れものなのです。
さらに、選択した要素の width と height も取得できちゃうんです。
色の値は見た目ではわからないので、こんな簡単にできちゃうととっても便利です。
Page Ruler Redux
これはサイト上で、自由に選択した範囲の width と height の値を取得できるんです。
クリックして起点を決めて、そこからドラッグして選択範囲を自由に決めます。
これで目的要素の高さや幅を計測できるのでスーパー便利です。
WhatFont
こちらは、サイト上の文字の上でクリックすると、画像のようにフォントの情報を全て取得できます。
まとめ
模写コーディングは難しそうに感じますが、
これらの機能を使えばスムーズにに進めることができます。
自分の知識が深まりますし、調べる力もつきます。
拡張機能を有効に使って、効率のいいコーディングをしましょう。（って全然偉そうなことは言えませんが・・・・）
他にも便利な拡張機能があるかもしれませんが、ひとまず私はこの４つで不便なくやれています。
もし、「こんな機能あるよ」、と教えてくれる優しい方がいたら是非アドバイスください。
それではみなさん、共にプログラミング学習頑張りましょう。
