【プログラミング】上達するコーディング練習方法とそのコツ

2020年11月28日2021年5月5日

こんにちは、みと(@mito_710_1)です！

悩む人

・効率的なコーディング方法を知りたい…
・何に注意したら良いんだろう…

こんな悩み、今からすべて解決します。

ということで今回は「【プログラミング】上達するコーディング練習方法とそのコツ」を解説！

コーディングのやり方は3STEP

コーディング1STEPではありません。

実際にはただコーディングするだけでなく以下の3STEPで行っていきます。

STEP

コーディング前にコードの設計

STEP

実際にコーディング

STEP

コードの見直し

コーディングをする中で一番大切なのはSTEP1のコーディング前の設計です。

おもむろにコーディングをするだけでは保守・運用に優れた、きれいなコードを身につけることができません。

ユーザー視点でいえば「見れれば良い、使えれば良い」ものですが、コーダー視点でいうと一度作ったサイトなどを改修したりする際に、どのCSSがどのHTMLタグに作用しているのかがわかりにくいと作業しづらいですよね。

サイトの規模が大きくなればなるほど、保守性の高いコーディングスキルの必要性が高まります。

誰が見ても理解できるコードを身につける前段階として、「コーディングの設計」をするスキルをしっかり身につけましょう。

具体的なCSS設計を身につけるならこれらの書籍がおすすめです。

コード設計スキルは必須級のスキルなのでしっかり目を通しておくと良いですね！！

リンク

全体の流れが分ったところで模写を例にひとつひとつ解説していきます！

コーディング設計

実際にコーディングするまえにどんなコードを書くか想像しましょう。

実際に紙に手書きで書き起こすとより分かりやすいと思います。

やり方としては最初に模写するサイトの全体像、もしくはデザインカンプを見ます。

書き起こす人は紙に全体を簡単に書き起こしましょう。

そうしたら全体のレイアウト・要素の配置や役割を考えます。

みと

このワードはh2タグで囲おう
ここはこのクラス名を付与しよう
ここはflexboxで横並びにしたいからこんな入れ子構造にしよう

といった内容。

コーディング設計はここが最も大切です。

しっかりと設計することできれいなコードを書くことができるほか、おもむろにコーディングするよりもスムーズにコーディングすることが可能になります！

調べたい内容はこちら。

h1、h2、h3…で囲う要素を決める
共通のCSSが当てられる部分を抜き出す。
レスポンシブで形や並びが変化する要素を抜き出す。
わかりやすく保守性のあるクラス名を決める(BEMやFLOCSSなど)
あてるCSSを考えながらHTMLの入れ子構造(タグの親子関係)を決める

実際にコーディングする時には既に「書くコードが決まっている」のが望ましいですね！

その時その時に考えていると全体像が見えないため、ほころびが生じたり弱点のあるコードになってしまいますのでこの段階でしっかり設計しておきましょう。

これは模写に限らずコーディング作業全体に共通した大切なスキルなのでぜひ身につけてください！

実際にコーディング

しっかり設計できたら実際にコーディングしていきましょう。

多くの人は先にHTMLを書き出し、その後CSSをあてていくと思います。

HTMLでコーディングするときにはSTEP1の設計で決めた枠構造・入れ子構造を参考に適切なタグでマークアップしていきましょう。

コツは「レイアウトを意識する」こと。

<header>、<nav>、<main>、<section>、<article>、<aside>、<footer>などグループ分けをするタグを使用して全体のレイアウトを先に記述します。

具体的にはこんな感じ。(あくまで一例です)

<body>
  <div class="container">

    <header class="header">
      <div class="header_inner">

        <h1 class="site-title"></h1>
        
        <nav class="header_nav">
          <ul class="header_nav-list">
            <li class="header_nav-item">
              <a href=""></a>
            </li>
          </ul>
        </nav>

      </div>
    </header>

    <main class="main">

      <section class="intro"　id="intro">
        <div class="intro_inner">

          <h2 class="intro-title title"></h2>

        </div>
      </section>

      <section class="contact" iid="contact">
        <div class="contacr_inner">

          <h2 class="contact_title title"></h2>

        </div>
      </section>

    </main>

    <footer class="footer">
      <div class="footer_inner">
        
      </div>
    </footer>
  </div>
</body>

このような形ですね。またCSSはタグに直接ではなくクラスやidに付与しましょう。

そのためにheaderタグなどにも.headerのようにクラスを付けることが大切です。

全体のレイアウトが組めたら各セクションの詳細な中身をCSSを意識して適切なタグでマークアップしていきます。

全体のHTMLが記述できたらCSSをあてていきましょう！

レスポンシブを意識して値はpxの他、remや%などで指定するとスムーズな要素の変形が可能です。

適切なHTMLマークアップができていればCSSを当てるのは簡単ですね！！

いかにHTMLの設計が大切かわかるはずです。

コードの見直し

実装できなかった内容や上手くコーディングできなかったところを中心に見直しましょう！

最初のうちは「そんな実装方法合ったの！?」ということがたくさんあると思いますが、そういった経験一つ一つがみなさんの成長に繋がります。

模写に限らず、コーディング後は自身のコードを見直して、構造として弱いところはないか、間違ったタグやCSSを使用してないかなど改めてチェックすると良いでしょう。

まとめ

コーディングは実際にコードを各以外にもやっておきたいことや様々な注意点があります。

効率よくコーディングするためにコード設計のスキルは磨いておきましょう。

こちらの記事で模写を含めWEB制作のやり方をまとめてあるので是非参考にしてください。

それではまた次の記事で！ありがとうございました。

にほんブログ村

この記事が気に入ったら
フォローしてね！

Follow @mitonano_O

よかったらシェアしてね！

URLをコピーしました！

【プログラミング】上達するコーディング練習方法とそのコツ