iSara模写コーディングをしてみての感想

SHARE

web制作者を目指す上で，progateやドットインストールでHTMLとCSSを学んだあとに，推奨されている勉強方法として『webサイトの模写コーディング』があります．

と〜げ

模写コーディングとは，現存するwebサイトをそっくりそのまま模写して作ってみることです．

現存するwebサイトを模写することで，HTML&CSSのコーディング技術の向上が期待できます．また，いきなり新しいwebサイトを作るわけではなく，現存するwebサイトという ” 答え ” がある状態で学習できるので，途中で挫折しにくいというメリットもあります．

今回は，私が，現存するwebサイトの模写コーディングをしてみての感想を紹介します．

今回模写コーディングをしたwebサイトは，『iSara』というノマドプログラミングエンジニア育成講座のLP（ランディングページ）です．

なぜ，iSaraの模写コーディングなのか？

無数にあるwebサイトの中で，なぜ，私がiSaraのLP（ランディングページ）を選んだのか？

理由は以下3つです．

LP（ランディングページ）だから

LP（ランディングページ）とは，商品やサービスを売るための1ページからなるwebサイトのことです．

企業のwebサイトのように，ヘッダーにいくつかのリンクがあるような複数ページから成るwebサイトではありません．イメージ的にはチラシに近いです．1ページにすべての情報が載っている感じです．

と〜げ

参考に，RIZAPのLP（ランディングページ）はこんな感じです．

LP（ランディングページ）は，比較的作るのが簡単なため，web制作初心者が受注しやすいコーディングの仕事です．

今後，コーディングの仕事を受注するときのために，まず，LP（ランディングページ）の作成をしておこうと思いました．

難易度がちょうどいい

一般的に，iSaraのLP（ランディングページ）は，模写コーディングの難易度としては低い部類に入るみたいです．

つまり，特に難しいコーディング技術を使っていないってことです．

と〜げ

私のような初心者にぴったりな教材です．

ポートフォリオとして紹介可能

代表のケースケさんが，ツイートしているように，ポートフォリオとしての掲載が許可されています（ルールあり）．

当たり前ですが，勉強を初めてすぐは，ポートフォリオ（自分の実績やスキルを証明する成果物）がありません．

iSaraの模写コーディングはポートフォリオへの掲載が許可されているので，模写コーディングによる学習に加えて，ポートフォリオ作りも兼ねることができます．

ただし，掲載にはルールがあるので，遵守しましょう．

模写LP制作の利用ルール

・制作実績として掲載するにあたり、ご報告等は不要です。

・模写したLP（isara.life）の画像キャプチャを掲載する形での公開をお願いします。

・isara.lifeが元ページであると分かるように記載し、リンクの貼付をお願いします。（no followタグ禁止）

・画像キャプチャのタイトルは「isara.life模写制作LP」とし、読み手もしくはクライアントに模写制作と伝わるように併記してください。

※ 上記のルールは、今後変更する可能性があります。

iSaraの模写コーディングの感想・思ったこと

progate卒がiSaraの模写コーディングをしてみての素直な感想です．参考にしていただけたらと思います．

量が多かった

量が多かったです．1ページですが，この1ページの分量が多いんです．

と〜げ

結局，トータルで，40時間ほどかかってしまいました．．．

写すだけで精一杯

iSaraのLP（ランディングページ）は，難易度としては低いらしいです．

ですが．．．

私のようなprogate卒の初心者人間には，十分難しく感じました．

最初は，答え（iSaraのコード）を見ずに自分の力だけで模写コーディングしようと思いましたが，すぐに断念しました．

なので，Chromeデベロッパーツール（検証モード）を使い，答えのコードを見ながら，同じように自分でコードを書いていく方法に変えました．

つまり，答えを見てそれを写すだけです．

ただし，コピペはせずに，意味を考えながら写しました．

ですが．．．

と〜げ

写すだけでも，結構難しく感じました．

完璧を目指すのはやめた

正直，模写したコードすべてを理解したかと問われれば，Yesとは答えられません．よくわからないけど，なんとなく写した箇所や，わからなくて飛ばしてしまった箇所もあります．

例えば，

  • 資料請求フォームのところはやらなかった．
  • ヘッドタグ内（<head></head>）に色々書かれているのはほとんど無視した．
  • wordpress化していない．

