「プロゲートの次は何をすればいい？」
「模写コーディングって難しい」
「模写コーディングの具体的な手順とやり方を知りたい」
学習サイトを終了した人には、このような疑問があるでしょう。
大手プログラミングスクールでは、興味があるものを作るべきと紹介しています。
しかし、模写コーディングに必要なものがわからない人が多いのではないでしょうか。
本記事では、JavaでWebアプリの開発経験がある私が、以下の内容を紹介します。
- 模写コーディングの基本
- 模写コーデイング超初心者が行う2つの準備
- 模写コーディングの見本に最適な2つサイト
- 模写コーディングを行う6つの工程
- 模写コーディングで超初心者が成果を出す3つのコツ
超初心者が模写コーディングを行うには、自分でコードを書く環境を準備しなければなりません。
本記事を参考に、Webアプリの開発にチャレンジしましょう。
なお、転職保証付きプログラミングスクール DMM WEBCAMPでは、カリキュラムに模写コーディングが含まれているコースがあります。コーディングのやり方がわからなくても成果物の作成までサポートしてくれるため、タイピングができれば問題ありません。
プログラミング転職に興味がある人は以下のボタンから詳細を確認してみてください。
模写コーディング超初心者が知っておくべき2つのこと
模写コーディング超初心者は以下の2つだけ覚えておきましょう。
- 模写コーディングとはデザインの学習方法
- 模写コーディングを行うために必要なもの
それぞれ詳しく説明します。
模写コーデイングとはデザインの学習方法
模写コーディングとは、WebサイトやWebアプリのデザインを真似する勉強方法です。レイアウトや色合いなどを学習するのに役立ちます。
ユーザーに寄り添ったデザインを習得するには、すでに稼働しているサイトを参考にするのが一番です。人に愛されるデザインを習得したい人に向いている学習方法といえます。
コーディングは自力でプログラミングする際に使われる言葉です。
模写コーディングを行うために必要なもの
エディタとは、コードを書くためのソフトウェアです。
模写コーディングを行うには以下のものを準備します。
| 模写コーディングに必要なもの | 模写コーディングに必須のスペック・ツール | 費用相場 |
|---|---|---|
| パソコン | 8GB以上 | 10万円～15万円 |
| ネット環境 | ネットサーフィンできるなら問題なし | 契約による |
| 画像を一括で取得するツール | image downloader | 無料 |
| エディタ | サクラエディタ | 無料 |
Image downloaderは、Google Chromeの拡張機能です。サイトにある画像を一括でダウンロードできます。コーディングに時間をかけたいなら導入しましょう。
サクラエディタは、コードを書いて保存するまでの操作がシンプルなため、これからプログラミングを始めたい人にもおすすめの方法です。
模写コーデイングはパソコンとインターネットがあれば無料で始められます。
模写コーディング超初心者が行う2つの準備
模写コーディングには、以下の2つをネットからダウンロードする必要があります。
- Image Downloader
- サクラエディタ
Image Downloaderと、サクラエディタは、ネットがつながっていれば今すぐダウンロード可能です。
この2つは模写コーディングに必須です！
それぞれのダウンロード方法を紹介します。
1.Image Downloaderを設定
Image Downloaderのダウンロードから設定まで紹介します。
まずは、Google chromeを立ち上げます。
検索窓にimage downloaderと打ち込み検索します。一番上にあるImage Downloader-Chrome ウェブストアをクリックしましょう。
Image Downloaderと同じタイプの拡張機能が一覧で表示されます。今回はImageyeを選択してください。画像左の紫色タイルです。
画面が切り替わったら、青色のChromeに追加を押しましょう。
再度、機能を追加を押してください。
追加されると画面が切り替わり、ピン止めをおすすめされます。拡張機能を選択し、ピン止めしてください。スキップを押すと画面が切り替わります。
試してみるで機能捜査に移行します。ダウンロードされたため、ここでサイトを閉じても問題ありません。
2.サクラエディタをインストール
サクラエディタをインストールする方法を紹介します。
Google Chromeでサクラエディタと検索します。一番上にあるサクラエディタのサイトをクリックしましょう。
サイト下部にあるインストーラー、パッケージダウンロードをクリックしてください。
上から3つ目あたりにある、インストーラーをクリックしダウンロードします。
上記の写真では、sakura-tag-v2.4.2-build4203-a3e63915b-Win32-Relesase-Installer.zipがインストーラーです。
ダウンロードが確認したか右上を見て確認しましょう。↓マークをクリックして一覧表を表示します。
先ほどダウンロードしたサクラエディタをクリックしましょう。
アプリケーションとなっているはずです。
選択し、すべて展開をクリックします。
場所を指定します。そのままでかまいません。
名前の後ろが.exeに変わります。ダプルクリックしインストーラーを起動します。言語が日本語になっていることを確認してOKをクリックしましょう。
次へをクリックします。これからは基本的にそのままクリックしていけばOKです。
セットアップ画面が出ます。次へをクリックしましょう。
インストール先の選択画面が出ます。そのまま次へを押しましょう。
インストールするコンポーネント選択画面が出てきます。そのまま次へをクリックします。
設定保存方法の画面も次へをクリックします。
スタートメニューフォルダの設定も次へをクリックします。
追加タスクの編集も変更せず次へを押しましょう。サクラエディタを頻繁に使うなら、上から4つ目にある、ディスクトップ上にアイコンを追加する（D）にもチェックを入れます。
最後にインストールボタンを押します。
上記の画面が出てきたら終了です。無事サクラエディタがインストールされました。
模写コーディング超初心者に紹介する6つの工程
実際の模写コーディングは以下の順番で進めます。
- 模写するサイトを決める
- お手本のサイトを自分なりに分析する
- コーディング時間を自分で予測する
- コーディングの準備を済ませる
- コーディングを始める
- 予測した時間が経ったら評価する
それぞれ詳しく解説します。
1.模写するサイトを決める
最初に模写するサイトを決めます。
超初心者なら、以下のサイトを参考にコーディングしてみましょう。
上記の2つはかなり初歩的なサイトです。このサイトで自信をつけましょう。
2.お手本のサイトを自分なりに分析する
自分が持っている知識に当てはめて模写するサイトを分析しましょう。サイトのデザインはHTMLタグのbodyで決定しています。
bodyは上段・中段・下段で区分けされているため、以下を参考に構成の予測を立てます。
| bodyの中にあるHTMLタグ | HTMLタグの役割 | 作業者がやること |
|---|---|---|
| <header></header> | サイト上部のエリアを担当する | メニューを組み込む |
| <main></main> | 汎用的なタグbodyの中にある中間のエリアはこれでほとんど作られる | divを使ってレイアウトを考える |
| <footer></footer> | サイトの一番下にあるエリア | ボタンを組み込むことが多い |
サイト構成の分析はheader・main・footerの割り当てが重要です。とくにmainの分析に時間をかけます。
イメージがつかめたら、紙に書き出してみましょう。
3.コーディング時間を自分で予測する
構成の予測を立てたら、制作時間の予測を立てます。超初心者ならどれだけ早く作れても10時間ほどはかかるでしょう。
はじめは、10〜15時間で予想してみてください。
4.コーディングの準備を済ませる
コーディングを始めるには模写コーディングしたファイルを保存する場所を準備しましょう。
私はdemoという名前で、デスクトップに保存しています。
demoの中身は上の画像になっており、CSSファイルにはstyle.css、imagesには画像を格納しています。
構造をまとめると以下のとおりです。
- CSS
- style.css
- images
- ○○.png
- ○○.png
- index.html
簡単なコーディングなら、この構造で対応できます。
模写コーディングはサイトごとにファイルを作りましょう！
5.コーディング開始
コーディングを始めます。
HTMLには、どんなプロジェクトでも必要なコードがあります。以下がその例です。
| 必ず記述するもの | 実際のコード | 必要な理由 |
| 文字コード | <meta charset=”utf-8″> | 書かないとWebサイトが文字化けする |
| 外部ファイルのCSS読み込み | <link rel=”stylesheet” href=”○○.css”> | HTMLに記述しないと、CSSに書いたデータが使えない |
上記の準備が終わったら、模写していきます。bodyはheader・main・footerに部品を配置する感覚でOKです。予測した時間まで作業を進めましょう。
6.予測した時間が経ったら評価する
時間が経ったら自分のレベルを評価します。評価はノート・Excel・スプレットシートにまとめておくといいでしょう。
評価指標は以下のとおりです。
| 模写コーディング終了後にチェックすること | チェックする理由 | 記録例 |
| 制作にかかった時間 | 次回以降の成長度合いを評価するのに使う | 制作に○○時間かかった。 |
| 学習したけど忘れていたこと | 復習が必要なスキルの洗い出し | itemの機能を忘れていた。 |
| まったく知らなかったこと | 調べて次に活かすため | sectionタグ 独立した文章に使うもの |
徹底すれば、1ヶ月で簡単なサイトが自作できます。後で見返してわかるようにまとめましょう。
模写コーディング超初心者が挫折しない3つのコツ
模写コーディングで成果を出すには3つほどコツがあります。
- まず3割の完成度を目指す
- 制作時間は予測の2倍近くかかる
- ソースコードを見て真似する
それぞれ詳しく説明します。
1.MAX7割の完成度を目指す
模写コーデイングの完成度は7割を目指して始めましょう。初心者が9割の完成度を目指すと挫折します。
おおよその指標は以下のとおりです。
| 模写コーデイングの完成度 | 完成度から予測するコーディングのレベル |
| 9割 | 現役のWebエンジニア（ツール使用無） |
| 8割 | 新卒エンジニア（ツール使用無） |
| 7割 | コーディング上級者 |
| 6割 | コーデイング中級者 |
| 3割 | コーディング超初心者 |
模写コーディング超初心者が達成できるのは、現実的に考えて7割が限界です。
まずは、3割を目指して学習しましょう。
2.制作時間は予定の2倍近くかかる
模写コーデイングは、想定期間の2倍以上かかります。予定にゆとりをもって取り組みましょう。
目安は以下のとおりです。
| サイトや経験者が話すサイトの模写時間 | 初心者が実際にかかる作業時間 | 実際の制作期間 |
| 2時間 | 4時間 | 1週間 |
| 5時間 | 12時間 | 2週間 |
| 10時間 | 21時間 | 1ヶ月 |
| 20時間 | 45時間 | 2ヶ月 |
サイトの複雑さやプログラミングの理解度によって大きく変動します。超初心者は最低でも2～3倍くらいかかるのが普通と考えて、気軽に作業をしましょう。
3.ソースコードを見て真似する
どうしても模写コーディングできない場合は、ツールを使って構いません。サイトのコードを確認して構成のイメージをつかみましょう。
何の機能があるのか把握しきれていない状態で、ネットを検索しても時間だけが過ぎていきます。Webサイトのコードを表示するには、デベロッパーツールを使いましょう。
デベロッパーツールを使うタイミングは、以下のとおりです。
| デベロッパーツールを使うタイミング | このタイミングで使う理由 |
|---|---|
| 検索しても答えが見つからない場合 | これ以上時間をかけても再現できる可能性が低い |
| 自分の手元にある参考書を見ても判明しない機能に遭遇 | 実現できる可能性が低い |
| 手が止まってから5時間が経過 | 自力で再現できる可能性が低い |
上記の状態になったら、ツールを使いサイトの構成を洗い出します。次に活かすために知らなかった昨日はメモするといいでしょう。
ツールを使わなくても大体サイトのイメージができるようになったら、脱初心者です。
とはいえ、模写コーディング続けると、これで成長できているのか不安になる人も多いでしょう。
そこで、おすすめなのがプログラミングスクールです。
転職保証付きプログラミングスクール DMM WEBCAMPでは、プログラミング未経験者がアプリ開発できるところまでサポートしています。
ぜひ以下のリンクから詳細を確認してみてください。
コメント