フロントエンドエンジニアを目指している、ねこらのん（@nekoranon256）です。
LP制作をしていてきれいなコードをを書く必要性を痛感したので、
- どうやったら綺麗なコードをかくことができるのか
- 実際にUPされているLP「flower」さんのサイトを写経
したので、まとめていきます！
綺麗なコードを書く理由
エンジニアに就職が決まった友人から、綺麗なコードを書くために【初心者向け】知っておくべき美しいコードの書き方【プログラミング独学】を読んでみてってことで読んでみました。
綺麗なコードを書く理由
- 自他共プログラムを読む時間・理解する時間・メンテナンスをする時間が最適化できる
- チームでの作業が円滑にすすめることができる
- ポートフォリオもコードの綺麗さを見ている
見た目を重視するだけでなく、目に見えていないコード部分がどうかが重要なようです。
チームでの作業というのが実際に現場でやっていないのでわかりませんでしたが、友人曰く
コーダーが作ったものをフロントがして、サーバーサイドがするから人のことを考えて綺麗なコードを作る必要がある
のようです！
またエラーも頻繁に起こることや、何度も書き換えることから綺麗なコードは自分のためにも相手のためにも大切なことだそうです。
では綺麗なコードってなんでしょうか？
きれいなコードってどんなもの？
美しいコードは以下の3つがあるようです。
- 読みやすい
- 意図が明確
- 変更しやすい
誰が見ても「これは何を指しているのか」が見てわかるものであり、クラス名を見て意味が理解できやすいもので、そして何度も変更しやすいものが良いコードのようです。
では実際にどんなコードが美しいのでしょうか？
美しいコードの書き方は？
美しいコードの書き方には以下のものがあるようです。
- 意味が汲み取れるクラス名
- クラス名は名詞
- メソッドの名前は動詞
- 関数に着目
- 極限まで小さく作ること
（20行を超える関数は見直すこと） - 1つのタスクに特化していること
- 引数の数は最小限に抑える
（3つ以上の引数を渡すことは好ましくない） - コメントをつける
これらが友人から送られてきた記事には記載されていました。
ここでふと疑問がよぎったので友人に質問しました。
私
クラス名って何でも良いの？
いいよ。
クラス名だけで何を指しているのかが分かれば、なお良いということでした！
では実際に綺麗なコードを写経してみました！
写経「flower」さんのサイト
flowerさんのサイトからお借りしています。
よく駆け出しエンジニアの方が写経されいてる「flower」さんのサイトをhtmlだけですが写経しました！
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初心者向けの模写コーディング</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<section class="header">
<div class="logo"></div>
<div class="tagline">かわいいが届くお花便</div>
<div class="content">
<div class="download_pc">
<div class="container">
<a href="">
<div class="badge_appstore"></div>
</a>
<a href="">
<div class="badge_googleplaystore"></div>
</a>
</div>
</div>
<div class="footnote">
<p>* 北海道、沖縄、離島エリアは現在対象外です</p>
</div>
</div>
</section>
<section class="service">
<div class="container white">
<div class="item item1">
<h2>
届くのは
<br>
あなた好みのお花だけ
</h2>
<p>
FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。
</p>
</div>
<div class="item item2">
<h2>
お花はポストに投函
<br>
忙しくても大丈夫
</h2>
<p>
お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。
</p>
</div>
<div class="item item3">
<h2>
FLOWERなら
<br>
いつもかわいく飾れる
</h2>
<p>
専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。
</p>
</div>
</div>
</section>
<section class="price">
<div class="container">
<div class="item price">
<div class="wrap">
<h2>
お部屋に飾りやすいサイズの
<br>
ブーケをワンコインで
</h2>
<div class="wrap">
<div class="content">
<div class="bouquet">
<div class="freetraial"></div>
</div>
<div class="bouquet_price">
<p>
お花とグリーン5〜6本のブーケ
</p>
<p class="large">
500円
<span> / 1回</span>>
</p>
</div>
</div>
<div class="footnote">
<p>
* 送料は360円（税別）です。
</p>
<p>
* 価格は税別です。
</p>
</div>
</div>
</div>
</div>
<div class="item frequency">
<h2>
月に2回の注文で、
<br>
お花がいつもある丁度いいペース
</h2>
<div class="img">
</div>
</div>
</div>
</section>
<section class="flower">
<div class="container">
<div class="item title">
<h2>
どんなお花が届くの？
</h2>
</div>
<div class="item img"></div>
<div class="item body">
<h3>
かわいいお花だけ
</h3>
<p>
色やサイズなど、かわいくおしゃれに飾れるお花にこだわってセレクト。季節やトレンドに合わせてブーケを作っています。
</p>
<h3>
元気な状態で
</h3>
<p>
お花は注文を受けてから市場で直接仕入れているから新鮮。お花の元気を保つ専用BOXでお届けします。
</p>
<h3>
そのまま飾れる
</h3>
<p>
あらかじめ飾るのに最適な長さに茎をカットしてお届け。箱から出して、そのまま花器に入れるだけでOKです。
</p>
</div>
</div>
</section>
<section class="vase">
<div class="container">
<div class="item title">
<h2>
かんたん、かわいい
<br>
FLOWERのための花の器
</h2>
<div class="discount">
<p>
初回限定25%OFF
</p>
</div>
</div>
<div class="item img"></div>
<div class="item body">
<p>
お花を飾るのに欠かせないのが花器。でも、お花と花器の相性もさまざま。手持ちにぴったりのものがなくて、いまいちかわいく飾れない…なんてことも。そこで、誰でもかんたんに、かわいくお花を飾れる専用の花器をつくりました。お花のある暮らしが、もっと楽しみになりますように。
</p>
<div class="vase_variation">
<div class="item bell">
<p>bell</p>
</div>
<div class="item moon">
<p>moon</p>
</div>
<div class="item candle">
<p>candle</p>
</div>
</div>
<div class="price">
<div class="title">
初回注文後
<br>
2週間以内
</div>
<div class="content">
<div class="discount_price">
1,800円（送料無料）
</div>
<div class="normal_price">
通常価格 2,400円（送料無料）
</div>
</div>
<div class="footnote">
アプリ内でご購入いただけます。
</div>
</div>
<div class="footnote"></div>
</div>
</div>
</section>
<section class="service2">
<h2>
FLOWERだから続けられる、
<br>
お花のある暮らし
</h2>
<div class="container">
<div class="item item1">
<h3>お世話がかんたん</h3>
<p>
お花の栄養剤をセットでお届け。
<br>
こまめな水換えは不要です。
</p>
</div>
<div class="item item2">
<h3>アプリがお知らせ</h3>
<p>
お花のお届けはアプリがお知らせ。
<br>
受け取り忘れの心配はありません。
</p>
</div>
<div class="item item3">
<h3>安心の保証つき</h3>
<p>
万が一枯れたお花が届いても、
<br>
新しいものを無料で再送します。
</p>
</div>
</div>
</section>
<section class="download">
<div class="container">
<div class="item logo">
<h3 class="navy mt16">
かわいいが届くお花便
</h3>
</div>
<div class="item img"></div>
</div>
</section>
<section class="footer">
<a href="#"></a>
<div class="container">
<div class="item">
<div class="centent">
<a href="#">お知らせnote</a>
</div>
</div>
<div class="item">
<div class="content">
<a href="#">FAQ</a>
</div>
</div>
<div class="item">
<div class="content">
<a href="#">プライバシーポリシー</a>
</div>
</div>
<div class="item">
<div class="content">
<a href="#">利用規約</a>
</div>
</div>
<div class="item">
<div class="content">
<a href="#">特定商取引法に関する表記</a>
</div>
</div>
<div class="item">
<div class="content">
<a href="#">運営会社</a>
</div>
</div>
</div>
<div class="copyright">
<p>
Copyright ROLLCAKE Inc. All Rights Reserved.
</p>
</div>
</section>
<div class="download">
<div class="container">
<a href="#">
<div class="badg_appstore"></div>
</a>
<a href="#">
<div class="badg_googlestore"></div>
</a>
</div>
</div>
</body>
</html>
HTMLの綺麗なコードの書き方がわかりませんでしたが、実際に写経をしてみて綺麗なコードの書き方がほんの少しだけ理解できたのでまとめていきます。
パッと見てわかりやすいコードとクラス名
今回写経して思ったことを箇条書きにしていきます。
- <section>が8つあり、8ブロックに分かれていることが見た目でわかりやすい
- <section>内に<div>が複数あり、構成が似ているものが多く混乱しない作り
- クラス名が統一されていた
- 改行が非常にわかりやすい
- タグで囲まれているものが一目瞭然
- クラス名だけで何を意味しているのかがわかる
他にもまだたくさんあるんだと思いますが、今のレベルの私にはここまでしかわからず…
ただ今回綺麗なHTMLの書き方を写経できたので実際に書いてできるかどうか試したいと思います。
おわりに
HTMLのコードの大切さを実際に書いて分かったので今回模写ではなく写経をしてよかったです。
CSSも優先順位や書き方などがあるようなので、明日はflowerさんのCSSを書いていこうと思います！
もりけん塾（@terrace_tech）
Thanks：もりけんさん