こんにちは。システムチームのKです。
プログラマーとして入社し、半年が経ちました。
私は現在、デキテルの新デザインのCSSコーディングを任されています。
CSSコーディングは7月に一度、スマホ側のみやったことがあったのですが、
今回はPC側のコーディングをしています。
前回のスマホ側のコーディングの時と、
今回のPC側のコーディングで、
進みがかなり改善されているので、そのことについて書いてみようと思います。
１．経験の差
初めてのコーディングの際はCSSのプロパティをほとんど覚えていませんでした。
それに加え、デキテルのHTML構造についてもほとんど理解しておらず、
直前にタスクとして実際のＨＰのHTMLを写経させていただいていました。
とはいえ、実際にCSSコーディングを始めると理解できていないことの方が多く、
四苦八苦していたのを覚えています。
ただ、今回は1度コーディングを経験していること、
1度目に多くのサポートとCSSの知識を得られたことが大きく違う点として挙げられます。
デキテルに使われているCSSプロパティの数は多くなく、何度も同じプロパティを使います。
そのため、使ったことがあるプロパティが進むごとに増え、
またデキテルで使われているプロパティでわからないものはなくなっていきます。
さらにデキテルのHTML構造についても理解していきます。
共通クラスなのか、個別でつけられたクラスなのか、
この要素はどこまでを子要素として持つのか、
そういったことを理解し、そういう目で見られるようになっているのは
大きな違いだと思います。
２．使い続けたプロパティと要素
デキテルで使われているプロパティは多くありません。
そのため何度も使うことになり、結果としてプロパティの理解度が上がります。
・width指定があるから要素が飛び出している
・paddingがないから窮屈に見える
・marginを使っているから背景が切れて見える
最初はこういった原因を理解できていないため、ソースファイルに書いては検証ツールで確かめ、
検証ツール上でいじりながら見目でできた値を書き込んではほかの場所が崩れ、
すごく遠回りをしていました。
今では頭の中で、どのセレクタにどう書けば、どう表示されるのかをある程度想像できるようになり、
それが時間短縮にもつながっています。
３．使えるようになるためには
2回目のデザインコーディングで、ようやくCSSを使えるようになってきました。
どのようなプロパティがあり、どのような値の指定ができ、どのような表示がされるのか。
そういったことがつかめたからだと思います。
プログラムに限った話ではありませんが、一度自分で使ったことがあるものは使いやすいです。
使いやすければ、何度も使います。使えば使うほど、より楽に使えるようにもなります。
見ただけ、読んだだけ、聞いただけでは身につかないので、
実際に自分で使ってみることが大切です。
そのうえで使いにくければ、使わない理由も明確になります。
使いにくい理由も、使っている人に聞いて原理を理解できれば、
使いやすくなるかもしれません。
そうやって使えるものを増やしていくことが、今の自分には大事だと思います。
まとめ
今、何事も難しく感じるからこそ、使えたときの喜びがあります。
コードを使える＝プログラムを作れる につながるため、
逃げずに向き合い、理解して使えるようになるのが、
プロのプログラマーになるために必要なことだと思います。
過去の私がCSSコーディングから逃げずに、ちょっとずつ理解しながら進められたことが、
今回のコーディングにも活きています。
これからも使えるコードを増やしていくため、逃げずにコードに立ち向かっていきたいと思います。
ここまでお読みくださり、ありがとうございました。
