どうも7noteです。コーディング初心者向け、書き直しの少ないコーディング術をステップごとに紹介
「初心者のときに知りたかった！！！」と思うような、コーディングするときの10のステップについてのお話です。
きれいなwebサイトを作るのも大事ですが、しっかりと開発スキルのベースが整っていることも重要なポイントです。
特に初心者の方や独学で始めたての方は「コーディングってどうやってすすめればいいのだろう」と思う方も多いハズ。
なぜならプロゲート等の学習用サイトは全部順番が決まっているからいざ一人でやると何からしていいのかわからない。
でも自分で1からコーディングするならその道順はすべて自分次第。
そんな迷える子羊に「手直しが少なくなるコーディング術」を伝授したいと思います。
ステップ① 仕様確認は入念に！
動きのあるとこやホバー時のデザイン、リンク先や画像についてわからないところがあれば事前に確認しておきましょう。
「自分のコーディングが完了したとき = webサイトが公開できる状態」になるようすべての情報を確定させておくべきです。
特にあとで仕様変更の可能性や画像の差し替えが必要になりそうな場所については入念に担当者へ確認を入れるべきです。
しつこいって言われてもいいくらいちゃんと確認しておきましょう。
「自分でたぶんこうだろう」と思うことは1割くらいしか信用になりませんので。特に初心者のうちは。
ステップ② PCから手を離せ、最初はコーディングするな
これは私が個人的にオススメしている方法ですが、デザインを印刷して設計図を書き込みます。
書き込むのは大きく2つ。「画像で再現するところ」と、「クラス名、画像名」を書き込んでいきます。
PCで設計図を作成してしまうと、どうしても見切れてしまうので、全体像を把握するのに紙で印刷するのはとてもオススメです。
ステップ③ 使う技術（言語やライブラリ等）を決めろ
javascriptの組み込みが必要な箇所があればしっかり確認しておきましょう。
またsass等を導入するのであれば、取り掛かる前に決めましょう。
ステップ④ まずはHTMLを全部組め
よくHTMLとCSSの書く順番どうすればいいのか悩む方も多いと思いますが、HTMLを先に全部組むことをおすすめします。
これに関しては好みにもよるので断言できないですが、マイルールを決めましょう。
個人的にHTMLを先に全部書くのをオススメしているポイントとしては、③で作成した設計図に間違いがないか確かめながら組めるところですかね。
もしHTML側で修正が必要になった場合、手直しがHTMLだけで済むので。
ステップ⑤ 上から順番にコーディングせよ
上から1ブロックごとに順番にHTMLを組んでいくことで、抜け漏れを防止できます。HTMLが全部終わったらCSSも1ブロックごとに順番に組んでいきます。
やりやすいところから書いてしまうとHTMLができたときによく見たら抜けている箇所があったり余計な手間が増えてしまいます。
防止するためには上から順番に組み立てていきましょう。あとでも書きますが、画像名やクラス名も同時に書いていきます。
ステップ⑥ 大枠から子要素へ、子要素へと順番に詰めていく
上から順番に組んでいきます。そして大枠を決め、少しずつ書いていくのですがイメージとしてはこんな感じ。
例）ヘッダー
・headerタグを書く
↓
・左側のコンテンツを書く
↓
・左側のコンテンツの中身（ロゴやテキスト）を書く
↓
・右側のコンテンツを書く
↓
・右側のコンテンツの中身を書く
<!-- 書き順例 -->
<header>
<div class="leftbox">
<img src="images/logo.jpg" alt="ロゴ">
</div>
<div class="rightbox">
<a href="/contact/">お問い合わせ</a>
</div>
</header>
ステップ⑦ クラス名や画像名はその場で決めよ
ステップ⑤で少し触れましたが、クラス名や画像名もすべて先に書いておきましょう。
書けるタイミングがきたらすぐに書きます。あとで書くことはしないように。
先に書いても後にかいても結局迷うので、忘れないうちに先に書いておくべきでしょう。
抜け漏れ防止対策が重要です。もちろんaltも先に書けるとベスト。どうしてもきめられない箇所に関しては後で見直しができるように###などオリジナルの記号列をいれておくと見直しが楽になりますよ。
ステップ⑧ ソースが長くなることを気にするな
長くなる=複雑なソースではない。必要だと思うものは躊躇せずdivでも増やしてOK。
そして作っている中で、「あ、これもしかしてなくてもいけるんじゃやない？」というものを徐々に削っていく。
最初からできるかできないかわからないのに「もうちょっとタグへらせないのかな・・・」と悩んでいる時間はムダです。
ソースが長くなっても他でできる方法があるなら迷わずその方法でやってみたらいいでしょう。
よく「ソースは短いほうがいい」とか言われるが、初心者の頃からそんなものを気にする必要はほぼない。それなりに技術も知識も付いてから改めて見直せばすぐに改善できるし、なにより誰も初心者にそれを求めていません。
ただ間違った書き方をしている場合もあるかもしれないので、そうならないためにはよく調べることは重要だし、もし周りに聞ける上司や先輩、メンターがいるなら「ここはこういう書き方でいいですか？」と訪ねてみるのがいいですね。
ステップ⑨ レスポンシブサイトなら、PCスマホ（タブレット）全パターンのレイアウトに対応できるソースか確認しながらHTMLを組め
レスポンシブサイトが一般的になっているので、ここは外せないところ。PC用にいくらきれいにコーディングできても、スマホに対応しにくい書き方をしてしまっていては結局ソースの書き直しになってしまう可能性が大。
HTMLを組んでいる際に予め両方のデザインを確認しながらCSSを想定しつつ書けるようになりましょう。
ステップ⑩ sassを使え
時短かつ管理レベルを引き上げるにはsassの導入が必須と言えるでしょう。色や数字を変数に格納して共通化させることで、今後のメンテナンス性も抜群に上がるのでどんどん使って行きましょう。
ただ数時間程度で終わるものならわざわざ導入するまでもないかもしれないので、使いつつ使い所は見極められたほうが効率的に進めることができます。
まとめ
いかがでしたでしょうか、後で書き直しが少なくなる10のステップ。手戻りは最も時間の無駄といっても過言ではありません。
手戻りしないためにはスキルが必要です。そしてそのスキルを身につけるのに必要なのが今回紹介した10のステップです。
これをしっかりできているかどうかで、格段に他の人との差が生まれますし、なにより時間短縮につながるだけでなくクオリティも上がるような手順になっているので、ぜひ初心者の方にはマスターしていただきたいです。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