こんにちは、オノユウ(@yumaonodera_)です。
先日、Airbnbの模写コーディングが終わりました。
控えめに言ってかなり大変だったのですが、色々と学んだことも多かったので、
今回は模写コーディングで学んだことについてまとめていきます。
「プログラミング学習のためにこれから模写コーディングを始めたい」
という方はぜひ参考にしてください。
模写コーディングとは
サイトを参考にして、ウェブページを見た目や機能を真似して作ることです。
条件は下記の2つ。
- HTML検証で色や要素の間隔、画像のURLを確認するのはOK
- HYML/CSSの丸ごとコピーはNG
やる範囲としては、主に見た目の部分ですね。
PC、スマホ、タブレットでそれぞれ表示して、要素の位置がだいたい揃っていれば完成です。
勉強する内容にもよりますが、コーディングを勉強するだけであれば、データの受け渡しや画面遷移などは再現しなくて良いでしょう。
今回やったこと
下記のページの模写コーディングです。
※本物のサイトです。
正直、かなり大変でした。
特にレスポンシブ対応とナビゲーション周りの挙動を再現するのに苦労し、多くの時間を取られました。
とは言え、かなり良い勉強になったと感じています。
プログラミングで稼ごうと思っている人は、ぜひ一度やってみるべきですね。
成果物は下記のページから確認できます。
可能な限り本物に近い形で再現しました。
模写コーディングで学んだこと
主に下記の5つです。
- 知ってることと作れることは全く別物
- 各エリアにクラス名をつけてクラス名指定でcssを調整する
- 要素の大きさや位置の指定はメディアクエリ内に記述すべき
- Bootstrapはグリッドデザインとナビゲーションにのみ使用
- jQueryは必須
順番に解説していきます。
知ってることと作れることは全く別物
今回の模写コーディングを通して痛感したのは、知ってることと作れることは全く別物である、ということです。
人によっては、Progateとかドットインストールをひたすらやり込んでいる人もいるかもしれませんが、
ある程度理解したら、模写コーディングに進んだ方が良いと思います。
プログラミング学習サイトで学べるのは、あくまでツールの使い方や言語の文法だけ。
建築で例えると、ノコギリの使い方やペンキの塗り方なんですよね。
一方、模写コーディングではゼロから作ることを要求されます。
建築で例えると、家一つ丸ごと建てるイメージ。
ノコギリやペンキといった道具の使い方を知っていても、
家一個建てるなら、家の構造設計や効率的な製造手順といった知識も必要になりますよね。
それと同じように、HTMLとCSSの基礎知識を知っていても、
ウェブページを作るなら、サイトの構造設計や効率的な手順を理解していく必要があるのです。
そして、サイトの構造を設計したり、製造手順を考えたりするのは、プログラミング学習サイトではできません。
模写コーディングを通じて、学んでいく必要があるのです。
各エリアにクラス名をつけてクラス名指定でcssを調整する
エリアごとにクラス名をつけてあげると、CSS調整が楽になります。
上記の画像のように、エリアごとにクラス名をつけて、HTMLにもコメントを書いておくと分かりやすいです。
エリアごとにクラス名をつけると、「.introduction」「.introduction .row」「.introduction .col-xl-6」というように個別でCSSを指定したい際に便利ですね。
私も経験しましたが、逆に「container」や「section」といった汎用的なセレクタでCSSを調整しようとすると、後で詰まりますので気をつけましょう。
要素の大きさや位置の指定はメディアクエリ内に記述すべき
特に下記のプロパティは、メディアクエリ内に書くべきです。
- height（高さ）
- width（幅）
- margin（要素の間隔）
- padding（要素内の余白）
これらは画面サイズによって変わる可能性がある要素。
共通CSSに書いてしまうと、後でレスポンシブ対応するときに、いちいち上書きする必要が出てきます。
例えば、これはPC表示ですが、要素の左右の間隔を調整するためにpaddingが指定されています。
一方で、スマホの場合は縦並びなので、左右の間隔を調整する必要がなく、paddingは指定する必要がありません。
なのでこの場合、もしPC表示に設定するpaddingを共通CSSに書いてしまうと、
スマホやタブレットのCSSを書く際に、
いちいち「padding: 0;」と書いて、共通CSSに記載したpadding指定をリセットしなくてはいけません。
これは非常に面倒ですよね。
レスポンシブ対応の際に非常に手間になります。
だからこそ、画面サイズによって変わる可能性がある要素はあらかじめメディアクエリ内に書いておくべきなのです。
一方で、リンクの色や画像のURLなど、画面サイズによって変化が生じないものはメディアクエリの外に書いて共通化します。
共通化するものと、個別で書くべきもの。
サイトを作る際にあらかじめ意識しておくことが大切です。
Bootstrapはグリッドデザインとナビゲーションにのみ使用
ウェブサイトを作成する上で、便利なフレームワークとして「Bootstrap」というものがあります。
Bootstrapを使うことで、効率的にコーディングすることができます。
ただし、こういったフレームワークにとらわれすぎると、かえって効率を落とすことにも繋がるのです。
例えば、Bootstrapではmarginやpaddingの指定が可能ですが、
Bootstrapで指定できるmarginの値は、4px、8px、16px、 24px、48pxの5種類のみです。（paddingも同様）
ところが実際のコーディングでは、10pxや36pxというようにBootstrapでは指定できない値を指定したい時がしばしば出てきます。
そのため、Bootstrapはmarginやpaddingを指定するにはあまり適さないのです。
また、文字の大きさや色の指定も同様で、あまりBootstrapに頼らない方が良いです。
なぜなら、コードの保守性が低下するから。
例えば、aタグに対して、Bootstrapで文字色を指定しようとすると、全てのaタグに対してclass指定をつける必要が出てきます。
そうなるとリンクの色を変更する際には、全てのaタグを調べて指定し直す必要が出てきます。
それは手間ですよね。
見出しの大きさや色とかは、Bootstrapではなく、しっかりCSSを書いて調整するのがベストです。
じゃあBootstrapは何に使うのかというと、主に「グリッドレイアウト」と「ナビゲーションの作成」に使います。
Bootstrapでは、「グリッド」というサイトの横幅を均等に分けるガイドラインが存在します。
このグリッドを活用して要素を配置することにより、効率的にレイアウトすることができます。
この仕組みを「グリッドシステム」とも言います。
これが非常に便利でして、ウェブサイトの作成であれば、活用しない手はないですね。
あとは、ナビゲーション周りを作るときもBootstrapが活躍します。
例えば、PC表示では、下記のようにナビゲーションメニューが横並びで表示されています。
一方スマホ表示にすると、先ほどのナビゲーションメニューが消え、代わりにトグルが表示されます。
そしてトグルを押すと、メニューが開く仕組みです。
これらを作るには、本来であれば、細かいCSSを調整したり、jQueryを書いたりと、ちょっと手間のかかる作業が必要になります。
ところがBootstrapを使えば、こういったナビゲーション周りの表示や挙動が簡単に作れてしまいます。
というわけでまとめると、
Bootstrapの使いどころは、「グリッドレイアウト」と「ナビゲーションの作成」です。
jQueryは必須
正直、ウェブサイトのコーディングはHTMLとCSSの知識さえあれば十分できるものだと思っていました。
しかし、実際にはjQueryの知識も必要になります。
特に必要となるのは、ナビゲーションメニューの開閉です。
ある程度の部分はBootstrapだけでも対応できるのですが、凝ったことをするにはBootstrapだけでは不十分で、やはりjQueryが必要になってきます。
jQueryはそんなに難しくないので、都度ググりつつ学んでいけばOKです。
とりあえずjQueryでOK
あとついでに言っておくと、、、
たまに先輩エンジニアから「jQueryはオワコン」とか、「Reactをやれ」とか「今はVueの時代」といった意見も飛んでくるかもしれません。
しかし、こういった意見は先輩エンジニアにリスペクトの念を込めつつも、スルーしてOKだと思います。
なぜなら、ちょっとしたことをやるだけならjQueryで十分だからです。
jQueryの良いところは、ネット上に情報がたくさん転がっていて、初心者がとっつきやすく、そして学習コストが低いところですね。
なので、私のようにウェブ初心者であれば、とりあえずjQueryでやれば問題なしです。
模写コーディングの手順
下記の3つです。
- 模写するサイトの全体像をざっと把握
- HTMLの骨組みを大まかに作る
- CSSでレイアウトを整える
順番に解説していきます。
1. 模写するサイトの全体像をざっと把握
まずは、サイトの全体像を把握しましょう。
全体を把握しないままいきなり作り始めると、あとでHTMLの構造に問題が出て、修正する羽目になります。
要素間の間隔など細かい部分については、この段階では確認する必要はありません。
サイトを眺めて「この部分はだいたいこんな感じで作るんだろうな」となんとなく思い浮かべる程度でOKです。
2. HTMLの骨組みを大まかに作る
Bootstrapのグリッドレイアウトを活用しつつ、大まかにHTMLの骨組みを作りましょう。
あとは、各要素の列数を調整し、PC、タブレット、スマホで確認し、レスポンシブに切り替われば完了です。
3. CSSでレイアウトを整える
CSSで文字の大きさや色、要素の間隔などを調整していきます。
ここが開発の8割と言っていいかもしれません。
ポイントはスマホ、タブレット、PCの順で開発すること。
理由は、開発で使用する「Bootstrap」はモバイルファーストが前提だからです。
Bootstrapはスマホから開発することを勧めていて、スマホから開発する方が都合が良いように設計されています。
PC表示から作っても問題ないのですが、Bootstrapを利用する際に、ちょっと不便な思いをするかもです。
かく言う私もPC表示から順に作ったのですが、
開発途中でスマホから作っておけばもっとやりやすかったなと何度も思いました。
模写コーディングをやる際の心構え
模写コーディングをやる上で、大事な心構えがあります。
レスポンシブ対応とナビゲーション周りもやるべき
私が所属するエンジニアコミュニティ「Codelife」では、「模写コーディング終わりました」という報告がよくあります。
ただ実際確認してみると、レスポンシブ対応やナビゲーションの動作ができていない人もわりといるんですよね。
厳しい意見かもしれないですが、一応事実として言っておくと、レスポンシブ対応やナビゲーション周りができていないと「完成した」とは言えないです。
むしろ模写コーディングでは、レスポンシブ対応とナビゲーションの作成がメインの学習になります。
ここが開発の8割と言ってもいいでしょう。
なので、レスポンシブ対応とナビゲーションも含めてしっかり完成させましょう。
ここをしっかりやっておくと、とても勉強になりますし、スキルアップします。
終わらせることではなく学ぶことが目標
プログラミング学習をしている人を見ていると「単に勉強を終わらせることが目的になっているのでは？」という人もチラホラ見かけます。
学習動画はさらっと流し見て終了、記事は思考停止でスクロールするだけ、模写コーディングはPCで見た目揃っていれば終了……
こういった考え方で学習すると、あまり成長につながらないかもです。
模写コーディング終わらせて、いざ実際に案件をやるとなった時に、案件を受注できるに達していないという事態になるかもしれません。
学習の目的はあくまで、プログラミングスキルを身につけ、プログラミングで稼げるようになること。
だからこそ、時間かかっても良いので、丁寧に進めましょう。
その方が知識もしっかり定着し、自信もつき、成長できます。
模写コーディングは想像以上に難しい
ここまで読んで、あなたはやる気がみなぎっている状態かもしれません。
しかし事実を言っておくと、あなたがプログラミング初心者の場合、模写コーディングは想像を大きく上回る難易度です。
Progateの道場コースが「難易度3」だとすると、模写コーディングは「難易度10」です。
次元が違う難しさであることを覚悟してください。
とは言え、模写コーディングは一度はやるべきです。
最後まで諦めずに取り組めば、あなたの一生モノのスキルとして身につくと思います。
幸いなことに現代では「Google」という心強い味方がいますので、彼と一緒に頑張ってみてください。
模写コーディングの成果物
私が実践したプログラミング学習のロードマップ
【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】
私が参加しているエンジニアコミュニティ
追記：Webエンジニアとして稼ぐなら模写コーディングだけでは実力不足かもです。
コメント