３年コーディングをしていて、コーディングが少しずつ早くなっていたので、その考え方やコツについて、まとめてみたした。
構築前に入れるものを確認・検討する
構築のデザインいただいた段階で、全体を確認します。どんなものを入れた方が良いのか・どんな動きが想定されているものなのか初めに確認していきます。
不明点・疑問点あれば、この段階でデザイナーさんに確認をとって行きます。
この段階で認識にずれがあると、構築のし直しにもなりかねないので、ちょっとでも気になったら、認識のすり合わせをする事をさせていただいています。
同様に、足りていないパーツがないか確認します。
よくあるのが、スライダー画像が複数枚なのに用意されてなかったり、タブ切り替えの中身がなかったりします。（簡単なものなら、私も作成作業できなくはないですが、、、複雑なものであったり時間かかるものあったりすると、後からデザイナーさんに作ってもらってコーディングよりは、他コーディングしている間に用意していただいた方が、良いと思うので）
jsなどで衝突の可能性があるものから入れる。
構築ページに入れるものが確認できたら、次に入れていく順番を決めます。
まず、JavaScript・jQueryは相性やバージョンによって衝突を起こす可能性があります。
そのため、私は一番最初に大枠だけ仮で入れて問題なく動くか確認するようにしています。
その次に、HTML・画像の書き出し・CSSの順にとり組んでいくようにしています。
まずは、HTMLを最後まで書き込む
１ブロックごとに構築していくより、まずは一通り最後までHTMLを入れ切った方が早いです。
一つ構築しきって、次のブロック入れたら修正必要だったなんて事を繰り返してると、時間もったいないので。
複雑で組み方がわからないものは、紙に書き出す。
HTMLを入れる際に、一つ注意が必要なのが、後から「まだdivの囲みが必要だった」や「必要なかった」となるのが地味に組み直しになるので、複雑なものはまずデザインを紙へ印刷して詳細に組み方検討します。
これは、どんなに経験年数が上の方でもされてるので、不安な場合は紙を使った方が良いです。
（もしくは、それができるツール使ってもよきです。）
flexbox
次にflexboxで２カラム以上になるものを調整します。
Flexboxとは
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
Flexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。
（flexboxはめちゃめちゃ便利。最初floatから入ったので今ではこちらにお世話になりっぱなしです。）
参考にしているのはflexboxチートシート。ブックマークさせていただいた使用しています。
margin・paddingを入れていく
次にmargin・paddingを入れて調整して行きます。
この時点で、パソコン・タブレット・スマホの大体のサイズ等も仮で入れて行きます。
（※最終調整のために記述します。）
一度つくったパーツはストックしておく。
ボタンや見出し、よく使うパーツはコーディングしているとわかってきます。
それをストックしていった方が0から作っているより早くなるので、早めにストックの方法を考えた方が良いです。
また、パーツのジェネレーター（生成）サイトなどの活用も役立ちます。
下記よく使ったりしてるサイトです。
大きくて複雑なパーツほど、早くつくる。
次に私が心がけている事ですが、大きなものほど早めに作っちゃいます。
その後に細かいものの作成をします。これは前職で培った事なのですが、細かいところにこだわるよりまずは大きなもの片付けたほうが作業が早いです。
まとめ
３年コーディングをすることを続けてみて獲得できたのが上記でした。
現在では、よほどの想定外等なければ、それなりの速さでコーディングができるようになりました。
ECサイトや特殊な構築環境等もあるのでまだまだ勉強中です。
コメント