iSaraのLP（ランディングページ）は，wordpressを使って作られています．しかし，今回の模写コーディングは，あくまで，コーディングの練習なので，htmlファイルからwordpressへの移行（wordpress化）はしていません．

ちなみに，wordpress化については，こちらの記事を参考にしてください．

と〜げ

完璧を目指して途中で挫折するよりも，8割程度の出来で最後までやり切る方がいいと思います．残りの2割は後から埋めていきましょう．

iSaraの模写コーディングの準備

模写コーディングをする上で，やっておきたい準備や知っておいた方がいいことを紹介します．

エディタを準備しよう

模写コーディングをする前に，コードを書くためのエディタを準備する必要があります．

私はAtomというエディタをダウンロードしました．

Atomエディタのダウンロード方法については，progateのコラムや，ドットインストールで解説してあります．

HTML&CSSの学習以外に知っておきたいこと

模写コーディグをする上で，progateとドットインストールでHTML&CSSを学習だけでは足りなかったことを紹介します．

Bootstrap

Bootstrapとは，HTML, CSS, Javascriptから構成されるwebフレームワークです．よく使われるフォーム，ボタン，メニューなどがテンプレートとして用意されています．

iSaraのLP（ランディングページ）は，このBootstrapを使用して作られています．container，row，colといったクラスClass名は，BootstrapのクラスClassです．

模写コーディング前に，Bootstrapを学んでおきましょう．学習方法としては，私の場合，ドットインストールを使って勉強しました．

Bootstrap 4入門

他にも，TECHACADEMYのBootstrapトレーニングでは，2週間でBootstrapを学ぶことができます．iSaraの模写コーディングに必要な知識以上の内容になっていますが，がっつり学びたい人には向いていると思います．TECHACADEMYはチャットサポートがあるため，わからないことを質問することができるので，途中で挫折しないところが魅力だと思います．

Bootstrapトレーニング

注意

Bootstrapの最新版は，バージョン4です．しかし，iSaraのLP（ランディングページ）では，バージョン3が使用されています．Bootstrap3と4では，異なる点がいくつかあります．

例えば，contaierクラスの幅が，width:1170px; から，width:1140px; に変わっています．他にも，グリッドシステムのブレイクポイントやクラス名にも変化が生じています．

と〜げ

混乱を避けるため，iSaraのLPと同様に，Bootstrap3を使用するという手もありますが，今後Bootstrap3を使ってコーディングする機会はほぼないと考えると，Bootstrap4を使用してコーディングするべきだと思います．

バージョンの違いに気を付けて，コーデイングしましょう．

jQuery

iSaraのLP（ランディングページ）で使われるjQueryは，画面の右下に現れる『トップに戻るボタン』です．

progateのjQueryで，『トップに戻るボタン』の学習ができます．

と〜げ

トップへ戻るボタンのためだけに，progateでjQueryを学ぶのも結構大変なので，とりあえず今はやらなくてもいいと思います．あとから学ぶこともできます．先に書いた『完璧を目指さない精神』です．

まとめ

  • なぜ，iSaraの模写コーディングなのか？
    • LP（ランディングページ）だから
    • 難易度がちょうどいい
    • ポートフォリオとして紹介可能
  • iSaraの模写コーディングの感想・思ったこと
    • 量が多かった
    • 写すだけで精一杯
    • 完璧を目指すのはやめた
  • iSaraの模写コーディングの準備
    • エディタを準備しよう
    • HTML&CSSの学習以外に知っておきたいこと

と〜げ

模写コーディングは確実にコーディングスキルの向上に繋がります．注意すべきは，準備に時間をかけ過ぎたり，完璧を目指すことです．とりあえず，7~8割できればいいや！という『完璧を目指さない精神』が大切です．

次は、模写コーディングしてみたhtmlサイトをWordPress化してみましょう。私はUdemyで学んでみました。
関連記事：【HTMLサイトのWordPress移行】をUdemy（ユーデミー）で学んでみた！

また、ローカル環境から本番環境に移行する方法はこちらをどうぞ。
関連記事：WordPressをローカル環境（MAMP）から本番環境（Xserver）に移行する方法

2 COMMENTS

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

【50万円・半年利用】エポスゴールドカードの招待状（インビテー…

次の記事

【HTMLサイトのWordPress移行】をUdemy（ユーデ…