模写コーディングに初挑戦 (1)

### 経緯

現在お世話になっているプログラミングスクールで、卒業試験（？）に向けた対策として、以下のプロセスを自分で実践しながら学ぶことになった。
1. ワイヤー、デザインなどからコーディング（主にhtml,css,jquery）
1. wordpress化

初めてのチャレンジというのは、楽しい。
でも、夢中で頑張って、やり遂げて・・・
振り返って自問「私、何やったんだっけ？」

今回は、この失敗を繰り返さぬよう、チャレンジのプロセスを残していこうと思う。

### 模写用のサイト探し

卒業課題（ウェブ作成）には
- お知らせ
- お知らせ一覧ページ
- お知らせ詳細ページ
この３点が含まれる、らしい。

そのため、そういったサイトをまず探して、模写コーディングするように、というのが今回の課題だ。

今回の記事のタイトルとして、すでに「模写コーディング」という言葉を使ってしまっているが、実はこの言葉も始めて聞いた。"コーディング練習用" "サイト" などと検索しているうちにたどり着いた言葉だ。

ちょっと脱線させていただくと、こういう検索をすると、プログラミングスクールらしきサイトが出るわ、出るわ。あふれるスクールの中から、どれを選択すればいいのかというのは、初心者であればあるほど、きっと難しいのだろうなぁ。…逆かな。ある程度学習した人こそ、次どうするか、を選択する方が難しいのかな。

本題に戻ると、私がたどり着いたのは、[CodeJump](https://code-jump.com/)というサイト。
ここに、[【模写コーディング】おすすめの練習サイト【入門編～上級編】](https://code-jump.com/coding-recommend/)というのがあった。若い子の言葉はあまり使わない私でさえ「神:sparkles:」と思った。

講師の方に見てもらって、今回は[こちらのサイト](https://code-jump.com/demo/html/portfolio1/)の模写をすることに決定。ここからはひとりで作業を始める。

### サンプルサイトのデザインからレイアウト構成を把握

模写用のサイトを探して、それを元にコーディング、というと、ちょっとパニック。
サイズやフォントの確認できるデザインデータを、[ここで](https://code-jump.com/xd-public/)配布していたので、もらってみる。`⑦初級編：ポートフォリオサイト／1カラム` の `Figama（ダウンロード版）`だ。

データは、Figma で「インポート」からアップロードすることで、開くことができる。

参照したページ、[CodeJump](https://code-jump.com/coding-step/)によると、模写コーディングの手順は７つ。
1. 模写ルールを決める（どのくらい精密に模写するか）
1. サイトを把握する（レイアウト、動き、レスポンシブ）
1. レイアウト構成をメモする（全体/パーツ）
1. HTMLとCSSのコーディング（全体）
1. HTMLとCSSのコーディング（各パーツ）
1. JavaScriptのコーディング（あれば）
1. 確認
３番目までをゆる〜くやってみよう、と思い、Figma上で、コーディングに必要だろうと思われるレイアウトやパーツ名を書いていくとこんな感じになった。
![layout_composition.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3683665/492c3d1b-264f-c5e2-d736-7f57ed0ecba1.png)
私の模写ルールとしては『ある程度の見た目が保てればパーツのサイズや間隔にこだわりすぎない』と思っているので、レイアウトでも特にこだわらなかった。

### HTMLの全体コーディング

HTMLを書いていこう！ということで、まずは、作業場を確保。
#### 作業場の確保
これまで、少人数の会社での事務中心の実務を積んできた私は、エンジニアツールを、あちこちちょっとずつかじっている。ひとつのサイトを模写して講師の方と途中経過をシェアしながら、最終的にひとつのサイトとして、Wordpress化して仕上げるには、どうすればいいのか、が、とっても未経験だ。知識を総動員して進めるしかない。

ローカルでファイルを作ってやっていくべきなのかもしれないが、なぜかクラウドにファイルがあると安心するので（自宅内に作業場が２箇所あるせいかもしれない。どっちで作業をしても同じ状態にしたいと思うと、やはり「ローカル」が不便に感じる、のかも？）まずは、Githubに専用のレポジトリを作成。それを「Githubデスクトップで開く」にして、作業用のブランチを作成（ひとりでもくもくと作業するので不要だと思ったけれど）したら、Githubデスクトップにて「VSコードで開く」として、無事、作業場を確保。

#### 書き始め
VSコードでまず、`index.html` を作成。
基本的なこと、
```
<!DOCTYPE html>
</html>
```
そして、レイアウト構成には出てこないけれど、`<head>` タグに書き込むことがたくさんある。

1. `<title>` ブラウザのタブに表示されるページのタイトル
1. `<meta>`いくつかの項目を設定できる。例えば、
   - `charset="UTF-8"`で文字エンコーディングの設定
   - レスポンシブデザインをサポートするために `<meta name="viewport" content="width=device-width, initial-scale=1.0">` と設定し、モバイルデバイスに対応
   - `name="description" content="ページの概要"` として検索エンジン結果に表示される説明文を設定
   - `<meta name="keywords" content="キーワード01, キーワード02,...">`とキーワードを指定
   - `<meta name="author" content="著者名">`サイトの制作者情報を追加する
1. CSSのリンク `<link rel="stylesheet" href="styles.css">` など外部シートを読み込む
1. JavaScriptのリンク `<script src="script.js" defer></script>` で外部のファイルを読み込み
1.`<link rel="icon" href="favicon.ico" type="image/x-icon">`にてブラウザのタブに表示する小さなアイコンを設定
1. SNSでサイトが共有された際に表示される情報は `meta property="og:title" content="ページタイトル">`で指定

すでに疲れてきましたが、大丈夫。
VSコードでは、デフォルトで `Emmet` という拡張機能が組み込まれているので、`!` → `enter` で基本タグが自動入力される。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
もしくは、`HTML Boilerplate` をインストールして、コマンドパレット（VSコード上部の検索窓のようなところ）で `HTML Boilerplate` を選択すると、下記のようなタグが自動生成。
```
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <script src="" async defer></script>
    </body>
</html>
```
このコードは、自分で追加してカスタマイズも可能。

ということで、初心者の私は、どちらの助けもかりながら、このような記述に。
```
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>My Works</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    </body>
</html>
```
さぁ、<body>を書いていこう！

と思ったが、まずこれで一旦ここまでできたものをコミット。
ダウンロードした素材（画像）も `img` フォルダーを作って格納して、コミット。


続きは[別投稿](https://qiita.com/zosanmama/items/8b0c0c071f32c8195313)で。