実務レベルのコーディングスキル習得に必要なこと

コーディングとは？

デザインから HTML を起こして Web サイトへとつなげるコーディングの作業。

今日日は Progate や ドットインストール などを通じて簡単にコーディングの知識を獲得することができ、
Web 技術者を目指す様々な人が、最初の登竜門としてコーディングスキルの習得を目指しています。

コーディングは比較的習得が簡単で、誰でも始められる分、
正しいコーディングの姿勢、特に実務上で重要な制作姿勢のようなものが見落とされがちです。

単純に「コーディングできる」で終わるのではなく、
実務で役立つコーディングのテクニックを身につけるために必要な観点をまとめてみました。

「良いコーディング」のために必要な観点

「良いコーディング」と聞いて、どのようなものを思い浮かべるでしょうか。

そこには色々な考え方があるとは思いますが、
Web はビジネスツールとして制作されるケースがほとんどですので、
「低コスト」と「保守性」は欠かせない要素になってくるでしょう。

高品質なコーディング ≠ デザイン通りのコーディング

コーディングの練習で、他の Web サイトの模写をしていると、
時折、非常にコーディングしづらいデザインを見かけることがあると思います。

実務では、コーディング作業ももちろんタダではありません。
過分な時間をかけてまで提供されたデザイン通りのコーディングをすすめるのは非常に効率が悪く、コーダー側でコーディングしやすさ、保守性を考えたデザイン修正を提案するのが一般的です。

Web デザイナーはコーディングの専門家ではないため、コーディングしづらい Web デザインが作られてしまうという場面は多々あります。
そのためコーダーがコーディング面でのスペシャリストとしてデザインの修正提案をすすめるのですが、このコミュニケーションが上手く取れない場合、コーダーが無理をしてそのデザインを実現してしまうケースもあるのです。

模写でのコーディング練習を進める上でも、無理なデザイン表現に関してはそのまま模写をするのではなく、「自分だったらどのようなデザイン変更を提案できるか」といった点について考えてみると、現場でもデザイナーとコミュニケーションを取りながらの効率的なコーディング作業が実現できるはずです。

このようなコミュニケーションをおろそかにしてデザインを実現したところで、満足するのは制作者だけで、
実際　postion: absolute などで無理やり表現したデザインの Web サイトは、
些細なコンテンツ修正に CSS を書き直す必要が発生するなどの、運用上の問題を生み出すなどクライアントへの迷惑も大きくなります。

時間をかけてコードが書けるのは当たり前

独学でコーディングを進めていると、ついつい作業時間への意識が薄くなりがちです。
実際の実務では 一日 8時間の勤務時間が決められているため、時間内に作業を完了させるという意識はとても重要です。

特に初学者の場合、何度も何度も HTML / CSS をいったり来たりしながらでとりあえずデザインを再現していく、といった作業フローをとりがちですが、このような記述ではデザインを表現できたとしてもきれいなコードとはとても言えない状態になってしまいがちです。

まともにビジネスツールとして活用されている Web サイトの制作では、運用とともにコンテンツの変更が入ったりレイアウトの修正が入ったりするのが一般的で、破れかぶれでとりあえず見た目はきれいに見えている、といった制作は、あとの運用に大きな迷惑を及ぼします。

コーディングテクニック上達のためには、短い時間できれいなコードを書くための、「コーディングの考え方」を練習することが非常に重要です。

「知識」よりも「書き方」を重視する

ここまでで説明してきた通り、コーディングは「知識」よりも「ノウハウ」です。

多くの HTML 要素を知っている、CSS プロパティの使い方を知っているということよりも、限られた時間の中でよりきれいなコードを書く、といった意識をどれだけ高められるか、といったことが非常に重要になってきます。

毎日あくせく新しい CSS プロパティなんかのブログ記事を読んだりして知識を身につけるのももちろん重要ではありますが、それだけでは「良いコーディング」にはつながらない、ということを理解しておきましょう。

コーディングテクニック上達のために

コーディングテクニック上達のために必要な考え方が理解できたら、
実際にどのようなことを意識しながらコーディングを進めていけばいいのかを考えてみましょう。

ここでは、「良いコーディング」を進めていくために必要不可欠ないくつかの観点について紹介していきます。

HTML / CSS は一発書き

HTML / CSS は極力一発書きで記述しましょう。
特に、HTML は CSS と同時に書くのではなく、一旦まず HTML を仕上げてから CSS を記述していくといいでしょう。

HTML と CSS をいったり来たり しながらコーディングをすすめるのは、エディタの操作も手間ですしいつまでたってもコードが固まらなくなります。
まずは、デザインを良く見ながら div の必要な要素ブロックをイメージし HTML に組み上げ、次に全体をイメージしながら必要最低限の CSS 記述を進めていくと、コードもシンプルなものに仕上がりやすいでしょう。

SP ファーストで記述する

多くの制作現場では SP ファーストが採用されており、コーディング練習を進める上でも SP ファーストの制作技術を身に着けていくほうが実践的です。

まずは一旦 SP ファーストで SP 版のコーディングを仕上げて、それから順次 Tablet / PC といった形でメディアクエリを書き足していきましょう。
レスポンシブを同時に実装していくと、全体的なコーディングの仕上がりが遅くなってしまうので、一旦 SP の完成を目指して、さっと作業を仕上げるほうがレビューのサイクルなども回しやすくてスムーズです。

大枠から細部の順で記述

上から順番にいきなりきれいな CSS 実装をすすめるよりは、まず大枠のレイアウトやコンテンツの配置からラフベースで実装していくのが良いでしょう。 SP ラフから PC ラフまで実装を仕上げて、ラフの状態でレスポンシブの認識あわせなどをレビューしておくと、手戻りが少なくて進行もスムーズです。

レスポンシブの認識あわせや、実際のコンテンツが入ってからの折返し、画面遷移上の挙動など、デザインカンプ上では想定が漏れていた動き・表現なども色々見つけられるため、高品質なものを一発で仕上げようとするよりも、雑な制作物を短いサイクルでレビューを回しながら改善していく、といった制作フローに慣れておくほうが、結果として良い成果物を生み出すことができるはずです。