正しいコーディングの手順をレクチャー

初級者～中級者向けの内容です。
勉強を始めたばかりの方は、本記事の内容を実践できなくても全く問題ありません。後々できるようになるといいな、くらいの気持ちで読んでみてください。

皆さんはどのような手順でコーディングをおこなっているでしょうか。

効率的にコーディングをしていくことを意識できているでしょうか。

効率的なコーディングの手順を学ぶと、コーディングのスピードが上がることはもちろん、Webサイトを〈コーディングする〉とは、"どういうことなのか"という根本的な気付きも得られますので、ぜひこの機会に学んでいってください。

コーディングはデザインという話

コーディングとは、デザインをすることです。

デザインというと、「Webサイトのビジュアルを作ることでしょ？」と思うかもしれませんが、この場合の〈デザイン〉とは、ビジュアルデザインのことではなく、〈設計〉という意味を指します。

デザインという言葉の意味には、〈意匠〉とよばれる「外観を美しくするための工夫」という意味とは別に、〈設計〉とよばれる「モノを作り上げるための計画を立てること、またはその計画」という意味があります。

〈設計という意味でのデザイン〉を説明するのに、建築デザインは非常にわかりやすい例だと思います。
建築デザイナーが家をデザインするとき、使用する素材について理解し、それらをどのような構造で組み上げるかを考えることは至極当然のことです。
なぜなら、設計について考えなければ、完成した家の住心地は良くありませんし、最悪の場合倒壊する家を作ってしまうからです。

〈設計〉が大切さがわかったところで、Webサイト制作の話に戻ります。

あなたは、Webサイト制作をするとき、設計をおこなっているでしょうか？
もしかして、特に何も考えずにデザインデータの上から順番にコーディングをしていませんか？

つまり。

「ヘッダー」からコーディングしていませんか？

建築デザイナーは、いきなり屋根から家を作り上げたりはしません。
そんなことをすれば全体のバランスが取れなくなるし、あとで修正したい時に修正が効きにくいため、最初は必ず骨組みから作ります。

コーディングも、骨組みから作り始めないとグダグダになることがよくあります。
特に、経験が積めていないうちは、上から下まで一気に作り上げる力がないため、途中で疲弊し、下に行くにつれてクオリティが低くなっていくことはよくある話です。

こんなことにならないためにも、計画を立てながらコーディングすることが非常に大切になってくるわけです。

コーディング設計ことはじめ

コーディングにおける設計を始める際、まず初めにやることはデザインデータの全体を〈把握〉することです。
建築デザインでは図面を見るという工程にあたります。

〈把握〉とは、どのようにデザインされているかを分析し、どのようにして実装に落とし込むかを考察する作業です。

デザインの何を分析すればよいのか。
それは、デザインデータのルールを見極めることから始めます。

具体的には、

1. デザインのレイアウトはどのようになっているか
2. デザイン上で頻繁に出てくる要素はないか
3. 使用されている文字や色、余白はどのようになっているか
4. 複雑そうな（作業時間が掛かりそうな）要素はないか

1番から4番へと順番に思考を巡らせ、Webサイトがどのようにデザインされているかを考えます。

着手する前に、必ず一度は冷静にデザインを見て、分析するところから始めてみましょう。
分析してみることで、例えば「KAGU」のデザインでいえば、いくつかの見出しやボタンが共通のスタイルになっていることがわかります。すると、おのずとHTMLタグの組み方や、設定するクラス名をどのようにすれば良いのかを考えられるようになります。

……

とはいえ実際にコーディングするとなったら、ついついヘッダーのHTMLやCSS、ハンバーガーメニューのJavaScriptから作ってしまいますよね。

はっきり言えば、コードを書き始める順番はそれでも構いません。
ただし、それは〈HTMLの構造を考えた後〉にやるべきです。

HTMLは、そもそも文書構造を作る意味をもっており、これは建築デザインでいうところの骨組みにあたります。
一方でCSSやJavaScriptによる動きの実装は、HTMLによる文書構造で表された情報を、ユーザーが利用しやすくなる（読みやすくなる）ための表現技術に過ぎません。言わば装飾みたいなものです。

つまり、HTMLの構造を一通り考えた後に、CSSやJavaScriptの作業をおこなっていくことがデザイン（設計）であり、コーディングの手順であるということです。

このようなデザイン思考を持つと、コーディングのスキル上昇率が格段に上がります。なぜなら、これから自分がなにをやるべきなのかを整理しながらコーディングを進められるからです。

逆にこの通りにコーディングしない場合、ヘッダー、メインビジュアル、セクション……と、次の要素のコーディングに進むタイミングで、その都度頭が空っぽになってしまうことでしょう。
また、がむしゃらに進めてしまうと精神的な疲労も大きいです。

前回の記事でもお話しましたが、採用担当者はこういったコードはすぐ見抜けますし、あまり良い評価はできません。

そのような事態になってしまわないよう、今すぐ実践できる例を紹介します。

具体的なコーディングの手順

一番良いのは、HTMLだけを先に全部書ききってしまうという方法です。

このとき、

「この要素をマークアップするのに最適なHTMLタグは何なんだろう？」

と考えながらコーディングをしていきます。

ただし深く考えすぎないこと。
どんなタグを使えばよいかわからない場合、最初のうちは<div>タグや<span>タグを頻繁に用いても良いです。
（むしろ、全て<div>でマークアップしてみて、そこから意味づけをおこない、別のタグに変えていく手法も勉強方法のひとつです）

繰り返しおこなっているうちに、どの程度のHTMLタグを書けば思い通りにCSSのスタイリングできるのかということも考えられるようになります。その結果、無駄な<div>タグや<span>タグを減らせるようにもなるでしょう。

この方法は、不必要な類似したコードを書いてしまうリスクを減らすことにも繋がります。
たまに見かけるのが、とあるボタンのデザインが、別の箇所にあるボタンのデザインと同じ見た目なのに、別のものとして新たにクラス名をつけていたり、CSSを当てていたりしているのを見かけます。

デザインの全体像を把握してからHTMLを書くことで、あらかじめ「全く同じものがあるんだ」という認識をもつことができるようになると、このようなミスはなくなります。

また、再利用できるHTMLを書くという意識も重要になります。
例えば、多くのWebサイトのトップページによくある「ニュース」という項目で、だいたい5件ほどのニュースの一覧が並んだ後に「続きを見る」ボタンがありますが、そのボタンのHTMLを以下のように書くことはおすすめできません。

<p class="news-button">
	<a href="/news/">続きを見る</a>
</p>

このようなボタンのデザインは、Webサイト内の各所で頻繁に使用されるデザインであることが多いです。
であれば、以下のように書いて、どの場所で出てきても使用できるようにクラスを設計するべきです。

<p class="button">
	<a href="/news/">続きを見る</a>
</p>

そして、「いやでも、会社概要のところにあるボタンは、ちょっと見た目が違うんだよな……」
というときでも、

<p class="rich-button">
	<a href="/company/">続きを見る</a>
</p>

例えばこのように記述して、違うパターンの見た目だったとしても、頻出する可能性のあるものに関しては、（基本的には）どこでも再利用できるようにすることが大切です。
※デザインに特別な意図がある場合を除く

その他のメリット

HTMLを先に書くと、HTMLタグを書いた量がその場所の後工程（CSSやJavaScriptを書く時）の複雑さにも比例するので、Webサイトを完成させるのに、どの程度の時間が掛かるかの目処がつきやすいというメリットもあります。

お仕事でWebサイト制作をする際には、後どのくらいで完成できるか（工数）を把握しておくことは絶対的に必要です。
何も考えず上から順番に作っていると、「下の方はまだHTMLも書いてないし、レスポンシブもうまくできるかどうかわからないし、どれくらい時間が掛かるか全然わからない……ぴぇーん😢」という状態になってしまいます。
この問題も、あらかじめマークアップだけでも先にやっておくことで、不安を解消することができます。

さいごに

「Webサイトをコーディングするときは、まず設計することが重要だよ！」
というお話をさせていただきました。

はじめのうちは、HTMLを書ききった後にCSSを書いていく過程で、

「あ、やりたいことやるには<div>タグが足らんかったわ🙄」

ってなったりすると思います（笑）
でも、勉強中のうちは全然かまいません。むしろミスりまくってその経験をたくさん積んでください。
その経験を味わえば味わうほど、体でHTML設計の大切さがわかるようになっていきます。

ぜひ今回の話を頭の片隅にでも置いておきながら、コーディングに取り組んでみてください。

最後まで読んでいただき、ありがとうございました。

それではまた。